From 1a82e7d36a5b6ba38e7d64b1bdbbbb88169df3ae Mon Sep 17 00:00:00 2001
From: xiaozhiyong <xiaozhiyong@sdxkhlw.cn>
Date: Tue, 16 Jun 2026 13:43:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view/largeScreen2/index.vue | 928 +++++++++++++++++++-------------
 1 file changed, 548 insertions(+), 380 deletions(-)

diff --git a/src/view/largeScreen2/index.vue b/src/view/largeScreen2/index.vue
index c5029f7..27afda6 100644
--- a/src/view/largeScreen2/index.vue
+++ b/src/view/largeScreen2/index.vue
@@ -4,7 +4,13 @@
     <div class="scan-light"></div>
     <div class="container">
       <div class="left">
-        <div class="module-card left-first-module device-link-card" role="button" tabindex="0" @click="goToEquipmentOverview" @keyup.enter="goToEquipmentOverview">
+        <div
+          class="module-card left-first-module device-link-card"
+          role="button"
+          tabindex="0"
+          @click="goToEquipmentOverview"
+          @keyup.enter="goToEquipmentOverview"
+        >
           <div class="module-header">
             <div class="module-title">
               <span class="title-icon"></span>
@@ -25,7 +31,13 @@
             </div>
           </div>
         </div>
-        <div class="module-card left-second-module device-link-card" role="button" tabindex="0" @click="goToEquipmentOverview" @keyup.enter="goToEquipmentOverview">
+        <div
+          class="module-card left-second-module device-link-card"
+          role="button"
+          tabindex="0"
+          @click="goToEquipmentOverview"
+          @keyup.enter="goToEquipmentOverview"
+        >
           <div class="module-header">
             <div class="module-title">
               <span class="title-icon"></span>
@@ -53,7 +65,13 @@
             </el-table>
           </div>
         </div>
-        <div class="module-card left-third-module device-link-card" role="button" tabindex="0" @click="goToEquipmentOverview" @keyup.enter="goToEquipmentOverview">
+        <div
+          class="module-card left-third-module device-link-card"
+          role="button"
+          tabindex="0"
+          @click="goToEquipmentOverview"
+          @keyup.enter="goToEquipmentOverview"
+        >
           <div class="module-header">
             <div class="module-title">
               <span class="title-icon"></span>
@@ -98,10 +116,7 @@
             <div class="card-title" style="display: none">设备分布</div>
             <div
               class="map-container-full"
-              :class="[
-                `map-mode-${mapDisplayMode.toLowerCase()}`,
-                { 'map-tech-style': isMapTechStyle }
-              ]"
+              :class="[`map-mode-${mapDisplayMode.toLowerCase()}`, { 'map-tech-style': isMapTechStyle }]"
               id="chinaMap"
               ref="chinaMap"
             >
@@ -168,7 +183,7 @@
                   <div class="scroll-container">
                     <div class="scroll-text">
                       <span>{{ row.gatewayAddress }}</span
-                      ><span style="margin-left: 0.1rem">{{ row.gatewayAddress }}</span>
+                      ><span class="scroll-text-copy">{{ row.gatewayAddress }}</span>
                     </div>
                   </div>
                 </template>
@@ -185,7 +200,13 @@
         </div>
       </div>
       <div class="right">
-        <div class="module-card alarm-pending-module alarm-link-card" role="button" tabindex="0" @click="goToAllAlarmPage" @keyup.enter="goToAllAlarmPage">
+        <div
+          class="module-card alarm-pending-module alarm-link-card"
+          role="button"
+          tabindex="0"
+          @click="goToAllAlarmPage"
+          @keyup.enter="goToAllAlarmPage"
+        >
           <div class="module-header">
             <div class="module-title">
               <span class="title-icon"></span>
@@ -197,7 +218,13 @@
           </div>
         </div>
 
-        <div class="module-card alert-distribution-module alarm-link-card" role="button" tabindex="0" @click="goToAllAlarmPage" @keyup.enter="goToAllAlarmPage">
+        <div
+          class="module-card alert-distribution-module alarm-link-card"
+          role="button"
+          tabindex="0"
+          @click="goToAllAlarmPage"
+          @keyup.enter="goToAllAlarmPage"
+        >
           <div class="module-header">
             <div class="module-title">
               <span class="title-icon"></span>
@@ -220,7 +247,13 @@
           </div>
         </div>
 
-        <div class="module-card alert-trend-module alarm-link-card" role="button" tabindex="0" @click="goToAllAlarmPage" @keyup.enter="goToAllAlarmPage">
+        <div
+          class="module-card alert-trend-module alarm-link-card"
+          role="button"
+          tabindex="0"
+          @click="goToAllAlarmPage"
+          @keyup.enter="goToAllAlarmPage"
+        >
           <div class="module-header">
             <div class="module-title">
               <span class="title-icon"></span>
@@ -382,21 +415,6 @@
     mapInfoClickBound = false
   }
 
