邓洁 : 适配大屏

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "autofit.js": "^3.0.4",
     "axios": "^1.4.0",
     "echarts": "^5.4.2",
     "element-plus": "^2.3.5",

src/App.vue

@@ -1,7 +1,31 @@
 <template>
-  <RouterView />
+  <RouterView/>
 </template>
 
 <script setup>
+import autofit from 'autofit.js';
 
+onMounted(() => {
+  autofit.init({
+    dh: 2160,
+    dw: 3840,
+    el: "#app",
+    resize: true,
+    ignore: [
+      {
+        el: "#tunnel-box", //必填
+        height: "100vh", //可选，需注明单位
+        width: "100vw", //可选，需注明单位
+      }, {
+        el: "#login-box", //必填
+        height: "100vh", //可选，需注明单位
+        width: "100vw", //可选，需注明单位
+      },{
+        el: "#chat-box", //必填
+        height: "100vh", //可选，需注明单位
+        width: "100vw", //可选，需注明单位
+      }
+    ],
+  });
+});
 </script>

src/views/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="chat-box">
     <div class="chat-box">
       <div>
         <span>请输入序列号: </span>
@@ -127,4 +127,4 @@ const handleClear = () => {
   top: 0;
   right: 0;
 }
-</style>
+</style>

src/views/login/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="login-box">
+  <div class="login-box" id="login-box">
     <el-form
         :model="loginForm"
         ref="formInstance"

src/views/tunnel/index.vue

@@ -1,9 +1,39 @@
 <template>
-  <tunnel-scene />
+  <div class="home">
+    <div class="home-left">
+      <div class="example">
+
+      </div>
+    </div>
+    <div class="center">
+      <tunnel-scene id="tunnel-box"/>
+    </div>
+    <div class="home-right">
+    </div>
+  </div>
 </template>
 
 <script setup>
 import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.home {
+  position: relative;
+  pointer-events: none;
+
+  .home-left {
+    z-index: 2;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    .example {
+      width: 830px;
+      height: 521px;
+      background-color: #fff;
+      opacity: 0.5;
+    }
+  }
+}
+</style>