页面样式调整

src/pages/applications/cmbPolyPay/cmbPolyPay.vue

 <template>
   <div class="" style="padding: 20px; height: 100%">
     <div class="title" style="height:5%; width:100%">
-      <div style="
-              width: 100%;
-              height:100%;
-              text-align: center;
-              border-radius: 5px;
-              padding-top: 7px;
-              background-color: #ddd;
-              font-size: 16px;
-              font-weight: 700;
-              color: #11111187;
-            ">
-        合同信息
-      </div>
+      <div>合同信息</div>
     </div>
     <div class="search">
       <div class="searchInput">
@@ -23,7 +11,7 @@
     </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-list.png" class="icon">
+        <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>
@@ -33,7 +21,8 @@
           <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;
+          <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>
         <button @click="download(index)">账单下载</button>
@@ -43,7 +32,8 @@
       </article>
     </div>
     <div v-else-if="ListNum == 0" class="billList">
-      <div style="
+      <div
+        style="
               width: 200px;
               height: 160px;
               position: relative;
@@ -113,6 +103,20 @@ export default {
 </script>
 
 <style lang="less" type="text/less" scoped>
+.title{
+  border-radius: 5px;
+  background-color: #ddd;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  div{
+    height: 20px;
+    line-height: 20px;
+    font-size: 16px;
+    font-weight:bolder;
+    color: #11111187;
+  }
+}
 .search {
   display: flex;
   //height: 50px;
@@ -146,7 +150,7 @@ export default {
       //padding-left: 11px;
     }
   }
