diff --git a/package.json b/package.json
index 033d4ca..6ee804c 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index 3411ad5..58268a8 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a7423be..689481f 100644
--- a/src/views/home/index.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index d118558..58093a8 100644
--- a/src/views/login/index.vue
+++ b/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"
diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
index da75e22..98dbfa1 100644
--- a/src/views/tunnel/index.vue
+++ b/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>