bug

src/views/Home.vue

@@ -7,7 +7,7 @@
         <turntable />
       </div>
     </div>
-    <div class="mainstandby" ref="mainstandby">
+    <div class="mainstandby" ref="mainstandby" v-show="state === 'MAIN_STANDBY'">
       <div class="mainstandby1">
         <div class="title">Vmatrix-可视化云平台</div>
         <div class="description">
@@ -18,7 +18,7 @@
     <div class="title" v-show="state === 'MAIN_USELESS'">设备不可用</div>
     <div class="title" v-show="state === 'LAUNCH'">启动页</div>
     <div class="content-container">
-      <div class="maininitqrcode" ref="maininitqrcode">
+      <div class="maininitqrcode" ref="maininitqrcode" v-show="state === 'MAIN_INIT_QRCODE'">
         <div class="maininitqrcode1">
           <div class="title">扫描二维码添加该设备</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" v-show="state === 'MAIN_BONDING'">
+        <div class="mainbonding1">
           <div class="title">正在配置网络</div>
           <div class="description">
             <span>配置网络时请您保持网络稳定</span>
@@ -167,7 +167,7 @@ export default {
         scale: [0, 0.5, 1],
         translateZ: [-1000, 0],
         // rotateY: [0, 360],
-        duration: 3000
+        duration: 2000
       });
     },
     MAIN_INIT_QRCODE() {
@@ -177,7 +177,7 @@ export default {
         translateY: "-20%",
         translateZ: [-1000, 0],
         // rotateY: [0, 360],
-        duration: 3000,
+        duration: 5000,
         scale: [0, 1.3]
       });
     },
@@ -196,26 +196,9 @@ export default {
         width: 1920,
         easing: "linear"
       });
-      /*anime({
-					targets: this.$refs["mainbonding"],
-					width: 0,
-					easing: 'linear'
-				});
-				
-				anime({
-					targets: this.$refs["mainstandby"],
-					width: 0,
-					easing: 'linear'
-				});*/
     },
     showTitle2() {
       anime({
-        targets: this.$refs["maininitqrcode"],
-        width: 0,
-        //					easing: 'linear'
-        duration: 3000
-      });
-      anime({
         targets: this.$refs["mainbonding"],
         width: 1920,
         easing: "linear"
@@ -223,21 +206,6 @@ export default {
     },
     showTitle3() {
       anime({
-        targets: this.$refs["mainbonding"],
-        left: 0,
-        duration: 0
-      });
-      anime({
-        targets: this.$refs["mainbonding1"],
-        left: 0,
-        duration: 0
-      });
-      anime({
-        targets: this.$refs["mainbonding"],
-        width: 0,
-        duration: 3000
-      });
-      anime({
         targets: this.$refs["mainstandby"],
         width: 1920,
         easing: "linear"
@@ -290,9 +258,13 @@ export default {
   },
   mounted() {
     this.MAIN_INIT_QRCODE();
-    window.addEventListener("resize", () => {
-			setZoom()
-		}, true);
+    window.addEventListener(
+      "resize",
+      () => {
+        setZoom();
+      },
+      true
+    );
     const setZoom = () => {
       var width = window.innerWidth;
       var height = window.innerHeight;
@@ -302,8 +274,8 @@ export default {
       }
       if (width / height >= 16 / 9) {
         zoom = height / 1080;
-			}
-			console.log(zoom)
+      }
+      console.log(zoom);
       this.$refs["home"].style.zoom = zoom;
     };
     // document.body.style.zoom = window.innerWidth / 1920;
@@ -312,6 +284,7 @@ export default {
     setZoom();
     // this.$refs["home"].style.transform = `scale(${window.innerWidth / 1920})`;
   },
+
   created() {
     window.test = this;
     this.toQRcode();
@@ -592,4 +565,4 @@ export default {
     transform: rotate(360deg);
   }
 }
-</style>
\ No newline at end of file
+</style>