add

src/pages/contractRepayment/refund.vue

@@ -9,7 +9,7 @@
 <template>
   <h-view id="repay-plan" class="public-style">
     <transition name="trans">
-      <div v-show="show" class="modal-show">
+      <div v-show="show" class="modal-show" @click="show=false">
         <div class="down">
           <table>
             <tr>
@@ -51,7 +51,7 @@
         v-for="(item,index) in lists"
         :key="index"
         :class="{'plan-list':true,'or':statu==='orange','bl':statu==='blue','gr':statu==='green'}"
-        @click = "showModel"
+        @click="showModel"
       >
         <div
           :class="{'period':true,'orange':statu==='orange','blue':statu==='blue','green':statu==='green'}"
@@ -71,10 +71,16 @@
             <span>{{ item.pay_method }}</span>
           </p>
           <div class="name">
-            <p>应还金额<span>已还金额</span></p>
-            <p>{{ item.due_amount|currency }}<span
-              :class="{'orang':statu==='orange','blu':statu==='blue','gree':statu==='green'}"
-            >{{ item.received_amount|currency }}</span></p>
+            <p>
+              应还金额
+              <span>已还金额</span>
+            </p>
+            <p>
+              {{ item.due_amount|currency }}
+              <span
+                :class="{'orang':statu==='orange','blu':statu==='blue','gree':statu==='green'}"
+              >{{ item.received_amount|currency }}</span>
+            </p>
           </div>
         </div>
 
@@ -141,11 +147,11 @@ export default {
   .trans-leave-active {
     opacity: 0;
   }
- .modal-show {
+  .modal-show {
     width: 100%;
     height: 100%;
     position: absolute;
-    z-index: 900;
+    z-index: 666;
     background-color: rgba(56, 63, 69, 0.3);
     display: flex;
     justify-content: center;
@@ -154,30 +160,32 @@ export default {
       position: relative;
       width: 314px;
       height: 119px;
+      z-index: 999;
       background-size: 301px 24.7px;
       background-color: #fff;
-      table{
-        width:100%;
+      padding-left: 10px;
+      table {
+        width: 100%;
         text-align: center;
-        tr:first-child{
-          height:46px;
+        tr:first-child {
+          height: 46px;
           line-height: 46px;
           font-family: PingFangSC-Semibold;
-font-size: 14px;
-color: #1D3FFF;
+          font-size: 14px;
+          color: #1d3fff;
+          font-weight: 600;
         }
-        tr{
-          width:100%;
-          height:36px;
+        tr {
+          width: 100%;
+          height: 36px;
           line-height: 36px;
-          display: flex;
-          justify-content: space-between;
+          text-align: center;
+        }
+        td{
+          font-family: PingFangSC-Regular;
+font-size: 13px;
+color: #4B4A4B;
         }
-      td,th{
-          display: flex;
-          justify-content: center;
-
-      }
       }
     }
   }
@@ -321,23 +329,23 @@ color: #1D3FFF;
         justify-content: space-between;
         p {
           margin-top: 17px;
-           span {
-          display: block;
-          margin-top: 18px;
-        }
-        span.orang {
-          color: rgb(253, 182, 47);
-          font-weight: 700;
-          font-family: PingFangSC-Semibold;
-        }
-        span.blu {
-          color: #1d3fff;
-          font-weight: 700;
-          font-family: PingFangSC-Semibold;
-        }
-        span.gree {
-          color: #1ba261;
-        }
+          span {
+            display: block;
+            margin-top: 18px;
+          }
+          span.orang {
+            color: rgb(253, 182, 47);
+            font-weight: 700;
+            font-family: PingFangSC-Semibold;
+          }
+          span.blu {
+            color: #1d3fff;
+            font-weight: 700;
+            font-family: PingFangSC-Semibold;
+          }
+          span.gree {
+            color: #1ba261;
+          }
         }
       }
     }