首付款支付样式

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

@@ -356,7 +356,7 @@ export default {
 </script>
 <style lang='less' >
 #pay-entry {
-  .vue-better-scroll__wrapper {
+.vue-better-scroll__wrapper{
     padding: 0;
   }
   .trans-enter-active,
@@ -379,9 +379,9 @@ export default {
     .down {
       height: 466px;
       width: 100%;
-      position: relative;
-      top: 18%;
-      background-color: #fff;
+     position: relative;
+      top:18%;
+      background: #fff;
       border-radius: 12px 12px 0 0;
       overflow: scroll;
       display: flex;
@@ -405,6 +405,9 @@ export default {
           text-align: center;
         }
       }
+      .info {
+        //margin-top: 60px;
+      }
     }
   }
   .modal-show-bank {
@@ -419,19 +422,19 @@ export default {
     .down {
       height: 466px;
       width: 100%;
-      position: relative;
-      top: 18%;
-      background-color: #fff;
+     position: relative;
+      top:18%;
+      background: #fff;
       border-radius: 12px 12px 0 0;
       overflow: scroll;
       display: flex;
       align-items: center;
       flex-direction: column;
       .top {
+        left: 24px;
         width: 330px;
         height: 54px;
         display: flex;
-        z-index: 999;
         align-items: center;
         background-color: #fff;
         img {
@@ -447,8 +450,10 @@ export default {
         }
       }
       .pay-way {
+        //width: 350px;
+        //margin: 0 auto;
         width: 100%;
-        padding: 0 4% 0 4%;
+       padding: 0 4% 0 4%;
         background: #fff;
         .hls-item {
           padding-left: 12px;
@@ -458,7 +463,7 @@ export default {
             font-family: PingFangSC-Regular;
             font-size: 14px;
             color: #656464;
-            div {
+            div{
               display: flex;
               justify-content: center;
               align-items: center;
@@ -567,7 +572,9 @@ export default {
     margin: 12px 8px 0 3px;
   }
   .push {
-    margin-left:20px;
+   /* position: absolute;
+    top: 10px;
+    margin-left: 10px;*/
     width: 35px;
   }
   .modal-show {
@@ -575,7 +582,7 @@ export default {
     height: 100%;
     position: absolute;
     display: flex;
-    z-index: 910;
+    z-index: 900;
     background-color: rgba(56, 63, 69, 0.3);
     justify-content: center;
     align-items: center;
@@ -618,7 +625,6 @@ export default {
       }
     }
   }
-
   .entry-content {
     .amount {
       height: 166px;
@@ -626,12 +632,10 @@ export default {
       padding-top: 55px;
       text-align: center;
       p {
-        font-family: PingFangSC-Semibold;
+        font-family: PingFangSC-Regular;
         font-size: 14px;
-        color: #383f45;
-        letter-spacing: 0.43px;
-        font-weight: bold;
-        text-align: center;
+        color: #656464;
+        letter-spacing: 0;
       }
 
       div {
@@ -643,73 +647,45 @@ export default {
         margin-top: 10px;
       }
     }
-    .info {
-      width: 100%;
-      height: 226px;
-      background-color: #fff;
-      .info-item {
-        height: 46px;
-        width: 335px;
-        margin: 0 auto;
-        position: relative;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .arrow {
-          margin-right: -10px;
-        }
-        img {
-          width: 17px;
-          margin-right: 10px;
-        }
-        span:first-child {
+
+    .pay-way {
+      .hls-item {
+        padding-left: 12px;
+        .add-name {
+          flex: 3;
+          line-height: 56px;
           font-family: PingFangSC-Regular;
           font-size: 14px;
-          color: rgba(56, 63, 69, 0.6);
-          letter-spacing: 0;
-          line-height: 18px;
+          color: #656464;
+
+          .icon1 {
+            width: 34px;
+            height: 34px;
+            display: block;
+            float: left;
+            margin-top: 10px;
+            margin-right: 5px;
+          }
+          .icon2 {
+            width: 32px;
+            display: block;
+            float: left;
+            margin-top: 12px;
+            margin-right: 8px;
+          }
         }
-        span:last-child {
-          font-family: Verdana;
-          font-size: 14px;
-          color: #383f45;
-          letter-spacing: 0;
-          line-height: 18px;
-          display: flex;
-          align-items: center;
+
+        .add-content {
+          img {
+            width: 21px;
+          }
         }
       }
-      .info-item:nth-of-type(1)::after {
-        content: "";
-        display: block;
-        position: absolute;
-        right: 20px;
-        top: 25px;
-        border: 10px solid #fff;
-        border-left-color: transparent;
-        border-right-color: transparent;
-        border-top-color: transparent;
-        border-bottom-color: rgba(75, 74, 75, 0.1);
-      }
-      .info-item:nth-of-type(1) {
-        border-top: 1px solid #d9dbdf;
-      }
-      .interest {
-        width: 100%;
-        height: 37px;
-        line-height: 37px;
-        font-family: PingFangSC-Medium;
-        font-size: 11px;
-        color: #4b4a4b;
-        letter-spacing: 0;
-        text-indent: 215px;
-        background-color: rgba(75, 74, 75, 0.1);
-      }
     }
   }
   .foot {
-    background-color: @headerColor;
     color: #fff;
+    background-color: @headerColor;
   }
 }
 </style>

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

@@ -580,7 +580,6 @@ export default {
    /* position: absolute;
     top: 10px;
     margin-left: 10px;*/
-    margin-left:20px;
     width: 35px;
   }
   .modal-show {
@@ -637,8 +636,6 @@ export default {
       background-color: #fff;
       padding-top: 55px;
       text-align: center;
-      border-bottom: 1px solid #d9dbdf;
-
       p {
         font-family: PingFangSC-Regular;
         font-size: 14px;