Skip to content

visualcloud / Vmatrix-device-start

Go to a project
Commit 625d440d by hank
Options

完成启动页面修改

parent 72251462
Showing with 77 additions and 38 deletions
public/bg.jpg
public/bg.jpg

845 KB | W: | H:

public/bg.jpg

165 KB | W: | H:

public/bg.jpg
public/bg.jpg
public/bg.jpg
public/bg.jpg
  • 2-up
  • Swipe
  • Onion skin
public/index.html
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
padding: 0px; padding: 0px;
} }
body { body {
background: #211c49 url('./bg.jpg') no-repeat center; background: #FFA914 url('./bg.jpg') no-repeat center;
background-size: cover; background-size: cover;
} }
.chromeframe { .chromeframe {
......
public/robots.txt deleted 100644 → 0
User-agent: *
Disallow:
src/assets/logo.png
src/assets/logo.png

6.69 KB | W: | H:

src/assets/logo.png

25.1 KB | W: | H:

src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/phone.gif
src/assets/phone.gif

3.47 KB | W: | H:

src/assets/phone.gif

3.45 KB | W: | H:

src/assets/phone.gif
src/assets/phone.gif
src/assets/phone.gif
src/assets/phone.gif
  • 2-up
  • Swipe
  • Onion skin
src/components/loading.vue
...@@ -35,7 +35,7 @@ export default { ...@@ -35,7 +35,7 @@ export default {
height: 80px; height: 80px;
display: inline-block; display: inline-block;
margin: 0 50px; margin: 0 50px;
margin-top: 10px; margin-top: 65px;
} }
.ball-spin-fade-loader > div:nth-child(1) { .ball-spin-fade-loader > div:nth-child(1) {
top: 25px; top: 25px;
......
src/views/Home.vue
<template> <template>
<div class="home" ref="home"> <div class="home" ref="home">
<img class="logo" src="../assets/Vmatrix.png" alt /> <img class="logo" src="../assets/LOGOS.png" alt />
<div ref="lunzi"> <div ref="lunzi">
<!-- <img class="lunzi" src="../assets/图形2.png" alt /> --> <!-- <img class="lunzi" src="../assets/图形2.png" alt /> -->
<div class="lunzi" v-if="true"> <div class="lunzi" v-if="true">
...@@ -9,20 +9,24 @@ ...@@ -9,20 +9,24 @@
</div> </div>
<div class="mainstandby" ref="mainstandby" v-show="state === 'MAIN_STANDBY'"> <div class="mainstandby" ref="mainstandby" v-show="state === 'MAIN_STANDBY'">
<div class="mainstandby1"> <div class="mainstandby1">
<div class="title">Vmatrix-可视化云平台</div> <div class="title">
<img src="../assets/LOGO.png" alt />
</div>
<div class="description"> <div class="description">
<span>一个提供高质量的视觉、交互与创意效果的平台</span> <span>万屏互联新视界</span>
</div> </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>
<div class="content-container"> <div class="content-container">
<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">
<img src="../assets/addDevice.png" alt />
</div>
<div class="description"> <div class="description">
<span>打开APP，点击“我的设备”右上角，选择“扫描添加”</span> <span>请打开蓝牙，在“设备”里扫码添加设备</span>
</div> </div>
<div class="icon"> <div class="icon">
<div class="code"> <div class="code">
...@@ -34,9 +38,11 @@ ...@@ -34,9 +38,11 @@
</div> </div>
<div class="mainbonding" ref="mainbonding" v-show="state === 'MAIN_BONDING'"> <div class="mainbonding" ref="mainbonding" v-show="state === 'MAIN_BONDING'">
<div class="mainbonding1"> <div class="mainbonding1">
<div class="title">正在配置网络</div> <div class="title">
<img src="../assets/network.png" alt />
</div>
<div class="description"> <div class="description">
<span>配置网络时请您保持网络稳定</span> <span>请您保持网络稳定</span>
</div> </div>
<div class="icon"> <div class="icon">
<div class="phone"> <div class="phone">
...@@ -55,7 +61,7 @@ ...@@ -55,7 +61,7 @@
<loading></loading>正在绑定，请稍后... <loading></loading>正在绑定，请稍后...
</div> </div>
<div class="bottom-tips-item" v-show="state == 'MAIN_INIT_QRCODE'">初始化二维码页</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="state == 'MAIN_STANDBY'">待机页面</div> -->
<div class="bottom-tips-item" v-show="isConnected">蓝牙已连接</div> <div class="bottom-tips-item" v-show="isConnected">蓝牙已连接</div>
</div> </div>
<div class="progress-container"> <div class="progress-container">
...@@ -67,7 +73,7 @@ ...@@ -67,7 +73,7 @@
<div class="progress4" v-show="state == 'MAIN_BONDING'"></div> <div class="progress4" v-show="state == 'MAIN_BONDING'"></div>
</div> </div>
</div> </div>
<div class="bottom-code"> <div class="bottom-code" v-show="false">
<div v-if="state == 'MAIN_STANDBY' || state == 'MAIN_USELESS'"> <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>
...@@ -100,7 +106,7 @@ export default { ...@@ -100,7 +106,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_STANDBY",
loadingState: "", loadingState: "",
connectIdCode: "", connectIdCode: "",
isLoading: false, isLoading: false,
...@@ -110,9 +116,12 @@ export default { ...@@ -110,9 +116,12 @@ export default {
methods: { methods: {
getQrcode() { getQrcode() {
// let qr_code = window.$jssdk("ble.connectId") // let qr_code = window.$jssdk("ble.connectId")
if (!window.$jssdk) {
return;
}
let qr_code = window.$jssdk("bind.qrcode"); let qr_code = window.$jssdk("bind.qrcode");
if (!qr_code.qrcode) { if (!qr_code.qrcode) {
setTimeout(this.getQrcode, 1000) setTimeout(this.getQrcode, 1000);
// getQrcode(); // getQrcode();
return; return;
} else { } else {
...@@ -161,8 +170,9 @@ export default { ...@@ -161,8 +170,9 @@ export default {
"70%", "70%",
"80%", "80%",
"90%", "90%",
"98%" "99.5%"
], ],
easing: "linear",
duration: 10000 duration: 10000
}); });
}, },
...@@ -187,20 +197,21 @@ export default { ...@@ -187,20 +197,21 @@ export default {
translateX: ["-50%", 0], translateX: ["-50%", 0],
translateY: "0px", translateY: "0px",
scale: [0, 1], scale: [0, 1],
translateZ: [-1000, 0], translateZ: [-200, 0],
// rotateY: [0, 360], // rotateY: [0, 360],
duration: 5000 duration: 3000
}); });
}, },
MAIN_INIT_QRCODE() { MAIN_INIT_QRCODE() {
anime({ anime({
targets: this.$refs["lunzi"], targets: this.$refs["lunzi"],
translateX: "-55%", translateX: "-55%",
translateY: "-320px", translateY: "-270px",
translateZ: [-1000, 0], translateZ: [-1000, 0],
// rotateY: [0, 360], // rotateY: [0, 360],
duration: 5000, duration: 5000,
scale: [0, 1.5] easing: 'easeInOutExpo',
scale: [1, 1.5]
}); });
}, },
MAIN_BONDING() { MAIN_BONDING() {
...@@ -208,6 +219,8 @@ export default { ...@@ -208,6 +219,8 @@ export default {
targets: this.$refs["lunzi"], targets: this.$refs["lunzi"],
translateX: "-55%", translateX: "-55%",
translateY: "-320px", translateY: "-320px",
duration: 1000,
easing: 'easeInOutExpo',
// rotateY: [0, 360], // rotateY: [0, 360],
scale: 1.5 scale: 1.5
}); });
...@@ -216,7 +229,7 @@ export default { ...@@ -216,7 +229,7 @@ export default {
anime({ anime({
targets: this.$refs["maininitqrcode"], targets: this.$refs["maininitqrcode"],
width: 1920, width: 1920,
easing: "linear" easing: "easeInOutExpo"
}); });
}, },
showTitle2() { showTitle2() {
...@@ -347,18 +360,18 @@ export default { ...@@ -347,18 +360,18 @@ export default {
height: 1080px; height: 1080px;
width: 1920px; width: 1920px;
margin: 0 auto; margin: 0 auto;
background: url("../assets/01_启动页1.jpg") no-repeat center; background: url("../assets/startBg.jpg") no-repeat center;
background-size: cover; background-size: cover;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
perspective: 800px; perspective: 800px;
.lunzi { .lunzi {
width: 700px; width: 800px;
height: auto; height: auto;
height: 700px; height: 800px;
position: absolute; position: absolute;
top: 210px; top: 110px;
left: calc(50% - 350px); left: calc(50% - 400px);
// transform-origin: 51.875% 45.73%; // transform-origin: 51.875% 45.73%;
// transform: rotate(0deg); // transform: rotate(0deg);
// animation: rotate 4s infinite forwards ease-in-out; // animation: rotate 4s infinite forwards ease-in-out;
...@@ -367,17 +380,24 @@ export default { ...@@ -367,17 +380,24 @@ export default {
top: 56px; top: 56px;
left: 101px; left: 101px;
position: absolute; position: absolute;
width: 157px; width: 150px;
height: 41px; // height: 41px;
z-index: 1000; z-index: 1000;
} }
.content-container { .content-container {
.title { .title {
font-size: 79px; font-size: 107px;
font-weight: bolder;
letter-spacing: 20px; letter-spacing: 20px;
img {
height: 101px;
width: auto;
}
} }
.description { .description {
font-size: 30px; margin-top: 20px;
font-size: 35px;
top: 160px;
} }
.icon { .icon {
width: 1920px; width: 1920px;
...@@ -385,7 +405,7 @@ export default { ...@@ -385,7 +405,7 @@ export default {
position: absolute; position: absolute;
.code { .code {
position: absolute; position: absolute;
top: 230px; top: 260px;
left: 50%; left: 50%;
margin-left: -99px; margin-left: -99px;
background: white; background: white;
...@@ -399,7 +419,7 @@ export default { ...@@ -399,7 +419,7 @@ export default {
} }
.phone { .phone {
position: absolute; position: absolute;
top: 230px; top: 260px;
left: 50%; left: 50%;
margin-left: -76px; margin-left: -76px;
display: inline; display: inline;
...@@ -424,13 +444,14 @@ export default { ...@@ -424,13 +444,14 @@ export default {
height: 500px; height: 500px;
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -160px; margin-top: -180px;
overflow: hidden; overflow: hidden;
} }
.maininitqrcode1 { .maininitqrcode1 {
position: absolute; position: absolute;
height: 500px; height: 500px;
width: 1920px; width: 1920px;
color: black;
text-align: center; text-align: center;
} }
.mainbonding { .mainbonding {
...@@ -438,9 +459,12 @@ export default { ...@@ -438,9 +459,12 @@ export default {
height: 500px; height: 500px;
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -150px; margin-top: -180px;
overflow: hidden; overflow: hidden;
right: 0; right: 0;
.description {
top: 160px;
}
} }
.mainbonding1 { .mainbonding1 {
position: absolute; position: absolute;
...@@ -454,9 +478,21 @@ export default { ...@@ -454,9 +478,21 @@ export default {
height: 500px; height: 500px;
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -180px; margin-top: -212px;
overflow: hidden; overflow: hidden;
right: 0; right: 0;
.title {
font-size: 107px;
font-weight: bolder;
letter-spacing: 20px;
img {
height: 153px;
width: auto;
}
}
.description {
top: 180px;
}
} }
.mainstandby1 { .mainstandby1 {
position: absolute; position: absolute;
...@@ -464,19 +500,23 @@ export default { ...@@ -464,19 +500,23 @@ export default {
width: 1920px; width: 1920px;
text-align: center; text-align: center;
right: 0; right: 0;
.description {
top: 205px !important;
}
} }
.description { .description {
width: 689px; width: 689px;
height: 31px; height: 31px;
font-size: 33px; font-size: 35px;
font-family: SourceHanSansCN; font-family: SourceHanSansCN;
font-weight: 400; font-weight: 400;
position: absolute; position: absolute;
width: 1920px; width: 1920px;
top: 159px; top: 205px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
letter-spacing: 5px;
} }
.bottom-tips { .bottom-tips {
position: absolute; position: absolute;
...@@ -486,6 +526,7 @@ export default { ...@@ -486,6 +526,7 @@ export default {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
.bottom-tips-item { .bottom-tips-item {
display: flex; display: flex;
align-items: center;
// align-items: top; // align-items: top;
} }
} }
......
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