页面更新

src/views/allMaterials_appliances_high.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="all">
-        <img class="pageContent" :style="{top:-Hig+'rem'}" src="../assets/allMaterials/appliances_high.jpg">
+        <img class="pageContent" src="../assets/allMaterials/appliances_high.jpg">
         <sidebar class="sidebarSty"></sidebar>
     </div>
 </template>
@@ -11,19 +11,7 @@
         name: "allMaterials_appliances_high",
         components:{
             Sidebar
-        },
-      data(){
-          return{
-            Hig:0
-          }
-      },
-
-      mounted() {
-        var Wid = window.innerWidth;
-        var Hig = window.innerHeight;
-        var height = 750/Wid*Hig;
-        this.Hig  = 1.5-(height-1206)/2/100;
-      },
+        }
     }
 </script>
 
@@ -34,6 +22,7 @@
         left: 0;
         width: 7.5rem;
         height: 33.72rem;
+        margin-top: calc((100vh - 1206/750*100vw)/2 - 150/750*100vw);
     }
     .sidebarSty{
         position: fixed!important;

src/views/allMaterials_appliances_standard.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="all">
-        <img class="pageContent" :style="{top:-Hig+'rem'}" src="../assets/allMaterials/appliances_standard.jpg">
+        <img class="pageContent" src="../assets/allMaterials/appliances_standard.jpg">
         <sidebar class="sidebarSty"></sidebar>
     </div>
 </template>
@@ -11,19 +11,7 @@
         name: "allMaterials_appliances_standard",
         components:{
             Sidebar
-        },
-      data(){
-        return{
-          Hig:0
         }
-      },
-
-      mounted() {
-        var Wid = window.innerWidth;
-        var Hig = window.innerHeight;
-        var height = 750/Wid*Hig;
-        this.Hig  = 1.5-(height-1206)/2/100;
-      },
     }
 </script>
 

src/views/allMaterials_phone_high.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="all">
-        <img class="pageContent" :style="{top:-Hig+'rem'}" src="../assets/allMaterials/phone_high.jpg">
+        <img class="pageContent" src="../assets/allMaterials/phone_high.jpg">
         <sidebar class="sidebarSty"></sidebar>
     </div>
 </template>
@@ -11,19 +11,7 @@
         name: "allMaterials_phone_high",
         components:{
             Sidebar
-        },
-      data(){
-        return{
-          Hig:0
         }
-      },
-
-      mounted() {
-        var Wid = window.innerWidth;
-        var Hig = window.innerHeight;
-        var height = 750/Wid*Hig;
-        this.Hig  = 1.5-(height-1206)/2/100;
-      },
     }
 </script>
 
@@ -34,6 +22,7 @@
         left: 0;
         width: 7.5rem;
         height: 39.36rem;
+        margin-top: calc((100vh - 1206/750*100vw)/2 - 150/750*100vw);
     }
     .sidebarSty{
         position: fixed!important;

src/views/allMaterials_phone_standard.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="all">
-        <img class="pageContent" :style="{top:-Hig+'rem'}" src="../assets/allMaterials/phone_standard.jpg">
+        <img class="pageContent" src="../assets/allMaterials/phone_standard.jpg">
         <sidebar class="sidebarSty"></sidebar>
     </div>
 </template>
@@ -11,19 +11,7 @@
         name: "allMaterials_phone_standard",
         components:{
             Sidebar
-        },
-      data(){
-        return{
-          Hig:0
         }
-      },
-
-      mounted() {
-        var Wid = window.innerWidth;
-        var Hig = window.innerHeight;
-        var height = 750/Wid*Hig;
-        this.Hig  = 1.5-(height-1206)/2/100;
-      },
     }
 </script>
 
@@ -34,6 +22,7 @@
         left: 0;
         width: 7.5rem;
         height: 27.32rem;
+        margin-top: calc((100vh - 1206/750*100vw)/2 - 150/750*100vw);
     }
     .sidebarSty{
         position: fixed!important;

src/views/appliances_high_exhibition.vue

@@ -64,7 +64,7 @@
     }
     .contentImg{
         width: 6.93rem;
-        height: 11.94rem;
+        height: 12.14rem;
     }
     .pageRedDot{
         position: absolute;

src/views/appliances_high_outside.vue

@@ -64,7 +64,7 @@
     }
     .contentImg{
         width: 7.5rem;
-        height: 11.63rem;
+        height: 11.2rem;
     }
     .pageRedDot{
         position: absolute;

src/views/appliances_high_pay.vue

@@ -62,7 +62,7 @@
     }
     .contentImg{
         width: 6.93rem;
-        height: 11.15rem;
+        height: 10.72rem;
     }
     .pageRedDot{
         position: absolute;

src/views/appliances_standard_exhibition.vue

@@ -65,7 +65,7 @@
     }
     .contentImg{
         width: 6.93rem;
-        height: 11.88rem;
+        height: 12.13rem;
     }
     .pageRedDot{
         position: absolute;

src/views/appliances_standard_outside.vue

@@ -64,7 +64,7 @@
     }
     .contentImg{
         width: 6.93rem;
-        height: 11.63rem;
+        height: 11.2rem;
     }
     .pageRedDot{
         position: absolute;

src/views/appliances_standard_pay.vue

@@ -62,7 +62,7 @@
     }
     .contentImg{
         width: 6.93rem;
-        height: 11.15rem;
+        height: 10.72rem;
     }
     .pageRedDot{
         position: absolute;

src/views/phone_high_counter.vue

@@ -64,7 +64,7 @@
     }
     .contentImg{
         width: 6.93rem;
-        height: 11.85rem;
+        height: 11.68rem;
     }
     .pageRedDot{
         position: absolute;

src/views/phone_high_outside.vue

@@ -64,7 +64,7 @@
     }
     .contentImg{
         width: 7.5rem;
-        height: 11.63rem;
+        height: 11.21rem;
     }
     .pageRedDot{
         position: absolute;

src/views/phone_high_pay.vue

@@ -62,7 +62,7 @@
     }
     .contentImg{
         width: 6.93rem;
-        height: 11.15rem;
+        height: 10.72rem;
     }
     .pageRedDot{
         position: absolute;

src/views/phone_high_within.vue

@@ -63,7 +63,7 @@
     }
     .contentImg{
         width: 6.93rem;
-        height: 11.67rem;
+        height: 11.68rem;
     }
     .pageRedDot{
         position: absolute;

src/views/phone_standard_counter.vue

@@ -64,7 +64,7 @@
     }
     .contentImg{
         width: 6.93rem;
-        height: 11.91rem;
+        height: 11.67rem;
     }
     .pageRedDot{
         position: absolute;

src/views/phone_standard_outside.vue

@@ -64,7 +64,7 @@
     }
     .contentImg{
         width: 6.93rem;
-        height: 11.63rem;
+        height: 11.21rem;
     }
     .pageRedDot{
         position: absolute;

src/views/phone_standard_pay.vue

@@ -62,7 +62,7 @@
     }
     .contentImg{
         width: 6.93rem;
-        height: 11.15rem;
+        height: 10.71rem;
     }
     .pageRedDot{
         position: absolute;

src/views/phone_standard_within.vue

@@ -62,7 +62,7 @@
     }
     .contentImg{
         width: 6.93rem;
-        height: 11.63rem;
+        height: 11.2rem;
     }
     .pageRedDot{
         position: absolute;