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

package-lock.json

@@ -20,6 +20,7 @@
         "jquery": "^3.5.1",
         "js-base64": "^2.6.2",
         "moment": "^2.29.1",
+        "qs": "latest",
         "sortablejs": "^1.14.0",
         "v-charts": "^1.19.0",
         "vant": "^2.12.36",
@@ -27,6 +28,7 @@
         "vue": "^2.6.11",
         "vue-clipboard2": "^0.3.1",
         "vue-contextmenujs": "^1.3.13",
+        "vue-custom-scrollbar": "^1.4.4",
         "vue-i18n": "^8.22.4",
         "vue-router": "^3.2.0",
         "vuex": "^3.4.0"
@@ -12870,6 +12872,11 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/perfect-scrollbar": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmmirror.com/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz",
+      "integrity": "sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g=="
+    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -13528,7 +13535,6 @@
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
       "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.6"
       }
@@ -15896,6 +15902,15 @@
       "resolved": "https://registry.npm.taobao.org/vue-contextmenujs/download/vue-contextmenujs-1.3.13.tgz",
       "integrity": "sha1-O9rgI8e9QgleeNpCWAACUNUKuO8="
     },
+    "node_modules/vue-custom-scrollbar": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmmirror.com/vue-custom-scrollbar/-/vue-custom-scrollbar-1.4.4.tgz",
+      "integrity": "sha512-GKXEmLgUpH0Z+l4Y1TChgLpcKWXqdOOelfssuQakhPy/vvA4b5tqbWdvitCu1+zJlv+5vHa8BrUhlz1gJuZHgQ==",
+      "dependencies": {
+        "perfect-scrollbar": "^1.5.3",
+        "vue": "^2.6.11"
+      }
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -27628,6 +27643,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "perfect-scrollbar": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmmirror.com/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz",
+      "integrity": "sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g=="
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -28179,8 +28199,7 @@
     "qs": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
+      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
-      "dev": true
     },
     "query-string": {
       "version": "4.3.4",
@@ -30191,6 +30210,15 @@
       "resolved": "https://registry.npm.taobao.org/vue-contextmenujs/download/vue-contextmenujs-1.3.13.tgz",
       "integrity": "sha1-O9rgI8e9QgleeNpCWAACUNUKuO8="
     },
