修改招行支付标题以及一些其他问题

src/pages/applications/cmbPolyPay/cmbPolyPay.vue

 <template>
-<h-view title="招行扫码支付">
-  <div class="" style="padding: 20px; height: 100%">
-    <div class="title" style="height:5%; width:100%">
+  <h-view style="overflow:auto;" title="招行扫码支付">
+      <div class="page-box" style="padding: 20px; height: 100%">
+        <div style="height:12%; width:100%">
+          <div class="title" style="height:42%; width:100%">
             <div>合同信息</div>
           </div>
-    <div class="search">
+          <div class="search" style="height:40%; width:100%">
             <div class="searchInput">
-        <input v-model="searchCondition.input" placeholder="请输入机号信息">
+              <input v-model="searchCondition.input" placeholder="请输入机号信息" onfocus="this.placeholder=''" onblur="this.placeholder='请输入机号信息'">
               <button style="position:absolute;right:10px" @click="detectSearchCondition()">搜索</button>
             </div>
           </div>
+        </div>
         <div v-if="ListNum != 0" class="billList">
           <article v-for="(item, index) in massages" :key="item.id" class="article" style="margin-top:10px">
             <img slot="left-icon" src="../../../assets\electronicContract\contract-icon.png" class="icon">
@@ -45,7 +47,7 @@
           </div>
         </div>
       </div>
-</h-view>
+  </h-view>
 </template>
 
 <script>
@@ -163,6 +165,8 @@ export default {
     border-radius: 20px;
     width: 15%;
     height: 100%;
+    box-sizing: content-box;
+    padding: 0px;
   }
 }
 // 账单卡片列表

src/pages/applications/cmbPolyPay/cmbPolyPayDetail.vue

 <template>
-<h-view title="招行扫码支付">
-  <div>
-    <ul id="box" class="box">
+  <h-view style="overflow:auto;" title="还款明细">
+    <div class="page-box" style="width:100% height:100%" >
+      <ul id="box" style="margin-bottom: 150px;">
           <li v-for="(item, index) in Lists" :key="index" class="items">
             <input v-model="checked[index]" class="" type="checkbox" @mouseup="onClickHander(index)">
             <ul class="">
@@ -14,12 +14,13 @@
             </ul>
           </li>
       </ul>
+    </div>
           <!-- 总计还款金额 -->
     <div v-if="bottomType == 0" class="bottomBox">
         <div class="total">
           <div class="counter"><span>合计还款金额：{{ total }}</span></div>
           <input id="payamount" type="number" placeholder="请输入支付金额" required oninvalid="setCustomValidity('请输入支付金额！');"
-          oninput="setCustomValidity('');">
+            oninput="setCustomValidity('');" onfocus="this.placeholder=''" onblur="this.placeholder='请输入支付金额'">
         </div>
         <button @click="pay">支付</button>
     </div>
@@ -36,9 +37,7 @@
           <div id="qrcode"></div>
         </div>
     </div>
-    
-  </div>
-</h-view>
+  </h-view>
 </template>
 
 <script>
@@ -120,7 +119,7 @@ export default {
           'amount': this.payamount,
         }
         vm.$post(url, params).then(function (res) {
-          if (res.result.return_status == 'S') {
+          if (res.result.return_status === 'S') {
             var dataInfo = res.result
             vm.recamt_id = dataInfo.recamt_id
             // console.log('获取支付id', vm.recamt_id)
@@ -130,13 +129,15 @@ export default {
             vm.hlsPopup.showLongCenter(res.result.return_message)
           }
         })
-      } else if (this.total == 0) {
+      } else if (this.total === 0) {
         $input.value = ''
         $input.placeholder = '请选择要支付的款项'
       } else if ($input.value > this.total) {
         $input.value = ''
-        $input.placeholder = '您输入的支付款过多'
-      } else if ($input.value == '') {
+        $input.placeholder = '您输入的支付金额过多！'
+      } else if ($input.value === '') {
+        $input.placeholder = '请输入支付金额'
+      } else if ($input.value === 0) {
         $input.placeholder = '请输入支付金额'
       }
     },
@@ -228,6 +229,7 @@ export default {
       // 点击关闭二维码页面;
       this.bottomType = 0
       this.getData();
+      this.total= 0;
     },
     //选择账单后把总计金额显示在底部
     onClickHander (index) {
@@ -267,9 +269,6 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.box {
-  margin-bottom: 50%;
-}
 .items {
   margin-top: 10px;
   display: flex;
@@ -277,18 +276,14 @@ export default {
   width: 100%;
   justify-content: space-between;
   font-size: 12px;
-  input {
-    // visibility: hidden;
-    position: relative;
-    top: 50%;
-    left: 3%;
-    transform: translateY(-5px);
-  }
+  
+  //可选和不可选的项目样式可能要不一样
   ul {
     margin-right: 3%;
     width: 87%;
     border: 2px solid #afafaf;
     border-radius: 8px;
+    background-color: #ffffff;
     li {
       padding-left: 8px;
       padding-top: 15px;
@@ -305,16 +300,21 @@ export default {
   .check-ul{
     background-color: #ffffff;
   }
-}
-input[type="checkbox"] {
+  //复选框样式
+  
+  input[type="checkbox"] {
     cursor: pointer;
     position: relative;
     width: 1rem;
     height: 1rem;
     font-size: 0.9rem;
+    top: 50%;
+    left: 3%;
+    transform: translateY(-5px);
     visibility: hidden;
-}
-.check-box[type="checkbox"]:checked::after {
+  }
+  //可选时选中和未选中两种状态
+  .check-box[type="checkbox"]:checked::after {
   height: 18px;
   line-height: 15px;
   content: "✓";
@@ -323,8 +323,8 @@ input[type="checkbox"] {
   border: 2px solid #7aae3b;
   font-size: 15px;
   font-weight: bold;
-}
-.check-box[type="checkbox"]::after {
+  }
+  .check-box[type="checkbox"]::after {
   position: absolute;
   background-color: #ffffff;
   border: 2px solid #dab2b2;
@@ -335,8 +335,9 @@ input[type="checkbox"] {
   text-align: center;
   content: " ";
   border-radius: 50%;
-}
-.uncheck-box[type="checkbox"]::after {
+  }
+  //不可选的样式
+  .uncheck-box[type="checkbox"]::after {
   position: absolute;
   background-color: #d9d9d9;
   border: 2px solid #bfbfbf;
@@ -347,6 +348,7 @@ input[type="checkbox"] {
   text-align: center;
   content: " ";
   border-radius: 50%;
+  }
 }
 .bottomBox {
   position: absolute;
@@ -374,19 +376,22 @@ input[type="checkbox"] {
       font-size: 12px;
       position: relative;
       right: 0px;
-      width: 36%;
+      width: 40%;
       border: 1px solid #a69a9a;
       border-radius: 5px;
-      padding-left: 5%;
-      padding-right: 3%;
+      text-align: center;
+      padding-left: 2%;
+      padding-right: 2%;
     }
   }
-  button {
+  button{
     position: relative;
     width: 20%;
     height: 25%;
+    // top: -10px;
     left: 50%;
     transform: translateX(-50%);
+    font-size: 16px;
     color: #ffffff;
     border-radius: 8px;
     border: 1px solid rgb(0, 200, 0);