-  const setRem = () => {
-    const designWidth = 1920
-    const designHeight = 1080
-    const baseFontSize = 100
-    const clientWidth = document.documentElement.clientWidth || document.body.clientWidth
-    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
-
-    const scaleWidth = clientWidth / designWidth
-    const scaleHeight = clientHeight / designHeight
-    const scale = Math.min(scaleWidth, scaleHeight)
-
-    const fontSize = scale * baseFontSize
-    document.documentElement.style.fontSize = fontSize + 'px'
-  }
-
   const calculateTableHeight = () => {
     nextTick(() => {
       console.log('bottomRef.value', bottomRef.value.offsetHeight)
@@ -407,18 +425,6 @@
   }
 
   onMounted(() => {
-    setRem()
-    window.addEventListener('resize', setRem)
-
-    // if (bottomRef.value) {
-    //   resizeObserver = new ResizeObserver((entries) => {
-    //     for (const entry of entries) {
-    //       tableHeight.value = entry.contentRect.height
-    //     }
-    //   })
-    //   resizeObserver.observe(bottomRef.value)
-    // }
-
     calculateTableHeight()
 
     getDeviceWarningList()
@@ -741,7 +747,6 @@
 
   onBeforeUnmount(() => {
     unbindMapInfoWindowClick()
-    window.removeEventListener('resize', setRem)
     if (resizeObserver) {
       resizeObserver.disconnect()
     }
@@ -758,11 +763,22 @@
       mapInstance.value.destroy()
       mapInstance.value = null
     }
-
-    document.documentElement.style.fontSize = ''
   })
 </script>
 <style lang="scss">
+  @use 'sass:math';
+
+  $large-screen-design-width: 1920;
+  $large-screen-design-height: 1080;
+
+  @function px2vw($px) {
+    @return math.div($px, $large-screen-design-width) * 100vw;
+  }
+
+  @function px2vh($px) {
+    @return math.div($px, $large-screen-design-height) * 100vh;
+  }
+
   .background-box {
     max-width: 100vw;
     height: 100vh;
@@ -773,7 +789,7 @@
     display: flex;
     max-width: 100vw;
     height: 100vh;
-    // background: url('@/assets/img/largeScreen2/center-4.png') no-repeat center 1.5rem / 11.6rem 5.6rem;
+    // background: url('@/assets/img/largeScreen2/center-4.png') no-repeat center px2vw(150) / px2vw(1160) px2vw(560);
     position: fixed;
     top: 0;
     left: 0;
@@ -782,16 +798,16 @@
     .left {
       display: flex;
       flex-direction: column;
-      padding: 0.9rem 0;
-      width: 5.63rem;
+      padding: px2vw(90) 0;
+      width: px2vw(563);
       height: 100%;
       background: url('@/assets/img/largeScreen2/background-left.png') no-repeat;
       background-size: 100% 100%;
-      gap: 0.12rem;
+      gap: px2vh(12);
 
       .module-card {
         border-radius: 8px;
-        padding: 0.2rem 0.2rem 0.2rem 0.4rem;
+        padding: px2vh(20) px2vw(20) px2vh(20) px2vw(40);
         display: flex;
         flex-direction: column;
         flex: 1;
@@ -806,21 +822,21 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 0.08rem;
+        margin-bottom: px2vh(8);
       }
 
       .module-title {
         display: flex;
         align-items: center;
-        gap: 0.1rem;
-        font-size: 0.2rem;
+        gap: px2vh(10);
+        font-size: px2vw(20);
         font-weight: bold;
         color: var(--tech-text);
       }
 
       .title-icon {
-        width: 0.06rem;
-        height: 0.24rem;
+        width: px2vw(6);
+        height: px2vh(24);
         background: linear-gradient(180deg, #00d4ff 0%, #3b82f6 100%);
         border-radius: 2px;
       }
@@ -832,18 +848,18 @@
       .device-stat-content {
         display: flex;
         align-items: center;
-        gap: 0.1rem;
+        gap: px2vh(10);
         flex: 1;
         min-height: 0;
         overflow: hidden;
       }
 
       .device-ring-chart {
-        flex: 0 0 1.58rem;
-        width: 1.58rem;
-        height: 1.58rem;
-        min-width: 1.58rem;
-        min-height: 1.58rem;
+        flex: 0 0 px2vw(158);
+        width: px2vw(158);
+        height: px2vh(158);
+        min-width: px2vw(158);
+        min-height: px2vh(158);
       }
 
       .device-list {
@@ -852,24 +868,24 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        gap: 0.03rem;
+        gap: px2vh(3);
         overflow: visible;
       }
 
       .device-item {
         display: flex;
         align-items: center;
-        gap: 0.05rem;
+        gap: px2vh(5);
         min-width: 0;
-        font-size: 0.12rem;
+        font-size: px2vw(12);
         font-weight: bold;
         white-space: nowrap;
       }
 
       .device-dot {
         flex: 0 0 auto;
-        width: 0.08rem;
-        height: 0.08rem;
+        width: px2vw(8);
+        height: px2vh(8);
         border-radius: 2px;
       }
 
@@ -886,8 +902,8 @@
         color: var(--tech-text);
         flex: 0 0 auto;
         font-weight: bold;
-        font-size: 0.12rem;
-        margin-right: 0.01rem;
+        font-size: px2vw(12);
+        margin-right: px2vw(1);
         white-space: nowrap;
       }
 
@@ -933,7 +949,7 @@
           }
 
           .cell {
-            font-size: 0.14rem !important;
+            font-size: px2vw(14) !important;
             color: var(--tech-text) !important;
           }
         }
@@ -948,8 +964,8 @@
       }
 
       .status-dot {
-        width: 0.16rem;
-        height: 0.16rem;
+        width: px2vw(16);
+        height: px2vh(16);
         border-radius: 50%;
         display: inline-block;
 
@@ -972,7 +988,7 @@
 
       .project-bar-chart {
         flex: 1;
-        min-height: 1.5rem;
+        min-height: px2vh(150);
         height: 100%;
         width: 100%;
       }
@@ -981,84 +997,84 @@
       flex: 1;
       display: flex;
       flex-direction: column;
-      padding-bottom: 0.3rem;
-      // padding-top: 1rem;
+      padding-bottom: px2vh(30);
+      // padding-top: px2vh(100);
       .title {
-        height: 1rem;
-        line-height: 1rem;
+        height: px2vh(100);
+        line-height: px2vh(100);
         text-align: center;
         color: var(--tech-text-strong);
-        font-size: 0.4rem;
+        font-size: px2vw(40);
         font-weight: bold;
       }
       .top {
         flex: 1;
-        padding-top: 0.69rem;
+        padding-top: px2vh(69);
         text-align: center;
         position: relative;
         .image {
           margin: 0 auto;
           &.first {
-            width: 5.85rem;
-            height: 1.55rem;
+            width: px2vw(585);
+            height: px2vh(155);
           }
           &.second {
             position: relative;
-            top: -0.2rem;
-            width: 5.64rem;
-            height: 1.14rem;
+            top: -px2vh(20);
+            width: px2vw(564);
+            height: px2vh(114);
           }
           &.third {
             position: relative;
-            top: -0.5rem;
-            width: 2.5rem;
-            height: 2.5rem;
+            top: -px2vh(50);
+            width: px2vw(250);
+            height: px2vh(250);
           }
           &.fifth {
             position: relative;
-            top: -0.8rem;
-            width: 5.98rem;
-            height: 1.21rem;
+            top: -px2vh(80);
+            width: px2vw(598);
+            height: px2vh(121);
           }
         }
         > div {
           position: absolute;
           > p {
-            font-size: 0.16rem;
+            font-size: px2vw(16);
             font-weight: bold;
             color: var(--tech-text-strong);
           }
           > img {
-            width: 1.32rem;
-            height: 0.85rem;
+            width: px2vw(132);
+            height: px2vh(85);
           }
           &.first {
-            top: 5.22rem;
+            top: px2vh(522);
             left: 50%;
-            transform: translateX(-3.9rem);
+            transform: translateX(calc(-1 * px2vw(390)));
           }
           &.second {
-            top: 5.54rem;
+            top: px2vh(554);
             left: 50%;
-            transform: translateX(-1.9rem);
+            transform: translateX(calc(-1 * px2vw(190)));
           }
           &.third {
-            top: 5.54rem;
+            top: px2vh(554);
             left: 50%;
-            transform: translateX(0.73rem);
+            transform: translateX(px2vw(73));
           }
           &.fourth {
-            top: 5.22rem;
+            top: px2vh(522);
             left: 50%;
-            transform: translateX(2.65rem);
+            transform: translateX(px2vw(265));
           }
         }
       }
       .bottom {
-        height: 3.57rem;
+        height: px2vh(357);
         background: url('@/assets/img/largeScreen2/center-10.png') no-repeat;
         background-size: 100% 100%;
-        padding: 0.5rem 0.3rem 0.3rem;
+        padding: px2vh(50) px2vw(30) px2vh(30);
         box-sizing: border-box;
 
         .scroll-container {
@@ -1073,6 +1089,10 @@
           animation: scroll 10s linear infinite;
         }
 
+        .scroll-text-copy {
+          margin-left: px2vw(10);
+        }
+
         @keyframes scroll {
           0% {
             transform: translateX(0);
@@ -1110,27 +1130,27 @@
           }
 
           .cell {
-            font-size: 0.14rem !important;
+            font-size: px2vw(14) !important;
             color: var(--tech-text) !important;
           }
         }
       }
     }
     .right {
-      width: 5.63rem;
+      width: px2vw(563);
       height: 100%;
       background: url('@/assets/img/largeScreen2/background-right.png') no-repeat;
       background-size: 100% 100%;
-      padding: 0.9rem 0;
+      padding: px2vw(90) 0;
       display: flex;
       flex-direction: column;
-      gap: 0.12rem;
+      gap: px2vh(12);
 
       .module-card {
         // background: linear-gradient(135deg, rgba(30, 58, 138, 0.3) 0%, rgba(15, 23, 42, 0.8) 100%);
         // border: 1px solid rgba(59, 130, 246, 0.3);
         border-radius: 8px;
-        padding: 0.2rem 0.2rem 0.2rem 0.4rem;
+        padding: px2vh(20) px2vw(20) px2vh(20) px2vw(40);
         display: flex;
         flex-direction: column;
       }
@@ -1144,27 +1164,27 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 0.08rem;
+        margin-bottom: px2vh(8);
       }
 
       .module-title {
         display: flex;
         align-items: center;
-        gap: 0.1rem;
-        font-size: 0.2rem;
+        gap: px2vh(10);
+        font-size: px2vw(20);
         font-weight: bold;
         color: var(--tech-text);
       }
 
       .title-icon {
-        width: 0.06rem;
-        height: 0.24rem;
+        width: px2vw(6);
+        height: px2vh(24);
         background: linear-gradient(180deg, #00d4ff 0%, #3b82f6 100%);
         border-radius: 2px;
       }
 
       .module-more {
-        font-size: 0.18rem;
+        font-size: px2vw(18);
         font-weight: bold;
         color: var(--tech-text);
         cursor: pointer;
@@ -1180,7 +1200,7 @@
 
       .alarm-pending-chart {
         flex: 1;
-        min-height: 1.2rem;
+        min-height: px2vh(120);
       }
 
       .alert-distribution-module {
@@ -1188,12 +1208,12 @@
       }
 
       .alert-tab {
-        padding: 0.06rem 0.15rem;
+        padding: px2vh(6) px2vw(15);
         background: rgba(30, 58, 138, 0.3);
         border: 1px solid rgba(59, 130, 246, 0.3);
         border-radius: 4px;
         color: #94a3b8;
-        font-size: 0.16rem;
+        font-size: px2vw(16);
         font-weight: bold;
         cursor: pointer;
         transition: all 0.3s;
@@ -1208,34 +1228,34 @@
 
       .alert-distribution-content {
         display: flex;
-        gap: 0.4rem;
+        gap: px2vh(40);
         flex: 1;
       }
 
       .alert-ring-chart {
         flex: 1;
-        min-height: 2rem;
+        min-height: px2vh(200);
       }
 
       .alert-list {
         flex: 1;
         display: flex;
         flex-direction: column;
-        gap: 0.12rem;
+        gap: px2vh(12);
       }
 
       .alert-item {
         display: flex;
         align-items: center;
-        gap: 0.12rem;
-        font-size: 0.18rem;
+        gap: px2vh(12);
+        font-size: px2vw(18);
         font-weight: bold;
         white-space: nowrap;
       }
 
       .alert-dot {
-        width: 0.16rem;
-        height: 0.16rem;
+        width: px2vw(16);
+        height: px2vh(16);
         border-radius: 2px;
       }
 
@@ -1251,8 +1271,8 @@
       .alert-count {
         color: var(--tech-text);
         font-weight: bold;
-        font-size: 0.2rem;
-        margin-right: 0.06rem;
+        font-size: px2vw(20);
+        margin-right: px2vw(6);
         white-space: nowrap;
       }
 
@@ -1268,7 +1288,7 @@
 
       .alert-trend-chart {
         flex: 1;
-        min-height: 1.2rem;
+        min-height: px2vh(120);
       }
 
       .work-order-module {
@@ -1277,7 +1297,7 @@
 
       .work-order-content {
         display: flex;
-        gap: 0.3rem;
+        gap: px2vh(30);
         flex: 1;
       }
 
@@ -1286,8 +1306,8 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 0.12rem;
-        padding: 0.1rem;
+        gap: px2vh(12);
+        padding: px2vw(10);
         background: rgba(30, 58, 138, 0.2);
         border-radius: 8px;
         border: 1px solid rgba(59, 130, 246, 0.3);
@@ -1304,13 +1324,13 @@
       }
 
       .order-label {
-        font-size: 0.22rem;
+        font-size: px2vw(22);
         color: var(--tech-text);
-        margin-bottom: 0.08rem;
+        margin-bottom: px2vh(8);
       }
 
       .order-count {
-        font-size: 0.36rem;
+        font-size: px2vw(36);
         font-weight: bold;
       }
 
@@ -1385,13 +1405,23 @@
     z-index: 998;
     pointer-events: none;
     background:
-      radial-gradient(circle at 50% 54%, transparent 0 24%, rgba(0, 229, 255, 0.045) 24.4%, transparent 26%, transparent 39%, rgba(245, 158, 11, 0.035) 39.6%, transparent 41%),
+      radial-gradient(
+        circle at 50% 54%,
+        transparent 0 24%,
+        rgba(0, 229, 255, 0.045) 24.4%,
+        transparent 26%,
+        transparent 39%,
+        rgba(245, 158, 11, 0.035) 39.6%,
+        transparent 41%
+      ),
       linear-gradient(180deg, rgba(125, 211, 252, 0.032), transparent 16%, transparent 78%, rgba(2, 8, 23, 0.12)),
       linear-gradient(90deg, rgba(2, 8, 23, 0.18), transparent 10%, transparent 90%, rgba(2, 8, 23, 0.18)),
-      repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 0.24rem),
-      repeating-linear-gradient(90deg, rgba(14, 165, 233, 0.045) 0 1px, transparent 1px 0.24rem),
-      repeating-linear-gradient(135deg, transparent 0 0.2rem, rgba(34, 211, 238, 0.025) 0.21rem 0.22rem);
-    box-shadow: inset 0 0 0.86rem rgba(0, 229, 255, 0.06), inset 0 0 0.72rem rgba(2, 8, 23, 0.14);
+      repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px px2vh(24)),
+      repeating-linear-gradient(90deg, rgba(14, 165, 233, 0.045) 0 1px, transparent 1px px2vw(24)),
+      repeating-linear-gradient(135deg, transparent 0 px2vw(20), rgba(34, 211, 238, 0.025) px2vw(21) px2vw(22));
+    box-shadow:
+      inset 0 0 px2vw(86) rgba(0, 229, 255, 0.06),
+      inset 0 0 px2vw(72) rgba(2, 8, 23, 0.14);
     mix-blend-mode: screen;
     opacity: 0.72;
   }
@@ -1426,12 +1456,18 @@
     top: 56%;
     left: 50%;
     z-index: 1000;
-    width: 6.9rem;
-    height: 6.9rem;
+    width: px2vw(690);
+    height: px2vh(690);
     border-radius: 50%;
     pointer-events: none;
     background:
-      conic-gradient(from -34deg, rgba(59, 130, 246, 0.18), rgba(14, 165, 233, 0.055) 18deg, transparent 54deg, transparent 360deg),
+      conic-gradient(
+        from -34deg,
+        rgba(59, 130, 246, 0.18),
+        rgba(14, 165, 233, 0.055) 18deg,
+        transparent 54deg,
+        transparent 360deg
+      ),
       radial-gradient(circle, transparent 0 52%, rgba(96, 165, 250, 0.055) 53%, transparent 56%);
     transform: translate(-50%, -50%);
     transform-origin: center;
@@ -1445,8 +1481,8 @@
     top: 47%;
     left: 50%;
     z-index: 1000;
-    width: 4.8rem;
-    height: 2.7rem;
+    width: px2vw(480);
+    height: px2vh(270);
     pointer-events: none;
     transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-8deg);
     transform-style: preserve-3d;
@@ -1456,17 +1492,17 @@
 
   .building-tower {
     position: absolute;
-    bottom: 0.16rem;
-    width: 0.42rem;
+    bottom: px2vh(16);
+    width: px2vw(42);
     border: 1px solid rgba(56, 189, 248, 0.42);
     border-bottom-color: rgba(217, 119, 6, 0.44);
     background:
-      repeating-linear-gradient(0deg, rgba(224, 231, 255, 0.08) 0 0.02rem, transparent 0.02rem 0.14rem),
+      repeating-linear-gradient(0deg, rgba(224, 231, 255, 0.08) 0 px2vh(2), transparent px2vh(2) px2vh(14)),
       linear-gradient(145deg, rgba(56, 189, 248, 0.18), rgba(17, 24, 39, 0.72) 48%, rgba(2, 6, 23, 0.92));
     box-shadow:
-      inset -0.08rem 0 0.18rem rgba(2, 6, 23, 0.56),
-      inset 0.06rem 0 0.14rem rgba(148, 163, 184, 0.2),
-      0 0 0.18rem rgba(217, 119, 6, 0.28);
+      inset -px2vw(8) 0 px2vw(18) rgba(2, 6, 23, 0.56),
+      inset px2vw(6) 0 px2vw(14) rgba(148, 163, 184, 0.2),
+      0 0 px2vw(18) rgba(217, 119, 6, 0.28);
     transform: skewY(-8deg);
     animation: buildingPulse 3.8s ease-in-out infinite;
   }
@@ -1474,10 +1510,10 @@
   .building-tower::before {
     content: '';
     position: absolute;
-    top: -0.13rem;
-    right: -0.06rem;
-    left: 0.07rem;
-    height: 0.13rem;
+    top: -px2vh(13);
+    right: -px2vw(6);
+    left: px2vw(7);
+    height: px2vh(13);
     border: 1px solid rgba(148, 163, 184, 0.22);
     background: linear-gradient(135deg, rgba(217, 119, 6, 0.24), rgba(2, 8, 23, 0.7));
     transform: skewX(-38deg);
@@ -1487,9 +1523,9 @@
   .building-tower::after {
     content: '';
     position: absolute;
-    top: -0.02rem;
-    right: -0.13rem;
-    width: 0.13rem;
+    top: -px2vh(2);
+    right: -px2vw(13);
+    width: px2vw(13);
     height: 100%;
     border: 1px solid rgba(56, 189, 248, 0.14);
     background: linear-gradient(180deg, rgba(56, 189, 248, 0.1), rgba(15, 23, 42, 0.74));
@@ -1498,34 +1534,34 @@
   }
 
   .tower-a {
-    left: 1.45rem;
-    height: 1.18rem;
+    left: px2vw(145);
+    height: px2vh(118);
   }
 
   .tower-b {
-    left: 2.04rem;
-    height: 1.72rem;
-    width: 0.5rem;
+    left: px2vw(204);
+    height: px2vh(172);
+    width: px2vw(50);
     animation-delay: 0.4s;
   }
 
   .tower-c {
-    left: 2.72rem;
-    height: 1.34rem;
+    left: px2vw(272);
+    height: px2vh(134);
     animation-delay: 0.8s;
   }
 
   .tower-d {
-    left: 3.2rem;
-    height: 0.96rem;
-    width: 0.36rem;
+    left: px2vw(320);
+    height: px2vh(96);
+    width: px2vw(36);
     animation-delay: 1.2s;
   }
 
   .tower-e {
-    left: 0.96rem;
-    height: 0.82rem;
-    width: 0.34rem;
+    left: px2vw(96);
+    height: px2vh(82);
+    width: px2vw(34);
     animation-delay: 1.6s;
   }
 
@@ -1595,21 +1631,21 @@
 
   .map-mode-switch {
     position: absolute;
-    top: 0.24rem;
-    right: 0.22rem;
+    top: px2vh(24);
+    right: px2vw(22);
     z-index: 1003;
     display: flex;
-    gap: 0.06rem;
-    padding: 0.06rem;
+    gap: px2vh(6);
+    padding: px2vw(6);
     border: 1px solid rgba(56, 189, 248, 0.34);
-    border-radius: 0.12rem;
+    border-radius: px2vw(12);
     background:
       linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(15, 23, 42, 0.78)),
-      repeating-linear-gradient(90deg, transparent 0 0.16rem, rgba(217, 119, 6, 0.05) 0.17rem 0.18rem);
+      repeating-linear-gradient(90deg, transparent 0 px2vw(16), rgba(217, 119, 6, 0.05) px2vw(17) px2vw(18));
     box-shadow:
-      inset 0 0 0.18rem rgba(56, 189, 248, 0.1),
-      0 0 0.24rem rgba(217, 119, 6, 0.16),
-      0 0.1rem 0.24rem rgba(0, 0, 0, 0.28);
+      inset 0 0 px2vw(18) rgba(56, 189, 248, 0.1),
+      0 0 px2vw(24) rgba(217, 119, 6, 0.16),
+      0 px2vw(10) px2vw(24) rgba(0, 0, 0, 0.28);
     backdrop-filter: blur(8px);
   }
 
@@ -1617,39 +1653,43 @@
   .map-mode-switch::after {
     content: '';
     position: absolute;
-    right: 0.12rem;
-    left: 0.12rem;
+    right: px2vw(12);
+    left: px2vw(12);
     height: 1px;
     pointer-events: none;
     background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.68), rgba(217, 119, 6, 0.56), transparent);