+    "vue-custom-scrollbar": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmmirror.com/vue-custom-scrollbar/-/vue-custom-scrollbar-1.4.4.tgz",
+      "integrity": "sha512-GKXEmLgUpH0Z+l4Y1TChgLpcKWXqdOOelfssuQakhPy/vvA4b5tqbWdvitCu1+zJlv+5vHa8BrUhlz1gJuZHgQ==",
+      "requires": {
+        "perfect-scrollbar": "^1.5.3",
+        "vue": "^2.6.11"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -19,6 +19,7 @@
     "jquery": "^3.5.1",
     "js-base64": "^2.6.2",
     "moment": "^2.29.1",
+    "qs": "latest",
     "sortablejs": "^1.14.0",
     "v-charts": "^1.19.0",
     "vant": "^2.12.36",
@@ -26,10 +27,10 @@
     "vue": "^2.6.11",
     "vue-clipboard2": "^0.3.1",
     "vue-contextmenujs": "^1.3.13",
+    "vue-custom-scrollbar": "^1.4.4",
     "vue-i18n": "^8.22.4",
     "vue-router": "^3.2.0",
-    "vuex": "^3.4.0",
+    "vuex": "^3.4.0"
-    "qs": "latest"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/pages/phone/databaseSearch.vue

@@ -237,6 +237,7 @@ export default {
     box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
     .standTitle{
       .title{
+        font-size: 3.4vw;
         color: #333333;
         font-weight: 600;
         height: auto;
@@ -247,6 +248,7 @@ export default {
       }
     }
     .standContent{
+      font-size: 3.4vw;
       color: #555555;
       font-weight: 450;
       margin-top: 5px;
@@ -256,6 +258,7 @@ export default {
         line-height: 35px;
       }
       .standSubTime{
+        font-size: 3.4vw;
         padding-left: 10px;
         height: 35px;
         line-height: 35px;

src/pages/phone/domesticDetails.vue

@@ -1,6 +1,6 @@
 <!--国内标准法规详情页-->
 <template>
-  <div class="other-standard-details v-class" :class="{'hidden': !isMoreAwayBtn}">
+  <div class="other-standard-details v-class" :style="'width:' + (500) + 'px;'+'height:' + (screenHeight) + 'px'" :class="{'hidden': !isMoreAwayBtn}">
     <!--title 标题-->
     <div class="details-header">
       <span v-if="sarStandardsInfoEO.standYear === null">{{ sarStandardsInfoEO.standSortShow || '' }} {{
@@ -61,7 +61,7 @@
                       <div style="position: relative;margin-left: 214px; line-height: 32px">
                         <div v-for="(file, fileIndex) in child1Func(child.value)" style="display: flex;">
                           <span v-if="child.value && child.value.length > 0 && child.value.length === 1" style="display: flex; align-items: center;">
-                            <a style="font-size: 16px;color: #409EFF;cursor: pointer;display: inline-block"
+                            <a style="font-size:0.2rem;color: #409EFF;cursor: pointer;display: inline-block"
                                @click="openFileInPdf(file.id, file.oldFileName)" target="_blank"
                                :title="file.oldFileName">{{ file.oldFileName | ellipsis50}}</a>
                             <!--                      <span class="time-text">上传时间：{{ dateFormat(file.modifyTime) }}</span>-->
@@ -172,7 +172,7 @@
                       }}</span>
                     </p>
                     <p class="half">
-                      <label style=" margin-right: 84px;">是否纳入认证清单</label><span>{{
+                      <label style=" margin-right: 34vw;">是否纳入认证清单</label><span>{{
                         sarStandardsInfoEO.isRelateAccess ? (sarStandardsInfoEO.isRelateAccess === '1' ? '是' : '否') : '-'
                       }}</span>
                     </p>
@@ -1516,6 +1516,8 @@ export default {
   },
   data() {
     return {
+      screenWidth: document.body.offsetWidth - 141,
+      screenHeight: document.documentElement.clientHeight,
       externalStatus:'',
       handleList: [],
       CycxOptions: [],
@@ -3439,6 +3441,18 @@ export default {
     })
   },*/
   async 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
+      })()
+    }
     let external = localStorage.getItem("external");
     if(external !== undefined && external !== null){
       this.externalStatus = external
@@ -3740,6 +3754,7 @@ export default {
   overflow: auto;
   height: 100%;
   background: #FFFFFF;
+  overflow: auto;
 
   .itemsTextBox {
     min-height: 300px;
@@ -3846,7 +3861,7 @@ export default {
 
   .details-header {
     padding: 34px 0;
-    font-size: 20px;
+    font-size: 0.3rem;
     font-weight: bold;
     color: #555555;
     text-align: center;
@@ -3869,7 +3884,7 @@ export default {
         border-bottom: 1px solid #E5E5E5;
 
         .modular-header-title {
-          font-size: 18px;
+          font-size: 0.25rem;
           font-weight: bold;
           color: #3B424C;
 
@@ -3946,7 +3961,7 @@ export default {
 
       .basic-information-content {
         color: #333333;
-        font-size: 16px;
+        font-size: 0.2rem;
         /*font-weight: 400;*/
 
         .standard-text {
@@ -3998,7 +4013,7 @@ export default {
             width: 213px;
             height: 43px;
             line-height: 43px;
-            font-size: 16px;
+            font-size: 0.2rem;
             color: #333333;
             vertical-align: top;
             overflow: hidden;
@@ -4010,6 +4025,7 @@ export default {
             line-height: 32px;
             display: inline-block;
             width: calc(~'100% - 225px');
+            font-size: 0.2rem;
             //min-height: 50px;
             //line-height: 50px;
             //font-size: 16px;
@@ -4021,6 +4037,7 @@ export default {
           }
 
           .modular-content-p-flies {
+            font-size: 0.2rem;
             line-height: 32px;
             //position: relative;
             display: inline-block;

src/pages/phone/domesticStand.vue

@@ -525,7 +525,6 @@ export default {
 #domestic-stand{
   width: 100%;
   height: 100%;
-  overflow: auto;
   margin: 0;
   padding: 0;
   background: #F6F6F6;
@@ -574,6 +573,7 @@ export default {
     box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
     .standTitle{
       .title{
+        font-size: 3.4vw;
         color: #333333;
         font-weight: 600;
         height: auto;
@@ -584,6 +584,7 @@ export default {
       }
     }
     .standContent{
+      font-size: 3.4vw;
       color: #333333;
       font-weight: 500;
       margin-top: 5px;
@@ -599,6 +600,7 @@ export default {
       }
     }
     .content-time{
+       font-size: 3.4vw;
        width: 100%;
        height: 35px;
        margin-top: 5px;

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"
+              v-model="searchKey"
-        show-action
+              show-action
-        placeholder="请输入搜索关键词"
+              placeholder="请输入搜索关键词"
-        @search="onSearch"
+              @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;
+     height: 4rem;
-     width: 100%;
+     width: 100vw;
-     background: url("../../assets/images/phone/homeTop.png");
+     background: url("../../assets/images/phone/homeTop.png") no-repeat center;
-     background-size:100% 100%;
+     background-size:100vw 40vh;
+     position: relative;
     .top-title{
       position: absolute;
       top: 15px;
       left: 15px;
-      width: 30%;
+      width: 23vw;
-      height: 5%;
+      height: 0.8rem;
       background: url("../../assets/images/phone/phoneTitle.png") no-repeat;
       background-size: 100% 100%;
     }
     .home-title{
       color: #FFFFFF;
       position: absolute;
-      top: 12%;
+      top: 1.5rem;
-      left: 25%
+      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;
+      width: 1rem;
-      height: 50px;
+      height: 1rem;
       position: absolute;
       background-size: 100% 100%;
     }
-    .content-box{
+    .content-box1{
-      top: 39%;
+      top: 0.7rem;
-      left: 20%;
+      left: 16.3vw;
       background: url("../../assets/images/phone/domesticStand.png");
     }
     .content-box2{
-      top: 39%;
+      top: 0.7rem;
-      left: 65%;
+      left: 16.3vw;
       background: url("../../assets/images/phone/overseasStand.png");
     }
     .content-box3{
-      top: 58%;
+      top: 0.7rem;
-      left: 20%;
+      left: 16.3vw;
       background: url("../../assets/images/phone/policyStand.png");
     }
     .content-box4{
-      top: 58%;
+      top: 0.7rem;
-      left: 65%;
+      left: 16.3vw;
       background: url("../../assets/images/phone/dynamicsStand.png");
     }
     .content-span{
       color: #000000;
-      font-size: 16px;
+      font-size: 0.3rem;
       font-weight: 500;
     }
   }

src/pages/phone/standDynamics.vue

@@ -268,6 +268,7 @@ export default {
 
     .standTitle {
       .title {
+        font-size: 3.4vw;
         color: #333333;
         font-weight: 600;
         height: auto;
@@ -279,6 +280,7 @@ export default {
     }
 
     .standContent {
+      font-size: 3.4vw;
       color: #555555;
       font-weight: 450;
       margin-top: 5px;
@@ -290,6 +292,7 @@ export default {
       }
 
       .standSubTime {
+        font-size: 3.4vw;
         padding-left: 10px;
         height: 35px;
         line-height: 35px;

yarn.lock

@@ -6555,6 +6555,11 @@
     "safe-buffer" "^5.0.1"
     "sha.js" "^2.4.8"
 
+"perfect-scrollbar@^1.5.3":
+  "integrity" "sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g=="
+  "resolved" "https://registry.npmmirror.com/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz"
+  "version" "1.5.5"
+
 "performance-now@^2.1.0":
   "integrity" "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
   "resolved" "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz"
@@ -7140,7 +7145,7 @@
   "resolved" "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz"
   "version" "6.5.2"
 
-"qs@6.7.0":
+"qs@6.7.0", "qs@latest":
   "integrity" "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
   "resolved" "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz"
   "version" "6.7.0"
@@ -8715,6 +8720,14 @@
   "resolved" "https://registry.npm.taobao.org/vue-contextmenujs/download/vue-contextmenujs-1.3.13.tgz"
   "version" "1.3.13"
 
+"vue-custom-scrollbar@^1.4.4":
+  "integrity" "sha512-GKXEmLgUpH0Z+l4Y1TChgLpcKWXqdOOelfssuQakhPy/vvA4b5tqbWdvitCu1+zJlv+5vHa8BrUhlz1gJuZHgQ=="
+  "resolved" "https://registry.npmmirror.com/vue-custom-scrollbar/-/vue-custom-scrollbar-1.4.4.tgz"
+  "version" "1.4.4"
+  dependencies:
+    "perfect-scrollbar" "^1.5.3"
+    "vue" "^2.6.11"
+
 "vue-hot-reload-api@^2.3.0":
   "integrity" "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
   "resolved" "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz"