add视屏面签

src/pages/contractRepayment/refund.vue

@@ -8,6 +8,32 @@
  -->
 <template>
   <h-view id="repay-plan" class="public-style">
+    <transition name="trans">
+      <div v-show="show" class="modal-show">
+        <div class="down">
+          <table>
+            <tr>
+              <th>款项</th>
+              <th>应还金额</th>
+              <th>还款金额</th>
+              <th>支付方式</th>
+            </tr>
+            <tr>
+              <td>本金</td>
+              <td>5,000.00</td>
+              <td>5,000.00</td>
+              <td>代扣;在线支付</td>
+            </tr>
+            <tr>
+              <td>本金</td>
+              <td>5,000.00</td>
+              <td>5,000.00</td>
+              <td>代扣;在线支付</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+    </transition>
     <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn">
         <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
@@ -25,6 +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"
       >
         <div
           :class="{'period':true,'orange':statu==='orange','blue':statu==='blue','green':statu==='green'}"
@@ -65,6 +92,7 @@ export default {
     return {
       //  已结清 black , 逾期 orange , 还款中 blue , 未还款 green
       statu: 'orange',
+      show: true,
       info: {},
       lists: [],
     }
@@ -75,6 +103,9 @@ export default {
     })
   },
   methods: {
+    showModel () {
+      this.show = true
+    },
     selectMonth (e) {
       return e.substring(5, 10)
     },
@@ -102,25 +133,54 @@ export default {
 </script>
 <style lang='less' >
 #repay-plan {
-  .h-header {
-    background-color: #1d3fff;
-    .h-header-btn {
-      img {
-        width: 16px;
-        height: 16px;
-        margin-left: 4px;
-      }
+  .trans-enter-active,
+  .trans-leave-active {
+    transition: opacity 0.5s;
+  }
+  .trans-enter,
+  .trans-leave-active {
+    opacity: 0;
+  }
+ .modal-show {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 900;
+    background-color: rgba(56, 63, 69, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .down {
+      position: relative;
+      width: 314px;
+      height: 119px;
+      background-size: 301px 24.7px;
+      background-color: #fff;
+      table{
+        width:100%;
+        text-align: center;
+        tr:first-child{
+          height:46px;
+          line-height: 46px;
+          font-family: PingFangSC-Semibold;
+font-size: 14px;
+color: #1D3FFF;
+        }
+        tr{
+          width:100%;
+          height:36px;
+          line-height: 36px;
+          display: flex;
+          justify-content: space-between;
+        }
+      td,th{
+          display: flex;
+          justify-content: center;
 
-      span {
-        font-family: PingFangSC-Semibold;
-        margin-left: 16px;
-        font-size: 17px;
-        letter-spacing: 0.61px;
-        line-height: 24px;
+      }
       }
     }
   }
-
   .plan-name {
     position: relative;
     background-color: #1d3fff;

src/pages/myInfo/my-info.vue

 <template>
   <h-view id="my-info">
-    <div class="top">
-      <h-header class="header">
-        <div slot="center" class="top-word">个人中心</div>
-      </h-header>
+    <h-header class="bar-custom">
+      <div slot="center" >个人中心</div>
+    </h-header>
+
+    <div class="top" style="margin-top:-1px;">
       <div class="card-top">
         <img src="@/assets/myInfo/1.png" @click="changePageHead" >
         <div class="sign">
@@ -536,7 +537,7 @@ export default {
     width: 100%;
     height: 206px;
     background: url("../../assets/myInfo/back.png") no-repeat;
-    background-size: 100% 206px;
+    background-size: 100% 156px;
     background-color: #efefef;
     .header {
       background-color: rgba(0, 0, 0, 0);
@@ -584,13 +585,15 @@ export default {
   }
   .my-content {
     background-color: #efefef;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
     .content-top {
       width: 359px;
       height: 121px;
-      margin: 0 auto;
       background-color: #fff;
       border-radius: 4px;
-      margin-top:22%;
+      margin-top:18px;
     }
     .userInfo {
       height: 45px;

src/pages/pay/firstPay/contract-record.vue

@@ -6,7 +6,7 @@
         <span>合同记录</span>
       </div>
     </h-header>
-    <h-content class="my-content">
+    <h-content class="my-content" style="margin-top:-1px">
       <div class="top-head">
         <div class="center">
           <div class="now-pay">

src/pages/pay/firstPay/first-pay.vue

 <template>
   <h-view id="first-pay" class="public-style">
-    <h-header :proportion="[5,1,1]" class="bar-custom">
+    <h-header :proportion="[5,1,1]" :has-border="false" class="bar-custom">
       <div slot="left" class="h-header-btn">
         <img src="@/assets/userBind/arrow.png" @click="goHome" >
         <span>首付款支付</span>
       </div>
     </h-header>
-    <h-content>
+    <h-content style="margin-top:-1px;">
       <div class="top-head">
         <div class="center">
           <div class="now-pay">

src/pages/pay/payment/contract-record.vue

@@ -6,7 +6,7 @@
         <span>合同记录</span>
       </div>
     </h-header>
-    <h-content>
+    <h-content style="margin-top:-1px;">
       <div class="top-head">
         <div class="center">
           <div class="now-pay">

src/pages/pay/payment/first-pay.vue

@@ -12,7 +12,7 @@
         <div><span>￥</span>{{ money |currency }}</div>
       </div>
     </div>
-    <h-content class="pay-content">
+    <h-content style="margin-top:-1px">
       <div class="pay-money">
         <div class="pay-icon"><img src="@/assets/payment/first-pay.png" alt="">租金支付</div>
         <div class="pay-input">
@@ -221,9 +221,6 @@ export default {
     }
   }
 
-  .pay-content {
-    padding-top: 50px;
-
     .pay-money {
       height: 74px;
       background-color: #fff;
@@ -290,7 +287,6 @@ export default {
           color: #B4B4B5;
         }
       }
-    }
   }
 
   .prompt {

src/pages/pay/payment/new-list.vue

@@ -6,7 +6,7 @@
         <span>还款明细</span>
       </div>
     </h-header>
-    <h-content>
+    <h-content style="margin-top:-1px;">
       <div class="top-head">
         <div class="center">
           <div class="now-pay">