-    box-shadow: 0 0 0.12rem rgba(217, 119, 6, 0.46);
+    box-shadow: 0 0 px2vw(12) rgba(217, 119, 6, 0.46);
   }
 
   .map-mode-switch::before {
-    top: -0.05rem;
+    top: -px2vh(5);
   }
 
   .map-mode-switch::after {
-    bottom: -0.05rem;
+    bottom: -px2vh(5);
   }
 
   .map-mode-button {
     position: relative;
-    min-width: 0.6rem;
-    height: 0.32rem;
-    padding: 0 0.14rem;
+    min-width: px2vw(60);
+    height: px2vh(32);
+    padding: 0 px2vw(14);
     border: 1px solid rgba(56, 189, 248, 0.38);
-    border-radius: 0.08rem;
+    border-radius: px2vw(8);
     color: #e9fbff;
-    font-family: DIN Alternate, Bahnschrift, Arial, sans-serif;
-    font-size: 0.16rem;
+    font-family:
+      DIN Alternate,
+      Bahnschrift,
+      Arial,
+      sans-serif;
+    font-size: px2vw(16);
     font-weight: 800;
-    line-height: 0.32rem;
-    letter-spacing: 0.03rem;
+    line-height: px2vh(32);
+    letter-spacing: px2vw(3);
     cursor: pointer;
     background: rgba(2, 8, 23, 0.72);
     text-shadow:
-      0 0 0.06rem rgba(56, 189, 248, 0.72),
+      0 0 px2vw(6) rgba(56, 189, 248, 0.72),
       0 1px 2px rgba(0, 0, 0, 0.9);
     transition: all 0.25s ease;
     -webkit-font-smoothing: antialiased;
@@ -1661,60 +1701,74 @@
     border-color: rgba(217, 119, 6, 0.86);
     background: linear-gradient(135deg, rgba(217, 119, 6, 0.5), rgba(56, 189, 248, 0.24));
     box-shadow:
-      inset 0 0 0.12rem rgba(255, 255, 255, 0.12),
-      0 0 0.18rem rgba(217, 119, 6, 0.38);
+      inset 0 0 px2vw(12) rgba(255, 255, 255, 0.12),
+      0 0 px2vw(18) rgba(217, 119, 6, 0.38);
   }
 
   .map-mode-button.active::after {
     content: '';
     position: absolute;
     right: 18%;
-    bottom: -0.04rem;
+    bottom: -px2vh(4);
     left: 18%;
-    height: 0.02rem;
+    height: px2vh(2);
     background: var(--tech-amber);
-    box-shadow: 0 0 0.12rem rgba(217, 119, 6, 0.9);
+    box-shadow: 0 0 px2vw(12) rgba(217, 119, 6, 0.9);
   }
 
   .map-title-bar {
     position: absolute;
-    top: 0.18rem;
+    top: px2vh(18);
     left: 50%;
     z-index: 1000;
     display: flex;
     align-items: center;
     flex-direction: column;
-    gap: 0.04rem;
-    min-width: 3.3rem;
-    padding: 0.11rem 0.48rem 0.13rem;
+    gap: px2vh(4);
+    min-width: px2vw(330);
+    padding: px2vh(11) px2vw(48) px2vh(13);
     color: #e9fbff;
     background:
-      linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.32) 13%, rgba(15, 23, 42, 0.94) 50%, rgba(217, 119, 6, 0.32) 87%, transparent),
-      repeating-linear-gradient(90deg, transparent 0 0.18rem, rgba(148, 163, 184, 0.07) 0.19rem 0.2rem),
+      linear-gradient(
+        90deg,
+        transparent,
+        rgba(56, 189, 248, 0.32) 13%,
+        rgba(15, 23, 42, 0.94) 50%,
+        rgba(217, 119, 6, 0.32) 87%,
+        transparent
+      ),
+      repeating-linear-gradient(90deg, transparent 0 px2vw(18), rgba(148, 163, 184, 0.07) px2vw(19) px2vw(20)),
       linear-gradient(180deg, rgba(15, 23, 42, 0.54), rgba(2, 6, 23, 0.28));
     border-top: 1px solid rgba(56, 189, 248, 0.72);
     border-bottom: 1px solid rgba(217, 119, 6, 0.64);
     transform: translateX(-50%);
     pointer-events: none;
     text-shadow:
-      0 0 0.16rem rgba(56, 189, 248, 0.72),
-      0 0 0.32rem rgba(217, 119, 6, 0.34);
+      0 0 px2vw(16) rgba(56, 189, 248, 0.72),
+      0 0 px2vw(32) rgba(217, 119, 6, 0.34);
     box-shadow:
-      0 0 0.32rem rgba(217, 119, 6, 0.2),
-      inset 0 0 0.18rem rgba(56, 189, 248, 0.1);
-    clip-path: polygon(0.24rem 0, calc(100% - 0.24rem) 0, 100% 50%, calc(100% - 0.24rem) 100%, 0.24rem 100%, 0 50%);
+      0 0 px2vw(32) rgba(217, 119, 6, 0.2),
+      inset 0 0 px2vw(18) rgba(56, 189, 248, 0.1);
+    clip-path: polygon(
+      px2vw(24) 0,
+      calc(100% - px2vw(24)) 0,
+      100% 50%,
+      calc(100% - px2vw(24)) 100%,
+      px2vw(24) 100%,
+      0 50%
+    );
   }
 
   .map-title-main {
-    font-size: 0.2rem;
+    font-size: px2vw(20);
     font-weight: 700;
-    letter-spacing: 0.06rem;
+    letter-spacing: px2vw(6);
   }
 
   .map-title-sub {
-    font-size: 0.1rem;
+    font-size: px2vw(10);
     color: rgba(148, 163, 184, 0.78);
-    letter-spacing: 0.04rem;
+    letter-spacing: px2vw(4);
   }
 
   .map-orbit-dock {
@@ -1722,8 +1776,8 @@
     left: 50%;
     top: 56%;
     z-index: 1001;
-    width: 5.35rem;
-    height: 5.35rem;
+    width: px2vw(535);
+    height: px2vh(535);
     pointer-events: none;
     transform: translate(-50%, -50%);
     transform-style: preserve-3d;
@@ -1736,23 +1790,30 @@
     border-radius: 50%;
     border: 1px solid rgba(0, 229, 255, 0.34);
     background:
-      conic-gradient(from 0deg, transparent 0 36deg, rgba(0, 229, 255, 0.72) 42deg 49deg, transparent 56deg 164deg, rgba(245, 158, 11, 0.56) 172deg 181deg, transparent 190deg 360deg),
+      conic-gradient(
+        from 0deg,
+        transparent 0 36deg,
+        rgba(0, 229, 255, 0.72) 42deg 49deg,
+        transparent 56deg 164deg,
+        rgba(245, 158, 11, 0.56) 172deg 181deg,
+        transparent 190deg 360deg
+      ),
       radial-gradient(circle, transparent 0 58%, rgba(0, 229, 255, 0.05) 59%, transparent 62%);
     box-shadow:
-      0 0 0.24rem rgba(0, 229, 255, 0.16),
-      inset 0 0 0.34rem rgba(0, 229, 255, 0.08);
+      0 0 px2vw(24) rgba(0, 229, 255, 0.16),
+      inset 0 0 px2vw(34) rgba(0, 229, 255, 0.08);
     animation: mapDockRotate 9s linear infinite;
   }
 
   .map-orbit-dock .orbit-middle {
-    inset: 0.54rem;
+    inset: px2vw(54);
     border-color: rgba(245, 158, 11, 0.32);
     animation-duration: 6.8s;
     animation-direction: reverse;
   }
 
   .map-orbit-dock .orbit-inner {
-    inset: 1.12rem;
+    inset: px2vw(112);
     border-color: rgba(125, 211, 252, 0.42);
     animation-duration: 4.9s;
   }
