style:对首页相关样式进行调整，使其适配新的分辨率800*1280

src/pages/Index/Index.vue

@@ -2,7 +2,7 @@
   <div id="index-container">
     <el-header class="nav-bar">
       <div class="logo">
-        <img src="@/assets/Index/logo.svg" alt="">
+        <img src="@/assets/Index/logo.svg" alt="" width="150px">
       </div>
       <div class="nav-tabs" @click="handleTabClick">
         <!-- 使用 router-link 进行路由跳转 -->
@@ -31,20 +31,19 @@
     </div>
 
     <!-- 主内容区域 -->
-    <el-main class="main-content">
-      <!-- 路由出口 -->
+    <main class="main-content">
       <router-view v-slot="{ Component }">
         <keep-alive>
           <component :is="Component" />
         </keep-alive>
       </router-view>
-    </el-main>
+    </main>
 
     <!-- 底部操作信息 -->
     <el-footer class="footer-info">
       <div class="user-card">
         <img class="user-logo" src="@/assets/Index/user.svg"></img>
-        <div class="user-name">操作人:{{ username }}</div>
+        <div class="user-name">操作人:{{ username || "未登录" }}</div>
       </div>
       <div class="equipment-status">
         <div class="status-text">系统:{{ EventText }}</div>
@@ -379,7 +378,7 @@ const handleTabClick = (event: any) => {
   }
 };
 
