Skip to content

visualcloud / Vmatrix-device-start

Go to a project
Commit c96732dc by hank
Options

扫描二维码 绑定设备

parent 20e7a3d7
Showing with 263 additions and 43 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 @@
<div ref="lunzi">
<img class="lunzi" src="../assets/图形2.png" alt />
</div>
<div v-if="state == 'MAIN_STANDBY'">
<div class="title">Vmatrix-可视化云平台</div>
<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 class="bottom-tips">
<div v-show="state == 'SHOW'">启动中，请稍后...</div>
<div v-show="state == 'MAIN_BONDING'">正在绑定，请稍后...</div>
<div v-show="state == 'MAIN_INIT_QRCODE'">初始化二维码页</div>
<div v-show="state == 'MAIN_STANDBY'">待机页面</div>
<div v-show="isConnected">蓝牙已连接</div>
<div class="bottom-tips-item" v-show="state == 'SHOW'">
<loading></loading>启动中，请稍后...
</div>
<div class="progress-container" v-show="isLoading">
<div class="progress">
<div class="progress2" ref="progress">
<div class="bottom-tips-item" v-show="state == 'MAIN_BONDING'">
<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 class="progress-container" >
<div class="progress" v-show="isLoading">
<div class="progress2" ref="progress"></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 class="bottom-code">
<div v-if="state == 'MAIN_STANDBY'">
<div v-if="state == 'MAIN_STANDBY' || state == 'MAIN_USELESS'">
<img :src="qrcode" alt />
<div class="more">扫描了解更多</div>
</div>
......@@ -34,7 +71,7 @@
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import loading from "@/components/loading.vue";
const QRCode = require("qrcode");
import anime from "animejs/lib/anime.es.js";
......@@ -43,12 +80,13 @@ export default {
// name: 'Home',
components: {
// HelloWorld
loading
},
data() {
return {
qrcode: "http://www.maxrocky.com/",
link: "http://www.maxrocky.com/",
state: "MAIN_STANDBY",
state: "",
connectIdCode: "",
isLoading: false,
isConnected: false
......@@ -57,9 +95,14 @@ export default {
methods: {
toQRcode() {
QRCode.toDataURL(this.link, {
errorCorrectionLevel: "H",
width: 500,
height: 500
height: 500,
type: "image/png",
background: "#ffff",
color: {
// dark: "#ffff", // Blue dots
// light: "#0000" // Transparent background
}
})
.then(url => {
this.qrcode = url;
......@@ -70,50 +113,55 @@ export default {
},
showLoading() {
this.isLoading = true;
anime(
{
targets: this.$refs['progress'],
width: ['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '98%'],
anime({
targets: this.$refs["progress"],
width: [
"10%",
"20%",
"30%",
"40%",
"50%",
"60%",
"70%",
"80%",
"90%",
"98%"
],
duration: 10000
}
)
});
},
closeLoading() {
anime(
{
targets: this.$refs['progress'],
width: '100%',
anime({
targets: this.$refs["progress"],
width: "100%",
duration: 0
}
)
});
this.isLoading = false;
anime(
{
targets: this.$refs['progress'],
anime({
targets: this.$refs["progress"],
width: [0],
duration: 0
}
)
});
},
MAIN_STANDBY() {
anime({
targets: this.$refs["lunzi"],
translateX: 0,
scale: [0, 1],
rotateY: [0, 360],
duration: 1000
translateX: ["-50%", 0],
scale: [0, 0.5, 1],
translateZ: [-1000, 0],
// rotateY: [0, 360],
duration: 2000
});
},
MAIN_INIT_QRCODE() {
console.log("aaaa");
console.log(this.$refs["lunzi"]);
anime({
targets: this.$refs["lunzi"],
translateX: "-50%",
rotateY: [0, 360],
duration: 2000,
scale: [0, 1]
translateX: "-60%",
translateY: "20%",
translateZ: [-1000, 0],
// rotateY: [0, 360],
duration: 5000,
scale: [0, 1.3]
});
}
},
......@@ -144,6 +192,9 @@ export default {
}
}
},
mounted() {
this.MAIN_INIT_QRCODE();
},
created() {
window.test = this;
this.toQRcode();
......@@ -209,6 +260,43 @@ export default {
position: absolute;
width: 157px;
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 {
font-size: 110px;
......@@ -236,6 +324,10 @@ export default {
right: 63px;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
.bottom-tips-item {
display: flex;
// align-items: top;
}
}
.bottom-code {
position: absolute;
......@@ -247,7 +339,7 @@ export default {
// width: 262px;
// height: 262px;
display: block;
clip-path: rect(250);
background-color: white;
}
.more {
padding-top: 5px;
......@@ -284,6 +376,34 @@ export default {
border-radius: 3px;
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 {
......
vue.config.js
......@@ -2,6 +2,7 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
// 生产环境是否生成 sourceMap 文件
publicPath: './',
productionSourceMap: false,
//是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
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