'试算样式'

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,150 +59,155 @@
 </template>
 
 <script>
-export default {
-  name: 'FinancingTrial',
-  data () {
-    return {
-      lists: [],
-      plan_price: '',
-      price_date_to: '',
-    }
-  },
-  computed: {},
-  watch: {},
-  beforeRouteEnter (to, from, next) {
-    next(vm => {
-      if (from.name === 'ProDetailed') {
-        vm.price_date_to = vm.$route.params.price_date_to // 有效日期
-        vm.plan_price = vm.$route.params.plan_price // 参考价
-        vm.calculationQuery('collect')
-      } else if (from.name === 'HomePage') {
-        vm.calculationQuery()
-        vm.price_date_to = '' // 清除缓存（从收藏带来的数据）
-        vm.plan_price = ''
+  export default {
+    name: 'FinancingTrial',
+    data() {
+      return {
+        lists: [],
+        plan_price: '',
+        price_date_to: '',
       }
-    })
-    next()
-  },
-  activated () {
-
-  },
-  created () {
-
-  },
-  methods:
- {
-   goDetails (val) {
-     this.$router.push({
-       name: 'FinancingDetails',
-       params: {
-         product_plan_id: val,
-         plan_price: this.plan_price,
-         price_date_to: this.price_date_to,
-       },
-     })
-   },
-   // 试算查询
-   calculationQuery (val) {
-     let vm = this
-     if (val) {
-       let url = $config.basePath + 'prd_product_calculation_query'
-       let param = {
-         division: window.sessionStorage.division, // 收藏到试算通过产品线查询
-       }
-       vm.hlsPopup.showLoading('数据加载中')
-       vm.hlsHttp.post(url, param).then(function (res) {
-         vm.hlsPopup.hideLoading()
-         if (res.result === 'S') {
-           vm.lists = res.lists
-           if (res.lists.length > 0 && res.lists.length < 10) {
-             vm.$refs.scroll.update(true)
-           }
-         } else {
-           hlsPopup.showLongCenter(res.message)
-         }
-       })
-     } else {
-       let url = $config.basePath + 'prd_calculation_query'
-       let param = {}
-       vm.hlsPopup.showLoading('数据加载中')
-       vm.hlsHttp.post(url, param).then(function (res) {
-         vm.hlsPopup.hideLoading()
-         if (res.result === 'S') {
-           vm.lists = res.lists
-           if (res.lists.length > 0 && res.lists.length < 10) {
-             vm.$refs.scroll.update(true)
-           }
-         } else {
-           hlsPopup.showLongCenter(res.message)
-         }
-       })
-     }
-   },
- },
-}
+    },
+    computed: {},
+    watch: {},
+    beforeRouteEnter(to, from, next) {
+      next(vm => {
+        if (from.name === 'ProDetailed') {
+          vm.price_date_to = vm.$route.params.price_date_to // 有效日期
+          vm.plan_price = vm.$route.params.plan_price // 参考价
+          vm.calculationQuery('collect')
+        } else if (from.name === 'HomePage') {
+          vm.calculationQuery()
+          vm.price_date_to = '' // 清除缓存（从收藏带来的数据）
+          vm.plan_price = ''
+        }
+      })
+      next()
+    },
+    activated() {
+
+    },
+    created() {
+
+    },
+    methods:
+      {
+        goDetails(val) {
+          this.$router.push({
+            name: 'FinancingDetails',
+            params: {
+              product_plan_id: val,
+              plan_price: this.plan_price,
+              price_date_to: this.price_date_to,
+            },
+          })
+        },
+        // 试算查询
+        calculationQuery(val) {
+          let vm = this
+          if (val) {
+            let url = $config.basePath + 'prd_product_calculation_query'
+            let param = {
+              division: window.sessionStorage.division, // 收藏到试算通过产品线查询
+            }
+            vm.hlsPopup.showLoading('数据加载中')
+            vm.hlsHttp.post(url, param).then(function (res) {
+              vm.hlsPopup.hideLoading()
+              if (res.result === 'S') {
+                vm.lists = res.lists
+                if (res.lists.length > 0 && res.lists.length < 10) {
+                  vm.$refs.scroll.update(true)
+                }
+              } else {
+                hlsPopup.showLongCenter(res.message)
+              }
+            })
+          } else {
+            let url = $config.basePath + 'prd_calculation_query'
+            let param = {}
+            vm.hlsPopup.showLoading('数据加载中')
+            vm.hlsHttp.post(url, param).then(function (res) {
+              vm.hlsPopup.hideLoading()
+              if (res.result === 'S') {
+                vm.lists = res.lists
+                if (res.lists.length > 0 && res.lists.length < 10) {
+                  vm.$refs.scroll.update(true)
+                }
+              } else {
+                hlsPopup.showLongCenter(res.message)
+              }
+            })
+          }
+        },
+      },
+  }
 </script>
 <style lang='less'>
-#trial {
-.search {
-    background-color: #fff;
-    padding: 8px 12px;
-    position: relative;
-    margin-bottom: 8px;
-    input {
-      background: rgba(239,239,239,0.55);
-      padding-left: 12px;
-      border-radius: 4px;
-      height: 36px;
+  #trial {
+    .search {
+      background-color: #fff;
+      padding: 8px 12px;
+      position: absolute;
       width: 100%;
-      font-family: PingFangSC-Regular;
-      font-size: 14px;
-      color: #888C8F;
-      line-height: 36px;
-    }
+      z-index: 100;
+      margin-bottom: 8px;
 
-    input::placeholder {
-      font-size: 14px;
-      color: #888C8F;
-    }
+      input {
+        background: rgba(239, 239, 239, 0.55);
+        padding-left: 12px;
+        border-radius: 4px;
+        height: 36px;
+        width: 100%;
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        color: #888C8F;
+        line-height: 36px;
+      }
 
-    img {
-      position: absolute;
-      height: 16px;
-      right: 25px;
-      top: 20px;
+      input::placeholder {
+        font-size: 14px;
+        color: #888C8F;
+      }
+
+      img {
+        position: absolute;
+        height: 16px;
+        right: 25px;
+        top: 20px;
+      }
     }
-  }
-section {
-  width: 95%;
-  margin: 0 auto;
-  margin-top: 8px;
-  border-radius: 2px;
-}
-  .scrollContent{
-    padding-bottom: 80px;
-  }
-.descript {
-    width: 100%;
-    height: 44px;
-    display: flex;
-    flex-direction: row;
-    background: #fff;
-    img {
-      width: 30px;
-      height: 30px;
-      margin-left: 10px;
+
+    section {
+      width: 95%;
+      margin: 0 auto;
       margin-top: 8px;
-     // margin-right: 8px;
+      border-radius: 2px;
     }
-    .linkPic {
-      width: 16px;
+
+    .descript {
+      width: 100%;
+      height: 44px;
+      display: flex;
+      flex-direction: row;
+      background: #fff;
+
+      img {
+        width: 30px;
+        height: 30px;
+        margin-left: 10px;
+        margin-top: 8px;
+        // margin-right: 8px;
+      }
+
+      .linkPic {
+        width: 16px;
         height: 16px;
         margin-top: 15px;
         margin-left: -7px;
         margin-right: 10px;
-    }
-    .produc {
+      }
+
+      .produc {
         height: 44px;
         display: flex;
         flex: 1;
@@ -214,36 +219,74 @@ section {
         margin-left: 10px;
         font-family: PingFangSC-Semibold;
         border-bottom: 1px solid #F3F3F7;
+      }
     }
-    }
-.tario {
-    width: 100%;
-    height: 60px;
-    position: relative;
-    background: #fff;
-    // margin-bottom: 8px;
-    .wrap:nth-of-type(1) {
+
+    .tario {
+      width: 100%;
+      height: 60px;
+      position: relative;
+      background: #fff;
+      // margin-bottom: 8px;
+      .wrap:nth-of-type(1) {
         height: 60px;
         position: absolute;
         left: 50px;
-    }
-    .wrap:nth-of-type(2) {
+      }
+
+      .wrap:nth-of-type(2) {
         height: 60px;
         position: absolute;
         right: 30px;
-    }
-    p {
+      }
+
+      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);
-       }
+          margin-left: 16px;
+          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>