Skip to content

visualcloud / Vmatrix-device-start

Go to a project
Commit a41c8bd0 by zhangmeng
Options

anime

parent 6de6b69d
Showing with 99 additions and 34 deletions
src/views/Home.vue
...@@ -7,11 +7,13 @@ ...@@ -7,11 +7,13 @@
<turntable /> <turntable />
</div> </div>
</div> </div>
<div v-if="state == 'MAIN_STANDBY'"> <div class="mainstandby" ref='mainstandby' v-show="state == 'MAIN_STANDBY'">
<div class="title">Vmatrix-可视化云平台</div> <div class="mainstandby1">
<div class="title">Vmatrix-可视化云平台</div>
<div class="description"> <div class="description">
<span>一个提供高质量的视觉、交互与创意效果的平台</span> <span>一个提供高质量的视觉、交互与创意效果的平台</span>
</div> </div>
</div>
</div> </div>
<div class="title" v-show="state === 'MAIN_USELESS'">设备不可用</div> <div class="title" v-show="state === 'MAIN_USELESS'">设备不可用</div>
<div class="title" v-show="state === 'LAUNCH'">启动页</div> <div class="title" v-show="state === 'LAUNCH'">启动页</div>
...@@ -19,29 +21,31 @@ ...@@ -19,29 +21,31 @@
<div class="maininitqrcode" ref="maininitqrcode" v-show="state == 'MAIN_INIT_QRCODE'"> <div class="maininitqrcode" ref="maininitqrcode" v-show="state == 'MAIN_INIT_QRCODE'">
<div class="maininitqrcode1"> <div class="maininitqrcode1">
<div class="title">扫描二维码添加该设备</div> <div class="title">扫描二维码添加该设备</div>
<div class="description"> <div class="description">
<span>打开APP，点击“我的设备”右上角，选择“扫描添加”</span> <span>打开APP，点击“我的设备”右上角，选择“扫描添加”</span>
</div> </div>
<div class="icon"> <div class="icon">
<div class="code"> <div class="code">
<img :src="connectIdCode" alt /> <img :src="connectIdCode" alt />
</div>
<!-- <img :src="connectIdCode" alt=""> -->
</div> </div>
<!-- <img :src="connectIdCode" alt=""> -->
</div>
</div> </div>
</div> </div>
<div v-show="state == 'MAIN_BONDING'"> <div class="mainbonding" ref='mainbonding' v-show="state == 'MAIN_BONDING'">
<div class="title">正在配置网络</div> <div class="mainbonding1">
<div class="description"> <div class="title">正在配置网络</div>
<span>配置网络时请您保持网络稳定</span> <div class="description">
</div> <span>配置网络时请您保持网络稳定</span>
<div class="icon"> </div>
<div class="phone"> <div class="icon">
<img src="../assets/phone.gif" alt /> <div class="phone">
<img src="../assets/phone.gif" alt />
</div>
<!-- <img :src="connectIdCode" alt=""> -->
</div> </div>
<!-- <img :src="connectIdCode" alt=""> -->
</div> </div>
</div> </div>
</div> </div>
<div class="bottom-tips"> <div class="bottom-tips">
...@@ -97,7 +101,7 @@ ...@@ -97,7 +101,7 @@
return { return {
qrcode: "http://www.maxrocky.com/", qrcode: "http://www.maxrocky.com/",
link: "http://www.maxrocky.com/", link: "http://www.maxrocky.com/",
state: "MAIN_INIT_QRCODE", state: "",
loadingState: "", loadingState: "",
connectIdCode: "", connectIdCode: "",
isLoading: false, isLoading: false,
...@@ -180,13 +184,37 @@ ...@@ -180,13 +184,37 @@
}); });
}, },
MAIN_BONDING() {
anime({
targets: this.$refs["lunzi"],
translateX: "-60%",
translateY: "20%",
// rotateY: [0, 360],
duration: 3000,
});
},
showTitle() { showTitle() {
anime({ anime({
targets: this.$refs["maininitqrcode"], targets: this.$refs["maininitqrcode"],
width: 1920, width: 1920,
easing: 'linear' easing: 'linear'
}); });
} },
showTitle2() {
anime({
targets: this.$refs["mainbonding"],
width: 1920,
easing: 'linear'
});
},
showTitle3() {
anime({
targets: this.$refs["mainstandby"],
width: 1920,
easing: 'linear'
});
},
}, },
watch: { watch: {
isConnected: function(value) { isConnected: function(value) {
...@@ -218,11 +246,16 @@ ...@@ -218,11 +246,16 @@
case "MAIN_INIT_QRCODE": case "MAIN_INIT_QRCODE":
this.MAIN_INIT_QRCODE(); this.MAIN_INIT_QRCODE();
this.showTitle(); this.showTitle();
this.closeLoading();
break; break;
case "MAIN_BONDING": case "MAIN_BONDING":
this.showTitle2();
this.closeLoading();
this.MAIN_BONDING();
break; break;
case "MAIN_STANDBY": case "MAIN_STANDBY":
this.MAIN_STANDBY(); this.MAIN_STANDBY();
this.showTitle3();
break; break;
} }
} }
...@@ -317,17 +350,20 @@ ...@@ -317,17 +350,20 @@
} }
.description { .description {
font-size: 30px; font-size: 30px;
top: 528px;
} }
.icon { .icon {
width: 1920px;
height: 200px;
position: absolute;
.code { .code {
position: absolute; position: absolute;
top: 600px; top: 230px;
left: 50%; left: 50%;
margin-left: -99px; margin-left: -99px;
background: white; background: white;
display: inline; display: inline;
img { img {
display: block;
width: 198px; width: 198px;
height: 198px; height: 198px;
background: white; background: white;
...@@ -335,7 +371,7 @@ ...@@ -335,7 +371,7 @@
} }
.phone { .phone {
position: absolute; position: absolute;
top: 620px; top: 230px;
left: 50%; left: 50%;
margin-left: -76px; margin-left: -76px;
display: inline; display: inline;
...@@ -351,24 +387,51 @@ ...@@ -351,24 +387,51 @@
font-weight: 500; font-weight: 500;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
position: absolute; position: absolute;
width: 100%; width: 1920px;
white-space: nowrap; white-space: nowrap;
text-align: center;
} }
.maininitqrcode { .maininitqrcode {
border: 1px solid red;
width: 0; 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; position: absolute;
top: 50%; top: 50%;
margin-top: -150px; margin-top: -150px;
overflow: hidden;
} }
.maininitqrcode1{ .mainbonding1 {
position: absolute; 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%; width: 100%;
text-align: center; text-align: center;
border: 1px solid black;
} }
.description { .description {
width: 689px; width: 689px;
...@@ -377,9 +440,11 @@ ...@@ -377,9 +440,11 @@
font-family: SourceHanSansCN; font-family: SourceHanSansCN;
font-weight: 400; font-weight: 400;
position: absolute; position: absolute;
width: 100%; width: 1920px;
top: 540px; top: 150px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
white-space: nowrap;
text-align: center;
} }
.bottom-tips { .bottom-tips {
position: absolute; position: absolute;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment