'试算样式'

src/pages/financingTrial/financing-trial.vue

@@ -15,7 +15,7 @@
     </h-header>
 
     <!-- 搜索 -->
-    <div class="search">
+    <div class="search has-header">
       <img src="@/assets/contractInquire/search.png" alt="">
       <input type="text" placeholder="请输入产品名称">
     </div>
@@ -59,9 +59,9 @@
 </template>
 
 <script>
-export default {
+  export default {
     name: 'FinancingTrial',
-  data () {
+    data() {
       return {
         lists: [],
         plan_price: '',
@@ -70,7 +70,7 @@ export default {
     },
     computed: {},
     watch: {},
-  beforeRouteEnter (to, from, next) {
+    beforeRouteEnter(to, from, next) {
       next(vm => {
         if (from.name === 'ProDetailed') {
           vm.price_date_to = vm.$route.params.price_date_to // 有效日期
@@ -84,15 +84,15 @@ export default {
       })
       next()
     },
-  activated () {
+    activated() {
 
     },
-  created () {
+    created() {
 
     },
     methods:
       {
-   goDetails (val) {
+        goDetails(val) {
           this.$router.push({
             name: 'FinancingDetails',
             params: {
@@ -103,7 +103,7 @@ export default {
           })
         },
         // 试算查询
-   calculationQuery (val) {
+        calculationQuery(val) {
           let vm = this
           if (val) {
             let url = $config.basePath + 'prd_product_calculation_query'
@@ -140,17 +140,20 @@ export default {
           }
         },
       },
-}
+  }
 </script>
 <style lang='less'>
-#trial {
-.search {
+  #trial {
+    .search {
       background-color: #fff;
       padding: 8px 12px;
-    position: relative;
+      position: absolute;
+      width: 100%;
+      z-index: 100;
       margin-bottom: 8px;
+
       input {
-      background: rgba(239,239,239,0.55);
+        background: rgba(239, 239, 239, 0.55);
         padding-left: 12px;
         border-radius: 4px;
         height: 36px;
@@ -173,21 +176,21 @@ export default {
         top: 20px;
       }
     }
-section {
+
+    section {
       width: 95%;
       margin: 0 auto;
       margin-top: 8px;
       border-radius: 2px;
-}
-  .scrollContent{
-    padding-bottom: 80px;
     }
-.descript {
+
+    .descript {
       width: 100%;
       height: 44px;
       display: flex;
       flex-direction: row;
       background: #fff;
+
       img {
         width: 30px;
         height: 30px;
@@ -195,6 +198,7 @@ section {
         margin-top: 8px;
         // margin-right: 8px;
       }
+
       .linkPic {
         width: 16px;
         height: 16px;
@@ -202,6 +206,7 @@ section {
         margin-left: -7px;
         margin-right: 10px;
       }
+
       .produc {
         height: 44px;
         display: flex;
@@ -216,7 +221,8 @@ section {
         border-bottom: 1px solid #F3F3F7;
       }
     }
-.tario {
+
+    .tario {
       width: 100%;
       height: 60px;
       position: relative;
@@ -227,23 +233,60 @@ section {
         position: absolute;
         left: 50px;
       }
+
       .wrap:nth-of-type(2) {
         height: 60px;
         position: absolute;
         right: 30px;
       }
+
       p {
         height: 30px;
         line-height: 30px;
         font-family: PingFangSC-Regular;
         font-size: 13px;
-        color: rgba(56,63,69,0.60);
+        color: rgba(56, 63, 69, 0.60);
+
         span:nth-of-type(2) {
           margin-left: 16px;
-           color: rgb(56,63,69);
+          color: rgb(56, 63, 69);
+        }
+      }
+    }
+    .content{
+      position: absolute;
+      top:0;
+    }
+    .scrollContent{
+     padding-top: 1.92rem;
+      padding-bottom: 20px;
+    }
+  }
+  .platform-ios {
+    #trial {
+      .scrollContent {
+        padding-top: 2.32rem;
+      }
+    }
+  }
+  // iPhoneX适配
+  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
+    .platform-ios {
+      #trial {
+        .scrollContent {
+          padding-top: 2.72rem;
+        }
+      }
+    }
+  }
+  // iPhoneXR适配
+  @media (device-width: 414px) and (device-height: 896px) {
+    .platform-ios {
+      #trial {
+        .scrollContent {
+          padding-top: 2.72rem;
+        }
+      }
     }
   }
-}
-
-}
 </style>