feat: There is no way the, phoneHome 自适应

src/pages/phone/phoneHome.vue

@@ -1,5 +1,6 @@
 <template>
-  <div id="phone-home">
+  <div id="phone-home" :style="'height:' + (screenHeight) + 'px'">
+    <!-- 内容 -->
     <div class="search-top">
       <div class="top-title">
       </div>
@@ -7,10 +8,10 @@
     </div>
     <div class="search-head">
       <van-search
-        v-model="searchKey"
-        show-action
-        placeholder="请输入搜索关键词"
-        @search="onSearch"
+              v-model="searchKey"
+              show-action
+              placeholder="请输入搜索关键词"
+              @search="onSearch"
       >
         <template #action>
           <div @click="onSearch">搜索</div>
@@ -39,11 +40,23 @@
 </template>
 
 <script>
+import vueCustomScrollbar from 'vue-custom-scrollbar'
+
 export default {
   name: "phoneHome",
+  components: {
+    vueCustomScrollbar
+  },
   data() {
     return {
+      settings: {
+        suppressScrollY: false,
+        suppressScrollX: false,
+        wheelPropagation: false
+      },
       searchKey: "",
+      screenWidth: document.body.offsetWidth - 141,
+      screenHeight: document.documentElement.clientHeight,
     };
   },
   methods: {
@@ -70,37 +83,60 @@ export default {
         })
       }
     },
-  }
+  },
+  mounted() {
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        window.screenWidth = document.body.offsetWidth
+        that.$store.commit('width', window.screenWidth)
+        that.screenWidth = window.screenWidth - 141
+        window.screenHeight = document.documentElement.clientHeight
+        that.$store.commit('height', window.screenHeight)
+        that.screenHeight = window.screenHeight
+        that.objs.bodyWidth = window.screenWidth
+      })()
+    }
+  },
 };
 </script>
 
 <style lang="less" scoped>
+/deep/ .scroll-area {
+  position: relative;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+}
+
 #phone-home {
   width: 100%;
   height: 100%;
   background: #F6F6F6;
+  overflow: auto;
   .van-search .van-cell {
     padding: 10px;
   }
   .search-top{
-     height: 200px;
-     width: 100%;
-     background: url("../../assets/images/phone/homeTop.png");
-     background-size:100% 100%;
+     height: 4rem;
+     width: 100vw;
+     background: url("../../assets/images/phone/homeTop.png") no-repeat center;
+     background-size:100vw 40vh;
+     position: relative;
     .top-title{
       position: absolute;
       top: 15px;
       left: 15px;
-      width: 30%;
-      height: 5%;
+      width: 23vw;
+      height: 0.8rem;
       background: url("../../assets/images/phone/phoneTitle.png") no-repeat;
       background-size: 100% 100%;
     }
     .home-title{
       color: #FFFFFF;
       position: absolute;
-      top: 12%;
-      left: 25%
+      top: 1.5rem;
+      left: 17.3vw;
     }
   }
   .search-head{
@@ -112,6 +148,7 @@ export default {
     flex-wrap: wrap;
     background: #F6F6F6;
     .content-top {
+      position: relative;
       width: 47%;
       height: 150px;
       line-height: 230px;
@@ -123,34 +160,34 @@ export default {
     }
     .content-box{
       display: inline-block;
-      width: 50px;
-      height: 50px;
+      width: 1rem;
+      height: 1rem;
       position: absolute;
       background-size: 100% 100%;
     }
-    .content-box{
-      top: 39%;
-      left: 20%;
+    .content-box1{
+      top: 0.7rem;
+      left: 16.3vw;
       background: url("../../assets/images/phone/domesticStand.png");
     }
     .content-box2{
-      top: 39%;
-      left: 65%;
+      top: 0.7rem;
+      left: 16.3vw;
       background: url("../../assets/images/phone/overseasStand.png");
     }
     .content-box3{
-      top: 58%;
-      left: 20%;
+      top: 0.7rem;
+      left: 16.3vw;
       background: url("../../assets/images/phone/policyStand.png");
     }
     .content-box4{
-      top: 58%;
-      left: 65%;
+      top: 0.7rem;
+      left: 16.3vw;
       background: url("../../assets/images/phone/dynamicsStand.png");
     }
     .content-span{
       color: #000000;
-      font-size: 16px;
+      font-size: 0.3rem;
       font-weight: 500;
     }
   }