-  button {
+  button{
     margin-right: -10px;
     background-color: rgb(230, 230, 230);
     border: 1px solid #cccccc;
@@ -169,16 +173,16 @@ export default {
     .text {
       margin-left: 45px;
       position: relative;
-      top: 50%;
+      top:50%;
       transform: translateY(-50%);
-      .cont-type {
+      .cont-type{
         padding-top: 2px;
         width: 100%;
-        word-wrap: break-word;
-      }
-      :nth-child(1) {
-        width: 200px;
+        word-wrap:break-word;
       }
+      // :nth-child(1){
+      //   width: 200px;
+      // }
     }
     .icon {
       //左侧图标
@@ -199,13 +203,14 @@ export default {
     }
     button {
       position: absolute;
-      top: 12px;
-      right: 5px;
-      width: 70px;
+      bottom: 12px;
+      right: 15px;
+      width: 75px;
       height: 25px;
-      font-size: 12px;
-      background-color: #d1d1d1;
-      border: 2px solid #dcd0d0;
+      font-size: 14px;
+      color: #fff;
+      background-color: rgb(0, 200, 0);
+      border: 2px solid rgb(0, 200, 0);
       border-radius: 5px;
       padding-right: 1px;
       padding-left: 1px;
@@ -215,9 +220,9 @@ export default {
       right: 5px;
       top: 50%;
       transform: translateY(-16px);
-    }
+    };
     box-shadow: 3px 3px 3px 3px #b6b6b6;
-  }
+  };
   padding-bottom: 30px;
   .text {
     margin-left: 15px;

src/pages/applications/cmbPolyPay/cmbPolyPayDetail.vue

@@ -7,17 +7,19 @@
           <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.ovducmpsamt }}</li>
           <li><span>剩余应还金额：</span>{{ item.recdueamt_total_str }}</li>
-          <li><span>现金流项目：</span>{{ item.characterid_n }}</li>
+          <li><span>收款类别：</span>{{ item.characterid_n }}</li>
         </ul>
       </li>
     </ul>
     <!-- 总计还款金额 -->
     <div v-if="bottomType == 0" class="bottomBox">
       <div class="total">
-        <span>合计还款金额：{{ total }}</span>
-        <input id="payamount" type="number" placeholder="请输入支付金额" required oninvalid="setCustomValidity('请输入支付金额！');"
+        <div class="counter"><span>合计还款金额：{{ total }}</span></div>
+        <input
+          id="payamount" type="number" placeholder="请输入支付金额" required
+          oninvalid="setCustomValidity('请输入支付金额！');"
           oninput="setCustomValidity('');">
       </div>
       <button @click="pay">支付</button>
@@ -32,7 +34,7 @@
           </button>
           <p>扫码支付</p>
         </div>
-        <div id="qrcode" />
+        <div id="qrcode"/>
       </div>
     </div>
 
@@ -90,7 +92,7 @@ export default {
           for (let i = 0; i < vm.ListNum; i++) {
             // console.log('给checked初始值');
             vm.checked[i] = false
-            vm.unchecked[i] = dataInfo.lists[i].select_flag == 'N'
+            vm.unchecked[i] = dataInfo.lists[i].select_flag === 'N'
           }
           vm.Lists = dataInfo.lists
         } else {
@@ -280,9 +282,6 @@ export default {
           vm.hlsPopup.showLongCenter(res.respMsg)
         }
       })
-    },
-    showPaypage () {
-
     },
     close () {
       // 点击关闭二维码页面;
@@ -346,7 +345,7 @@ export default {
   ul {
     margin-right: 3%;
     width: 87%;
-    border: 2px solid #b08f8f;
+    border: 2px solid #afafaf;
     border-radius: 8px;
     li {
       padding-left: 8px;
@@ -358,10 +357,10 @@ export default {
       }
     }
   }
-  .uncheck-ul {
-    background-color: #d5d5d5;
+  .uncheck-ul{
+    background-color: #ffffff;
   }
-  .check-ul {
+  .check-ul{
     background-color: #ffffff;
   }
 }
@@ -397,8 +396,8 @@ input[type="checkbox"] {
 }
 .uncheck-box[type="checkbox"]::after {
   position: absolute;
-  background-color: #d5d5d5;
-  border: 2px solid #8e8e8e;
+  background-color: #d9d9d9;
+  border: 2px solid #bfbfbf;
   width: 18px;
   height: 18px;
   display: inline-block;
@@ -411,28 +410,33 @@ input[type="checkbox"] {
   position: absolute;
   bottom: 0px;
   width: 100%;
-  height: 15%;
+  height: 18%;
   background-color: #fffffe;
   border-top: 2px solid #7aae3b;
   .total {
-    font-size: 12px;
+    font-size: 14px;
+    font-weight: bolder;
     color: rgb(180, 0, 0);
-    width: 75%;
-    height: 20%;
+    width: 90%;
+    // height: 20%;
     margin: 20px auto;
     display: flex;
-    justify-content: space-between;
-    span {
-      height: 25px;
-      line-height: 25px;
-      text-align: center;
+    justify-content: space-around;
+    align-items: flex-end;
+    .counter{
+      vertical-align: bottom;
+      position: relative;
+      bottom: 0px;
     }
     input {
+      font-size: 12px;
       position: relative;
       right: 0px;
-      width: 40%;
-      border: 1px solid #dab2b2;
+      width: 36%;
+      border: 1px solid #a69a9a;
       border-radius: 5px;
+      padding-left: 5%;
+      padding-right: 3%;
       text-align: center;
     }
   }
@@ -443,8 +447,8 @@ input[type="checkbox"] {
     left: 50%;
     transform: translateX(-50%);
     color: #ffffff;
-    border-radius: 5px;
-    border: 1px solid #dab2b2;
+    border-radius: 8px;
+    border: 1px solid rgb(0, 200, 0);
     background-color: rgb(0, 200, 0);
   }
 }
@@ -499,7 +503,7 @@ input[type="checkbox"] {
         text-align: center;
       }
     }
-    #qrcode {
+    #qrcode{
       position: absolute;
       width: 128px;
       height: 128px;
@@ -517,4 +521,5 @@ input[type="checkbox"] {
     // }
   }
 }
+
 </style>