@@ -1761,14 +1822,14 @@
     position: absolute;
     left: 50%;
     top: 50%;
-    width: 0.18rem;
-    height: 0.18rem;
+    width: px2vw(18);
+    height: px2vh(18);
     border-radius: 50%;
     background: #ffffff;
     box-shadow:
-      0 0 0.12rem #ffffff,
-      0 0 0.42rem rgba(0, 229, 255, 0.95),
-      0 0 0.9rem rgba(245, 158, 11, 0.46);
+      0 0 px2vw(12) #ffffff,
+      0 0 px2vw(42) rgba(0, 229, 255, 0.95),
+      0 0 px2vw(90) rgba(245, 158, 11, 0.46);
     transform: translate(-50%, -50%);
     animation: orbitCorePulse 1.8s ease-in-out infinite;
   }
@@ -1778,18 +1839,35 @@
     left: 50%;
     top: 58%;
     z-index: 1000;
-    width: 6.9rem;
-    height: 6.9rem;
+    width: px2vw(690);
+    height: px2vh(690);
     border: 1px solid rgba(56, 189, 248, 0.36);
     border-radius: 50%;
     background:
-      repeating-radial-gradient(circle, transparent 0 0.46rem, rgba(56, 189, 248, 0.055) 0.47rem 0.49rem),
-      conic-gradient(from 0deg, transparent 0deg, rgba(56, 189, 248, 0.16) 38deg, transparent 82deg, transparent 174deg, rgba(217, 119, 6, 0.12) 220deg, transparent 270deg, transparent 360deg),
-      conic-gradient(from 180deg, transparent 0deg, rgba(148, 163, 184, 0.1) 34deg, transparent 72deg, transparent 238deg, rgba(56, 189, 248, 0.1) 290deg, transparent 340deg);
+      repeating-radial-gradient(circle, transparent 0 px2vw(46), rgba(56, 189, 248, 0.055) px2vw(47) px2vw(49)),
+      conic-gradient(
+        from 0deg,
+        transparent 0deg,
+        rgba(56, 189, 248, 0.16) 38deg,
+        transparent 82deg,
+        transparent 174deg,
+        rgba(217, 119, 6, 0.12) 220deg,
+        transparent 270deg,
+        transparent 360deg
+      ),
+      conic-gradient(
+        from 180deg,
+        transparent 0deg,
+        rgba(148, 163, 184, 0.1) 34deg,
+        transparent 72deg,
+        transparent 238deg,
+        rgba(56, 189, 248, 0.1) 290deg,
+        transparent 340deg
+      );
     box-shadow:
-      inset 0 0 0.52rem rgba(56, 189, 248, 0.08),
-      0 0 0.34rem rgba(217, 119, 6, 0.1),
-      0 0 0.62rem rgba(56, 189, 248, 0.035);
+      inset 0 0 px2vw(52) rgba(56, 189, 248, 0.08),
+      0 0 px2vw(34) rgba(217, 119, 6, 0.1),
+      0 0 px2vw(62) rgba(56, 189, 248, 0.035);
     transform: translate(-50%, -50%);
     animation: mapGridRotate 10s linear infinite;
     mix-blend-mode: screen;
@@ -1802,17 +1880,24 @@
     left: 50%;
     top: 57%;
     z-index: 1000;
-    width: 4.7rem;
-    height: 4.7rem;
+    width: px2vw(470);
+    height: px2vh(470);
     border: 1px dashed rgba(148, 163, 184, 0.42);
     border-radius: 50%;
     pointer-events: none;
     background:
       radial-gradient(circle, transparent 0 54%, rgba(56, 189, 248, 0.05) 55%, transparent 58%),
-      conic-gradient(from 30deg, transparent 0 18deg, rgba(217, 119, 6, 0.18) 22deg 34deg, transparent 40deg 145deg, rgba(56, 189, 248, 0.17) 155deg 172deg, transparent 182deg 360deg);
+      conic-gradient(
+        from 30deg,
+        transparent 0 18deg,
+        rgba(217, 119, 6, 0.18) 22deg 34deg,
+        transparent 40deg 145deg,
+        rgba(56, 189, 248, 0.17) 155deg 172deg,
+        transparent 182deg 360deg
+      );
     box-shadow:
-      0 0 0.24rem rgba(217, 119, 6, 0.1),
-      inset 0 0 0.26rem rgba(56, 189, 248, 0.07);
+      0 0 px2vw(24) rgba(217, 119, 6, 0.1),
+      inset 0 0 px2vw(26) rgba(56, 189, 248, 0.07);
     transform: translate(-50%, -50%);
     animation: mapEnergyRotate 7.2s linear infinite reverse;
     mix-blend-mode: screen;
@@ -1824,13 +1909,31 @@
     left: 50%;
     top: 57%;
     z-index: 1000;
-    width: 5.4rem;
-    height: 5.4rem;
+    width: px2vw(540);
+    height: px2vh(540);
     pointer-events: none;
     transform: translate(-50%, -50%);
     background:
-      linear-gradient(90deg, transparent 0 8%, rgba(56, 189, 248, 0.12) 8.4%, transparent 9.2% 49.7%, rgba(148, 163, 184, 0.18) 50%, transparent 50.3% 90.8%, rgba(56, 189, 248, 0.12) 91.6%, transparent 92.2%),
-      linear-gradient(0deg, transparent 0 8%, rgba(217, 119, 6, 0.09) 8.4%, transparent 9.2% 49.7%, rgba(56, 189, 248, 0.14) 50%, transparent 50.3% 90.8%, rgba(217, 119, 6, 0.09) 91.6%, transparent 92.2%);
+      linear-gradient(
+        90deg,
+        transparent 0 8%,
+        rgba(56, 189, 248, 0.12) 8.4%,
+        transparent 9.2% 49.7%,
+        rgba(148, 163, 184, 0.18) 50%,
+        transparent 50.3% 90.8%,
+        rgba(56, 189, 248, 0.12) 91.6%,
+        transparent 92.2%
+      ),
+      linear-gradient(
+        0deg,
+        transparent 0 8%,
+        rgba(217, 119, 6, 0.09) 8.4%,
+        transparent 9.2% 49.7%,
+        rgba(56, 189, 248, 0.14) 50%,
+        transparent 50.3% 90.8%,
+        rgba(217, 119, 6, 0.09) 91.6%,
+        transparent 92.2%
+      );
     opacity: 0.28;
     mix-blend-mode: screen;
   }
@@ -1858,20 +1961,29 @@
     width: 1px;
     height: 100%;
     background: rgba(224, 231, 255, 0.4);
-    box-shadow: 0 0 0.1rem rgba(217, 119, 6, 0.42);
+    box-shadow: 0 0 px2vw(10) rgba(217, 119, 6, 0.42);
   }
 
   .map-industrial-frame {
     position: absolute;
-    inset: 0.12rem;
+    inset: px2vw(12);
     z-index: 999;
     pointer-events: none;
     border: 1px solid rgba(56, 189, 248, 0.2);
     box-shadow:
-      inset 0 0 0.26rem rgba(56, 189, 248, 0.07),
+      inset 0 0 px2vw(26) rgba(56, 189, 248, 0.07),
       inset 0 0 0 1px rgba(217, 119, 6, 0.08),
-      0 0 0.18rem rgba(217, 119, 6, 0.08);
-    clip-path: polygon(0.26rem 0, calc(100% - 0.26rem) 0, 100% 0.26rem, 100% calc(100% - 0.26rem), calc(100% - 0.26rem) 100%, 0.26rem 100%, 0 calc(100% - 0.26rem), 0 0.26rem);
+      0 0 px2vw(18) rgba(217, 119, 6, 0.08);
+    clip-path: polygon(
+      px2vw(26) 0,
+      calc(100% - px2vw(26)) 0,
+      100% px2vw(26),
+      100% calc(100% - px2vw(26)),
+      calc(100% - px2vw(26)) 100%,
+      px2vw(26) 100%,
+      0 calc(100% - px2vw(26)),
+      0 px2vw(26)
+    );
   }
 
   .map-container-full.map-tech-style.map-mode-3d .map-grid-glow,
