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