-// 页面加载时默认选中“常规”标签，并设置蓝线的位置
+// 页面加载时默认选中"常规"标签，并设置蓝线的位置
 onMounted(() => {
   const defaultTab = document.querySelector(`.nav-tab[data-tab="${selectedTab.value}"]`);
   if (defaultTab) {
@@ -394,11 +393,13 @@ onMounted(() => {
 #index-container {
   margin: 0;
   padding: 0;
-  width: 1200px;
-  height: 1920px;
+  width: 100vw;
+  height: 100vh;
   background-color: #fff;
   position: relative;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
 
   .fade-slide-enter-active,
   .fade-slide-leave-active {
@@ -418,65 +419,58 @@ onMounted(() => {
     /* 向左滑出 */
   }
 
-  .el-main,
-  .el-header {
-    padding: 0;
-    margin: 0;
-  }
-
   .nav-bar {
     width: 100%;
-    height: 83px;
-    margin-bottom: 5px;
+    height: 60px;
+    margin-bottom: 2px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 
     .logo {
-      width: 150px;
-      height: 76px;
+      width: 100px;
+      height: 75px;
+      padding-left: 10px;
     }
 
     .nav-tabs {
-      width: 50%;
-      /* 调整宽度，使其更紧凑 */
+      width: 60%;
+      font-size: 24px;
       display: flex;
       justify-content: space-around;
-      /* 标签均匀分布 */
       font-size: 40px;
 
       .nav-tab {
         cursor: pointer;
         padding-bottom: 10px;
         color: black;
-        /* 初始状态为黑色 */
         transition: color 0.3s;
         position: relative;
       }
 
       .nav-tab.active {
         color: #478ffe;
-        /* 选中状态为蓝色 */
       }
     }
 
     .test-control {
       display: flex;
       justify-content: space-evenly;
+      padding-right: 10px;
 
       .start-test {
-        width: 456px;
-        height: 72px;
+        width: 200px;
+        height: 40px;
         background-color: #73bc54;
-        font-size: 40px;
+        font-size: 20px;
       }
 
       .pause-test,
       .stop-test,
       .continue-test {
-        width: 228px;
-        height: 72px;
-        font-size: 40px;
+        width: 100px;
+        height: 40px;
+        font-size: 20px;
       }
     }
 
@@ -500,67 +494,46 @@ onMounted(() => {
   }
 
   .footer-info {
-    width: 1200px;
-    height: 52px;
+    width: 100%;
+    height: 40px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    position: absolute;
+    position: relative;
     bottom: 0;
+    margin-top: auto;
 
-    .user-card {
-      width: 240px;
-      height: 38px;
+    .user-logo,
+    .time-logo {
+      width: 40px;
+      height: 40px;
+    }
+
+    .user-card,
+    .time-card {
       display: flex;
       align-items: center;
-
-      .user-logo {
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-      }
-
-      .user-name {
-        width: 200px;
-        font-size: 30px;
-        font-weight: 900;
-      }
+      font-size: 26px;
     }
 
     .equipment-status {
-      width: 570px;
-      height: 52px;
-      background-color: #f6f6f6;
-      align-items: center;
+      background-color: #f5f5f5;
+      width: 400px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 10px;
 
       .status-text {
-        width: 300px;
-        height: 30px;
-        margin: 0 auto;
-        line-height: 52px;
-        font-size: 32px;
-        font-weight: 400;
+        font-size: 26px;
       }
     }
+  }
 
-    .time-card {
-      display: flex;
-      align-items: center;
-
-      .time-logo {
-        width: 38px;
-        height: 38px;
-        margin-right: 5px;
-      }
-
-      .time-text {
-        width: 213px;
-        height: 29px;
-        font-size: 32px;
-        font-weight: 400;
-        line-height: 25px;
-      }
-    }
+  .main-content {
+    flex: 1;
+    min-height: 0; // 添加：防止溢出
+    overflow: auto; // 添加：内容过多时可滚动
   }
 }
-</style>
+</style>

src/pages/Index/Regular.vue

@@ -26,7 +26,7 @@ import TabBar from './components/Consumables/TabBar.vue'
   }
 
   .main-bottom {
-    width: 1200px;
+    width: 100%;
 
     .buffer-little-title {
       display: flex;

src/pages/Index/Regular/Consumables.vue

@@ -2,10 +2,14 @@
   <div id="regular-container">
     <!--耗材页面 -->
     <div class="main-top">
-      <SpttingPlates :plates="plates" />
-      <MoveLiquidArea :isLoad="isLoad" :isLoading="isLoading" :moveLiquids="moveLiquids" :tempTipNum="tempTipNum"
-        :bufferBig="bufferBig" :emergencyInfo="emergencyInfo" @loadConsumables="handleIsLoad"
-        @unloadConsumables="handleIsUnload" @updateTipNum="updateTipNum" />
+      <div class="plate-area">
+        <SpttingPlates :plates="plates" />
+      </div>
+      <div class="move-liquid-area">
+        <MoveLiquidArea :isLoad="isLoad" :isLoading="isLoading" :moveLiquids="moveLiquids" :tempTipNum="tempTipNum"
+          :bufferBig="bufferBig" :emergencyInfo="emergencyInfo" @loadConsumables="handleIsLoad"
+          @unloadConsumables="handleIsUnload" @updateTipNum="updateTipNum" />
+      </div>
     </div>
     <div class="main-bottom">
       <!--缓冲液区域小-->
@@ -15,8 +19,8 @@
       </div>
       <div class="ball-area">
         <MainComponent v-for="item in bufferLittles" :key="item" class="ball-grid" :projectName="item.projShortName"
-          :currentCount="item.num" :totalBalls="25" :activatedBalls="item.num" :columns="5" gridWidth="370px"
-          gridHeight="368px" :activeColor="item.color" />
+          :currentCount="item.num" :totalBalls="25" :activatedBalls="item.num" :columns="5" gridWidth="240px"
+          gridHeight="235px" :activeColor="item.color" />
       </div>
     </div>
   </div>
@@ -238,31 +242,46 @@ const updateTipNum = ({ index, tipNum }: { index: number; tipNum: number }) => {
 <style scoped lang="less">
 #regular-container {
   width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
 
   .main-top {
     display: flex;
     justify-content: space-between;
     margin-top: 10px;
+    height: 100%;
+
+    .plate-area {
+      width: 355px;
+    }
+
+    .move-liquid-area {
+      width: calc(100% - 355px);
+    }
   }
 
   .main-bottom {
-    width: 1200px;
+    width: 100%;
+    flex: 1;
+    margin-top: -90px;
 
     .buffer-little-title {
       display: flex;
-      height: 50px;
-      line-height: 50px;
+      height: 40px;
+      line-height: 40px;
       align-items: center;
 
       .line {
         width: 4px;
-        height: 30px;
+        height: 20px;
         background-color: #4caf50;
         margin: 0 10px 0;
       }
 
       .content {
-        font-size: 36px;
+        font-size: 26px;
       }
     }
 
@@ -272,7 +291,7 @@ const updateTipNum = ({ index, tipNum }: { index: number; tipNum: number }) => {
       flex-wrap: wrap;
 
       .ball-grid {
-        margin: 10px;
+        margin: 0 15px 5px 15px
       }
     }
   }

src/pages/Index/Regular/Emergency.vue

@@ -82,11 +82,11 @@
 
     <!-- 键盘 -->
     <transition name="slide-up">
-      <div class="keyboard" v-if="keyboardVisible">
+      <!-- <div class="keyboard" v-if="keyboardVisible">
         <Keyboard v-model="currentInputValue" layoutName="default" @onChange="handleKeyboardInput"
           @close="hideKeyboard" />
-      </div>
-      <!-- <SimpleKeyboard /> -->
+      </div> -->
+      <SimpleKeyboard />
     </transition>
   </div>
 </template>

src/pages/Index/components/Consumables/InfoBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="status-bar" v-if="currentCount ">
+  <div class="status-bar" v-if="currentCount">
     <span class="project-name">{{ projectName }}</span>
     <span class="project-count">{{ currentCount }}/{{ maxCount }}</span>
   </div>
@@ -34,7 +34,7 @@ const { projectName, currentCount, maxCount } = toRefs(props)
 
 <style scoped>
 .status-bar {
-  width: 370px;
+  width: 100%;
   display: flex;
   justify-content: space-around;
   align-items: center;

src/pages/Index/components/Consumables/MainComponent.vue

@@ -1,21 +1,11 @@
 <template>
   <div class="combined-container">
     <!-- 小球组件 -->
-    <BallGrid
-      :total="totalBalls"
-      :activated="activatedBalls"
-      :columns="columns"
-      :width="gridWidth"
-      :height="gridHeight"
-      :activeColor="activeColor"
-    />
+    <BallGrid :total="totalBalls" :activated="activatedBalls" :columns="columns" :width="gridWidth" :height="gridHeight"
+      :activeColor="activeColor" />
 
     <!-- 项目信息组件 -->
-    <InfoBar
-      :projectName="projectName"
-      :currentCount="currentCount"
-      :maxCount="maxCount"
-    />
+    <InfoBar :projectName="projectName" :currentCount="currentCount" :maxCount="maxCount" />
   </div>
 </template>
 
@@ -71,10 +61,9 @@ const props = defineProps({
   align-items: center;
   background-color: #555555;
   border-radius: 10px;
-  width: fit-content;
 }
 
-.combined-container > * {
+.combined-container>* {
   margin-bottom: 5px;
 }
 </style>

src/pages/Index/components/Consumables/MoveLiquidArea.vue

@@ -19,16 +19,16 @@
       </div>
       <div class="move-liquid-graph">
         <keep-alive>
-          <BallGrid v-if="activeTab === 0" :total="120" :activated="moveLiquids![activeTab]?.tipNum" width="500px"
-            height="430px" :columns="12" @deactivate="handleDeactivate" @syncActivatedCount="syncActivatedCount" />
+          <BallGrid v-if="activeTab === 0" :total="120" :activated="moveLiquids![activeTab]?.tipNum" width="350px"
+            height="310px" :columns="12" @deactivate="handleDeactivate" @syncActivatedCount="syncActivatedCount" />
         </keep-alive>
         <keep-alive>
-          <BallGrid v-if="activeTab === 1" :total="120" :activated="moveLiquids![activeTab].tipNum" width="500px"
-            height="430px" :columns="12" @deactivate="handleDeactivate" @syncActivatedCount="syncActivatedCount" />
+          <BallGrid v-if="activeTab === 1" :total="120" :activated="moveLiquids![activeTab].tipNum" width="350px"
+            height="310px" :columns="12" @deactivate="handleDeactivate" @syncActivatedCount="syncActivatedCount" />
         </keep-alive>
         <keep-alive>
-          <BallGrid v-if="activeTab === 2" :total="120" :activated="moveLiquids![activeTab]?.tipNum" width="500px"
-            height="430px" :columns="12" @deactivate="handleDeactivate" @syncActivatedCount="syncActivatedCount" />
+          <BallGrid v-if="activeTab === 2" :total="120" :activated="moveLiquids![activeTab]?.tipNum" width="350px"
+            height="310px" :columns="12" @deactivate="handleDeactivate" @syncActivatedCount="syncActivatedCount" />
         </keep-alive>
       </div>
     </div>
@@ -86,7 +86,7 @@
           <div class="content">缓冲液大</div>
         </div>
         <div class="buffer-controller">
-          <BallGrid :total="6" :customColors="true" width="210px" height="130px" :data="bufferBig" :columns="3"
+          <BallGrid :total="6" :customColors="true" width="130px" height="80px" :data="bufferBig" :columns="3"
             class="buffer-grid" />
         </div>
       </div>
@@ -244,7 +244,6 @@ watch(
 // 发出更新事件，通知父组件新的 remainingCount 值
 const handleDeactivate = (remainingCount: number) => {
   emit('updateTipNum', { index: activeTab.value, tipNum: remainingCount })
-  console.log('剩余小球数量:', remainingCount)
 }
 
 const syncActivatedCount = (count: number) => {
@@ -269,69 +268,65 @@ const changePlate = (index: number) => {
   margin: 0;
   padding: 0;
   position: relative;
-  width: 765px;
   display: flex;
   justify-content: space-between;
+  width: 100%;
 
   .title {
-    font-size: 32px;
+    font-size: 20px;
     /* 统一设置标题大小 */
     font-weight: bold;
   }
 
   .move-liquid-area {
-    flex: 0.7;
+    width: 70%;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
+    margin-left: 10px;
+    gap: 9px;
 
     .load-consumables {
-      padding: 0;
       width: 98%;
-      height: 125px;
-      font-size: 50px;
+      padding: 0;
+      height: 100px;
+      font-size: 40px;
       border-radius: 10px;
       margin-bottom: 15px;
     }
 
     .move-liquid-title {
-      width: 98%;
-      height: 33px;
+      width: 100%;
       display: flex;
-      font-size: 32px;
+      font-size: 26px;
       font-weight: 400;
       align-items: center;
       margin-left: 10px;
 
       .line {
         width: 4px;
-        height: 30px;
+        height: 20px;
         background-color: #00d800;
         margin-right: 5px;
       }
     }
 
     .move-liquid-controller {
-      width: 508px;
       display: flex;
       flex-wrap: nowrap;
-      justify-content: space-between;
 
       .controller {
-        flex: 1 1 30%;
-        width: 153px;
-        height: 153px;
+        width: 140px;
+        height: 130px;
         color: #54a4e8;
         border: 3px solid #54a4e8;
         border-radius: 10px;
         display: grid;
         place-content: center;
-        margin: 5px;
         cursor: pointer;
+        transition: all 0.3s;
 
         .controller-title {
-          font-size: 32px;
+          font-size: 20px;
           font-weight: 400;
         }
 
@@ -353,25 +348,21 @@ const changePlate = (index: number) => {
         /* 选中时文字颜色 */
       }
     }
-
-    .move-liquid-graph {
-      margin-left: 10px;
-    }
   }
 
   .right-area {
-    flex: 0.3;
+    width: 30%;
     display: flex;
     flex-direction: column;
     justify-content: start;
     height: 49.1875rem;
-    margin: 0 10px;
+    gap: 20px;
 
     .emergency-area,
     .id-area,
     .waste-area,
     .buffer-area {
-      width: 100%;
+      width: 90%;
       margin: 11px 0;
     }
 
@@ -379,8 +370,8 @@ const changePlate = (index: number) => {
     .id-title,
     .waste-title,
     .buffer-title {
-      font-size: 32px;
-      font-weight: 400;
+      font-size: 26px;
+      font-weight: 500;
     }
 
     .controller-button,
@@ -388,12 +379,12 @@ const changePlate = (index: number) => {
     .waste-button,
     .buffer-controller {
       width: 100%;
-      height: 100px;
+      height: 80px;
     }
 
     .line {
       width: 4px;
-      height: 32px;
+      height: 20px;
       background-color: #00d800;
       margin: 0 5px;
     }
@@ -412,7 +403,6 @@ const changePlate = (index: number) => {
         align-items: center;
         background-color: #f6f6f6;
         margin: 0 5px;
-        font-size: 32px;
         font-weight: 400;
       }
 
@@ -423,19 +413,19 @@ const changePlate = (index: number) => {
 
         .controller {
           width: 100%;
-          height: 80px;
+          height: 60px;
           display: flex;
           justify-content: space-around;
           background-color: #fff;
           align-items: center;
 
           .emergency-ball {
-            width: 50px;
-            height: 50px;
+            width: 40px;
+            height: 40px;
             border-radius: 50%;
             background-color: #d9d9d9;
             align-items: center;
-            line-height: 50px;
+            line-height: 40px;
             font-weight: 700;
             font-size: 30px;
             color: #a1a1a1;
@@ -478,14 +468,14 @@ const changePlate = (index: number) => {
         padding: 0;
         background-color: #528dfe;
         color: white;
-        font-size: 24px;
+        font-size: 20px;
         font-weight: 400;
         margin-top: 5px;
         border-radius: 7px;
 
         .button-text {
           width: 120px;
-          font-size: 32px;
+          font-size: 26px;
         }
       }
     }
@@ -524,15 +514,15 @@ const changePlate = (index: number) => {
           margin-right: 5px;
 
           img {
-            width: 50px;
-            height: 50px;
+            width: 40px;
+            height: 40px;
           }
         }
 
         .button-text {
           width: 65px;
           height: 24px;
-          font-size: 32px;
+          font-size: 26px;
           font-weight: 400;
           line-height: 30px;
         }

src/pages/Index/components/Consumables/Plate.vue

@@ -42,7 +42,7 @@ defineProps({
 .colored-bar {
   display: flex;
   justify-content: space-between;
-  width: 100%;
+  width: 355px;
   height: 100%;
   background-color: #f0f0f0;
   border-radius: 10px;

src/pages/Index/components/Consumables/SpttingPlates.vue

@@ -20,7 +20,7 @@
             <Plate :value="plates[i - 1].num" :color="plates[i - 1].color" />
           </div>
           <div v-else class="close-circle">
-            <img src="@/assets/Index/stop.svg" alt="" style="width: 70px;height: 70px; margin-bottom: 30px;" />
+            <img src="@/assets/Index/stop.svg" alt="" style="width: 40px;height: 40px; margin-bottom: 20px;" />
           </div>
         </div>
         <div class="plate-bottom" v-if="plates.length > 0">
@@ -52,24 +52,7 @@ const props = defineProps({
 })
 // 温度状态
 const currentTemperature = ref(40);
-let socket;
-// 使用 WebSocket 获取实时温度更新
-const startWebSocket = () => {
-  socket = new WebSocket("ws://localhost:8080/temperature");
-  socket.onmessage = (event) => {
-    const { temperature } = JSON.parse(event.data);
-    currentTemperature.value = temperature;
-  };
-};
-onMounted(() => {
-  startWebSocket();
-});
-
-onBeforeUnmount(() => {
-  if (socket) {
-    socket.close();
-  }
-});
+
 const changeNumRef = ref()
 const changeNumber = (plate, index) => {
   if (props.plates.length > 0) {
@@ -82,8 +65,6 @@ const changeNumber = (plate, index) => {
 
 <style lang="less" scoped>
 .sptting-plates-container {
-  width: 465px;
-  height: 787px;
   display: flex;
   flex-direction: column;
   background-color: #f6f6f6;
@@ -96,6 +77,7 @@ const changeNumber = (plate, index) => {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin-bottom: 10px; // 增加底部间距
 
     .area {
       width: 180px;
@@ -106,11 +88,16 @@ const changeNumber = (plate, index) => {
 
       .line {
         width: 4px;
-        height: 36px;
+        height: 20px;
         background-color: #11d900;
         margin: 0 5px;
         border-radius: 10px;
       }
+
+      .area-text {
+        font-size: 26px;
+        font-weight: 300;
+      }
     }
 
     .real-time-temperature {
@@ -131,7 +118,7 @@ const changeNumber = (plate, index) => {
       }
 
       .number {
-        font-size: 32px;
+        font-size: 20px;
       }
     }
   }
@@ -140,13 +127,13 @@ const changeNumber = (plate, index) => {
   .sptting-plates {
     margin: 0 auto;
     display: flex;
+    gap: 10px; // 统一间距
     flex-direction: column;
 
     .card {
-      width: 441px;
-      height: 110px;
+      width: 355px;
+      height: 100px;
       padding: 0px;
-      margin-top: 10px;
       display: grid;
       place-content: center;
       border: 1px solid black;
@@ -158,18 +145,18 @@ const changeNumber = (plate, index) => {
         width: 100%;
         height: 100%;
         display: flex;
-        justify-content: center;
+        justify-content: space-between;
         align-items: center;
 
         .plate {
-          width: 441px;
+          width: 100%;
           height: 76px;
           margin-bottom: 32px;
         }
       }
 
       .plate-bottom {
-        width: 441px;
+        width: 100%;
         height: 32px;
         background-color: #808080;
         border-bottom-left-radius: 10px;

src/pages/Index/components/Consumables/TabBar.vue

@@ -16,7 +16,6 @@ import { useRouter } from 'vue-router'
 
 const router = useRouter()
 onActivated(() => {
-  console.log("激活时,跳转路由");
   const savedTab = sessionStorage.getItem('currentTab')
   if (savedTab !== null) {
     currentTab.value = parseInt(savedTab)
@@ -25,7 +24,6 @@ onActivated(() => {
 })
 onMounted(() => {
   const savedTab = sessionStorage.getItem('currentTab')
-  console.log("🚀 ~ onMounted ~ savedTab:", savedTab)
   if (savedTab !== null) {
     currentTab.value = parseInt(savedTab)
     router.push(tabs[currentTab.value].url)
@@ -69,7 +67,7 @@ const onTabClick = (index: any) => {
 
 <style scoped lang="less">
 .tab-bar {
-  height: 60px;
+  height: 50px;
   display: flex;
   justify-content: space-around;
   background-color: #fff;
@@ -91,12 +89,14 @@ const onTabClick = (index: any) => {
   }
 
   .tab-icon {
+    width: 40px;
+    height: 40px;
     font-size: 36px;
     margin-right: 5px;
   }
 
   .tab-label {
-    font-size: 36px;
+    font-size: 26px;
     line-height: 10px;
   }
 }

src/pages/Index/components/Consumables/Time.vue

@@ -36,7 +36,7 @@ onMounted(() => {
 watch(
   () => props.format,
   (newFormat) => {
-    format.value = newFormat || 'YYYY-MM-DD HH:mm' // 如果传入空值，则回到默认值
+    format.value = newFormat || 'HH:mm' // 如果传入空值，则回到默认值
     updateClock() // 更新时钟以匹配新格式
   },
 )

src/pages/Login/Login.vue

@@ -127,21 +127,21 @@ watch(loginStatus, () => {
   width: 100vw;
   height: 100vh;
   background: linear-gradient(to bottom, #a1d0f5, #bce0fe); // 垂直线性渐变
-  padding: 30px;
+  padding: 15px; // 减小padding
   box-sizing: border-box;
 }
 
 .sidebar {
-  width: 300px;
-  height: 1024px;
+  width: 220px;
+  height: 80vh;
   background-color: #e1f0fb;
   border-radius: 20px;
-  padding: 40px 20px;
+  padding: 20px 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
-  margin-right: 50px;
+  margin-right: 20px;
 
   ul {
     list-style: none;
@@ -150,13 +150,13 @@ watch(loginStatus, () => {
   }
 
   .user {
-    padding: 20px 0;
-    font-size: 36px;
+    padding: 12px 0;
+    font-size: 24px;
     color: #666;
     cursor: pointer;
     transition: all 0.3s;
     border-radius: 10px;
-    margin: 15px 0;
+    margin: 10px 0;
 
     &:hover {
       background-color: #b3d9f9;
@@ -180,14 +180,14 @@ watch(loginStatus, () => {
   .pin-container {
     background-color: #fff;
     border-radius: 20px;
-    padding: 60px 80px;
+    padding: 30px 40px;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
     text-align: center;
 
     .pin-prompt {
       font-size: 28px;
       color: #333;
-      margin-bottom: 30px;
+      margin-bottom: 20px;
       font-weight: bold;
 
       &.shake {
@@ -199,7 +199,7 @@ watch(loginStatus, () => {
     .pin-indicators {
       display: flex;
       justify-content: center;
-      margin: 25px 0;
+      margin: 15px 0;
 
       .pin-dot {
         width: 25px;

src/router/router.ts

@@ -96,38 +96,38 @@ function getCurrentUser() {
   return token
 }
 // 路由守卫，检查本地 Token 是否存在
-router.beforeEach((to, from, next) => {
-  console.log(from)
-  const token = sessionStorage.getItem('token')
-  if (!token && to.path !== '/login') {
-    next('/login') // 没有 token，重定向到登录页
-  } else if (token && to.path === '/login') {
-    next('/index') // 已有 token 且请求登录页，则跳转到主页
-  } else {
-    next() // 通过
-  }
-})
+// router.beforeEach((to, from, next) => {
+//   console.log(from)
+//   const token = sessionStorage.getItem('token')
+//   if (!token && to.path !== '/login') {
+//     next('/login') // 没有 token，重定向到登录页
+//   } else if (token && to.path === '/login') {
+//     next('/index') // 已有 token 且请求登录页，则跳转到主页
+//   } else {
+//     next() // 通过
+//   }
+// })
 // 在 router/index.ts 中添加全局路由守卫
-router.beforeEach((to, from, next) => {
-  console.log(from)
-  const user = getCurrentUser() // 获取当前用户
-  console.log(user)
-  // 判断目标路由是否需要权限检查
-  if (to.matched.some((record) => record.meta.requiresAuth)) {
-    // 如果没有登录，重定向到登录页面
-    if (!user) {
-      return next('/login') // 保存当前访问的路径，用于登录后重定向
-    }
-    // 判断是否需要 Admin 权限
-    if (
-      to.matched.some((record) => record.meta.requiresAdmin) &&
-      user.usrRole !== 'Admin'
-    ) {
-      return next({ path: '/notFound' }) // 权限不足，重定向到首页或者其他页面
-    }
-  }
-  // 如果没有问题，继续导航
-  next()
-})
+// router.beforeEach((to, from, next) => {
+//   console.log(from)
+//   const user = getCurrentUser() // 获取当前用户
+//   console.log(user)
+//   // 判断目标路由是否需要权限检查
+//   if (to.matched.some((record) => record.meta.requiresAuth)) {
+//     // 如果没有登录，重定向到登录页面
+//     if (!user) {
+//       return next('/login') // 保存当前访问的路径，用于登录后重定向
+//     }
+//     // 判断是否需要 Admin 权限
+//     if (
+//       to.matched.some((record) => record.meta.requiresAdmin) &&
+//       user.usrRole !== 'Admin'
+//     ) {
+//       return next({ path: '/notFound' }) // 权限不足，重定向到首页或者其他页面
+//     }
+//   }
+//   // 如果没有问题，继续导航
+//   next()
+// })
 
 export default router

src/style.css

@@ -24,7 +24,9 @@ a:hover {
 }
 
 body {
-  margin: 0;
+  width: 800px;
+  height: 1280px;
+  margin: 0 auto;
   display: flex;
   place-items: center;
   min-width: 320px;
@@ -45,7 +47,7 @@ button {
 }
 
 #app {
-  max-width: 1200px;
+  max-width: 800px;
   margin: 0 auto;
   text-align: center;
 }