merge

.project

+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>Vmatrix-device-start</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>com.aptana.ide.core.unifiedBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>com.aptana.projects.webnature</nature>
+	</natures>
+	<filteredResources>
+		<filter>
+			<id>1566549723113</id>
+			<name></name>
+			<type>26</type>
+			<matcher>
+				<id>org.eclipse.ui.ide.multiFilter</id>
+				<arguments>1.0-name-matches-false-false-node_modules</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
+</projectDescription>

src/views/Home.vue

@@ -7,16 +7,19 @@
 				<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">
-      <div v-show="state == 'MAIN_INIT_QRCODE'">
+			<div class="maininitqrcode" ref="maininitqrcode" v-show="state == 'MAIN_INIT_QRCODE'">
+				<div class="maininitqrcode1">
 					<div class="title">扫描二维码添加该设备</div>
 					<div class="description">
 						<span>打开APP，点击“我的设备”右上角，选择“扫描添加”</span>
@@ -28,7 +31,9 @@
 						<!-- <img :src="connectIdCode" alt=""> -->
 					</div>
 				</div>
-      <div v-show="state == 'MAIN_BONDING'">
+			</div>
+			<div class="mainbonding" ref='mainbonding' v-show="state == 'MAIN_BONDING'">
+				<div class="mainbonding1">
 					<div class="title">正在配置网络</div>
 					<div class="description">
 						<span>配置网络时请您保持网络稳定</span>
@@ -40,6 +45,8 @@
 						<!-- <img :src="connectIdCode" alt=""> -->
 					</div>
 				</div>
+
+			</div>
 		</div>
 		<div class="bottom-tips">
 			<div class="bottom-tips-item" v-show="state == 'SHOW'">
@@ -72,14 +79,18 @@
 </template>
 
 <script>
-// @ 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";
+	// @ is an alias to /src
+	import loading from "@/components/loading.vue";
+	import turntable from "@/components/turntable.vue";
 
-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
@@ -134,6 +145,7 @@ export default {
 					],
 					duration: 10000
 				});
+
 			},
 			loadingFinished() {
 				anime({
@@ -164,13 +176,45 @@ export default {
 				anime({
 					targets: this.$refs["lunzi"],
 					translateX: "-50%",
-        translateY: "20%",
+					translateY: "-20%",
 					translateZ: [-1000, 0],
 					// rotateY: [0, 360],
 					duration: 5000,
 					scale: [0, 1.3]
 				});
-    }
+
+			},
+			MAIN_BONDING() {
+				anime({
+					targets: this.$refs["lunzi"],
+					translateX: "-50%",
+					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) {
@@ -182,7 +226,7 @@ export default {
 				// }
 			},
 			loadingState: function(value) {
-      switch (value) {
+				switch(value) {
 					case "LOADING":
 						this.showLoading();
 						break;
@@ -198,14 +242,20 @@ export default {
 				}
 			},
 			state: function(value) {
-      switch (value) {
+				switch(value) {
 					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;
 				}
 			}
@@ -226,7 +276,7 @@ export default {
 			window.test = this;
 			this.toQRcode();
 			new Promise((resolve, reject) => {
-      if (!window.jsbridge) {
+				if(!window.jsbridge) {
 					reject();
 				}
 				window.jsbridge.init();
@@ -263,10 +313,10 @@ export default {
 			// MAIN_STANDBY, // 待机页
 			// SHOW; // 模版展示页
 		}
-};
+	};
 </script>
 <style lang="scss" scoped>
-.home {
+	.home {
 		height: 1080px;
 		width: 1920px;
 		margin: 0 auto;
@@ -276,12 +326,12 @@ export default {
 		position: relative;
 		perspective: 800px;
 		.lunzi {
-    width: 800px;
+			width: 700px;
 			height: auto;
-    height: 800px;
+			height: 700px;
 			position: absolute;
-    top: 140px;
-    left: calc(50% - 440px);
+			top: 210px;
+			left: calc(50% - 350px);
 			// transform-origin: 51.875% 45.73%;
 			// transform: rotate(0deg);
 			// animation: rotate 4s infinite forwards ease-in-out;
@@ -297,22 +347,24 @@ export default {
 		.content-container {
 			.title {
 				font-size: 79px;
-      top: 360px;
 				letter-spacing: 20px;
 			}
 			.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;
@@ -320,7 +372,7 @@ export default {
 				}
 				.phone {
 					position: absolute;
-        top: 620px;
+					top: 230px;
 					left: 50%;
 					margin-left: -76px;
 					display: inline;
@@ -336,8 +388,51 @@ export default {
 			font-weight: 500;
 			color: rgba(255, 255, 255, 1);
 			position: absolute;
+			width: 1920px;
+			white-space: nowrap;
+			text-align: center;
+		}
+		.maininitqrcode {
+			width: 0;
+			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;
+		}
+		.mainbonding1 {
+			position: absolute;
+			height: 500px;
 			width: 100%;
-    top: 330px;
+			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;
 		}
 		.description {
 			width: 689px;
@@ -346,9 +441,11 @@ export default {
 			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;
@@ -381,8 +478,9 @@ export default {
 				color: rgba(255, 255, 255, 1);
 			}
 		}
-}
-.progress-container {
+	}
+	
+	.progress-container {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -431,21 +529,23 @@ export default {
 				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>