Skip to content

visualcloud / Vmatrix-device-start

Go to a project
Commit 6c3b02f2 by hank
Options

bug

parent 643b3ca6
Showing with 56 additions and 44 deletions
postcss.config.js
module.exports = { module.exports = {
plugins: { plugins: {
autoprefixer: {}, autoprefixer: {},
'postcss-pxtorem': { // 'postcss-pxtorem': {
rootValue: 192.0,//136 // rootValue: 192.0,//136
propList: ['*'] // propList: ['*']
} // }
} }
} }
src/App.vue
...@@ -20,6 +20,10 @@ export default { ...@@ -20,6 +20,10 @@ export default {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
} }
* { * {
margin: 0; margin: 0;
......
src/views/Home.vue
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<turntable /> <turntable />
</div> </div>
</div> </div>
<div class="mainstandby" ref='mainstandby'> <div class="mainstandby" ref="mainstandby">
<div class="mainstandby1"> <div class="mainstandby1">
<div class="title">Vmatrix-可视化云平台</div> <div class="title">Vmatrix-可视化云平台</div>
<div class="description"> <div class="description">
...@@ -32,8 +32,8 @@ ...@@ -32,8 +32,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="mainbonding" ref='mainbonding'> <div class="mainbonding" ref="mainbonding">
<div class="mainbonding1" ref='mainbonding1'> <div class="mainbonding1" ref="mainbonding1">
<div class="title">正在配置网络</div> <div class="title">正在配置网络</div>
<div class="description"> <div class="description">
<span>配置网络时请您保持网络稳定</span> <span>配置网络时请您保持网络稳定</span>
...@@ -45,7 +45,6 @@ ...@@ -45,7 +45,6 @@
<!-- <img :src="connectIdCode" alt=""> --> <!-- <img :src="connectIdCode" alt=""> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="bottom-tips"> <div class="bottom-tips">
...@@ -79,18 +78,18 @@ ...@@ -79,18 +78,18 @@
</template> </template>
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import loading from "@/components/loading.vue"; import loading from "@/components/loading.vue";
import turntable from "@/components/turntable.vue"; import turntable from "@/components/turntable.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";
// LAUNCH, // 启动页（预留） // LAUNCH, // 启动页（预留）
// MAIN_INIT_QRCODE, // 初始化二维码页 // MAIN_INIT_QRCODE, // 初始化二维码页
// MAIN_BONDING, // 正在绑定 // MAIN_BONDING, // 正在绑定
// MAIN_STANDBY, // 待机页 // MAIN_STANDBY, // 待机页
// SHOW; // 模版展示页 // SHOW; // 模版展示页
export default { export default {
// name: 'Home', // name: 'Home',
components: { components: {
// HelloWorld // HelloWorld
...@@ -145,7 +144,6 @@ ...@@ -145,7 +144,6 @@
], ],
duration: 10000 duration: 10000
}); });
}, },
loadingFinished() { loadingFinished() {
anime({ anime({
...@@ -182,7 +180,6 @@ ...@@ -182,7 +180,6 @@
duration: 3000, duration: 3000,
scale: [0, 1.3] scale: [0, 1.3]
}); });
}, },
MAIN_BONDING() { MAIN_BONDING() {
anime({ anime({
...@@ -190,15 +187,14 @@ ...@@ -190,15 +187,14 @@
translateX: "-50%", translateX: "-50%",
translateY: "-20%", translateY: "-20%",
// rotateY: [0, 360], // rotateY: [0, 360],
duration: 3000, duration: 3000
}); });
}, },
showTitle() { showTitle() {
anime({ anime({
targets: this.$refs["maininitqrcode"], targets: this.$refs["maininitqrcode"],
width: 1920, width: 1920,
easing: 'linear' easing: "linear"
}); });
/*anime({ /*anime({
targets: this.$refs["mainbonding"], targets: this.$refs["mainbonding"],
...@@ -222,7 +218,7 @@ ...@@ -222,7 +218,7 @@
anime({ anime({
targets: this.$refs["mainbonding"], targets: this.$refs["mainbonding"],
width: 1920, width: 1920,
easing: 'linear' easing: "linear"
}); });
}, },
showTitle3() { showTitle3() {
...@@ -244,9 +240,9 @@ ...@@ -244,9 +240,9 @@
anime({ anime({
targets: this.$refs["mainstandby"], targets: this.$refs["mainstandby"],
width: 1920, width: 1920,
easing: 'linear' easing: "linear"
}); });
}, }
}, },
watch: { watch: {
isConnected: function(value) { isConnected: function(value) {
...@@ -258,7 +254,7 @@ ...@@ -258,7 +254,7 @@
// } // }
}, },
loadingState: function(value) { loadingState: function(value) {
switch(value) { switch (value) {
case "LOADING": case "LOADING":
this.showLoading(); this.showLoading();
break; break;
...@@ -274,7 +270,7 @@ ...@@ -274,7 +270,7 @@
} }
}, },
state: function(value) { state: function(value) {
switch(value) { switch (value) {
case "MAIN_INIT_QRCODE": case "MAIN_INIT_QRCODE":
this.MAIN_INIT_QRCODE(); this.MAIN_INIT_QRCODE();
this.showTitle(); this.showTitle();
...@@ -295,20 +291,32 @@ ...@@ -295,20 +291,32 @@
mounted() { mounted() {
this.MAIN_INIT_QRCODE(); this.MAIN_INIT_QRCODE();
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
// document.body.style.zoom = window.innerWidth / 1920; setZoom()
// this.$refs["home"].style.zoom = window.innerWidth/1920; }, true);
}); const setZoom = () => {
var width = window.innerWidth;
var height = window.innerHeight;
let zoom = height / 1080;
if (width / height <= 16 / 9) {
zoom = width / 1920;
}
if (width / height >= 16 / 9) {
zoom = height / 1080;
}
console.log(zoom)
this.$refs["home"].style.zoom = zoom;
};
// document.body.style.zoom = window.innerWidth / 1920; // document.body.style.zoom = window.innerWidth / 1920;
// alert(window.innerWidth) // alert(window.innerWidth)
// alert(window.innerHeight) // alert(window.innerHeight)
// this.$refs["home"].style.zoom = window.innerWidth/1920; setZoom();
// this.$refs["home"].style.transform = `scale(${window.innerWidth / 1920})`; // this.$refs["home"].style.transform = `scale(${window.innerWidth / 1920})`;
}, },
created() { created() {
window.test = this; window.test = this;
this.toQRcode(); this.toQRcode();
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
if(!window.jsbridge) { if (!window.jsbridge) {
reject(); reject();
} }
window.jsbridge.init(); window.jsbridge.init();
...@@ -345,10 +353,10 @@ ...@@ -345,10 +353,10 @@
// MAIN_STANDBY, // 待机页 // MAIN_STANDBY, // 待机页
// SHOW; // 模版展示页 // SHOW; // 模版展示页
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.home { .home {
height: 1080px; height: 1080px;
width: 1920px; width: 1920px;
margin: 0 auto; margin: 0 auto;
...@@ -446,7 +454,6 @@ ...@@ -446,7 +454,6 @@
margin-top: -150px; margin-top: -150px;
overflow: hidden; overflow: hidden;
right: 0; right: 0;
} }
.mainbonding1 { .mainbonding1 {
position: absolute; position: absolute;
...@@ -515,9 +522,9 @@ ...@@ -515,9 +522,9 @@
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
} }
} }
.progress-container { .progress-container {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -566,23 +573,23 @@ ...@@ -566,23 +573,23 @@
width: 50%; width: 50%;
} }
} }
} }
@keyframes rotate { @keyframes rotate {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@keyframes rotate { @keyframes rotate {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
</style> </style>
\ No newline at end of file
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