anime

src/views/Home.vue

@@ -7,12 +7,14 @@
 				<turntable />
 			</div>
 		</div>
-		<div v-if="state == 'MAIN_STANDBY'">
+		<div class="mainstandby" ref='mainstandby' v-show="state == 'MAIN_STANDBY'">
+			<div class="mainstandby1">
 				<div class="title">Vmatrix-可视化云平台</div>
 			<div class="description">
 				<span>一个提供高质量的视觉、交互与创意效果的平台</span>
 			</div>
 			</div>
+		</div>
 		<div class="title" v-show="state === 'MAIN_USELESS'">设备不可用</div>
 		<div class="title" v-show="state === 'LAUNCH'">启动页</div>
 		<div class="content-container">
@@ -29,9 +31,9 @@
 						<!-- <img :src="connectIdCode" alt=""> -->
 					</div>
 				</div>
-				
 			</div>
-			<div v-show="state == 'MAIN_BONDING'">
+			<div class="mainbonding" ref='mainbonding' v-show="state == 'MAIN_BONDING'">
+				<div class="mainbonding1">
 					<div class="title">正在配置网络</div>
 					<div class="description">
 						<span>配置网络时请您保持网络稳定</span>
@@ -43,6 +45,8 @@
 						<!-- <img :src="connectIdCode" alt=""> -->
 					</div>
 				</div>
+
+			</div>
 		</div>
 		<div class="bottom-tips">
 			<div class="bottom-tips-item" v-show="state == 'SHOW'">
@@ -97,7 +101,7 @@
 			return {
 				qrcode: "http://www.maxrocky.com/",
 				link: "http://www.maxrocky.com/",
-				state: "MAIN_INIT_QRCODE",
+				state: "",
 				loadingState: "",
 				connectIdCode: "",
 				isLoading: false,
@@ -180,13 +184,37 @@
 				});
 
 			},
+			MAIN_BONDING() {
+				anime({
+					targets: this.$refs["lunzi"],
+					translateX: "-60%",
+					translateY: "20%",
+					// rotateY: [0, 360],
+					duration: 3000,
+				});
+
+			},
 			showTitle() {
 				anime({
 					targets: this.$refs["maininitqrcode"],
 					width: 1920,
 					easing: 'linear'
 				});
-			}
+			},
+			showTitle2() {
+				anime({
+					targets: this.$refs["mainbonding"],
+					width: 1920,
+					easing: 'linear'
+				});
+			},
+			showTitle3() {
+				anime({
+					targets: this.$refs["mainstandby"],
+					width: 1920,
+					easing: 'linear'
+				});
+			},
 		},
 		watch: {
 			isConnected: function(value) {
@@ -218,11 +246,16 @@
 					case "MAIN_INIT_QRCODE":
 						this.MAIN_INIT_QRCODE();
 						this.showTitle();
+						this.closeLoading();
 						break;
 					case "MAIN_BONDING":
+						this.showTitle2();
+						this.closeLoading();
+						this.MAIN_BONDING();
 						break;
 					case "MAIN_STANDBY":
 						this.MAIN_STANDBY();
+						this.showTitle3();
 						break;
 				}
 			}
@@ -317,17 +350,20 @@
 			}
 			.description {
 				font-size: 30px;
-				top: 528px;
 			}
 			.icon {
+				width: 1920px;
+				height: 200px;
+				position: absolute;
 				.code {
 					position: absolute;
-					top: 600px;
+					top: 230px;
 					left: 50%;
 					margin-left: -99px;
 					background: white;
 					display: inline;
 					img {
+						display: block;
 						width: 198px;
 						height: 198px;
 						background: white;
@@ -335,7 +371,7 @@
 				}
 				.phone {
 					position: absolute;
-					top: 620px;
+					top: 230px;
 					left: 50%;
 					margin-left: -76px;
 					display: inline;
@@ -351,24 +387,51 @@
 			font-weight: 500;
 			color: rgba(255, 255, 255, 1);
 			position: absolute;
-			width: 100%;
+			width: 1920px;
 			white-space: nowrap;
+			text-align: center;
 		}
 		.maininitqrcode {
-			border: 1px solid red;
 			width: 0;
-			height: 300px;
+			height: 500px;
+			position: absolute;
+			top: 50%;
+			margin-top: -160px;
+			overflow: hidden;
+		}
+		.maininitqrcode1 {
+			position: absolute;
+			height: 500px;
+			width: 100%;
+			text-align: center;
+		}
+		.mainbonding {
+			width: 0;
+			height: 500px;
 			position: absolute;
 			top: 50%;
 			margin-top: -150px;
+			overflow: hidden;
 		}
-		.maininitqrcode1{
+		.mainbonding1 {
 			position: absolute;
-			height: 300px;
+			height: 500px;
+			width: 100%;
+			text-align: center;
+		}
+		.mainstandby{
+			width: 0;
+			height: 500px;
+			position: absolute;
+			top: 50%;
+			margin-top: -150px;
+			overflow: hidden;
+		}
+		.mainstandby1{
+			position: absolute;
+			height: 500px;
 			width: 100%;
 			text-align: center;
-			border: 1px solid black;
-			
 		}
 		.description {
 			width: 689px;
@@ -377,9 +440,11 @@
 			font-family: SourceHanSansCN;
 			font-weight: 400;
 			position: absolute;
-			width: 100%;
-			top: 540px;
+			width: 1920px;
+			top: 150px;
 			color: rgba(255, 255, 255, 1);
+			white-space: nowrap;
+			text-align: center;
 		}
 		.bottom-tips {
 			position: absolute;