微信充值第二步

src/main/webapp/resources/view/pinganPay/forstore/recharge.html

@@ -5,6 +5,7 @@
     .pay-recharge .pay-recharge-header {
         background-color: #fff;
         border: 1px solid #4290f7;
+        margin-bottom: 18px;
     }
     .pay-recharge .pay-recharge-header p{
         height: 36px;
@@ -18,7 +19,6 @@
     }
     .pay-recharge .pay-recharge-content {
         background-color: #fff;
-        margin: 18px 0 0 0;
         border: 1px solid #4290f7;
         padding: 49px 75px 0;
     }
@@ -155,6 +155,54 @@
     .pay-recharge .pay-recharge-content .pay-recharge-card .fast-pay-content table tbody tr td div {
         line-height: 16px;
     }
+    /* 第二步 start */
+    .pay-recharge .pay-recharge-accounting {
+        background: #fff;
+        padding: 21px 0 87px 0;
+    }
+    .pay-recharge .pay-recharge-accounting >span {
+        position: relative;
+        display: block;
+        width: 106px;
+        text-align: center;
+        height: 36px;
+        line-height: 36px;
+        color: #fff;
+        font-size: 16px;
+        background: #21bf01;
+    }
+    .pay-recharge .pay-recharge-accounting >span::after {
+        content: '';
+        position: absolute;
+        right: -14px;
+        width: 36px;
+        height: 36px;
+        border-radius: 100%;
+        background: #21bf01;
+    }
+    .pay-recharge .pay-recharge-accounting .pay-qrcode {
+        text-align: center;
+    }
+    .pay-recharge .pay-recharge-accounting .pay-qrcode > p {
+        font-size: 14px;
+    }
+    .pay-recharge .pay-recharge-accounting .pay-qrcode > p a {
+        color: #4290f7;
+    }
+    .pay-recharge .pay-recharge-accounting .red-text {
+        color: #f31313;
+    }
+    .pay-recharge .pay-recharge-accounting .pay-qrcode > h4 {
+        font-size: 14px;
+    }
+    .pay-recharge .pay-recharge-accounting .pay-qrcode > h4 span {
+        font-size: 18px;
+    }
+    .pay-recharge .pay-recharge-accounting .pay-qrcode > h4 span.red-text {
+        font-size: 30px;
+        color: #fc6260;
+    }
+    /* 第二步 end */
 </style>
 <div class="pay-recharge">
     <div class="pay-recharge-header">
@@ -327,4 +375,12 @@
         <a href="javascript:void(0)">下一步</a>
         <a href="javascript:void(0)" class="to-bank">登录到网上银行充值</a>
     </div>
+    <div class="pay-recharge-accounting" style="display: none">
+        <span>微信支付</span>
+        <div class="pay-qrcode">
+            <p>距离二维码过期还剩<span class="red-text">13</span>秒，过期后请刷新页面重新获取二维码</p>
+            <!--<p class="red-text">二维码已过期，<a href="">刷新</a>&nbsp;页面重新获取二维码</p>-->
+            <h4>充值金额：<span class="red-text">8000.00</span><span>元</span></h4>
+        </div>
+    </div>
 </div>