@@ -1887,8 +1999,8 @@
   }
 
   .map-container-full.map-tech-style.map-mode-3d::after {
-    height: 2.9rem;
-    bottom: 0.06rem;
+    height: px2vh(290);
+    bottom: px2vh(6);
     transform: rotateX(72deg);
   }
 
@@ -1896,8 +2008,8 @@
     left: 11%;
     right: 11%;
     bottom: 50%;
-    height: 4.45rem;
-    border-radius: 0.18rem;
+    height: px2vh(445);
+    border-radius: px2vw(18);
     transform: translateY(50%);
     transform-origin: center;
     opacity: 0.42;
@@ -1907,13 +2019,13 @@
   .map-container-full.map-tech-style.map-mode-2d .map-radar-sweep,
   .map-container-full.map-tech-style.map-mode-2d .map-orbit-dock {
     top: 54%;
-    width: 5.8rem;
-    height: 5.8rem;
+    width: px2vw(580);
+    height: px2vh(580);
   }
 
   .map-container-full.map-tech-style.map-mode-2d .map-radar-sweep {
-    width: 6.2rem;
-    height: 6.2rem;
+    width: px2vw(620);
+    height: px2vh(620);
     opacity: 0.32;
   }
 
@@ -1924,7 +2036,7 @@
   }
 
   .map-container-full.map-tech-style.map-mode-2d .building-tower {
-    height: 0.16rem;
+    height: px2vh(16);
     transform: none;
   }
 
@@ -1944,8 +2056,8 @@
   .map-corner {
     position: absolute;
     z-index: 1000;
-    width: 0.54rem;
-    height: 0.54rem;
+    width: px2vw(54);
+    height: px2vh(54);
     pointer-events: none;
   }
 
@@ -1955,8 +2067,8 @@
     position: absolute;
     background: rgba(56, 189, 248, 0.46);
     box-shadow:
-      0 0 0.08rem rgba(56, 189, 248, 0.36),
-      0 0 0.14rem rgba(217, 119, 6, 0.16);
+      0 0 px2vw(8) rgba(56, 189, 248, 0.36),
+      0 0 px2vw(14) rgba(217, 119, 6, 0.16);
   }
 
   .map-corner::before {
@@ -1970,8 +2082,8 @@
   }
 
   .map-corner.top-left {
-    top: 0.14rem;
-    left: 0.14rem;
+    top: px2vh(14);
+    left: px2vw(14);
   }
 
   .map-corner.top-left::before,
@@ -1981,8 +2093,8 @@
   }
 
   .map-corner.top-right {
-    top: 0.14rem;
-    right: 0.14rem;
+    top: px2vh(14);
+    right: px2vw(14);
   }
 
   .map-corner.top-right::before,
@@ -1992,8 +2104,8 @@
   }
 
   .map-corner.bottom-left {
-    bottom: 0.14rem;
-    left: 0.14rem;
+    bottom: px2vh(14);
+    left: px2vw(14);
   }
 
   .map-corner.bottom-left::before,
@@ -2003,8 +2115,8 @@
   }
 
   .map-corner.bottom-right {
-    right: 0.14rem;
-    bottom: 0.14rem;
+    right: px2vw(14);
+    bottom: px2vh(14);
   }
 
   .map-corner.bottom-right::before,
@@ -2020,8 +2132,12 @@
     color: var(--tech-success);
     border: 1px solid rgba(0, 229, 255, 0.86);
     border-radius: 50%;
-    background:
-      radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 8%, currentColor 9% 24%, rgba(2, 8, 23, 0.82) 25% 100%);
+    background: radial-gradient(
+      circle,
+      rgba(255, 255, 255, 0.95) 0 8%,
+      currentColor 9% 24%,
+      rgba(2, 8, 23, 0.82) 25% 100%
+    );
     box-shadow:
       0 0 14px rgba(0, 229, 255, 0.78),
       0 0 30px currentColor,
@@ -2195,7 +2311,7 @@
       background-image:
         linear-gradient(rgba(0, 212, 255, 0.05) 1px, transparent 1px),
         linear-gradient(90deg, rgba(0, 212, 255, 0.05) 1px, transparent 1px);
-      background-size: 0.42rem 0.42rem;
+      background-size: px2vw(42) px2vw(42);
       mask-image: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0.85), transparent 68%);
       animation: gridDrift 16s linear infinite;
       pointer-events: none;
@@ -2214,7 +2330,7 @@
     background:
       linear-gradient(90deg, transparent 0 9%, rgba(0, 212, 255, 0.08) 10%, transparent 11% 100%),
       linear-gradient(0deg, transparent 0 9%, rgba(0, 212, 255, 0.06) 10%, transparent 11% 100%);
-    background-size: 1.2rem 1.2rem;
+    background-size: px2vw(120) px2vh(120);
     opacity: 0.45;
     animation: gridPulse 5s ease-in-out infinite;
   }
@@ -2229,33 +2345,40 @@
 
   .container {
     z-index: 10;
-    background:
-      linear-gradient(90deg, rgba(2, 8, 23, 0.92) 0%, rgba(2, 8, 23, 0.32) 22%, transparent 42%, transparent 58%, rgba(2, 8, 23, 0.32) 78%, rgba(2, 8, 23, 0.92) 100%);
+    background: linear-gradient(
+      90deg,
+      rgba(2, 8, 23, 0.92) 0%,
+      rgba(2, 8, 23, 0.32) 22%,
+      transparent 42%,
+      transparent 58%,
+      rgba(2, 8, 23, 0.32) 78%,
+      rgba(2, 8, 23, 0.92) 100%
+    );
   }
 
   .container .left,
   .container .right {
     position: relative;
-    filter: drop-shadow(0 0 0.28rem rgba(0, 212, 255, 0.16));
+    filter: drop-shadow(0 0 px2vw(28) rgba(0, 212, 255, 0.16));
 
     &::before {
       content: '';
       position: absolute;
-      top: 0.72rem;
-      bottom: 0.2rem;
+      top: px2vh(72);
+      bottom: px2vh(20);
       width: 1px;
       background: linear-gradient(180deg, transparent, rgba(0, 212, 255, 0.65), rgba(245, 158, 11, 0.35), transparent);
-      box-shadow: 0 0 0.18rem rgba(0, 212, 255, 0.8);
+      box-shadow: 0 0 px2vw(18) rgba(0, 212, 255, 0.8);
       animation: sideEnergy 3.8s ease-in-out infinite;
     }
   }
 
   .container .left::before {
-    right: 0.18rem;
+    right: px2vw(18);
   }
 
   .container .right::before {
-    left: 0.18rem;
+    left: px2vw(18);
   }
 
   .container .left .module-card,
@@ -2271,7 +2394,9 @@
       linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(15, 23, 42, 0.1) 48%, rgba(245, 158, 11, 0.035));
     box-shadow: none;
     backdrop-filter: none;
