Skip to content

visualcloud / Vmatrix-device-start

Go to a project
Commit 6de6b69d by zhangmeng
Options

anime

parent 2a455c35
Showing with 87 additions and 23 deletions
.project 0 → 100644
<?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 @@ ...@@ -16,7 +16,8 @@
<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>
<div class="content-container"> <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="title">扫描二维码添加该设备</div>
<div class="description"> <div class="description">
<span>打开APP，点击“我的设备”右上角，选择“扫描添加”</span> <span>打开APP，点击“我的设备”右上角，选择“扫描添加”</span>
...@@ -28,6 +29,8 @@ ...@@ -28,6 +29,8 @@
<!-- <img :src="connectIdCode" alt=""> --> <!-- <img :src="connectIdCode" alt=""> -->
</div> </div>
</div> </div>
</div>
<div v-show="state == 'MAIN_BONDING'"> <div v-show="state == 'MAIN_BONDING'">
<div class="title">正在配置网络</div> <div class="title">正在配置网络</div>
<div class="description"> <div class="description">
...@@ -72,14 +75,18 @@ ...@@ -72,14 +75,18 @@
</template> </template>
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import loading from "@/components/loading.vue"; import loading from "@/components/loading.vue";
import turntable from "@/components/turntable.vue"; import turntable from "@/components/turntable.vue";
const QRCode = require("qrcode"); const QRCode = require("qrcode");
import anime from "animejs/lib/anime.es.js"; import anime from "animejs/lib/anime.es.js";
// LAUNCH, // 启动页（预留）
export default { // MAIN_INIT_QRCODE, // 初始化二维码页
// MAIN_BONDING, // 正在绑定
// MAIN_STANDBY, // 待机页
// SHOW; // 模版展示页
export default {
// name: 'Home', // name: 'Home',
components: { components: {
// HelloWorld // HelloWorld
...@@ -90,7 +97,7 @@ export default { ...@@ -90,7 +97,7 @@ export default {
return { return {
qrcode: "http://www.maxrocky.com/", qrcode: "http://www.maxrocky.com/",
link: "http://www.maxrocky.com/", link: "http://www.maxrocky.com/",
state: "", state: "MAIN_INIT_QRCODE",
loadingState: "", loadingState: "",
connectIdCode: "", connectIdCode: "",
isLoading: false, isLoading: false,
...@@ -134,6 +141,7 @@ export default { ...@@ -134,6 +141,7 @@ export default {
], ],
duration: 10000 duration: 10000
}); });
}, },
loadingFinished() { loadingFinished() {
anime({ anime({
...@@ -170,6 +178,14 @@ export default { ...@@ -170,6 +178,14 @@ export default {
duration: 5000, duration: 5000,
scale: [0, 1.3] scale: [0, 1.3]
}); });
},
showTitle() {
anime({
targets: this.$refs["maininitqrcode"],
width: 1920,
easing: 'linear'
});
} }
}, },
watch: { watch: {
...@@ -182,7 +198,7 @@ export default { ...@@ -182,7 +198,7 @@ export default {
// } // }
}, },
loadingState: function(value) { loadingState: function(value) {
switch (value) { switch(value) {
case "LOADING": case "LOADING":
this.showLoading(); this.showLoading();
break; break;
...@@ -198,9 +214,10 @@ export default { ...@@ -198,9 +214,10 @@ export default {
} }
}, },
state: function(value) { state: function(value) {
switch (value) { switch(value) {
case "MAIN_INIT_QRCODE": case "MAIN_INIT_QRCODE":
this.MAIN_INIT_QRCODE(); this.MAIN_INIT_QRCODE();
this.showTitle();
break; break;
case "MAIN_BONDING": case "MAIN_BONDING":
break; break;
...@@ -226,7 +243,7 @@ export default { ...@@ -226,7 +243,7 @@ export default {
window.test = this; window.test = this;
this.toQRcode(); this.toQRcode();
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
if (!window.jsbridge) { if(!window.jsbridge) {
reject(); reject();
} }
window.jsbridge.init(); window.jsbridge.init();
...@@ -263,10 +280,10 @@ export default { ...@@ -263,10 +280,10 @@ export default {
// MAIN_STANDBY, // 待机页 // MAIN_STANDBY, // 待机页
// SHOW; // 模版展示页 // SHOW; // 模版展示页
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.home { .home {
height: 1080px; height: 1080px;
width: 1920px; width: 1920px;
margin: 0 auto; margin: 0 auto;
...@@ -296,7 +313,6 @@ export default { ...@@ -296,7 +313,6 @@ export default {
.content-container { .content-container {
.title { .title {
font-size: 79px; font-size: 79px;
top: 360px;
letter-spacing: 20px; letter-spacing: 20px;
} }
.description { .description {
...@@ -336,7 +352,23 @@ export default { ...@@ -336,7 +352,23 @@ export default {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
position: absolute; position: absolute;
width: 100%; 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 { .description {
width: 689px; width: 689px;
...@@ -380,8 +412,9 @@ export default { ...@@ -380,8 +412,9 @@ export default {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
} }
} }
.progress-container {
.progress-container {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -430,21 +463,23 @@ export default { ...@@ -430,21 +463,23 @@ export default {
width: 50%; width: 50%;
} }
} }
} }
@keyframes rotate {
@keyframes rotate {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@keyframes rotate {
@keyframes rotate {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
</style> </style>
\ No newline at end of file
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