优化初始加载适配问题

src/assets/scss/indexassembly.scss

@@ -2,12 +2,17 @@
   color: #d3d6dd;
   width: 1920px;
   height: 1080px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  transform-origin: left top;
-  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  // position: absolute;
+  // top: 50%;
+  // left: 50%;
+  // transform: translate(-50%, -50%);
+  // transform-origin: left top;
+  // overflow: hidden;
   
   .bg {
     width: 100%;

src/assets/scss/indexpackage.scss

@@ -2,12 +2,17 @@
   color: #d3d6dd;
   width: 1920px;
   height: 1080px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  transform-origin: left top;
-  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  // position: absolute;
+  // top: 50%;
+  // left: 50%;
+  // transform: translate(-50%, -50%);
+  // transform-origin: left top;
+  // overflow: hidden;
   
   .bg {
     width: 100%;

src/assets/scss/indexsmt.scss

@@ -2,12 +2,17 @@
   color: #d3d6dd;
   width: 1920px;
   height: 1080px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  transform-origin: left top;
-  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  // position: absolute;
+  // top: 50%;
+  // left: 50%;
+  // transform: translate(-50%, -50%);
+  // transform-origin: left top;
+  // overflow: hidden;
   
   .bg {
     width: 100%;

src/assets/scss/indextotal.scss

@@ -2,12 +2,17 @@
   color: #d3d6dd;
   width: 1920px;
   height: 1080px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  transform-origin: left top;
-  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  // position: absolute;
+  // top: 50%;
+  // left: 50%;
+  // transform: translate(-50%, -50%);
+  // transform-origin: left top;
+  // overflow: hidden;
   
   .bg {
     width: 100%;

src/utils/drawMixin.js

@@ -1,17 +1,17 @@
 // 屏幕适配 mixin 函数
 
-// * 默认缩放值
-const scale = {
-  width: '1',
-  height: '1',
-}
+// // * 默认缩放值
+// const scale = {
+//   width: '1',
+//   height: '1',
+// }
 
-// * 设计稿尺寸（px）
-const baseWidth = 1920
-const baseHeight = 1080
+// // * 设计稿尺寸（px）
+// const baseWidth = 1920
+// const baseHeight = 1080
 
-// * 需保持的比例（默认1.77778）
-const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+// // * 需保持的比例（默认1.77778）
+// const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
 
 export default {
   data() {
@@ -28,27 +28,43 @@ export default {
     window.removeEventListener('resize', this.resize)
   },
   methods: {
+    // calcRate () {
+    //   const appRef = this.$refs["appRef"]
+    //   if (!appRef) return 
+    //   // 当前宽高比
+    //   const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
+    //   if (appRef) {
+    //     if (currentRate > baseProportion) {
+    //       // 表示更宽
+    //       scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
+    //       scale.height = (window.innerHeight / baseHeight).toFixed(5)
+    //       appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+    //     } else {
+    //       // 表示更高
+    //       scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
+    //       scale.width = (window.innerWidth / baseWidth).toFixed(5)
+    //       appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+    //     }
+    //   }
+    // },
     calcRate () {
       const appRef = this.$refs["appRef"]
       if (!appRef) return 
-      // 当前宽高比
-      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
+      const newWidth = window.innerWidth;
+      const newHeight = window.innerHeight;
+      
       if (appRef) {
-        if (currentRate > baseProportion) {
-          // 表示更宽
-          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
-          scale.height = (window.innerHeight / baseHeight).toFixed(5)
-          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
-        } else {
-          // 表示更高
-          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
-          scale.width = (window.innerWidth / baseWidth).toFixed(5)
-          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
-        }
+        let newScaleX = newWidth / 1920;
+        let newScaleY = newHeight / 1080;
+      
+        let newTranslateX = ((1920 - newWidth) / 2 / newWidth * 100).toFixed(5) + '%';
+        let newTranslateY = ((1080 - newHeight) / 2 / newHeight * 100).toFixed(5) + '%';
+        appRef.style.transform = `scale(${newScaleX.toFixed(5)}, ${newScaleY.toFixed(5)}) translate(-${newTranslateX}, -${newTranslateY})`
+        console.log(`scale(${newScaleX.toFixed(5)}, ${newScaleY.toFixed(5)}) translate(-${newTranslateX}, -${newTranslateY})`)
       }
     },
     resize () {
-      clearTimeout(this.drawTiming);
+      // clearTimeout(this.drawTiming);
       const isFullScreen = document.fullscreenElement
       if (isFullScreen) {
         this.isFullScreen = true;
@@ -59,9 +75,10 @@ export default {
         // this.$refs['fullScreen'].style.display='inline-block';
         //this.$refs['exitFullScreen'].style.display='none';
       }
-      this.drawTiming = setTimeout(() => {
-        this.calcRate()
-      }, 10000)
+      this.calcRate()
+      // this.drawTiming = setTimeout(() => {
+      //   this.calcRate()
+      // }, 10000)
     },
     fullScreen(){
       var docElm = document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");

src/views/assembly/index.vue

@@ -155,7 +155,9 @@ export default {
   mounted() {
     this.timeFn()
     this.cancelLoading()
-    this.autoFullScreen()
+    this.$nextTick(()=>{
+      this.autoFullScreen();
+    })
   },
   beforeDestroy () {
     clearInterval(this.timing)
@@ -176,18 +178,19 @@ export default {
     },
     autoFullScreen(){
       if (!this.isFullScreen) {
-        setTimeout(() => {
-          this.fullScreen();
-          /*this.$showMsgBox({
-            caption: "提示",
-            msg: '是否全屏展示？',
-            callback: (data) => {
-              if (data == "yes") {
-                this.fullScreen();
-              }
-            }
-          })*/
-        }, 3000)
+        this.fullScreen();
+        // setTimeout(() => {
+        //   this.fullScreen();
+        //   // this.$showMsgBox({
+        //   //   caption: "提示",
+        //   //   msg: '是否全屏展示？',
+        //   //   callback: (data) => {
+        //   //     if (data == "yes") {
+        //   //       this.fullScreen();
+        //   //     }
+        //   //   }
+        //   // })
+        // }, 3000)
       }
     },
     handleBlur (val){

src/views/hj/index.vue

@@ -154,7 +154,9 @@ export default {
   mounted() {
     this.timeFn()
     this.cancelLoading()
-    this.autoFullScreen()
+    this.$nextTick(()=>{
+      this.autoFullScreen();
+    })
   },
   beforeDestroy () {
     clearInterval(this.timing)
@@ -175,18 +177,19 @@ export default {
     },
     autoFullScreen(){
       if (!this.isFullScreen) {
-        setTimeout(() => {
-          this.fullScreen();
-          // this.$showMsgBox({
-          //   caption: "提示",
-          //   msg: '是否全屏展示？',
-          //   callback: (data) => {
-          //     if (data == "yes") {
-          //       this.fullScreen();
-          //     }
-          //   }
-          // })
-        }, 3000)
+        this.fullScreen();
+        // setTimeout(() => {
+        //   this.fullScreen();
+        //   // this.$showMsgBox({
+        //   //   caption: "提示",
+        //   //   msg: '是否全屏展示？',
+        //   //   callback: (data) => {
+        //   //     if (data == "yes") {
+        //   //       this.fullScreen();
+        //   //     }
+        //   //   }
+        //   // })
+        // }, 3000)
       }
     },
     handleBlur (val){

src/views/smt/index.vue

@@ -153,7 +153,9 @@ export default {
   mounted() {
     this.timeFn()
     this.cancelLoading();
-    this.autoFullScreen();
+    this.$nextTick(()=>{
+      this.autoFullScreen();
+    })
   },
   beforeDestroy () {
     clearInterval(this.timing)
@@ -174,18 +176,19 @@ export default {
     },
     autoFullScreen(){
       if (!this.isFullScreen) {
-        setTimeout(() => {
-          this.fullScreen();
-          // this.$showMsgBox({
-          //   caption: "提示",
-          //   msg: '是否全屏展示？',
-          //   callback: (data) => {
-          //     if (data == "yes") {
-          //       this.fullScreen();
-          //     }
-          //   }
-          // })
-        }, 3000)
+        this.fullScreen();
+        // setTimeout(() => {
+        //   this.fullScreen();
+        //   // this.$showMsgBox({
+        //   //   caption: "提示",
+        //   //   msg: '是否全屏展示？',
+        //   //   callback: (data) => {
+        //   //     if (data == "yes") {
+        //   //       this.fullScreen();
+        //   //     }
+        //   //   }
+        //   // })
+        // }, 3000)
       }
     },
     handleBlur (val){

src/views/total/index.vue

@@ -146,7 +146,9 @@ export default {
   mounted() {
     this.timeFn()
     this.cancelLoading()
-    this.autoFullScreen();
+    this.$nextTick(()=>{
+      this.autoFullScreen();
+    })
   },
   beforeDestroy () {
     clearInterval(this.timing)
@@ -167,18 +169,19 @@ export default {
     },
     autoFullScreen(){
       if (!this.isFullScreen){
-        setTimeout(() => {
-          this.fullScreen();
-          // this.$showMsgBox({
-          //   caption:"提示",
-          //   msg: '是否全屏展示？',
-          //   callback:(data) => {
-          //     if (data == "yes") {
-          //       this.fullScreen();
-          //     }
-          //   }
-          // })
-        }, 3000)
+        this.fullScreen();
+        // setTimeout(() => {
+        //   this.fullScreen();
+        //   // this.$showMsgBox({
+        //   //   caption: "提示",
+        //   //   msg: '是否全屏展示？',
+        //   //   callback: (data) => {
+        //   //     if (data == "yes") {
+        //   //       this.fullScreen();
+        //   //     }
+        //   //   }
+        //   // })
+        // }, 3000)
       }
     },
     handleBlur (val){