页面适应

src/views/Home.vue

@@ -31,7 +31,7 @@
         </div>
         <div class="icon">
           <div class="phone">
-            <img src="../assets/phone.png" alt />
+            <img src="../assets/phone.gif" alt />
           </div>
           <!-- <img :src="connectIdCode" alt=""> -->
         </div>
@@ -45,17 +45,15 @@
         <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" >
+    <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="progress3"></div>
         <div class="progress4" v-show="state == 'MAIN_BONDING'"></div>
       </div>
     </div>
@@ -86,7 +84,8 @@ export default {
     return {
       qrcode: "http://www.maxrocky.com/",
       link: "http://www.maxrocky.com/",
-      state: "",
+      state: "MAIN_BONDING",
+      loadingState: "",
       connectIdCode: "",
       isLoading: false,
       isConnected: false
@@ -130,12 +129,14 @@ export default {
         duration: 10000
       });
     },
-    closeLoading() {
+    loadingFinished() {
       anime({
         targets: this.$refs["progress"],
         width: "100%",
-        duration: 0
+        duration: 200
       });
+    },
+    closeLoading() {
       this.isLoading = false;
       anime({
         targets: this.$refs["progress"],
@@ -167,10 +168,24 @@ export default {
   },
   watch: {
     isConnected: function(value) {
-      if (value) {
-        alert(value);
-      } else {
-        alert(value);
+      console.log(value);
+      // if (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) {
@@ -183,17 +198,19 @@ export default {
         case "MAIN_STANDBY":
           this.MAIN_STANDBY();
           break;
-        case "SHOW_LOADING":
-          this.showLoading();
-          break;
-        case "SHOW_FINISH":
-          this.closeLoading();
-          break;
       }
     }
   },
   mounted() {
     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() {
     window.test = this;
@@ -226,6 +243,9 @@ export default {
       window.$observer("app.onPageChange", state => {
         this.state = state.new;
       });
+      window.$observer("app.onFilmLoadStateChange", state => {
+        this.loadingState = state;
+      });
     });
     // LAUNCH, // 启动页（预留）
     // MAIN_INIT_QRCODE, // 初始化二维码页
@@ -237,7 +257,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 .home {
-  height: 100vh;
+  height: 1080px;
+  width: 1920px;
+  margin: 0 auto;
   background: url("../assets/01_启动页1.jpg") no-repeat center;
   background-size: cover;
   overflow: hidden;
@@ -355,7 +377,8 @@ export default {
   top: 0;
   left: 0;
   right: 0;
-  height: 100vh;
+  bottom: 0;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -366,6 +389,7 @@ export default {
     position: relative;
     background-color: rgba(255, 255, 255, 0.5);
     border-radius: 2px;
+    margin-top: -60px;
     .progress2 {
       content: "";
       position: absolute;

vue.config.js

@@ -52,11 +52,7 @@ module.exports = {
         //添加代码压缩工具，及设置生产环境自动删除console
         new UglifyJsPlugin({
           uglifyOptions: {
-            compress: {
-              warnings: false,
-              drop_debugger: true,
-              drop_console: true,
-            },
+
           },
           sourceMap: false,
           parallel: true,