Skip to content

visualcloud / Vmatrix-device-start

Go to a project
Commit c96732dc by hank
Options

扫描二维码 绑定设备

parent 20e7a3d7
Showing with 270 additions and 50 deletions
src/components/loading.vue 0 → 100644
<template>
<div class="loader-inner ball-spin-fade-loader" style="zoom: 0.5">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</template>
<script>
export default {
name: 'loading'
}
</script>
<style lang="scss" scoped>
@keyframes ball-spin-fade-loader {
50% {
opacity: 0.3;
-webkit-transform: scale(0.4);
transform: scale(0.4);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.ball-spin-fade-loader {
position: relative;
height: 80px;
display: inline-block;
margin: 0 50px;
margin-top: 10px;
}
.ball-spin-fade-loader > div:nth-child(1) {
top: 25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
animation: ball-spin-fade-loader 1s 0s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(2) {
top: 17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
animation: ball-spin-fade-loader 1s 0.12s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(3) {
top: 0;
left: 25px;
-webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
animation: ball-spin-fade-loader 1s 0.24s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(4) {
top: -17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
animation: ball-spin-fade-loader 1s 0.36s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(5) {
top: -25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
animation: ball-spin-fade-loader 1s 0.48s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(6) {
top: -17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
animation: ball-spin-fade-loader 1s 0.6s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(7) {
top: 0;
left: -25px;
-webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
animation: ball-spin-fade-loader 1s 0.72s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(8) {
top: 17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
animation: ball-spin-fade-loader 1s 0.84s infinite linear;
}
.ball-spin-fade-loader > div {
background-color: white;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
</style>
\ No newline at end of file
src/views/Home.vue
...@@ -4,26 +4,63 @@ ...@@ -4,26 +4,63 @@
<div ref="lunzi"> <div ref="lunzi">
<img class="lunzi" src="../assets/图形2.png" alt /> <img class="lunzi" src="../assets/图形2.png" alt />
</div> </div>
<div class="title">Vmatrix-可视化云平台</div> <div v-if="state == 'MAIN_STANDBY'">
<div class="description"> <div class="title">Vmatrix-可视化云平台</div>
<span>一个提供高质量的视觉、交互与创意效果的平台</span> <div class="description">
<span>一个提供高质量的视觉、交互与创意效果的平台</span>
</div>
</div>
<div class="title" v-show="state === 'MAIN_USELESS'">设备不可用</div>
<div class="content-container">
<div v-show="state == 'MAIN_INIT_QRCODE'">
<div class="title">扫描二维码添加该设备</div>
<div class="description">
<span>打开APP，点击“我的设备”右上角，选择“扫描添加”</span>
</div>
<div class="icon">
<div class="code">
<img :src="connectIdCode" alt />
</div>
<!-- <img :src="connectIdCode" alt=""> -->
</div>
</div>
<div v-show="state == 'MAIN_BONDING'">
<div class="title">正在配置网络</div>
<div class="description">
<span>配置网络时请您保持网络稳定</span>
</div>
<div class="icon">
<div class="phone">
<img src="../assets/phone.png" alt />
</div>
<!-- <img :src="connectIdCode" alt=""> -->
</div>
</div>
</div> </div>
<div class="bottom-tips"> <div class="bottom-tips">
<div v-show="state == 'SHOW'">启动中，请稍后...</div> <div class="bottom-tips-item" v-show="state == 'SHOW'">
<div v-show="state == 'MAIN_BONDING'">正在绑定，请稍后...</div> <loading></loading>启动中，请稍后...
<div v-show="state == 'MAIN_INIT_QRCODE'">初始化二维码页</div> </div>
<div v-show="state == 'MAIN_STANDBY'">待机页面</div> <div class="bottom-tips-item" v-show="state == 'MAIN_BONDING'">
<div v-show="isConnected">蓝牙已连接</div> <loading></loading>正在绑定，请稍后...
</div>
<div class="bottom-tips-item" v-show="state == 'MAIN_INIT_QRCODE'">初始化二维码页</div>
<div class="bottom-tips-item" v-show="state == 'MAIN_STANDBY'">
待机页面
</div>
<div class="bottom-tips-item" v-show="isConnected">蓝牙已连接</div>
</div> </div>
<div class="progress-container" v-show="isLoading"> <div class="progress-container" >
<div class="progress"> <div class="progress" v-show="isLoading">
<div class="progress2" ref="progress"> <div class="progress2" ref="progress"></div>
</div> </div>
<div class="progress" v-show="state == 'MAIN_BONDING' || state == 'MAIN_INIT_QRCODE'">
<div class="progress3" ></div>
<div class="progress4" v-show="state == 'MAIN_BONDING'"></div>
</div> </div>
</div> </div>
<div class="bottom-code"> <div class="bottom-code">
<div v-if="state == 'MAIN_STANDBY'"> <div v-if="state == 'MAIN_STANDBY' || state == 'MAIN_USELESS'">
<img :src="qrcode" alt /> <img :src="qrcode" alt />
<div class="more">扫描了解更多</div> <div class="more">扫描了解更多</div>
</div> </div>
...@@ -34,7 +71,7 @@ ...@@ -34,7 +71,7 @@
<script> <script>
// @ is an alias to /src // @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue' import loading from "@/components/loading.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";
...@@ -43,12 +80,13 @@ export default { ...@@ -43,12 +80,13 @@ export default {
// name: 'Home', // name: 'Home',
components: { components: {
// HelloWorld // HelloWorld
loading
}, },
data() { data() {
return { return {
qrcode: "http://www.maxrocky.com/", qrcode: "http://www.maxrocky.com/",
link: "http://www.maxrocky.com/", link: "http://www.maxrocky.com/",
state: "MAIN_STANDBY", state: "",
connectIdCode: "", connectIdCode: "",
isLoading: false, isLoading: false,
isConnected: false isConnected: false
...@@ -57,9 +95,14 @@ export default { ...@@ -57,9 +95,14 @@ export default {
methods: { methods: {
toQRcode() { toQRcode() {
QRCode.toDataURL(this.link, { QRCode.toDataURL(this.link, {
errorCorrectionLevel: "H",
width: 500, width: 500,
height: 500 height: 500,
type: "image/png",
background: "#ffff",
color: {
// dark: "#ffff", // Blue dots
// light: "#0000" // Transparent background
}
}) })
.then(url => { .then(url => {
this.qrcode = url; this.qrcode = url;
...@@ -70,50 +113,55 @@ export default { ...@@ -70,50 +113,55 @@ export default {
}, },
showLoading() { showLoading() {
this.isLoading = true; this.isLoading = true;
anime( anime({
{ targets: this.$refs["progress"],
targets: this.$refs['progress'], width: [
width: ['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '98%'], "10%",
duration: 10000 "20%",
} "30%",
) "40%",
"50%",
"60%",
"70%",
"80%",
"90%",
"98%"
],
duration: 10000
});
}, },
closeLoading() { closeLoading() {
anime( anime({
{ targets: this.$refs["progress"],
targets: this.$refs['progress'], width: "100%",
width: '100%', duration: 0
duration: 0 });
}
)
this.isLoading = false; this.isLoading = false;
anime( anime({
{ targets: this.$refs["progress"],
targets: this.$refs['progress'], width: [0],
width: [0], duration: 0
duration: 0 });
}
)
}, },
MAIN_STANDBY() { MAIN_STANDBY() {
anime({ anime({
targets: this.$refs["lunzi"], targets: this.$refs["lunzi"],
translateX: 0, translateX: ["-50%", 0],
scale: [0, 1], scale: [0, 0.5, 1],
rotateY: [0, 360], translateZ: [-1000, 0],
duration: 1000 // rotateY: [0, 360],
duration: 2000
}); });
}, },
MAIN_INIT_QRCODE() { MAIN_INIT_QRCODE() {
console.log("aaaa");
console.log(this.$refs["lunzi"]);
anime({ anime({
targets: this.$refs["lunzi"], targets: this.$refs["lunzi"],
translateX: "-50%", translateX: "-60%",
rotateY: [0, 360], translateY: "20%",
duration: 2000, translateZ: [-1000, 0],
scale: [0, 1] // rotateY: [0, 360],
duration: 5000,
scale: [0, 1.3]
}); });
} }
}, },
...@@ -144,6 +192,9 @@ export default { ...@@ -144,6 +192,9 @@ export default {
} }
} }
}, },
mounted() {
this.MAIN_INIT_QRCODE();
},
created() { created() {
window.test = this; window.test = this;
this.toQRcode(); this.toQRcode();
...@@ -209,6 +260,43 @@ export default { ...@@ -209,6 +260,43 @@ export default {
position: absolute; position: absolute;
width: 157px; width: 157px;
height: 41px; height: 41px;
z-index: 1000;
}
.content-container {
.title {
font-size: 79px;
top: 360px;
letter-spacing: 20px;
}
.description {
font-size: 30px;
top: 528px;
}
.icon {
.code {
position: absolute;
top: 600px;
left: 50%;
margin-left: -99px;
background: white;
display: inline;
img {
width: 198px;
height: 198px;
background: white;
}
}
.phone {
position: absolute;
top: 620px;
left: 50%;
margin-left: -76px;
display: inline;
img {
height: 86px;
}
}
}
} }
.title { .title {
font-size: 110px; font-size: 110px;
...@@ -236,6 +324,10 @@ export default { ...@@ -236,6 +324,10 @@ export default {
right: 63px; right: 63px;
font-weight: 400; font-weight: 400;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
.bottom-tips-item {
display: flex;
// align-items: top;
}
} }
.bottom-code { .bottom-code {
position: absolute; position: absolute;
...@@ -247,7 +339,7 @@ export default { ...@@ -247,7 +339,7 @@ export default {
// width: 262px; // width: 262px;
// height: 262px; // height: 262px;
display: block; display: block;
clip-path: rect(250); background-color: white;
} }
.more { .more {
padding-top: 5px; padding-top: 5px;
...@@ -284,6 +376,34 @@ export default { ...@@ -284,6 +376,34 @@ export default {
border-radius: 3px; border-radius: 3px;
width: 0; width: 0;
} }
.progress3 {
content: "";
position: absolute;
top: -1.5px;
left: 0;
height: 5px;
background: rgba(255, 255, 255, 0.9);
border-radius: 3px;
width: 49%;
}
.progress4 {
content: "";
position: absolute;
top: -1.5px;
left: 50%;
height: 5px;
background: rgba(255, 255, 255, 0.9);
border-radius: 3px;
width: 50%;
}
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
} }
} }
@keyframes rotate { @keyframes rotate {
......
vue.config.js
...@@ -2,6 +2,7 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); ...@@ -2,6 +2,7 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production'; const isProduction = process.env.NODE_ENV === 'production';
module.exports = { module.exports = {
// 生产环境是否生成 sourceMap 文件 // 生产环境是否生成 sourceMap 文件
publicPath: './',
productionSourceMap: false, productionSourceMap: false,
//是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。 //是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
parallel: require('os').cpus().length > 1, parallel: require('os').cpus().length > 1,
......
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