bug

postcss.config.js

 module.exports = {
   plugins: {
     autoprefixer: {},
-    'postcss-pxtorem': {
-      rootValue: 192.0,//136
-      propList: ['*']
-    }
+    // 'postcss-pxtorem': {
+    //   rootValue: 192.0,//136
+    //   propList: ['*']
+    // }
   }
 }

src/App.vue

@@ -20,6 +20,10 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 * {
   margin: 0;

src/views/Home.vue

@@ -7,7 +7,7 @@
         <turntable />
       </div>
     </div>
-		<div class="mainstandby" ref='mainstandby'>
+    <div class="mainstandby" ref="mainstandby">
       <div class="mainstandby1">
         <div class="title">Vmatrix-可视化云平台</div>
         <div class="description">
@@ -32,8 +32,8 @@
           </div>
         </div>
       </div>
-			<div class="mainbonding" ref='mainbonding'>
-				<div class="mainbonding1" ref='mainbonding1'>
+      <div class="mainbonding" ref="mainbonding">
+        <div class="mainbonding1" ref="mainbonding1">
           <div class="title">正在配置网络</div>
           <div class="description">
             <span>配置网络时请您保持网络稳定</span>
@@ -45,7 +45,6 @@
             <!-- <img :src="connectIdCode" alt=""> -->
           </div>
         </div>
-
       </div>
     </div>
     <div class="bottom-tips">
@@ -79,18 +78,18 @@
 </template>
 
 <script>
-	// @ is an alias to /src
-	import loading from "@/components/loading.vue";
-	import turntable from "@/components/turntable.vue";
+// @ is an alias to /src
+import loading from "@/components/loading.vue";
+import turntable from "@/components/turntable.vue";
 
-	const QRCode = require("qrcode");
-	import anime from "animejs/lib/anime.es.js";
-	// LAUNCH, // 启动页（预留）
-	// MAIN_INIT_QRCODE, // 初始化二维码页
-	// MAIN_BONDING, // 正在绑定
-	// MAIN_STANDBY, // 待机页
-	// SHOW; // 模版展示页
-	export default {
+const QRCode = require("qrcode");
+import anime from "animejs/lib/anime.es.js";
+// LAUNCH, // 启动页（预留）
+// MAIN_INIT_QRCODE, // 初始化二维码页
+// MAIN_BONDING, // 正在绑定
+// MAIN_STANDBY, // 待机页
+// SHOW; // 模版展示页
+export default {
   // name: 'Home',
   components: {
     // HelloWorld
@@ -145,7 +144,6 @@
         ],
         duration: 10000
       });
-
     },
     loadingFinished() {
       anime({
@@ -182,7 +180,6 @@
         duration: 3000,
         scale: [0, 1.3]
       });
-
     },
     MAIN_BONDING() {
       anime({
@@ -190,15 +187,14 @@
         translateX: "-50%",
         translateY: "-20%",
         // rotateY: [0, 360],
-					duration: 3000,
+        duration: 3000
       });
-
     },
     showTitle() {
       anime({
         targets: this.$refs["maininitqrcode"],
         width: 1920,
-					easing: 'linear'
+        easing: "linear"
       });
       /*anime({
 					targets: this.$refs["mainbonding"],
@@ -222,7 +218,7 @@
       anime({
         targets: this.$refs["mainbonding"],
         width: 1920,
-					easing: 'linear'
+        easing: "linear"
       });
     },
     showTitle3() {
@@ -244,9 +240,9 @@
       anime({
         targets: this.$refs["mainstandby"],
         width: 1920,
-					easing: 'linear'
+        easing: "linear"
       });
-			},
+    }
   },
   watch: {
     isConnected: function(value) {
@@ -258,7 +254,7 @@
       // }
     },
     loadingState: function(value) {
-				switch(value) {
+      switch (value) {
         case "LOADING":
           this.showLoading();
           break;
@@ -274,7 +270,7 @@
       }
     },
     state: function(value) {
-				switch(value) {
+      switch (value) {
         case "MAIN_INIT_QRCODE":
           this.MAIN_INIT_QRCODE();
           this.showTitle();
@@ -295,20 +291,32 @@
   mounted() {
     this.MAIN_INIT_QRCODE();
     window.addEventListener("resize", () => {
-				// document.body.style.zoom = window.innerWidth / 1920;
-				// this.$refs["home"].style.zoom = window.innerWidth/1920;
-			});
+			setZoom()
+		}, true);
+    const setZoom = () => {
+      var width = window.innerWidth;
+      var height = window.innerHeight;
+      let zoom = height / 1080;
+      if (width / height <= 16 / 9) {
+        zoom = width / 1920;
+      }
+      if (width / height >= 16 / 9) {
+        zoom = height / 1080;
+			}
+			console.log(zoom)
+      this.$refs["home"].style.zoom = zoom;
+    };
     // document.body.style.zoom = window.innerWidth / 1920;
     // alert(window.innerWidth)
     // alert(window.innerHeight)
-			//  this.$refs["home"].style.zoom = window.innerWidth/1920;
+    setZoom();
     // this.$refs["home"].style.transform = `scale(${window.innerWidth / 1920})`;
   },
   created() {
     window.test = this;
     this.toQRcode();
     new Promise((resolve, reject) => {
-				if(!window.jsbridge) {
+      if (!window.jsbridge) {
         reject();
       }
       window.jsbridge.init();
@@ -345,10 +353,10 @@
     // MAIN_STANDBY, // 待机页
     // SHOW; // 模版展示页
   }
-	};
+};
 </script>
 <style lang="scss" scoped>
-	.home {
+.home {
   height: 1080px;
   width: 1920px;
   margin: 0 auto;
@@ -446,7 +454,6 @@
     margin-top: -150px;
     overflow: hidden;
     right: 0;
-			
   }
   .mainbonding1 {
     position: absolute;
@@ -515,9 +522,9 @@
       color: rgba(255, 255, 255, 1);
     }
   }
-	}
+}
 
-	.progress-container {
+.progress-container {
   position: absolute;
   top: 0;
   left: 0;
@@ -566,23 +573,23 @@
       width: 50%;
     }
   }
-	}
+}
 
-	@keyframes rotate {
+@keyframes rotate {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
-	}
+}
 
-	@keyframes rotate {
+@keyframes rotate {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
-	}
+}
 </style>
\ No newline at end of file