1

package-lock.json

@@ -8,6 +8,7 @@
       "name": "shuinichang",
       "version": "0.1.0",
       "dependencies": {
+        "autofit.js": "^3.0.7",
         "axios": "^1.6.2",
         "babel-preset-es2015": "^6.24.1",
         "core-js": "^3.8.3",
@@ -4344,6 +4345,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/autofit.js": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmmirror.com/autofit.js/-/autofit.js-3.0.7.tgz",
+      "integrity": "sha512-Mu6ormG85X8vG99R/66wtiOc8roRJBrwsuDVb16Bia7NqYuf0+0SRyfh9jTbyL0mtK7JRFHVDyfxq93Yajndnw=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.16",
       "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.16.tgz",
@@ -17002,6 +17008,11 @@
       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
       "dev": true
     },
+    "autofit.js": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmmirror.com/autofit.js/-/autofit.js-3.0.7.tgz",
+      "integrity": "sha512-Mu6ormG85X8vG99R/66wtiOc8roRJBrwsuDVb16Bia7NqYuf0+0SRyfh9jTbyL0mtK7JRFHVDyfxq93Yajndnw=="
+    },
     "autoprefixer": {
       "version": "10.4.16",
       "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.16.tgz",

package.json

@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "autofit.js": "^3.0.7",
     "axios": "^1.6.2",
     "babel-preset-es2015": "^6.24.1",
     "core-js": "^3.8.3",

src/App.vue

@@ -2,13 +2,22 @@
   <div id="app">    <router-view />  </div>
 </template>
 <script>
+import autofit from "autofit.js";
 export default {
   data() {
-    return{
+    return {};
-      
-    }
   },
   mounted() {
+    autofit.init(
+      {
+        dh: 3240,
+        dw: 7680,
+        el: "#app",
+        resize: true,
+      },
+      false
+    );
+
     if (window.vuplex) {
       this.addMessageListener();
     } else {
@@ -36,6 +45,9 @@ export default {
       });
     },
   },
+  beforeDestroy() {
+    autofit.off();
+  },
 };
 </script>
 <style>
@@ -47,10 +59,10 @@ export default {
 }
 
 #app {
-  width: 7680px;
+  /* width: 7680px;
-  height: 3240px;
+  height: 3240px; */
-  /* width: 100vw;
+  width: 100vw;
-  height: 100vh; */
+  height: 100vh;
   overflow: hidden;
   /* background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
     url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png); */