anime

.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

@@ -16,7 +16,8 @@
 		<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,6 +29,8 @@
 					<!-- <img :src="connectIdCode" alt=""> -->
 				</div>
 				</div>
+				
+			</div>
 			<div v-show="state == 'MAIN_BONDING'">
 				<div class="title">正在配置网络</div>
 				<div class="description">
@@ -72,14 +75,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";
-
-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
@@ -90,7 +97,7 @@ export default {
 			return {
 				qrcode: "http://www.maxrocky.com/",
 				link: "http://www.maxrocky.com/",
-      state: "",
+				state: "MAIN_INIT_QRCODE",
 				loadingState: "",
 				connectIdCode: "",
 				isLoading: false,
@@ -134,6 +141,7 @@ export default {
 					],
 					duration: 10000
 				});
+
 			},
 			loadingFinished() {
 				anime({
@@ -170,6 +178,14 @@ export default {
 					duration: 5000,
 					scale: [0, 1.3]
 				});
+
+			},
+			showTitle() {
+				anime({
+					targets: this.$refs["maininitqrcode"],
+					width: 1920,
+					easing: 'linear'
+				});
 			}
 		},
 		watch: {
@@ -182,7 +198,7 @@ export default {
 				// }
 			},
 			loadingState: function(value) {
-      switch (value) {
+				switch(value) {
 					case "LOADING":
 						this.showLoading();
 						break;
@@ -198,9 +214,10 @@ export default {
 				}
 			},
 			state: function(value) {
-      switch (value) {
+				switch(value) {
 					case "MAIN_INIT_QRCODE":
 						this.MAIN_INIT_QRCODE();
+						this.showTitle();
 						break;
 					case "MAIN_BONDING":
 						break;
@@ -226,7 +243,7 @@ export default {
 			window.test = this;
 			this.toQRcode();
 			new Promise((resolve, reject) => {
-      if (!window.jsbridge) {
+				if(!window.jsbridge) {
 					reject();
 				}
 				window.jsbridge.init();
@@ -263,10 +280,10 @@ export default {
 			// MAIN_STANDBY, // 待机页
 			// SHOW; // 模版展示页
 		}
-};
+	};
 </script>
 <style lang="scss" scoped>
-.home {
+	.home {
 		height: 1080px;
 		width: 1920px;
 		margin: 0 auto;
@@ -296,7 +313,6 @@ export default {
 		.content-container {
 			.title {
 				font-size: 79px;
-      top: 360px;
 				letter-spacing: 20px;
 			}
 			.description {
@@ -336,7 +352,23 @@ export default {
 			color: rgba(255, 255, 255, 1);
 			position: absolute;
 			width: 100%;
-    top: 330px;
+			white-space: nowrap;
+		}
+		.maininitqrcode {
+			border: 1px solid red;
+			width: 0;
+			height: 300px;
+			position: absolute;
+			top: 50%;
+			margin-top: -150px;
+		}
+		.maininitqrcode1{
+			position: absolute;
+			height: 300px;
+			width: 100%;
+			text-align: center;
+			border: 1px solid black;
+			
 		}
 		.description {
 			width: 689px;
@@ -380,8 +412,9 @@ export default {
 				color: rgba(255, 255, 255, 1);
 			}
 		}
-}
-.progress-container {
+	}
+	
+	.progress-container {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -430,21 +463,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>
\ No newline at end of file