-    transition: background 0.35s ease, transform 0.35s ease;
+    transition:
+      background 0.35s ease,
+      transform 0.35s ease;
 
     &::after {
       content: '';
@@ -2297,42 +2422,42 @@
 
   .container .module-header {
     position: relative;
-    min-height: 0.32rem;
+    min-height: px2vh(32);
 
     &::after {
       content: '';
       position: absolute;
       left: 0;
       right: 18%;
-      bottom: -0.06rem;
+      bottom: -px2vh(6);
       height: 1px;
       background: linear-gradient(90deg, rgba(0, 212, 255, 0.34), rgba(59, 130, 246, 0.08), transparent);
-      box-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.18);
+      box-shadow: 0 0 px2vw(8) rgba(0, 212, 255, 0.18);
       opacity: 0.55;
     }
   }
 
   .container .module-title {
     color: #eefaff;
-    font-size: 0.18rem;
-    letter-spacing: 0.02rem;
-    text-shadow: 0 0 0.12rem rgba(0, 212, 255, 0.55);
+    font-size: px2vw(18);
+    letter-spacing: px2vw(2);
+    text-shadow: 0 0 px2vw(12) rgba(0, 212, 255, 0.55);
   }
 
   .container .title-icon {
     position: relative;
-    width: 0.07rem;
-    height: 0.23rem;
+    width: px2vw(7);
+    height: px2vh(23);
     background: linear-gradient(180deg, #f59e0b 0%, #00e5ff 45%, #2563eb 100%);
-    box-shadow: 0 0 0.12rem rgba(0, 212, 255, 0.9);
+    box-shadow: 0 0 px2vw(12) rgba(0, 212, 255, 0.9);
     animation: iconPulse 1.8s ease-in-out infinite;
 
     &::after {
       content: '';
       position: absolute;
-      left: 0.13rem;
+      left: px2vw(13);
       top: 50%;
-      width: 0.42rem;
+      width: px2vw(42);
       height: 1px;
       background: linear-gradient(90deg, rgba(0, 212, 255, 0.9), transparent);
       transform: translateY(-50%);
@@ -2342,11 +2467,11 @@
   .container .center .title {
     position: relative;
     color: #f7fdff;
-    letter-spacing: 0.08rem;
+    letter-spacing: px2vw(8);
     text-shadow:
-      0 0 0.1rem rgba(0, 212, 255, 0.8),
-      0 0 0.28rem rgba(37, 99, 235, 0.65),
-      0 0 0.44rem rgba(245, 158, 11, 0.2);
+      0 0 px2vw(10) rgba(0, 212, 255, 0.8),
+      0 0 px2vw(28) rgba(37, 99, 235, 0.65),
+      0 0 px2vw(44) rgba(245, 158, 11, 0.2);
     animation: titleGlow 3s ease-in-out infinite;
 
     &::before,
@@ -2354,35 +2479,35 @@
       content: '';
       position: absolute;
       top: 50%;
-      width: 1.72rem;
-      height: 0.14rem;
+      width: px2vw(172);
+      height: px2vh(14);
       border-top: 1px solid rgba(0, 212, 255, 0.75);
       border-bottom: 1px solid rgba(245, 158, 11, 0.35);
       transform: translateY(-50%);
-      box-shadow: 0 0 0.12rem rgba(0, 212, 255, 0.45);
+      box-shadow: 0 0 px2vw(12) rgba(0, 212, 255, 0.45);
     }
 
     &::before {
-      left: 0.34rem;
+      left: px2vw(34);
       clip-path: polygon(0 50%, 12% 0, 100% 0, 88% 100%, 12% 100%);
     }
 
     &::after {
-      right: 0.34rem;
+      right: px2vw(34);
       clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 12% 50%);
     }
   }
 
   .container .center .top2 {
     position: relative;
-    margin: 0 0.16rem;
+    margin: 0 px2vw(16);
     border: 1px solid rgba(0, 212, 255, 0.18);
-    border-radius: 0.16rem;
+    border-radius: px2vw(16);
     overflow: hidden;
     background: rgba(2, 8, 23, 0.18);
     box-shadow:
-      inset 0 0 0.24rem rgba(0, 212, 255, 0.05),
-      0 0 0.28rem rgba(0, 0, 0, 0.22);
+      inset 0 0 px2vw(24) rgba(0, 212, 255, 0.05),
+      0 0 px2vw(28) rgba(0, 0, 0, 0.22);
 
     &::before,
     &::after {
@@ -2395,9 +2520,9 @@
       linear-gradient(135deg, rgba(0, 212, 255, 0.14), transparent 25% 75%, rgba(245, 158, 11, 0.12)),
       rgba(2, 8, 23, 0.24);
     box-shadow:
-      inset 0 0 0.48rem rgba(0, 212, 255, 0.12),
-      0 0 0.38rem rgba(0, 0, 0, 0.28),
-      0 0 0.32rem rgba(0, 212, 255, 0.12);
+      inset 0 0 px2vw(48) rgba(0, 212, 255, 0.12),
+      0 0 px2vw(38) rgba(0, 0, 0, 0.28),
+      0 0 px2vw(32) rgba(0, 212, 255, 0.12);
 
     &::before,
     &::after {
@@ -2407,49 +2532,54 @@
 
   .container .center .bottom {
     position: relative;
-    margin: 0.14rem 0.16rem 0;
+    margin: px2vh(14) px2vw(16) 0;
     border: 1px solid rgba(0, 212, 255, 0.18);
-    border-radius: 0.12rem;
+    border-radius: px2vw(12);
     background:
       linear-gradient(180deg, rgba(15, 23, 42, 0.44), rgba(2, 6, 23, 0.18)),
       url('@/assets/img/largeScreen2/center-10.png') no-repeat center / 100% 100%;
-    box-shadow: inset 0 0 0.3rem rgba(0, 212, 255, 0.08);
+    box-shadow: inset 0 0 px2vw(30) rgba(0, 212, 255, 0.08);
     overflow: hidden;
 
     &::before {
       content: 'ALARM MONITOR';
       position: absolute;
-      top: 0.13rem;
-      left: 0.32rem;
+      top: px2vh(13);
+      left: px2vw(32);
       color: rgba(0, 212, 255, 0.58);
-      font-size: 0.12rem;
-      letter-spacing: 0.06rem;
-      text-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.7);
+      font-size: px2vw(12);
+      letter-spacing: px2vw(6);
+      text-shadow: 0 0 px2vw(8) rgba(0, 212, 255, 0.7);
     }
   }
 
   .container .card {
-    background:
-      radial-gradient(circle at 50% 46%, rgba(0, 212, 255, 0.08), transparent 40%),
-      rgba(2, 8, 23, 0.18);
+    background: radial-gradient(circle at 50% 46%, rgba(0, 212, 255, 0.08), transparent 40%), rgba(2, 8, 23, 0.18);
   }
 
   .container .map-control {
-    top: 0.24rem;
-    left: 0.22rem;
-    min-width: 1.74rem;
-    padding: 0.16rem;
+    top: px2vh(24);
+    left: px2vw(22);
+    min-width: px2vw(174);
+    padding: px2vw(16);
     overflow: hidden;
-    clip-path: polygon(0.1rem 0, 100% 0, 100% calc(100% - 0.1rem), calc(100% - 0.1rem) 100%, 0 100%, 0 0.1rem);
+    clip-path: polygon(
+      px2vw(10) 0,
+      100% 0,
+      100% calc(100% - px2vw(10)),
+      calc(100% - px2vw(10)) 100%,
+      0 100%,
+      0 px2vw(10)
+    );
     border: 1px solid rgba(0, 212, 255, 0.38);
-    border-radius: 0.14rem;
+    border-radius: px2vw(14);
     background:
       linear-gradient(135deg, rgba(8, 47, 73, 0.9), rgba(15, 23, 42, 0.76)),
-      repeating-linear-gradient(90deg, transparent 0 0.16rem, rgba(0, 212, 255, 0.05) 0.17rem 0.18rem);
+      repeating-linear-gradient(90deg, transparent 0 px2vw(16), rgba(0, 212, 255, 0.05) px2vw(17) px2vw(18));
     box-shadow:
-      inset 0 0 0.2rem rgba(0, 212, 255, 0.14),
-      0 0 0.28rem rgba(0, 212, 255, 0.2),
-      0 0.1rem 0.24rem rgba(0, 0, 0, 0.28);
+      inset 0 0 px2vw(20) rgba(0, 212, 255, 0.14),
+      0 0 px2vw(28) rgba(0, 212, 255, 0.2),
+      0 px2vw(10) px2vw(24) rgba(0, 0, 0, 0.28);
     backdrop-filter: blur(8px);
   }
 
@@ -2469,41 +2599,45 @@
   .container .map-control::after {
     content: '';
     position: absolute;
-    inset: 0.06rem;
+    inset: px2vw(6);
     pointer-events: none;
     border: 1px solid rgba(0, 212, 255, 0.14);
   }
 
   .container .control-title {
     color: #89ddff;
-    font-size: 0.13rem;
-    letter-spacing: 0.02rem;
+    font-size: px2vw(13);
+    letter-spacing: px2vw(2);
   }
 
   .container .control-value {
     color: #f7fbff;
-    font-family: DIN Alternate, Bahnschrift, Arial, sans-serif;
-    font-size: 0.34rem;
-    text-shadow: 0 0 0.16rem rgba(0, 212, 255, 0.9);
+    font-family:
+      DIN Alternate,
+      Bahnschrift,
+      Arial,
+      sans-serif;
+    font-size: px2vw(34);
+    text-shadow: 0 0 px2vw(16) rgba(0, 212, 255, 0.9);
     animation: numberPulse 2.4s ease-in-out infinite;
   }
 
   .container .control-top {
-    margin-bottom: 0.14rem;
-    padding-bottom: 0.14rem;
+    margin-bottom: px2vh(14);
+    padding-bottom: px2vh(14);
     border-bottom-color: rgba(0, 212, 255, 0.28);
   }
 
   .container .status-list {
-    gap: 0.08rem;
+    gap: px2vh(8);
   }
 
   .container .status-item {
     justify-content: space-between;
-    gap: 0.08rem;
-    padding: 0.04rem 0.06rem;
+    gap: px2vh(8);
+    padding: px2vh(4) px2vw(6);
     border-left: 2px solid rgba(0, 212, 255, 0.32);
-    border-radius: 0.06rem;
+    border-radius: px2vw(6);
     background: rgba(2, 8, 23, 0.28);
   }
 
@@ -2525,34 +2659,40 @@
 
   .container .status-item strong {
     color: #f7fbff;
-    font-family: DIN Alternate, Bahnschrift, Arial, sans-serif;
-    font-size: 0.16rem;
-    text-shadow: 0 0 0.1rem rgba(0, 212, 255, 0.55);
+    font-family:
+      DIN Alternate,
+      Bahnschrift,
+      Arial,
+      sans-serif;
+    font-size: px2vw(16);
+    text-shadow: 0 0 px2vw(10) rgba(0, 212, 255, 0.55);
   }
 
   .container .device-item,
   .container .alert-item {
     position: relative;
-    padding: 0.05rem 0.08rem;
-    border-radius: 0.04rem;
+    padding: px2vh(5) px2vw(8);
+    border-radius: px2vw(4);
     background: linear-gradient(90deg, rgba(0, 212, 255, 0.08), transparent);
     border-left: 1px solid rgba(0, 212, 255, 0.22);
-    transition: transform 0.25s ease, background 0.25s ease;
+    transition:
+      transform 0.25s ease,
+      background 0.25s ease;
 
     &:hover {
-      transform: translateX(0.04rem);
+      transform: translateX(px2vw(4));
       background: linear-gradient(90deg, rgba(0, 212, 255, 0.16), rgba(245, 158, 11, 0.06), transparent);
     }
   }
 
   .container .device-item {
-    padding: 0.04rem 0.04rem;
+    padding: px2vh(4) px2vw(4);
   }
 
   .container .device-dot,
   .container .alert-dot,
   .container .status-dot {
-    box-shadow: 0 0 0.1rem currentColor;
+    box-shadow: 0 0 px2vw(10) currentColor;
     animation: dotBreath 2s ease-in-out infinite;
   }
 
@@ -2560,15 +2700,19 @@
   .container .alert-name,
   .container .status-item,
   .container .cell {
-    text-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.18);
+    text-shadow: 0 0 px2vw(8) rgba(0, 212, 255, 0.18);
   }
 
   .container .device-count,
   .container .alert-count,
   .container .device-percent,
   .container .alert-percent {
-    font-family: DIN Alternate, Bahnschrift, Arial, sans-serif;
-    text-shadow: 0 0 0.1rem rgba(0, 212, 255, 0.45);
+    font-family:
+      DIN Alternate,
+      Bahnschrift,
+      Arial,
+      sans-serif;
+    text-shadow: 0 0 px2vw(10) rgba(0, 212, 255, 0.45);
   }
 
   .container .el-table {
@@ -2582,16 +2726,18 @@
       background: linear-gradient(180deg, rgba(0, 212, 255, 0.14), rgba(15, 23, 42, 0.08)) !important;
       color: #9beafe !important;
       font-weight: bold;
-      letter-spacing: 0.02rem;
-      text-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.5);
+      letter-spacing: px2vw(2);
+      text-shadow: 0 0 px2vw(8) rgba(0, 212, 255, 0.5);
     }
 
     .el-table__row {
-      transition: background 0.25s ease, transform 0.25s ease;
+      transition:
+        background 0.25s ease,
+        transform 0.25s ease;
     }
 
     .el-table__row:hover {
-      transform: translateX(0.02rem);
+      transform: translateX(px2vw(2));
     }
 
     .el-table__body-wrapper::-webkit-scrollbar {
@@ -2602,12 +2748,13 @@
     .el-table__body-wrapper::-webkit-scrollbar-thumb {
       border-radius: 4px;
       background: linear-gradient(180deg, #00d4ff, #2563eb);
-      box-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.8);
+      box-shadow: 0 0 px2vw(8) rgba(0, 212, 255, 0.8);
     }
   }
 
   @keyframes energySweep {
-    0%, 100% {
+    0%,
+    100% {
       opacity: 0.45;
       transform: translateX(-3%);
     }
@@ -2619,15 +2766,20 @@
 
   @keyframes gridDrift {
     from {
-      background-position: 0 0, 0 0;
+      background-position:
+        0 0,
+        0 0;
     }
     to {
-      background-position: 0.42rem 0.42rem, 0.42rem 0.42rem;
+      background-position:
+        px2vw(42) px2vw(42),
+        px2vw(42) px2vw(42);
     }
   }
 
   @keyframes gridPulse {
-    0%, 100% {
+    0%,
+    100% {
       opacity: 0.24;
     }
     50% {
@@ -2640,7 +2792,8 @@
       transform: translateY(-110%);
       opacity: 0;
     }
-    12%, 72% {
+    12%,
+    72% {
       opacity: 1;
     }
     100% {
@@ -2650,7 +2803,8 @@
   }
 
   @keyframes sideEnergy {
-    0%, 100% {
+    0%,
+    100% {
       opacity: 0.45;
       filter: hue-rotate(0deg);
     }
@@ -2661,7 +2815,8 @@
   }
 
   @keyframes cardGlint {
-    0%, 62% {
+    0%,
+    62% {
       left: -65%;
       opacity: 0;
     }
@@ -2675,16 +2830,18 @@
   }
 
   @keyframes iconPulse {
-    0%, 100% {
-      box-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.65);
+    0%,
+    100% {
+      box-shadow: 0 0 px2vw(8) rgba(0, 212, 255, 0.65);
     }
     50% {
-      box-shadow: 0 0 0.2rem rgba(0, 212, 255, 1);
+      box-shadow: 0 0 px2vw(20) rgba(0, 212, 255, 1);
     }
   }
 
   @keyframes titleGlow {
-    0%, 100% {
+    0%,
+    100% {
       filter: brightness(1);
     }
     50% {
@@ -2693,7 +2850,8 @@
   }
 
   @keyframes radarBreath {
-    0%, 100% {
+    0%,
+    100% {
       opacity: 0.38;
       transform: scale(1);
     }
@@ -2704,7 +2862,8 @@
   }
 
   @keyframes numberPulse {
-    0%, 100% {
+    0%,
+    100% {
       transform: translateZ(0) scale(1);
     }
     50% {
@@ -2713,7 +2872,8 @@
   }
 
   @keyframes dotBreath {
-    0%, 100% {
+    0%,
+    100% {
       filter: brightness(1);
     }
     50% {
@@ -2722,7 +2882,8 @@
   }
 
   @keyframes techMapBreath {
-    0%, 100% {
+    0%,
+    100% {
       filter: brightness(1) saturate(1);
     }
     50% {
@@ -2740,7 +2901,8 @@
   }
 
   @keyframes orbitCorePulse {
-    0%, 100% {
+    0%,
+    100% {
       transform: translate(-50%, -50%) scale(0.88);
       opacity: 0.72;
     }
@@ -2769,14 +2931,16 @@
   }
 
   @keyframes mapScanLine {
-    0%, 18% {
+    0%,
+    18% {
       left: -32%;
       opacity: 0;
     }
     30% {
       opacity: 0.95;
     }
-    78%, 100% {
+    78%,
+    100% {
       left: 118%;
       opacity: 0;
     }
@@ -2795,19 +2959,20 @@
   }
 
   @keyframes buildingPulse {
-    0%, 100% {
+    0%,
+    100% {
       filter: brightness(1);
       box-shadow:
-        inset -0.08rem 0 0.18rem rgba(2, 8, 23, 0.5),
-        inset 0.06rem 0 0.14rem rgba(148, 163, 184, 0.2),
-        0 0 0.18rem rgba(217, 119, 6, 0.28);
+        inset -px2vw(8) 0 px2vw(18) rgba(2, 8, 23, 0.5),
+        inset px2vw(6) 0 px2vw(14) rgba(148, 163, 184, 0.2),
+        0 0 px2vw(18) rgba(217, 119, 6, 0.28);
     }
     50% {
       filter: brightness(1.18);
       box-shadow:
-        inset -0.08rem 0 0.18rem rgba(2, 8, 23, 0.42),
-        inset 0.06rem 0 0.16rem rgba(148, 163, 184, 0.3),
-        0 0 0.28rem rgba(217, 119, 6, 0.46);
+        inset -px2vw(8) 0 px2vw(18) rgba(2, 8, 23, 0.42),
+        inset px2vw(6) 0 px2vw(16) rgba(148, 163, 184, 0.3),
+        0 0 px2vw(28) rgba(217, 119, 6, 0.46);
     }
   }
 
@@ -2830,7 +2995,8 @@
   }
 
   @keyframes markerFloat {
-    0%, 100% {
+    0%,
+    100% {
       transform: translateY(0) scale(1);
     }
     50% {
@@ -2859,7 +3025,8 @@
   }
 
   @keyframes markerNeedle {
-    0%, 100% {
+    0%,
+    100% {
       opacity: 0.32;
       transform: translate(-50%, -50%) rotate(0deg) scaleY(0.76);
     }
@@ -2888,7 +3055,8 @@
   }
 
   @keyframes controlGlint {
-    0%, 58% {
+    0%,
+    58% {
       left: -70%;
       opacity: 0;
     }