Skip to content

visualcloud / Vmatrix-device-start

Go to a project
Commit 765e31ac by hank
Options

页面适应

parent c96732dc
Showing with 46 additions and 26 deletions
dist.zip 0 → 100644
File added
src/views/Home.vue
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</div> </div>
<div class="icon"> <div class="icon">
<div class="phone"> <div class="phone">
<img src="../assets/phone.png" alt /> <img src="../assets/phone.gif" alt />
</div> </div>
<!-- <img :src="connectIdCode" alt=""> --> <!-- <img :src="connectIdCode" alt=""> -->
</div> </div>
...@@ -45,17 +45,15 @@ ...@@ -45,17 +45,15 @@
<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 class="bottom-tips-item" v-show="state == 'MAIN_STANDBY'">待机页面</div>
待机页面
</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">
<div class="progress" v-show="isLoading"> <div class="progress" v-show="isLoading">
<div class="progress2" ref="progress"></div> <div class="progress2" ref="progress"></div>
</div> </div>
<div class="progress" v-show="state == 'MAIN_BONDING' || state == 'MAIN_INIT_QRCODE'"> <div class="progress" v-show="state == 'MAIN_BONDING' || state == 'MAIN_INIT_QRCODE'">
<div class="progress3" ></div> <div class="progress3"></div>
<div class="progress4" v-show="state == 'MAIN_BONDING'"></div> <div class="progress4" v-show="state == 'MAIN_BONDING'"></div>
</div> </div>
</div> </div>
...@@ -86,7 +84,8 @@ export default { ...@@ -86,7 +84,8 @@ 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_BONDING",
loadingState: "",
connectIdCode: "", connectIdCode: "",
isLoading: false, isLoading: false,
isConnected: false isConnected: false
...@@ -130,12 +129,14 @@ export default { ...@@ -130,12 +129,14 @@ export default {
duration: 10000 duration: 10000
}); });
}, },
closeLoading() { loadingFinished() {
anime({ anime({
targets: this.$refs["progress"], targets: this.$refs["progress"],
width: "100%", width: "100%",
duration: 0 duration: 200
}); });
},
closeLoading() {
this.isLoading = false; this.isLoading = false;
anime({ anime({
targets: this.$refs["progress"], targets: this.$refs["progress"],
...@@ -167,10 +168,24 @@ export default { ...@@ -167,10 +168,24 @@ export default {
}, },
watch: { watch: {
isConnected: function(value) { isConnected: function(value) {
if (value) { console.log(value);
alert(value); // if (value) {
} else { // alert(value);
alert(value); // } else {
// alert(value);
// }
},
loadingState: function(value) {
switch (value) {
case "LOADING":
this.showLoading();
break;
case "SUCCESS":
this.loadingFinished();
break;
case "FAILED":
this.closeLoading();
break;
} }
}, },
state: function(value) { state: function(value) {
...@@ -183,17 +198,19 @@ export default { ...@@ -183,17 +198,19 @@ export default {
case "MAIN_STANDBY": case "MAIN_STANDBY":
this.MAIN_STANDBY(); this.MAIN_STANDBY();
break; break;
case "SHOW_LOADING":
this.showLoading();
break;
case "SHOW_FINISH":
this.closeLoading();
break;
} }
} }
}, },
mounted() { mounted() {
this.MAIN_INIT_QRCODE(); this.MAIN_INIT_QRCODE();
window.addEventListener("resize", () => {
console.log(window.innerWidth / 1920, window.innerWidth);
this.$refs["home"].style.zoom = window.innerWidth / 1920;
// this.$refs["home"].style.transform = `scale(${window.innerWidth / 1920})`;
});
this.$refs["home"].style.zoom = window.innerWidth / 1920;
// this.$refs["home"].style.transform = `scale(${window.innerWidth / 1920})`;
}, },
created() { created() {
window.test = this; window.test = this;
...@@ -226,6 +243,9 @@ export default { ...@@ -226,6 +243,9 @@ export default {
window.$observer("app.onPageChange", state => { window.$observer("app.onPageChange", state => {
this.state = state.new; this.state = state.new;
}); });
window.$observer("app.onFilmLoadStateChange", state => {
this.loadingState = state;
});
}); });
// LAUNCH, // 启动页（预留） // LAUNCH, // 启动页（预留）
// MAIN_INIT_QRCODE, // 初始化二维码页 // MAIN_INIT_QRCODE, // 初始化二维码页
...@@ -237,7 +257,9 @@ export default { ...@@ -237,7 +257,9 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.home { .home {
height: 100vh; height: 1080px;
width: 1920px;
margin: 0 auto;
background: url("../assets/01_启动页1.jpg") no-repeat center; background: url("../assets/01_启动页1.jpg") no-repeat center;
background-size: cover; background-size: cover;
overflow: hidden; overflow: hidden;
...@@ -355,7 +377,8 @@ export default { ...@@ -355,7 +377,8 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 100vh; bottom: 0;
height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -366,6 +389,7 @@ export default { ...@@ -366,6 +389,7 @@ export default {
position: relative; position: relative;
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
border-radius: 2px; border-radius: 2px;
margin-top: -60px;
.progress2 { .progress2 {
content: ""; content: "";
position: absolute; position: absolute;
......
vue.config.js
...@@ -52,11 +52,7 @@ module.exports = { ...@@ -52,11 +52,7 @@ module.exports = {
//添加代码压缩工具，及设置生产环境自动删除console //添加代码压缩工具，及设置生产环境自动删除console
new UglifyJsPlugin({ new UglifyJsPlugin({
uglifyOptions: { uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
}, },
sourceMap: false, sourceMap: false,
parallel: true, parallel: true,
......
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