【机构】-支付h5

src/main/resources/static/css/pay/caimei-paycash.css

@@ -9,23 +9,21 @@ input::-webkit-outer-spin-button {
  */
 @media screen and (min-width:768px){
     .inner{width: 1184px;margin: 0 auto;}
-    .pageTitle{height:57px;line-height:57px;padding-top:16px;width: 100%;box-sizing: border-box;padding: 0 16px;}
+    .pageTitle{height:57px;line-height:57px;padding-top:16px}
     .pageTitle h1{color:#2D3036;font-size:16px;font-weight:bold;float:left}
-    .pageTitle h1 span{color:#627386;font-size:12px;font-weight:normal;}
+    .pageTitle h1 span{color:#627386;font-size:12px;font-weight:normal;margin-left:10px}
     .pageTitle .step{float:right;color:#999999;font-size:14px;height:44px;line-height:44px}
-    .pageTitle .step span{display:inline-block;height:20px;line-height:20px;vertical-align:middle;position:relative;}
+    .pageTitle .step span{display:inline-block;height:20px;line-height:20px;vertical-align:middle;position:relative;padding-right:55px;}
     .pageTitle .step span:before{font-style:normal;font-size:20px;vertical-align:text-top;margin-right:5px}
     .pageTitle .step span:nth-of-type(1):before{content:'\2776'}
     .pageTitle .step span:nth-of-type(2):before{content:'\2777'}
     .pageTitle .step span:nth-of-type(3):before{content:'\2778'}
-    .pageTitle .step span:after{position:absolute;left:0;top:10px;content:'';width:50px;}
-    .pageTitle .step span:first-child{padding-left:0}
-    .pageTitle .step span:first-child:after{display:none}
-    .pageTitle .step span.on{color:#E15616}
-    .pageTitle .step label.line{width: 50px;height: 1px;background: #707070;display: inline-block; margin: 0px 10px}
-    .pageTitle .step label.line.on{background: #E15616;}
-    .pay-container {width: 100%;position: relative;opacity: 0;}
-    .pay-container.active{opacity: 1;}
+    .pageTitle .step span:after{position:absolute;right:0;top:10px;content:'';width:50px;border-top:1px solid #9AA5B5;}
+    .pageTitle .step span:nth-of-type(3){padding-right:0}
+    .pageTitle .step span:nth-of-type(3):after{display:none}
+    .pageTitle .step span.on,.pageTitle .step span.prev{color:#E15616}
+    .pageTitle .step span.prev:after{border-color:#E15616;}
+    .pay-container {width: 100%;position: relative;}
     .container{width: 100%;height: auto;float: left;margin-bottom: 30px;}
     .pay-content{width: 1184px;margin: 0 auto;height: auto;}
     .pay-title{width: 100%;height: auto;padding: 15px 20px;float: left;background: #ffffff;margin-bottom: 7px;box-sizing:border-box;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);}
@@ -93,7 +91,7 @@ input::-webkit-outer-spin-button {
     .payment-transfer .payment-transfer-main .label .text{color: #333;float: left;width: 25%;}
     .payment-transfer .payment-transfer-main .label .text-p{color: #333;float: left;}
     .payment-transfer .payment-transfer-main .label .text-p input{border: none;background-color: #FFF;width: 60px;font-size: 14px;color: #333;}
-    .payment-transfer .payment-transfer-main .label .text-p .copy{display: block;width:42px;height:18px;background:linear-gradient(34deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);opacity:1;border-radius:3px;float: left;line-height: 18px;font-size: 12px;margin-top: 10px;margin-left: 5px;color: #FFF;text-align: center;}
+    .payment-transfer .payment-transfer-main .label .text-p .copy{display: inline-block;width:42px;height:18px;background:linear-gradient(34deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);opacity:1;border-radius:3px;line-height: 18px;font-size: 12px;margin-top: 10px;margin-left:10px;color: #FFF;text-align: center;}
     .payment-transfer .payment-transfer-main .label .label-c{color: #E15616;}
     .pay-button-main{width: 100%;height: 72px;box-sizing: border-box;padding: 11px 0;background-color: #FFFFFF;float: left;border-bottom: 1px solid #EBEBEB;}
     .pay-button-main .pay-button{width: 100%;height: 50px;float: left;}
@@ -107,7 +105,44 @@ input::-webkit-outer-spin-button {
 * 移动端
 */
 @media screen and (max-width:768px){
+    .pageTitle .step{width:100%;height:12.4vw;line-height:12.4vw;background:#FFF;color:#9AA5B5;font-size:3.1vw;text-align:center}
+    .pageTitle .step span{display:inline-block;height:4.2vw;line-height:4.2vw;vertical-align:middle;position:relative;padding-right:6.4vw}
+    .pageTitle .step span:before{font-style:normal;font-size:5.2vw;vertical-align:text-top;margin-right:1vw}
+    .pageTitle .step span:nth-of-type(1):before{content:'\2776'}
+    .pageTitle .step span:nth-of-type(2):before{content:'\2777'}
+    .pageTitle .step span:nth-of-type(3):before{content:'\2778'}
+    .pageTitle .step span:after{position:absolute;right:0;top:2.05vw;content:'';width:5.4vw;border-top:1px solid #9AA5B5}
+    .pageTitle .step span:nth-of-type(3){padding-right:0}
+    .pageTitle .step span:nth-of-type(3):after{display:none}
+    .pageTitle .step span.on,.pageTitle .step span.prev{color:#E15616}
+    .pageTitle .step span.prev:after{border-color:#E15616;}
+    .pageTitle h1,h2.title{color:#2D3036;font-size:3.7vw;font-weight:bold;height:10vw;line-height:10vw;padding:0 3.3vw}
+    .pageTitle h1 span{font-size:3.1vw;font-weight:normal;color:#627386;margin-left:2vw}
+    .pay-title,.pay-ment,.pay-method{width:100%;box-sizing:border-box;padding:3.2vw;background:#FFF;color:#9aa5b5;font-size:3.4vw;margin-bottom:1.2vw;line-height:7vw}
+    .pay-title p span{color:#22272e}
+    .pay-title .title-money.big{font-size:4.6vw;color:#22272e}
+    .pay-title .title-money.big span{color:#FF2A2A;font-weight:bold;line-height:10vw}
+    .pay-title .pay-input{white-space:nowrap}
+    .pay-title .pay-input p{display:inline-block}
+    .pay-title .pay-input input{outline:none;box-sizing:border-box;width:100%;height:7vw;line-height:5vw;padding:1vw 0;text-indent:1.2em;font-size:3.4vw;text-align:left;background-color:#ffffff;border-radius:2px;border:solid 1px #b8bfca}
+    .record-title,.method-title{font-size:3.7vw;color:#22272e;line-height:8vw}
+    .pay-method-tab{padding-top:1.5vw;border-bottom:1px solid #EBEBEB;color:#22272e}
+    .pay-method-tab .item{display:block;box-sizing:border-box;height:9vw;line-height:9vw;padding:0 5vw;border:1px solid transparent;color:#93979F;font-size:3.4vw;margin-bottom:-1px}
+    .pay-method-tab .item.active{color:#E15621;border-color:#EBEBEB;border-bottom-color:#FFF;background:#FFF}
+    .payment{border:1px solid #EBEBEB;border-top:none;padding:2.6vw}
+    .record-li{margin-top:3vw}
+    .pay-bank .bank-list{text-align:center;margin-top:3vw}
+    .pay-bank .bank-list .bank-a{display:inline-block;width:28vw;border:1px solid #FFFFFF;position:relative;border-radius:2px}
+    .pay-bank .bank-list .bank-a img{width:100%}
+    .payment-transfer,.payment-title{color:#22272e}
+    .payment-transfer .label>p{font-size:3.4vw;color:#22272e;line-height:5vw;padding:1.6vw 0}
+    .payment-transfer .label .label-title{font-size:3.1vw;color:#e15616}
+    .payment-transfer .label .label-t{color:#627386}
+    .payment-transfer .label .label-c{color:#1890f9;font-size:3.1vw}
+    .payment-transfer .label>p .red{color:#e15616}
+    .payment-transfer .copy{display:inline-block;height:6.4vw;line-height:6.4vw;padding:0 3vw;background-image:linear-gradient(214deg,#ff2929 0%,#ff6d1b 100%);border-radius:2px;color:#FFF;margin-left:2vw}
+    .pay-button a{display:block;width:93.4vw;height:11.2vw;line-height:11.2vw;font-size:3.7vw;text-align:center;border-radius:2px;border:1px solid #e15616;margin:0 auto 2.6vw auto;color:#FFF;background:#e15616}
 
 
 
-}
+}

src/main/resources/templates/pay/caimei-paycash.html

@@ -9,14 +9,12 @@
 <body>
 <!-- 引用头部 -->
 <template th:replace="components/header"></template>
-<div class="pay-container clear" id="payContainer" :class="isRequest ? 'active' : ''">
+<div id="payContainer" class="pay-container clear" v-cloak>
     <div class="wrap">
         <div class="pageTitle">
             <div class="step">
-                <span class="on">我的购物车</span>
-                <label class="line on"></label>
-                <span class="on">核对订单信息</span>
-                <label class="line"></label>
+                <span class="prev">我的购物车</span>
+                <span class="prev">核对订单信息</span>
                 <span class="on">成功提交订单</span>
             </div>
             <h1>收银台</h1>
@@ -62,12 +60,22 @@
                             <div class="record-tb">{{payTypeText(item.payType)}}</div>
                             <div class="record-tb">{{item.receiptDate}}</div>
                         </div>
+                        <div class="record-li">
+                            <div class="record-tb">￥0.00</div>
+                            <div class="record-tb">dfsgdfgsdfgsdgsdfg</div>
+                            <div class="record-tb">2020-10-22</div>
+                        </div>
+                        <div class="record-li">
+                            <div class="record-tb">￥0.00</div>
+                            <div class="record-tb">dfsgdfgsdfgsdgsdfg</div>
+                            <div class="record-tb">2020-10-22</div>
+                        </div>
                     </div>
                 </div>
             </div>
             <div class="pay-method">
                 <div class="method-title">选择支付方式</div>
-                <div class="pay-method-tab">
+                <div class="pay-method-tab mf">
                     <a class="item" href="javascript:void(0);" @click="changeTab(0)" :class ="{ active: tabIndex === 0 }">线上支付</a>
                     <a class="item" href="javascript:void(0);" @click="changeTab(1)" :class ="{ active: tabIndex === 1 }" v-if="isReceiptStatus">转账支付</a>
                 </div>
@@ -75,7 +83,7 @@
                     <div class="payment" id="mobilePayment" v-if="tabIndex === 0">
                         <div class="payment-title">{{payStatusText}}</div>
                         <div class="pay-bank">
-                            <div class="bank-list" id="mobileContent">
+                            <div class="bank-list mfbt" id="mobileContent">
                                 <a href="javascript:void(0);" class="bank-a" v-for="(item, index) in mobileData" :key="index" @click="checkMobilePay(index,item)" :class="{ active: mobileTabIndex === index }">
                                     <img :src="item.imgUrl" :alt="item.bankName">
                                 </a>
@@ -104,8 +112,7 @@
                                     <P class="text">户名：周仁声</P>
                                 </div>
                                 <div class="label">
-                                    <P class="text-p">订单标识：{{orderIdentificationId}}</P>
-                                    <P class="text-p"><a href="javascript: void(0);" class="copy" @click="copyOrderBtnSubmitFn">复制</a></P>
+                                    <P class="text-p">订单标识：{{orderIdentificationId}}<a href="javascript: void(0);" class="copy" @click="copyOrderBtnSubmitFn">复制</a></P>
                                 </div>
                                 <div class="label"><P class="label-t">特别注意</P></div>
                                 <div class="label"><P class="label-c">请在转账备注中填写上述订单标识，方便财务快速审核，提高发货速度</P></div>