zc

src/App.vue

@@ -1,21 +1,6 @@
 <template>
   <!--<dv-full-screen-container style="display: flex;flex-direction: column;height:1080px;width:1920px;">-->
-  <div id="app"
-       :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':''
-               )))))))))))))">
+  <div id="app">
     <router-view />
   </div>
   <!--</dv-full-screen-container>-->
@@ -40,22 +25,14 @@
       }
     },
     mounted(){
-      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})`;
+      document.getElementById('app').style.height = (window.innerHeight/(document.body.clientWidth / 1920*100))*100+'px';
+      console.log("document.getElementById('app').style.height",document.getElementById('app').style.height)
       window.onresize = () => {
         return (() => {
-          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})`;
+          document.getElementById('app').style.height = (window.innerHeight/(document.body.clientWidth / 1920*100))*100+'px';
+          console.log("document.getElementById('app').style.height",document.getElementById('app').style.height)
         })();
       };
     },
@@ -69,53 +46,11 @@
     overflow: hidden;
   }
   #app{
-    height:1080px;
+    /*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>