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

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%">
-      <div>合同信息</div>
-    </div>
-    <div class="search">
-      <div class="searchInput">
-        <input v-model="searchCondition.input" placeholder="请输入机号信息">
-        <button style="position:absolute;right:10px" @click="detectSearchCondition()">搜索</button>
-      </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">
-        <div slot="name" class="text" style="width: 80%;font-size: 12px;">
-          <div class="cont-type" style="color: #000;font-size: 14px;font-weight:700">承租人：{{ item.customername }}
+  <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" style="height:40%; width:100%">
+            <div class="searchInput">
+              <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">
+            <div slot="name" class="text" style="width: 80%;font-size: 12px;">
+              <div class="cont-type" style="color: #000;font-size: 14px;font-weight:700">承租人：{{ item.customername }}
+              </div>
+              <div class="cont-type" style="color: #5a5959;font-size: 14px">经销商：{{ item.dealername }}</div>
+              <div class="cont-type" style="color: #5a5959;font-size: 14px">产品名称：{{ item.modelname }}</div>
+              <div class="cont-type" style="color: #5a5959;font-size: 14px">合同号：{{ item.contractno }}</div>
+              <div class="cont-type" style="color: #5a5959;font-size: 14px">机号：{{ item.serialno }}</div>
+              <div class="cont-type" style="color: #5a5959;font-size: 14px">租金总额：{{ item.contractamt }}</div>
+              <div class="cont-type" style="color: #5a5959;font-size: 14px">租赁开始日：{{ item.leasebgndt }}</div>
+              <div class="cont-type" style="color: #5a5959;font-size: 14px">状态：<span style="font-weight: 700;
+              color: rgba(198, 0, 0, 0.5);">{{ item.status }}</span></div>
+            </div>
+            <router-link :to="{name:'CmbPolyPayDetail',query:{contractno:item.contractno}}" class="more">
+              <img src="../../../assets\image\right-arrow@2x.png"  alt="">
+            </router-link>
+            <button @click="download(index)">账单下载</button>
+          </article>
+        </div>
+        <div v-else-if="ListNum == 0" class="billList">
+          <div style="
+                  width: 200px;
+                  height: 160px;
+                  position: relative;
+                  left: 50%;
+                  top: 100px;
+                  transform: translateX(-100px);
+                ">
+            <img src="../../../assets\image\nobill.png" style="width: 200px; height: 160px" alt="">
+            <p style="text-align: center; color:#555;">暂无相关合同信息</p>
           </div>
-          <div class="cont-type" style="color: #5a5959;font-size: 14px">经销商：{{ item.dealername }}</div>
-          <div class="cont-type" style="color: #5a5959;font-size: 14px">产品名称：{{ item.modelname }}</div>
-          <div class="cont-type" style="color: #5a5959;font-size: 14px">合同号：{{ item.contractno }}</div>
-          <div class="cont-type" style="color: #5a5959;font-size: 14px">机号：{{ item.serialno }}</div>
-          <div class="cont-type" style="color: #5a5959;font-size: 14px">租金总额：{{ item.contractamt }}</div>
-          <div class="cont-type" style="color: #5a5959;font-size: 14px">租赁开始日：{{ item.leasebgndt }}</div>
-          <div class="cont-type" style="color: #5a5959;font-size: 14px">状态：<span style="font-weight: 700;
-          color: rgba(198, 0, 0, 0.5);">{{ item.status }}</span></div>
         </div>
-        <router-link :to="{name:'CmbPolyPayDetail',query:{contractno:item.contractno}}" class="more">
-          <img src="../../../assets\image\right-arrow@2x.png"  alt="">
-        </router-link>
-        <button @click="download(index)">账单下载</button>
-      </article>
-    </div>
-    <div v-else-if="ListNum == 0" class="billList">
-      <div style="
-              width: 200px;
-              height: 160px;
-              position: relative;
-              left: 50%;
-              top: 100px;
-              transform: translateX(-100px);
-            ">
-        <img src="../../../assets\image\nobill.png" style="width: 200px; height: 160px" alt="">
-        <p style="text-align: center; color:#555;">暂无相关合同信息</p>
       </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">
-      <li v-for="(item, index) in Lists" :key="index" class="items">
-        <input v-model="checked[index]" class="" type="checkbox" @mouseup="onClickHander(index)">
-        <ul class="">
-          <li><span>期数：</span>{{ item.times }}</li>
-          <li><span>还款日期：</span>{{ item.recduedt_char }}</li>
-          <li><span>租金金额：</span>{{ item.recdueamt }}</li>
-          <li><span>违约金金额：</span>{{ item.ovducmpsamt }}</li>
-          <li><span>剩余应还金额：</span>{{ item.recdueamt_total_str }}</li>
-          <li><span>收款类别：</span>{{ item.characterid_n }}</li>
-        </ul>
-      </li>
-    </ul>
-    <!-- 总计还款金额 -->
+  <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="">
+              <li><span>期数：</span>{{ item.times }}</li>
+              <li><span>还款日期：</span>{{ item.recduedt_char }}</li>
+              <li><span>租金金额：</span>{{ item.recdueamt }}</li>
+              <li><span>违约金金额：</span>{{ item.ovducmpsamt }}</li>
+              <li><span>剩余应还金额：</span>{{ item.recdueamt_total_str }}</li>
+              <li><span>收款类别：</span>{{ item.characterid_n }}</li>
+            </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('');">
-      </div>
-      <button @click="pay">支付</button>
+        <div class="total">
+          <div class="counter"><span>合计还款金额：{{ total }}</span></div>
+          <input id="payamount" type="number" placeholder="请输入支付金额" required oninvalid="setCustomValidity('请输入支付金额！');"
+            oninput="setCustomValidity('');" onfocus="this.placeholder=''" onblur="this.placeholder='请输入支付金额'">
+        </div>
+        <button @click="pay">支付</button>
     </div>
     <!-- 二维码遮罩 -->
     <div v-if="bottomType == 1" class="ermPage">
-      <div class="topBlack" />
-      <div id="bottomErm" class="bottomErm">
-        <div class="ermTitle">
-          <button class="close" @click="close">
-            <p>x</p>
-          </button>
-          <p>扫码支付</p>
+        <div class="topBlack" />
+        <div id="bottomErm" class="bottomErm">
+          <div class="ermTitle">
+            <button class="close" @click="close">
+              <p>x</p>
+            </button>
+            <p>扫码支付</p>
+          </div>
+          <div id="qrcode"></div>
         </div>
-        <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"] {
-  cursor: pointer;
-  position: relative;
-  width: 1rem;
-  height: 1rem;
-  font-size: 0.9rem;
-  visibility: hidden;
-}
-.check-box[type="checkbox"]:checked::after {
+  //复选框样式
+  
+  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 {
   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);