zc

src/App.vue

@@ -1,11 +1,21 @@
 <template>
   <!--<dv-full-screen-container style="display: flex;flex-direction: column;height:1080px;width:1920px;">-->
   <div id="app"
-       :class="screenHeight>500&&screenHeight<760?'appWindowSize1366':(
-                 screenHeight>760&&screenHeight<900?'appWindowSize1440':(
-                 screenHeight>900&&screenHeight<1070?'appWindowSize1920':''
-                 ))">
-    <!--大于上一个尺寸的最大基数小于当前尺寸的最大基数-->
+       :class="desktopWidth==1366&&windowHeight<748&&desktopHeight<=768?'appWindowSize1366_768':(
+               desktopWidth==1360&&windowHeight<748&&desktopHeight<=768?'appWindowSize1366_760':(
+               desktopWidth==1360&&windowHeight>758&&desktopHeight<=768?'appWindowSize1366_768_max':(
+               desktopWidth==1440&&windowHeight<880&&desktopHeight>768&&desktopHeight<=900?'appWindowSize1440_900':(
+               desktopWidth==1440&&windowHeight>890&&desktopHeight>768&&desktopHeight<=900?'appWindowSize1440_900_max':(
+               desktopWidth==1400&&windowHeight<1030&&desktopHeight>900&&desktopHeight<=1050?'appWindowSize1400_1050':(
+               desktopWidth==1400&&windowHeight>1040&&desktopHeight>900&&desktopHeight<=1050?'appWindowSize1400_1050_max':(
+               desktopWidth==1600&&windowHeight<880&&desktopHeight>768&&desktopHeight<=900?'appWindowSize1600_900':(
+               desktopWidth==1680&&windowHeight<1030&&desktopHeight>900&&desktopHeight<=1050?'appWindowSize1680_1050':(
+               desktopWidth==1680&&windowHeight>1040&&desktopHeight>900&&desktopHeight<=1050?'appWindowSize1680_1050_max':(
+               desktopWidth==2560&&windowHeight<1420&&desktopHeight>1080&&desktopHeight<=1440?'appWindowSize2560_1440':(
+               desktopWidth==2560&&windowHeight<1580&&desktopHeight>1440&&desktopHeight<=1600?'appWindowSize2560_1600':(
+               desktopWidth==2560&&windowHeight>1590&&desktopHeight>1440&&desktopHeight<=1600?'appWindowSize2560_1600_max':(
+               desktopWidth==1920&&windowHeight<1060&&desktopHeight>1050&&desktopHeight<=1080?'appWindowSize1920_1080':''
+               )))))))))))))">
     <router-view />
   </div>
   <!--</dv-full-screen-container>-->
@@ -16,9 +26,9 @@
     name:  'App',
     data() {
       return {
-        screenHeight:'',
-        screenWidth:'',
-        num:this.screenHeight - 100,
+        windowHeight:"",
+        desktopHeight:"",
+        desktopWidth:"",
       }
     },
     metaInfo() {
@@ -30,22 +40,22 @@
       }
     },
     mounted(){
-      this.screenHeight = screen.height;
-      this.screenWidth = document.body.clientWidth;
-      console.log("document.body.clientWidth",document.body.clientWidth);
-      console.log("screen.height",screen.height);
-      document.getElementById('app').style.transform = `scale(${document.body.clientWidth / 1920})`
-      if(document.body.clientWidth<1540){
-        document.getElementById('app').style.marginLeft = '-'+((1-document.body.clientWidth/1920)*1920/2)+'px'
-        document.getElementById('app').style.marginTop = '-'+((1-document.body.clientWidth/1920)*1080/2)+'px'
-      }
+      this.windowHeight = document.body.clientHeight;
+      this.desktopHeight = screen.height;
+      this.desktopWidth = screen.width;
+      console.log("windowHeight",this.windowHeight)
+      console.log("desktopHeight",this.desktopHeight)
+      console.log("desktopWidth",this.desktopWidth)
+      document.getElementById('app').style.transform = `scale(${document.body.clientWidth / 1920})`;
       window.onresize = () => {
         return (() => {
-          document.getElementById('app').style.transform = `scale(${document.body.clientWidth / 1920})`
-          if(document.body.clientWidth<1540){
-            document.getElementById('app').style.marginLeft = '-'+((1-document.body.clientWidth/1920)*1920/2)+'px'
-            document.getElementById('app').style.marginTop = '-'+((1-document.body.clientWidth/1920)*1080/2)+'px'
-          }
+          this.windowHeight = document.body.clientHeight;
+          this.desktopHeight = screen.height;
+          this.desktopWidth = screen.width;
+          console.log("windowHeight",this.windowHeight)
+          console.log("desktopHeight",this.desktopHeight)
+          console.log("desktopWidth",this.desktopWidth)
+          document.getElementById('app').style.transform = `scale(${document.body.clientWidth / 1920})`;
         })();
       };
     },
@@ -56,27 +66,56 @@
     margin:0;
     height:100%;
     width:100%;
-  }
-
-  body::-webkit-scrollbar{
-    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-  }
-  body::-webkit-scrollbar-thumb{
-    border-radius: 5px;
-    -webkit-box-shadow: inset 0 0 5px #999;
-    background: #fff;
-  }
-  body::-webkit-scrollbar-track{
-    -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
-    border-radius: 0;
-    background: rgba(255,255,255,0);
+    overflow: hidden;
   }
   #app{
     height:1080px;
     width:1920px;
+    transform-origin: left top;
     display: flex;
     flex-direction: column;
     flex:1;
   }
+  .appWindowSize1366_768{
+    height:calc(1080px - 200px)!important;
+  }
+  .appWindowSize1366_760{
+    height:calc(1083px - 200px)!important;
+  }
+  .appWindowSize1366_768_max{
+    height:142%!important;
+  }
+  .appWindowSize1440_900{
+    height:calc(1080px - 70px)!important;
+  }
+  .appWindowSize1440_900_max{
+    height:134%!important;
+  }
+  .appWindowSize1400_1050{
+    height:138%!important;
+  }
+  .appWindowSize1400_1050_max{
+    height:138%!important;
+  }
+  .appWindowSize1600_900{
+    height:calc(1080px - 170px)!important;
+  }
+  .appWindowSize1680_1050{
+    height:calc(1080px - 40px)!important;
+  }
+  .appWindowSize1680_1050_max{
+    height:115%!important;
+  }
+  .appWindowSize1920_1080{
+    height:calc(1080px - 140px)!important;
+  }
+  .appWindowSize2560_1440{
+    height:calc(1080px - 110px)!important;
+  }
+  .appWindowSize2560_1600{
+    /*height:calc(1080px - 120px)!important;*/
+  }
+  .appWindowSize2560_1600_max{
+    /*height:115%!important;*/
+  }
 </style>

src/views/home.vue

@@ -162,7 +162,7 @@
           </div>
         </div>
       </div>
-      <div class="bottom-null-box"></div>
+      <!--<div class="bottom-null-box"></div>-->
     <!--</dv-full-screen-container>-->
     <backAnimation v-if="userType != '22'&&initPage == 'true'"></backAnimation>
   </div>