|
|
@@ -1,3 +1,326 @@
|
|
|
-<div>
|
|
|
- recharge page
|
|
|
+<style>
|
|
|
+ .pay-recharge {
|
|
|
+ background-color: #f5f8fe;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-header {
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #4290f7;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-header p{
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ margin: 0 0 0 87px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-header p .green-text {
|
|
|
+ color: #21bf01;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 18px 0 0 0;
|
|
|
+ border: 1px solid #4290f7;
|
|
|
+ padding: 49px 75px 0;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-items {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-items >span {
|
|
|
+ margin-left: 14px;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-items >a{
|
|
|
+ display: inline-block;
|
|
|
+ width: 139px;
|
|
|
+ height: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+ border: 1px solid #e5e5e5;
|
|
|
+ margin-right: 38px;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-items >a.active {
|
|
|
+ border: 1px solid #ff8522;
|
|
|
+ background: #fdf9f6;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-items >a img {
|
|
|
+ margin-left: 9px;
|
|
|
+ max-height: 29px;
|
|
|
+ max-width: 42px;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-items >a span {
|
|
|
+ color: #333;
|
|
|
+ float: right;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-input,
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card{
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 34px 0 41px 14px;
|
|
|
+ background: #fdf9f6;
|
|
|
+ font-size: 14px;
|
|
|
+ border-top: 2px solid #ff8522;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-input >img,
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card >img{
|
|
|
+ position: absolute;
|
|
|
+ top: -11px;
|
|
|
+ left: 144px;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-input input {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 14px 0 20px;
|
|
|
+ width: 152px;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 3px;
|
|
|
+ border: 1px solid #a9a8a8;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-input .remind-text {
|
|
|
+ color: #f31a1a;
|
|
|
+ margin-left: 27px;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content >a {
|
|
|
+ display: block;
|
|
|
+ width: 114px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #f44c0a;
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 21px auto 33px;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card .card-lists {
|
|
|
+ border-bottom: 1px dashed #fec79a;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card .card-lists .card-list-item {
|
|
|
+ display: inline-block;
|
|
|
+ width: 288px;
|
|
|
+ margin: 0 54px 17px 0;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card .card-lists .card-list-item:nth-child(3n) {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card .card-lists .card-list-item .com-check-radio{
|
|
|
+ float: left;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card .card-lists .card-list-item .card-info {
|
|
|
+ display: inline-block;
|
|
|
+ width: 263px;
|
|
|
+ height: 43px;
|
|
|
+ line-height: 43px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 3px;
|
|
|
+ border: 1px solid #e5e5e5;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card .card-lists .card-list-item .card-info.active {
|
|
|
+ border: 1px solid #4290f7;
|
|
|
+ background: #f8fafd;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card .card-lists .card-list-item .card-info img {
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card .card-lists .card-list-item .card-info span {
|
|
|
+ margin-right: 18px;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card .fast-pay-content {
|
|
|
+ margin-top: 19px;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card .fast-pay-content table {
|
|
|
+ table-layout: fixed;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card .fast-pay-content table thead tr {
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #666;
|
|
|
+ background: #e7e7e7;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card .fast-pay-content table thead tr th,
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card .fast-pay-content table tbody td {
|
|
|
+ border: 1px solid #c0bfbe;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card .fast-pay-content table tbody tr {
|
|
|
+ height: 55px;
|
|
|
+ line-height: 55px;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ .pay-recharge .pay-recharge-content .pay-recharge-card .fast-pay-content table tbody tr td div {
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<div class="pay-recharge">
|
|
|
+ <div class="pay-recharge-header">
|
|
|
+ <p>账户：<span>深圳市优软科技有限公司</span> 哈哈哈</p>
|
|
|
+ <p>账户余额：<span class="green-text">56.63</span> 元</p>
|
|
|
+ </div>
|
|
|
+ <div class="pay-recharge-content">
|
|
|
+ <div class="pay-recharge-items">
|
|
|
+ <span>充值方式：</span>
|
|
|
+ <a href="javascript:void(0)" class="active">
|
|
|
+ <img src="static/img/pingan/wechat.png" alt="">
|
|
|
+ <span>微信支付</span>
|
|
|
+ </a>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <img src="static/img/pingan/alipay.png" alt="">
|
|
|
+ <span>支付宝支付</span>
|
|
|
+ </a>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <img src="static/img/pingan/fastpay.png" alt="">
|
|
|
+ <span>储蓄卡支付</span>
|
|
|
+ </a>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <img src="static/img/pingan/net-bank.png" alt="">
|
|
|
+ <span>网银支付</span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="pay-recharge-input">
|
|
|
+ <img src="static/img/pingan/border.png" alt="">
|
|
|
+ <span>充值金额：</span>
|
|
|
+ <input type="number" class="form-control" placeholder="请输入充值金额">元
|
|
|
+ <span class="remind-text">金额必须为整数或小数，小数点后不超过2位。</span>
|
|
|
+ </div>-->
|
|
|
+ <div class="pay-recharge-card">
|
|
|
+ <img src="static/img/pingan/border.png" alt="">
|
|
|
+ <div class="card-lists">
|
|
|
+ <div class="card-list-item active">
|
|
|
+ <label class="com-check-radio">
|
|
|
+ <input type="radio" name="radio" checked="checked">
|
|
|
+ <label></label>
|
|
|
+ </label>
|
|
|
+ <div class="card-info">
|
|
|
+ <img src="static/img/pingan/bank/bank-china.png" alt="">
|
|
|
+ <span>中国银行</span>
|
|
|
+ <span>**1414</span>
|
|
|
+ <span>储蓄卡</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-list-item">
|
|
|
+ <label class="com-check-radio">
|
|
|
+ <input type="radio" name="radio">
|
|
|
+ <label></label>
|
|
|
+ </label>
|
|
|
+ <div class="card-info">
|
|
|
+ <img src="static/img/pingan/bank/bank-china.png" alt="">
|
|
|
+ <span>中国银行</span>
|
|
|
+ <span>**1414</span>
|
|
|
+ <span>储蓄卡</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-list-item">
|
|
|
+ <label class="com-check-radio">
|
|
|
+ <input type="radio" name="radio">
|
|
|
+ <label></label>
|
|
|
+ </label>
|
|
|
+ <div class="card-info">
|
|
|
+ <img src="static/img/pingan/bank/bank-china.png" alt="">
|
|
|
+ <span>中国银行</span>
|
|
|
+ <span>**1414</span>
|
|
|
+ <span>储蓄卡</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-list-item">
|
|
|
+ <label class="com-check-radio">
|
|
|
+ <input type="radio" name="radio">
|
|
|
+ <label></label>
|
|
|
+ </label>
|
|
|
+ <div class="card-info">
|
|
|
+ <img src="static/img/pingan/bank/bank-china.png" alt="">
|
|
|
+ <span>中国银行</span>
|
|
|
+ <span>**1414</span>
|
|
|
+ <span>储蓄卡</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-list-item">
|
|
|
+ <label class="com-check-radio">
|
|
|
+ <input type="radio" name="radio">
|
|
|
+ <label></label>
|
|
|
+ </label>
|
|
|
+ <div class="card-info">
|
|
|
+ <img src="static/img/pingan/bank/bank-china.png" alt="">
|
|
|
+ <span>中国银行</span>
|
|
|
+ <span>**1414</span>
|
|
|
+ <span>储蓄卡</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-list-item">
|
|
|
+ <label class="com-check-radio">
|
|
|
+ <input type="radio" name="radio">
|
|
|
+ <label></label>
|
|
|
+ </label>
|
|
|
+ <div class="card-info">
|
|
|
+ <img src="static/img/pingan/bank/bank-china.png" alt="">
|
|
|
+ <span>中国银行</span>
|
|
|
+ <span>**1414</span>
|
|
|
+ <span>储蓄卡</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="fast-pay-content">
|
|
|
+ <p>快捷支付充值限额如下 <img src="static/img/pingan/remind.png" alt=""></p>
|
|
|
+ <!-- <table>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th width="116">单笔限额(元)</th>
|
|
|
+ <th width="116">每日限额(元)</th>
|
|
|
+ <th width="116">每月限额(元)</th>
|
|
|
+ <th width="207">备注</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>5万</td>
|
|
|
+ <td>5万</td>
|
|
|
+ <td>无</td>
|
|
|
+ <td>
|
|
|
+ <div>
|
|
|
+ 客服热线：12312414
|
|
|
+ </div>
|
|
|
+ <div>信用卡：2341241</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>-->
|
|
|
+ <table>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th width="116">单笔限额(元)</th>
|
|
|
+ <th width="116">每日限额(元)</th>
|
|
|
+ <th width="116">需要满足的条件</th>
|
|
|
+ <th width="207">备注</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>5万</td>
|
|
|
+ <td>5万</td>
|
|
|
+ <td>无</td>
|
|
|
+ <td rowspan="2">
|
|
|
+ <div>
|
|
|
+ 客服热线：12312414
|
|
|
+ </div>
|
|
|
+ <div>信用卡：2341241</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>5万</td>
|
|
|
+ <td>5万</td>
|
|
|
+ <td>无</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <p>请关注您的充值金额是否超限</p>
|
|
|
+ <div class="pay-input">
|
|
|
+ <span>充值金额：</span>
|
|
|
+ <input type="number" class="form-control" placeholder="请输入充值金额">元
|
|
|
+ <span class="remind-text">金额必须为整数或小数，小数点后不超过2位。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <a href="javascript:void(0)">下一步</a>
|
|
|
+ </div>
|
|
|
</div>
|
yangc
