From 2cda90e54dd4ecb3c706ce02b0a282b8f38282e6 Mon Sep 17 00:00:00 2001
From: ZhengMingKing <zhengmingking@163.com>
Date: Sat, 13 Jun 2026 23:04:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view/largeScreen2/index.vue | 1276 ++++++++++++++++++++++---------
 1 file changed, 899 insertions(+), 377 deletions(-)

diff --git a/src/view/largeScreen2/index.vue b/src/view/largeScreen2/index.vue
index 8ea8fb8..88d9a48 100644
--- a/src/view/largeScreen2/index.vue
+++ b/src/view/largeScreen2/index.vue
@@ -93,20 +93,30 @@
           </div>
         </div> -->
         <div class="title">智慧用电安全监控平台</div>
-        <div class="top2">
+        <div class="top2" :class="{ 'top2-tech-style': isMapTechStyle }">
           <div class="card map-card">
             <div class="card-title" style="display: none">设备分布</div>
-            <div class="map-container-full" :class="`map-mode-${mapDisplayMode.toLowerCase()}`" id="chinaMap" ref="chinaMap">
-              <div class="map-corner top-left"></div>
-              <div class="map-corner top-right"></div>
-              <div class="map-corner bottom-left"></div>
-              <div class="map-corner bottom-right"></div>
-              <div class="map-radar-glow"></div>
-              <div class="map-3d-stage"></div>
-              <div class="map-title-bar">
-                <span class="map-title-main">全国设备态势</span>
-                <span class="map-title-sub">REAL-TIME DISTRIBUTION</span>
-              </div>
+            <div
+              class="map-container-full"
+              :class="[
+                `map-mode-${mapDisplayMode.toLowerCase()}`,
+                { 'map-tech-style': isMapTechStyle }
+              ]"
+              id="chinaMap"
+              ref="chinaMap"
+            >
+              <template v-if="isMapTechStyle">
+                <div class="map-corner top-left"></div>
+                <div class="map-corner top-right"></div>
+                <div class="map-corner bottom-left"></div>
+                <div class="map-corner bottom-right"></div>
+                <div class="map-depth-vignette"></div>
+                <div class="map-industrial-frame"></div>
+                <div class="map-title-bar">
+                  <span class="map-title-main">工业设备态势</span>
+                  <span class="map-title-sub">INDUSTRIAL MONITORING</span>
+                </div>
+              </template>
               <div class="map-mode-switch">
                 <button
                   v-for="mode in mapModeOptions"
@@ -127,17 +137,17 @@
                 <div class="control-bottom">
                   <div class="control-title">设备状态</div>
                   <div class="status-list">
-                    <div class="status-item">
+                    <div class="status-item status-item-online">
                       <div class="status-dot online"></div>
                       <span>在线</span>
                       <strong>{{ onlineDevices }}</strong>
                     </div>
-                    <div class="status-item">
+                    <div class="status-item status-item-alarm">
                       <div class="status-dot alarm"></div>
                       <span>告警</span>
                       <strong>{{ alarmDevices }}</strong>
                     </div>
-                    <div class="status-item">
+                    <div class="status-item status-item-offline">
                       <div class="status-dot offline"></div>
                       <span>离线</span>
                       <strong>{{ offlineDevices }}</strong>
@@ -256,13 +266,21 @@
   const mapDisplayMode = ref('3D')
   const mapModeOptions = [
     { label: '3D', value: '3D' },
-    { label: '2D', value: '2D' }
+    { label: '2D', value: '2D' },
+    { label: '卫星', value: 'satellite' }
   ]
-  let buildingsLayer = null
+  const isMapTechStyle = computed(() => mapDisplayMode.value !== 'satellite')
+  let satelliteLayer = null
+  let buildingLayer = null
+  let defaultMapLayers = null
+  let satelliteLayersVisible = false
+  let buildingLayerVisible = false
 
   const default3DCenter = [120.153576, 30.287459]
   const default3DZoom = 17.6
   const default2DZoom = 12
+  const techMapStyle = 'amap://styles/blue'
+  const defaultMapStyle = 'amap://styles/normal'
 
   const tableData = ref([])
 
@@ -387,11 +405,11 @@
     getDeviceChangeList()
     getProjectCategoryGroup()
 
-    getDeviceGatewayList()
-
-    // setTimeout(() => {
-    initMap()
-    // }, 1000)
+    getDeviceGatewayList().finally(() => {
+      nextTick(() => {
+        initMap()
+      })
+    })
   })
 
   const getDeviceWarningList = () => {
@@ -435,7 +453,7 @@
   }
 
   const getDeviceGatewayList = () => {
-    serve.getDeviceGatewayList().then((res) => {
+    return serve.getDeviceGatewayList().then((res) => {
       if (res.code === 0) {
         devices.value = res.data.map((item) => ({
           ...item,
@@ -444,9 +462,9 @@
         console.log('devices', devices.value)
         nextTick(() => {
           if (mapInstance.value) {
-            mapInstance.value.setZoomAndCenter(getCurrentMapZoom(), getValidDeviceCenter())
+            mapInstance.value.setZoomAndCenter(getCurrentMapZoom(), getValidDeviceCenter(), true)
+            addMarkers()
           }
-          addMarkers()
         })
       }
     })
@@ -467,44 +485,106 @@
     return mapDisplayMode.value === '3D' ? default3DZoom : default2DZoom
   }
 
-  const add3DBuildingLayer = () => {
-    if (!mapInstance.value || typeof AMap === 'undefined' || !AMap.Buildings || buildingsLayer) return
+  const ensureSatelliteLayers = () => {
+    if (typeof AMap === 'undefined' || !AMap.TileLayer) return
 
-    buildingsLayer = new AMap.Buildings({
-      zooms: [3, 20],
-      heightFactor: 1.6,
-      wallColor: 'rgba(42, 169, 255, 0.88)',
-      roofColor: 'rgba(139, 233, 255, 0.78)'
-    })
-    mapInstance.value.add(buildingsLayer)
+    if (!satelliteLayer && AMap.TileLayer.Satellite) {
+      satelliteLayer = new AMap.TileLayer.Satellite()
+    }
   }
 
-  const remove3DBuildingLayer = () => {
-    if (!mapInstance.value || !buildingsLayer) return
+  const showSatelliteLayers = () => {
+    if (!mapInstance.value) return
 
-    mapInstance.value.remove(buildingsLayer)
-    buildingsLayer = null
+    ensureSatelliteLayers()
+    const layers = [satelliteLayer].filter(Boolean)
+    if (!layers.length) return
+
+    if (mapInstance.value.setLayers) {
+      mapInstance.value.setLayers(layers)
+    } else if (!satelliteLayersVisible) {
+      layers.forEach((layer) => mapInstance.value.add(layer))
+    }
+
+    satelliteLayersVisible = true
+  }
+
+  const hideSatelliteLayers = () => {
+    if (!mapInstance.value || !satelliteLayersVisible) return
+
+    if (satelliteLayer) mapInstance.value.remove(satelliteLayer)
+
+    if (defaultMapLayers?.length && mapInstance.value.setLayers) {
+      mapInstance.value.setLayers(defaultMapLayers)
+    }
+
+    satelliteLayersVisible = false
+  }
+
+  const ensureBuildingLayer = () => {
+    if (typeof AMap === 'undefined' || !AMap.Buildings) return
+
+    if (!buildingLayer) {
+      buildingLayer = new AMap.Buildings({
+        zooms: [15, 20],
+        zIndex: 11,
+        heightFactor: 2,
+        wallColor: 'rgba(5, 44, 86, 0.92)',
+        roofColor: 'rgba(0, 174, 255, 0.58)'
+      })
+    }
+  }
+
+  const showBuildingLayer = () => {
+    if (!mapInstance.value || buildingLayerVisible) return
+
+    ensureBuildingLayer()
+    if (!buildingLayer) return
+
+    mapInstance.value.add(buildingLayer)
+    buildingLayerVisible = true
+  }
+
+  const hideBuildingLayer = () => {
+    if (!mapInstance.value || !buildingLayerVisible) return
+
+    if (buildingLayer) mapInstance.value.remove(buildingLayer)
+    buildingLayerVisible = false
   }
 
   const applyMapMode = () => {
     if (!mapInstance.value) return
 
-    const is3D = mapDisplayMode.value === '3D'
+    const mode = mapDisplayMode.value
     const center = getValidDeviceCenter()
+    const is3D = mode === '3D'
+    const isSatellite = mode === 'satellite'
 
     mapInstance.value.setStatus({
       pitchEnable: is3D,
       rotateEnable: is3D
     })
-    mapInstance.value.setFeatures(is3D ? ['bg', 'road', 'building', 'point'] : ['bg', 'road', 'point'])
-    mapInstance.value.setZoomAndCenter(is3D ? default3DZoom : default2DZoom, center)
-    mapInstance.value.setPitch(is3D ? 68 : 0)
-    mapInstance.value.setRotation(is3D ? -28 : 0)
+
+    if (!isSatellite) {
+      hideSatelliteLayers()
+    }
+
+    mapInstance.value.setZoomAndCenter(is3D ? default3DZoom : default2DZoom, center, true)
+    mapInstance.value.setPitch(is3D ? 68 : 0, true)
+    mapInstance.value.setRotation(is3D ? -28 : 0, true)
 
     if (is3D) {
-      add3DBuildingLayer()
+      showBuildingLayer()
     } else {
-      remove3DBuildingLayer()
+      hideBuildingLayer()
+    }
+
+    if (mapInstance.value.setMapStyle) {
+      mapInstance.value.setMapStyle(isSatellite ? defaultMapStyle : techMapStyle)
+    }
+
+    if (isSatellite) {
+      showSatelliteLayers()
     }
   }
 
@@ -516,6 +596,8 @@
   }
 
   const initMap = () => {
+    if (mapInstance.value) return
+
     if (typeof AMap === 'undefined') {
       console.error('高德地图API未加载')
       return
@@ -527,29 +609,25 @@
       zoom: getCurrentMapZoom(),
       zooms: [3, 20],
       center: getValidDeviceCenter(),
-      mapStyle: 'amap://styles/blue',
       viewMode: '3D',
       pitch: mapDisplayMode.value === '3D' ? 68 : 0,
       rotation: mapDisplayMode.value === '3D' ? -28 : 0,
-      terrain: true,
       pitchEnable: mapDisplayMode.value === '3D',
       rotateEnable: mapDisplayMode.value === '3D',
       dragEnable: true,
       zoomEnable: true,
-      buildingAnimation: true,
-      showBuildingBlock: true,
-      features: ['bg', 'road', 'building', 'point'],
-      showLabel: false,
-      skyColor: '#020713'
+      mapStyle: isMapTechStyle.value ? techMapStyle : defaultMapStyle,
+      skyColor: '#031629'
     })
 
-    applyMapMode()
+    defaultMapLayers = mapInstance.value.getLayers?.().slice() || null
+    if (mapDisplayMode.value === '3D') {
+      showBuildingLayer()
+    }
 
     mapInstance.value.on('complete', () => {
       console.log('地图加载完成')
       if (devices.value && devices.value.length > 0) {
-        const center = getValidDeviceCenter()
-        mapInstance.value.setZoomAndCenter(getCurrentMapZoom(), center)
         addMarkers()
       }
     })
@@ -583,17 +661,16 @@
       const latitude = Number(device.gatewayLat)
       if (!Number.isFinite(longitude) || !Number.isFinite(latitude)) return
 
+      const markerStatus = getDeviceMarkerClass(device.status)
       const marker = new AMap.Marker({
         position: [longitude, latitude],
-        content: createMarkerContent(device),
-        anchor: 'bottom-center',
-        zIndex: 120
+        title: getDeviceLocationName(device),
+        content: `<div class="tech-map-marker tech-map-marker-${markerStatus}"><i></i><b></b><span></span></div>`,
+        offset: new AMap.Pixel(-12, -12)
       })
 
       const infoWindow = new AMap.InfoWindow({
-        content: createInfoWindowContent(device),
-        offset: new AMap.Pixel(0, -44),
-        isCustom: true
+        content: createInfoWindowContent(device)
       })
 
       marker.on('click', () => {
@@ -607,18 +684,16 @@
     console.log('渲染完成，标记数量:', markers.value.length)
   }
 
-  const mapStatusTheme = {
-    online: 'var(--tech-success)',
-    alarm: 'var(--tech-danger)',
-    offline: 'rgba(220, 243, 255, 0.56)'
-  }
-
-  const getMapStatusColor = (status) => mapStatusTheme[status] || mapStatusTheme.offline
-
   const getDeviceLocationName = (device) => {
     return device.gatewayAddress || device.gatewayName || device.gatewayMac || '未知位置'
   }
 
+  const getDeviceMarkerClass = (status) => {
+    if (status === 'alarm') return 'alarm'
+    if (status === 'offline') return 'offline'
+    return 'online'
+  }
+
   const escapeMapHtml = (value) => {
     return String(value ?? '')
       .replace(/&/g, '&amp;')
@@ -628,35 +703,13 @@
       .replace(/'/g, '&#39;')
   }
 
-  const createMarkerContent = (device) => {
-    const color = getMapStatusColor(device.status)
-    const statusClass = device.status === 'online' ? 'online' : device.status === 'alarm' ? 'alarm' : 'offline'
-    const locationName = escapeMapHtml(getDeviceLocationName(device))
-    return `
-      <div class="power-map-marker ${statusClass}" style="--marker-color: ${color};">
-        <span class="marker-ripple"></span>
-        <span class="marker-core"></span>
-        <span class="marker-pin"></span>
-        <span class="marker-location-name">${locationName}</span>
-      </div>
-    `
-  }
-
   const createInfoWindowContent = (device) => {
-    const statusText = device.status === 'online' ? '在线' : device.status === 'alarm' ? '告警' : '离线'
-    const statusColor = getMapStatusColor(device.status)
     const locationName = escapeMapHtml(getDeviceLocationName(device))
 
     return `
-      <div class="power-map-info" style="--status-color: ${statusColor};">
-        <div class="power-map-info__header">
-          <span class="power-map-info__dot"></span>
-          <span>${statusText}</span>
-        </div>
-        <div class="power-map-info__body">
-          <div class="power-map-info__label">设备位置</div>
-          <div class="power-map-info__address">${locationName}</div>
-        </div>
+      <div class="tech-map-info-window">
+        <div class="tech-map-info-title">设备位置</div>
+        <div class="tech-map-info-value">${locationName}</div>
       </div>
     `
   }
@@ -666,6 +719,20 @@
     if (resizeObserver) {
       resizeObserver.disconnect()
     }
+
+    if (mapInstance.value) {
+      markers.value.forEach((marker) => {
+        mapInstance.value.remove(marker)
+      })
+      markers.value = []
+      hideBuildingLayer()
+      hideSatelliteLayers()
+      buildingLayer = null
+      satelliteLayer = null
+      mapInstance.value.destroy()
+      mapInstance.value = null
+    }
+
     document.documentElement.style.fontSize = ''
   })
 </script>
@@ -1267,48 +1334,173 @@
     padding: 0;
     margin: 0;
     overflow: hidden;
+  }
+
+  .map-container-full.map-tech-style {
     background:
-      radial-gradient(ellipse at 50% 64%, rgba(0, 212, 255, 0.3), transparent 45%),
-      linear-gradient(180deg, rgba(8, 47, 73, 0.04), rgba(2, 8, 23, 0.42));
-    perspective: 8rem;
+      radial-gradient(ellipse at 50% 58%, rgba(0, 229, 255, 0.34), transparent 34%),
+      radial-gradient(circle at 22% 22%, rgba(34, 211, 238, 0.24), transparent 24%),
+      radial-gradient(circle at 78% 72%, rgba(245, 158, 11, 0.2), transparent 28%),
+      radial-gradient(ellipse at 50% 100%, rgba(15, 23, 42, 0.78), transparent 52%),
+      linear-gradient(180deg, rgba(3, 24, 52, 0.3), rgba(2, 14, 34, 0.56));
+    animation: techMapBreath 5.6s ease-in-out infinite;
   }
 
-  .map-container-full .amap-layer,
-  .map-container-full .amap-maps,
-  .map-container-full canvas {
-    filter: brightness(1.22) saturate(1.18) contrast(1.06);
+  .map-container-full.map-tech-style .amap-layer,
+  .map-container-full.map-tech-style .amap-maps,
+  .map-container-full.map-tech-style canvas {
+    filter: brightness(1.28) saturate(1.12) contrast(1.08) hue-rotate(-10deg);
   }
 
-  .map-container-full::before {
+  .map-container-full.map-tech-style::before {
     content: '';
     position: absolute;
-    left: 8%;
-    right: 8%;
-    bottom: 0.34rem;
+    inset: 0;
     z-index: 998;
-    height: 2.4rem;
     pointer-events: none;
     background:
-      repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.18) 0 1px, transparent 1px 0.38rem),
-      repeating-linear-gradient(0deg, rgba(0, 212, 255, 0.16) 0 1px, transparent 1px 0.38rem),
-      radial-gradient(ellipse at 50% 50%, rgba(0, 212, 255, 0.16), transparent 68%);
-    border: 1px solid rgba(0, 212, 255, 0.2);
-    border-radius: 50%;
-    box-shadow: 0 0 0.42rem rgba(0, 212, 255, 0.1);
-    transform: rotateX(68deg) translateY(0.2rem);
-    transform-origin: center bottom;
+      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);
     mix-blend-mode: screen;
+    opacity: 0.72;
   }
 
-  .map-container-full::after {
-    content: '';
+  .map-container-full.map-tech-style::after {
+    content: none;
+  }
+
+  .map-container-full.map-mode-satellite {
+    background: transparent;
+  }
+
+  .map-container-full.map-mode-satellite .amap-layer,
+  .map-container-full.map-mode-satellite .amap-maps,
+  .map-container-full.map-mode-satellite canvas {
+    filter: none;
+  }
+
+  .map-depth-vignette {
     position: absolute;
     inset: 0;
     z-index: 999;
     pointer-events: none;
     background:
-      linear-gradient(180deg, rgba(137, 221, 255, 0.16), transparent 16%, transparent 72%, rgba(2, 8, 23, 0.24)),
-      linear-gradient(90deg, rgba(2, 8, 23, 0.28), transparent 16%, transparent 84%, rgba(2, 8, 23, 0.28));
+      radial-gradient(ellipse at 50% 52%, transparent 0 46%, rgba(2, 8, 23, 0.08) 76%, rgba(2, 8, 23, 0.28) 100%),
+      linear-gradient(90deg, rgba(2, 8, 23, 0.2), transparent 16% 84%, rgba(2, 8, 23, 0.2));
+    mix-blend-mode: multiply;
+  }
+
+  .map-radar-sweep {
+    position: absolute;
+    top: 56%;
+    left: 50%;
+    z-index: 1000;
+    width: 6.9rem;
+    height: 6.9rem;
+    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),
+      radial-gradient(circle, transparent 0 52%, rgba(96, 165, 250, 0.055) 53%, transparent 56%);
+    transform: translate(-50%, -50%);
+    transform-origin: center;
+    opacity: 0.46;
+    mix-blend-mode: screen;
+    animation: mapRadarSweep 6.8s linear infinite;
+  }
+
+  .map-building-cluster {
+    position: absolute;
+    top: 47%;
+    left: 50%;
+    z-index: 1000;
+    width: 4.8rem;
+    height: 2.7rem;
+    pointer-events: none;
+    transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-8deg);
+    transform-style: preserve-3d;
+    mix-blend-mode: normal;
+    opacity: 0.52;
+  }
+
+  .building-tower {
+    position: absolute;
+    bottom: 0.16rem;
+    width: 0.42rem;
+    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),
+      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);
+    transform: skewY(-8deg);
+    animation: buildingPulse 3.8s ease-in-out infinite;
+  }
+
+  .building-tower::before {
+    content: '';
+    position: absolute;
+    top: -0.13rem;
+    right: -0.06rem;
+    left: 0.07rem;
+    height: 0.13rem;
+    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);
+    transform-origin: bottom left;
+  }
+
+  .building-tower::after {
+    content: '';
+    position: absolute;
+    top: -0.02rem;
+    right: -0.13rem;
+    width: 0.13rem;
+    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));
+    transform: skewY(-48deg);
+    transform-origin: top left;
+  }
+
+  .tower-a {
+    left: 1.45rem;
+    height: 1.18rem;
+  }
+
+  .tower-b {
+    left: 2.04rem;
+    height: 1.72rem;
+    width: 0.5rem;
+    animation-delay: 0.4s;
+  }
+
+  .tower-c {
+    left: 2.72rem;
+    height: 1.34rem;
+    animation-delay: 0.8s;
+  }
+
+  .tower-d {
+    left: 3.2rem;
+    height: 0.96rem;
+    width: 0.36rem;
+    animation-delay: 1.2s;
+  }
+
+  .tower-e {
+    left: 0.96rem;
+    height: 0.82rem;
+    width: 0.34rem;
+    animation-delay: 1.6s;
   }
 
   .map-control {
@@ -1375,65 +1567,52 @@
     background-color: rgba(220, 243, 255, 0.48);
   }
 
-  .map-title-bar {
-    position: absolute;
-    top: 0.2rem;
-    left: 50%;
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    gap: 0.04rem;
-    min-width: 2.8rem;
-    padding: 0.1rem 0.32rem 0.12rem;
-    color: #e9fbff;
-    background:
-      linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.2) 16%, rgba(15, 23, 42, 0.72) 50%, rgba(6, 182, 212, 0.2) 84%, transparent),
-      linear-gradient(180deg, rgba(15, 23, 42, 0.24), rgba(2, 6, 23, 0.12));
-    border-top: 1px solid rgba(0, 212, 255, 0.52);
-    border-bottom: 1px solid rgba(245, 158, 11, 0.28);
-    transform: translateX(-50%);
-    pointer-events: none;
-    text-shadow: 0 0 0.14rem rgba(0, 212, 255, 0.65);
-  }
-
-  .map-title-main {
-    font-size: 0.2rem;
-    font-weight: 700;
-    letter-spacing: 0.06rem;
-  }
-
-  .map-title-sub {
-    font-size: 0.1rem;
-    color: rgba(137, 221, 255, 0.78);
-    letter-spacing: 0.04rem;
-  }
-
   .map-mode-switch {
     position: absolute;
     top: 0.24rem;
     right: 0.22rem;
-    z-index: 1001;
+    z-index: 1003;
     display: flex;
     gap: 0.06rem;
     padding: 0.06rem;
-    border: 1px solid rgba(0, 212, 255, 0.38);
+    border: 1px solid rgba(56, 189, 248, 0.34);
     border-radius: 0.12rem;
     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);
+      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);
     box-shadow:
-      inset 0 0 0.18rem rgba(0, 212, 255, 0.12),
-      0 0 0.24rem rgba(0, 212, 255, 0.18),
+      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);
     backdrop-filter: blur(8px);
   }
 
+  .map-mode-switch::before,
+  .map-mode-switch::after {
+    content: '';
+    position: absolute;
+    right: 0.12rem;
+    left: 0.12rem;
+    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);
+  }
+
+  .map-mode-switch::before {
+    top: -0.05rem;
+  }
+
+  .map-mode-switch::after {
+    bottom: -0.05rem;
+  }
+
   .map-mode-button {
+    position: relative;
     min-width: 0.6rem;
     height: 0.32rem;
     padding: 0 0.14rem;
-    border: 1px solid rgba(0, 212, 255, 0.42);
+    border: 1px solid rgba(56, 189, 248, 0.38);
     border-radius: 0.08rem;
     color: #e9fbff;
     font-family: DIN Alternate, Bahnschrift, Arial, sans-serif;
@@ -1444,7 +1623,7 @@
     cursor: pointer;
     background: rgba(2, 8, 23, 0.72);
     text-shadow:
-      0 0 0.06rem rgba(0, 212, 255, 0.9),
+      0 0 0.06rem rgba(56, 189, 248, 0.72),
       0 1px 2px rgba(0, 0, 0, 0.9);
     transition: all 0.25s ease;
     -webkit-font-smoothing: antialiased;
@@ -1453,72 +1632,294 @@
   .map-mode-button:hover,
   .map-mode-button.active {
     color: #ffffff;
-    border-color: rgba(245, 158, 11, 0.86);
-    background: linear-gradient(135deg, rgba(245, 158, 11, 0.52), rgba(0, 212, 255, 0.28));
+    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(0, 212, 255, 0.46);
+      0 0 0.18rem rgba(217, 119, 6, 0.38);
   }
 
-  .map-container-full.map-mode-2d::before {
-    top: 0.82rem;
-    bottom: 0.24rem;
-    height: auto;
-    border-radius: 0.16rem;
-    opacity: 0.5;
-    transform: none;
+  .map-mode-button.active::after {
+    content: '';
+    position: absolute;
+    right: 18%;
+    bottom: -0.04rem;
+    left: 18%;
+    height: 0.02rem;
+    background: var(--tech-amber);
+    box-shadow: 0 0 0.12rem rgba(217, 119, 6, 0.9);
   }
 
-  .map-container-full.map-mode-2d .map-radar-glow {
+  .map-title-bar {
+    position: absolute;
+    top: 0.18rem;
+    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;
+    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(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);
+    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%);
+  }
+
+  .map-title-main {
+    font-size: 0.2rem;
+    font-weight: 700;
+    letter-spacing: 0.06rem;
+  }
+
+  .map-title-sub {
+    font-size: 0.1rem;
+    color: rgba(148, 163, 184, 0.78);
+    letter-spacing: 0.04rem;
+  }
+
+  .map-orbit-dock {
+    position: absolute;
+    left: 50%;
+    top: 56%;
+    z-index: 1001;
+    width: 5.35rem;
+    height: 5.35rem;
+    pointer-events: none;
     transform: translate(-50%, -50%);
-    animation-name: radarRotate;
+    transform-style: preserve-3d;
+    mix-blend-mode: screen;
   }
 
-  .map-container-full.map-mode-2d .map-3d-stage {
-    display: none;
+  .map-orbit-dock .orbit {
+    position: absolute;
+    inset: 0;
+    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),
+      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);
+    animation: mapDockRotate 9s linear infinite;
   }
 
-  .map-radar-glow {
+  .map-orbit-dock .orbit-middle {
+    inset: 0.54rem;
+    border-color: rgba(245, 158, 11, 0.32);
+    animation-duration: 6.8s;
+    animation-direction: reverse;
+  }
+
+  .map-orbit-dock .orbit-inner {
+    inset: 1.12rem;
+    border-color: rgba(125, 211, 252, 0.42);
+    animation-duration: 4.9s;
+  }
+
+  .map-orbit-dock .orbit-core {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 0.18rem;
+    height: 0.18rem;
+    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);
+    transform: translate(-50%, -50%);
+    animation: orbitCorePulse 1.8s ease-in-out infinite;
+  }
+
+  .map-grid-glow {
     position: absolute;
     left: 50%;
     top: 58%;
     z-index: 1000;
-    width: 5.6rem;
-    height: 5.6rem;
-    border: 1px solid rgba(0, 212, 255, 0.22);
+    width: 6.9rem;
+    height: 6.9rem;
+    border: 1px solid rgba(56, 189, 248, 0.36);
     border-radius: 50%;
     background:
-      repeating-radial-gradient(circle, transparent 0 0.62rem, rgba(0, 212, 255, 0.08) 0.63rem 0.64rem),
-      conic-gradient(from 0deg, transparent 0deg, rgba(0, 212, 255, 0.2) 46deg, transparent 88deg, transparent 360deg);
-    box-shadow: inset 0 0 0.42rem rgba(0, 212, 255, 0.08), 0 0 0.36rem rgba(0, 212, 255, 0.08);
-    transform: translate(-50%, -50%) rotateX(62deg);
-    transform-origin: center center;
-    animation: radarRotate3d 12s linear infinite;
+      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);
+    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);
+    transform: translate(-50%, -50%);
+    animation: mapGridRotate 10s linear infinite;
     mix-blend-mode: screen;
     pointer-events: none;
+    opacity: 0.46;
   }
 
-  .map-3d-stage {
+  .map-energy-ring {
     position: absolute;
     left: 50%;
-    bottom: 0.28rem;
+    top: 57%;
     z-index: 1000;
-    width: 5.8rem;
-    height: 1.55rem;
-    pointer-events: none;
-    border: 1px solid rgba(245, 158, 11, 0.24);
+    width: 4.7rem;
+    height: 4.7rem;
+    border: 1px dashed rgba(148, 163, 184, 0.42);
     border-radius: 50%;
-    background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.14), transparent 62%);
-    box-shadow: 0 0 0.32rem rgba(245, 158, 11, 0.1), inset 0 0 0.28rem rgba(0, 212, 255, 0.08);
-    transform: translateX(-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);
+    box-shadow:
+      0 0 0.24rem rgba(217, 119, 6, 0.1),
+      inset 0 0 0.26rem rgba(56, 189, 248, 0.07);
+    transform: translate(-50%, -50%);
+    animation: mapEnergyRotate 7.2s linear infinite reverse;
     mix-blend-mode: screen;
+    opacity: 0.48;
+  }
+
+  .map-axis-cross {
+    position: absolute;
+    left: 50%;
+    top: 57%;
+    z-index: 1000;
+    width: 5.4rem;
+    height: 5.4rem;
+    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%);
+    opacity: 0.28;
+    mix-blend-mode: screen;
+  }
+
+  .map-scan-line {
+    position: absolute;
+    left: -28%;
+    top: 0;
+    z-index: 1000;
+    width: 32%;
+    height: 100%;
+    pointer-events: none;
+    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.14), rgba(217, 119, 6, 0.1), transparent);
+    filter: blur(1px);
+    transform: skewX(-18deg);
+    animation: mapScanLine 5.5s ease-in-out infinite;
+    mix-blend-mode: screen;
+  }
+
+  .map-scan-line::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 52%;
+    width: 1px;
+    height: 100%;
+    background: rgba(224, 231, 255, 0.4);
+    box-shadow: 0 0 0.1rem rgba(217, 119, 6, 0.42);
+  }
+
+  .map-industrial-frame {
+    position: absolute;
+    inset: 0.12rem;
+    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 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);
+  }
+
+  .map-container-full.map-tech-style.map-mode-3d .map-grid-glow,
+  .map-container-full.map-tech-style.map-mode-3d .map-energy-ring,
+  .map-container-full.map-tech-style.map-mode-3d .map-radar-sweep,
+  .map-container-full.map-tech-style.map-mode-3d .map-orbit-dock {
+    transform: translate(-50%, -50%) rotateX(62deg);
+  }
+
+  .map-container-full.map-tech-style.map-mode-3d .map-building-cluster {
+    opacity: 0.48;
+    transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-8deg);
+  }
+
+  .map-container-full.map-tech-style.map-mode-3d::after {
+    height: 2.9rem;
+    bottom: 0.06rem;
+    transform: rotateX(72deg);
+  }
+
+  .map-container-full.map-tech-style.map-mode-2d::after {
+    left: 11%;
+    right: 11%;
+    bottom: 50%;
+    height: 4.45rem;
+    border-radius: 0.18rem;
+    transform: translateY(50%);
+    transform-origin: center;
+    opacity: 0.42;
+  }
+
+  .map-container-full.map-tech-style.map-mode-2d .map-grid-glow,
+  .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;
+  }
+
+  .map-container-full.map-tech-style.map-mode-2d .map-radar-sweep {
+    width: 6.2rem;
+    height: 6.2rem;
+    opacity: 0.32;
+  }
+
+  .map-container-full.map-tech-style.map-mode-2d .map-building-cluster {
+    top: 50%;
+    opacity: 0.2;
+    transform: translate(-50%, -50%) scale(0.82);
+  }
+
+  .map-container-full.map-tech-style.map-mode-2d .building-tower {
+    height: 0.16rem;
+    transform: none;
+  }
+
+  .map-container-full.map-tech-style.map-mode-2d .building-tower::before,
+  .map-container-full.map-tech-style.map-mode-2d .building-tower::after {
+    opacity: 0.28;
+  }
+
+  .map-container-full.map-tech-style.map-mode-2d .map-axis-cross {
+    opacity: 0.48;
+  }
+
+  .map-container-full.map-tech-style.map-mode-2d .map-orbit-dock {
+    opacity: 0.86;
   }
 
   .map-corner {
     position: absolute;
     z-index: 1000;
-    width: 0.42rem;
-    height: 0.42rem;
+    width: 0.54rem;
+    height: 0.54rem;
     pointer-events: none;
   }
 
@@ -1526,8 +1927,10 @@
   .map-corner::after {
     content: '';
     position: absolute;
-    background: rgba(0, 212, 255, 0.9);
-    box-shadow: 0 0 0.12rem rgba(0, 212, 255, 0.85);
+    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);
   }
 
   .map-corner::before {
@@ -1584,6 +1987,130 @@
     bottom: 0;
   }
 
+  .tech-map-marker {
+    position: relative;
+    width: 28px;
+    height: 28px;
+    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%);
+    box-shadow:
+      0 0 14px rgba(0, 229, 255, 0.78),
+      0 0 30px currentColor,
+      inset 0 0 10px rgba(255, 255, 255, 0.18);
+    animation: markerFloat 2.6s ease-in-out infinite;
+  }
+
+  .tech-map-marker::before,
+  .tech-map-marker::after,
+  .tech-map-marker i,
+  .tech-map-marker b {
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+  }
+
+  .tech-map-marker::before,
+  .tech-map-marker::after {
+    inset: -8px;
+    border: 1px solid currentColor;
+    opacity: 0.58;
+    animation: markerPulse 1.8s ease-out infinite;
+  }
+
+  .tech-map-marker::after {
+    inset: -15px;
+    animation-delay: 0.62s;
+  }
+
+  .tech-map-marker i {
+    left: 50%;
+    top: 50%;
+    width: 42px;
+    height: 42px;
+    border: 1px dashed rgba(0, 229, 255, 0.55);
+    transform: translate(-50%, -50%);
+    animation: markerRotate 3.6s linear infinite;
+  }
+
+  .tech-map-marker b {
+    left: 50%;
+    top: 50%;
+    width: 2px;
+    height: 44px;
+    background: linear-gradient(180deg, transparent, currentColor, transparent);
+    box-shadow: 0 0 8px currentColor;
+    transform: translate(-50%, -50%);
+    animation: markerNeedle 2.2s ease-in-out infinite;
+  }
+
+  .tech-map-marker span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #ffffff;
+    box-shadow:
+      0 0 10px #ffffff,
+      0 0 18px currentColor;
+    transform: translate(-50%, -50%);
+  }
+
+  .tech-map-marker-online {
+    color: var(--tech-success);
+  }
+
+  .tech-map-marker-alarm {
+    color: var(--tech-danger);
+  }
+
+  .tech-map-marker-offline {
+    color: rgba(220, 243, 255, 0.58);
+  }
+
+  .tech-map-info-window {
+    min-width: 180px;
+    padding: 10px 12px;
+    color: #eefbff;
+    border: 1px solid rgba(56, 189, 248, 0.38);
+    background:
+      linear-gradient(135deg, rgba(17, 24, 39, 0.96), rgba(2, 6, 23, 0.92)),
+      repeating-linear-gradient(90deg, transparent 0 14px, rgba(217, 119, 6, 0.055) 15px 16px);
+    box-shadow:
+      inset 0 0 16px rgba(56, 189, 248, 0.08),
+      0 0 22px rgba(217, 119, 6, 0.16);
+  }
+
+  .tech-map-info-title {
+    margin-bottom: 4px;
+    color: rgba(148, 163, 184, 0.82);
+    font-size: 12px;
+    letter-spacing: 2px;
+  }
+
+  .tech-map-info-value {
+    color: #ffffff;
+    font-size: 14px;
+    font-weight: 700;
+    text-shadow: 0 0 8px rgba(56, 189, 248, 0.48);
+  }
+
+  .map-container-full .amap-info-content {
+    padding: 0;
+    overflow: hidden;
+    border-radius: 4px;
+    background: transparent;
+  }
+
+  .map-container-full .amap-info-close {
+    color: #eefbff;
+  }
+
   .top2 {
     flex: 1;
     display: flex;
@@ -1803,37 +2330,29 @@
     border: 1px solid rgba(0, 212, 255, 0.18);
     border-radius: 0.16rem;
     overflow: hidden;
-    background:
-      linear-gradient(135deg, rgba(0, 212, 255, 0.1), transparent 25% 75%, rgba(245, 158, 11, 0.08)),
-      rgba(2, 8, 23, 0.24);
+    background: rgba(2, 8, 23, 0.18);
     box-shadow:
-      inset 0 0 0.4rem rgba(0, 212, 255, 0.08),
-      0 0 0.36rem rgba(0, 0, 0, 0.26),
-      0 0 0.26rem rgba(0, 212, 255, 0.08);
+      inset 0 0 0.24rem rgba(0, 212, 255, 0.05),
+      0 0 0.28rem rgba(0, 0, 0, 0.22);
 
     &::before,
     &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      z-index: 2;
-      pointer-events: none;
+      content: none;
     }
+  }
 
-    &::before {
-      background:
-        radial-gradient(circle at 50% 52%, transparent 0 34%, rgba(0, 212, 255, 0.11) 35%, transparent 37%),
-        radial-gradient(circle at 50% 52%, transparent 0 48%, rgba(245, 158, 11, 0.08) 49%, transparent 51%),
-        linear-gradient(90deg, rgba(0, 212, 255, 0.1), transparent 18% 82%, rgba(0, 212, 255, 0.1));
-      animation: radarBreath 4.5s ease-in-out infinite;
-    }
+  .container .center .top2.top2-tech-style {
+    background:
+      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);
 
+    &::before,
     &::after {
-      background:
-        linear-gradient(90deg, transparent 0 49.7%, rgba(0, 212, 255, 0.1) 50%, transparent 50.3%),
-        linear-gradient(0deg, transparent 0 49.7%, rgba(0, 212, 255, 0.08) 50%, transparent 50.3%);
-      opacity: 0.46;
-      mix-blend-mode: screen;
+      content: none;
     }
   }
 
@@ -1872,6 +2391,7 @@
     min-width: 1.74rem;
     padding: 0.16rem;
     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);
     border: 1px solid rgba(0, 212, 255, 0.38);
     border-radius: 0.14rem;
     background:
@@ -1897,6 +2417,14 @@
     pointer-events: none;
   }
 
+  .container .map-control::after {
+    content: '';
+    position: absolute;
+    inset: 0.06rem;
+    pointer-events: none;
+    border: 1px solid rgba(0, 212, 255, 0.14);
+  }
+
   .container .control-title {
     color: #89ddff;
     font-size: 0.13rem;
@@ -1925,10 +2453,23 @@
     justify-content: space-between;
     gap: 0.08rem;
     padding: 0.04rem 0.06rem;
+    border-left: 2px solid rgba(0, 212, 255, 0.32);
     border-radius: 0.06rem;
     background: rgba(2, 8, 23, 0.28);
   }
 
+  .container .status-item-online {
+    border-left-color: var(--tech-success);
+  }
+
+  .container .status-item-alarm {
+    border-left-color: var(--tech-danger);
+  }
+
+  .container .status-item-offline {
+    border-left-color: rgba(220, 243, 255, 0.48);
+  }
+
   .container .status-item span {
     flex: 1;
   }
@@ -2016,144 +2557,6 @@
     }
   }
 
-  .power-map-marker {
-    position: relative;
-    width: 34px;
-    height: 42px;
-    color: var(--marker-color);
-    animation: markerFloat 2.4s ease-in-out infinite;
-    filter: drop-shadow(0 0 10px var(--marker-color));
-  }
-
-  .marker-location-name {
-    position: absolute;
-    left: 50%;
-    bottom: 45px;
-    max-width: 140px;
-    padding: 4px 8px;
-    color: #e9fbff;
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 1.2;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    border: 1px solid rgba(0, 212, 255, 0.58);
-    border-radius: 999px;
-    background: linear-gradient(135deg, rgba(8, 47, 73, 0.9), rgba(2, 8, 23, 0.86));
-    box-shadow:
-      inset 0 0 12px rgba(0, 212, 255, 0.14),
-      0 0 12px rgba(0, 212, 255, 0.26);
-    text-shadow: 0 0 8px rgba(0, 212, 255, 0.46);
-    transform: translateX(-50%);
-    pointer-events: none;
-  }
-
-  .marker-core {
-    position: absolute;
-    left: 50%;
-    top: 8px;
-    width: 16px;
-    height: 16px;
-    border: 2px solid rgba(238, 251, 255, 0.88);
-    border-radius: 50%;
-    background: radial-gradient(circle, rgba(238, 251, 255, 0.96) 0 16%, var(--marker-color) 28% 100%);
-    box-shadow:
-      0 0 10px var(--marker-color),
-      0 0 22px var(--marker-color);
-    transform: translateX(-50%);
-  }
-
-  .marker-core::after {
-    content: '';
-    position: absolute;
-    inset: 3px;
-    border-radius: inherit;
-    border: 1px solid rgba(2, 8, 23, 0.6);
-  }
-
-  .marker-ripple {
-    position: absolute;
-    left: 50%;
-    bottom: 5px;
-    width: 28px;
-    height: 10px;
-    border: 1px solid currentColor;
-    border-radius: 50%;
-    transform: translateX(-50%);
-    animation: markerRipple 1.8s ease-out infinite;
-  }
-
-  .marker-pin {
-    position: absolute;
-    left: 50%;
-    bottom: 5px;
-    width: 2px;
-    height: 22px;
-    background: linear-gradient(180deg, var(--marker-color), transparent);
-    box-shadow: 0 0 10px var(--marker-color);
-    transform: translateX(-50%);
-  }
-
-  .power-map-marker.alarm {
-    animation: markerFloat 2.4s ease-in-out infinite, alarmBlink 1s ease-in-out infinite;
-  }
-
-  .power-map-info {
-    min-width: 190px;
-    overflow: hidden;
-    color: #e9fbff;
-    border: 1px solid var(--status-color);
-    border-radius: 10px;
-    background:
-      linear-gradient(135deg, rgba(8, 47, 73, 0.94), rgba(2, 8, 23, 0.92)),
-      repeating-linear-gradient(90deg, transparent 0 16px, rgba(0, 212, 255, 0.05) 17px 18px);
-    box-shadow:
-      inset 0 0 22px rgba(0, 212, 255, 0.12),
-      0 0 18px var(--status-color),
-      0 12px 26px rgba(0, 0, 0, 0.36);
-    backdrop-filter: blur(8px);
-  }
-
-  .power-map-info__header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 9px 12px;
-    color: var(--status-color);
-    font-size: 13px;
-    font-weight: 700;
-    letter-spacing: 2px;
-    background: rgba(0, 212, 255, 0.08);
-    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
-  }
-
-  .power-map-info__dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--status-color);
-    box-shadow: 0 0 10px var(--status-color);
-  }
-
-  .power-map-info__body {
-    padding: 10px 12px 12px;
-  }
-
-  .power-map-info__label {
-    margin-bottom: 4px;
-    color: rgba(137, 221, 255, 0.74);
-    font-size: 12px;
-  }
-
-  .power-map-info__address {
-    max-width: 260px;
-    color: var(--tech-text-strong);
-    font-size: 13px;
-    line-height: 1.5;
-    text-shadow: 0 0 8px rgba(0, 212, 255, 0.28);
-  }
-
   @keyframes energySweep {
     0%, 100% {
       opacity: 0.45;
@@ -2269,27 +2672,36 @@
     }
   }
 
-  @keyframes markerFloat {
+  @keyframes techMapBreath {
     0%, 100% {
-      transform: translateY(0);
+      filter: brightness(1) saturate(1);
     }
     50% {
-      transform: translateY(-3px);
+      filter: brightness(1.18) saturate(1.35);
     }
   }
 
-  @keyframes markerRipple {
+  @keyframes mapDockRotate {
     0% {
-      opacity: 0.8;
-      transform: translateX(-50%) scale(0.75);
+      transform: rotate(0deg);
     }
     100% {
-      opacity: 0;
-      transform: translateX(-50%) scale(2.2);
+      transform: rotate(360deg);
     }
   }
 
-  @keyframes radarRotate {
+  @keyframes orbitCorePulse {
+    0%, 100% {
+      transform: translate(-50%, -50%) scale(0.88);
+      opacity: 0.72;
+    }
+    50% {
+      transform: translate(-50%, -50%) scale(1.16);
+      opacity: 1;
+    }
+  }
+
+  @keyframes mapGridRotate {
     0% {
       transform: translate(-50%, -50%) rotate(0deg);
     }
@@ -2298,7 +2710,126 @@
     }
   }
 
-  @keyframes radarRotate3d {
+  @keyframes mapEnergyRotate {
+    0% {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+      transform: translate(-50%, -50%) rotate(360deg);
+    }
+  }
+
+  @keyframes mapScanLine {
+    0%, 18% {
+      left: -32%;
+      opacity: 0;
+    }
+    30% {
+      opacity: 0.95;
+    }
+    78%, 100% {
+      left: 118%;
+      opacity: 0;
+    }
+  }
+
+  .map-container-full.map-tech-style.map-mode-3d .map-grid-glow {
+    animation-name: mapGridRotate3d;
+  }
+
+  .map-container-full.map-tech-style.map-mode-3d .map-energy-ring {
+    animation-name: mapEnergyRotate3d;
+  }
+
+  .map-container-full.map-tech-style.map-mode-3d .map-radar-sweep {
+    animation-name: mapRadarSweep3d;
+  }
+
+  @keyframes buildingPulse {
+    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);
+    }
+    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);
+    }
+  }
+
+  @keyframes mapRadarSweep {
+    0% {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+      transform: translate(-50%, -50%) rotate(360deg);
+    }
+  }
+
+  @keyframes mapRadarSweep3d {
+    0% {
+      transform: translate(-50%, -50%) rotateX(62deg) rotate(0deg);
+    }
+    100% {
+      transform: translate(-50%, -50%) rotateX(62deg) rotate(360deg);
+    }
+  }
+
+  @keyframes markerFloat {
+    0%, 100% {
+      transform: translateY(0) scale(1);
+    }
+    50% {
+      transform: translateY(-4px) scale(1.08);
+    }
+  }
+
+  @keyframes markerPulse {
+    0% {
+      opacity: 0.72;
+      transform: scale(0.65);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1.85);
+    }
+  }
+
+  @keyframes markerRotate {
+    0% {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+      transform: translate(-50%, -50%) rotate(360deg);
+    }
+  }
+
+  @keyframes markerNeedle {
+    0%, 100% {
+      opacity: 0.32;
+      transform: translate(-50%, -50%) rotate(0deg) scaleY(0.76);
+    }
+    50% {
+      opacity: 0.86;
+      transform: translate(-50%, -50%) rotate(90deg) scaleY(1);
+    }
+  }
+
+  @keyframes mapGridRotate3d {
+    0% {
+      transform: translate(-50%, -50%) rotateX(62deg) rotate(0deg);
+    }
+    100% {
+      transform: translate(-50%, -50%) rotateX(62deg) rotate(360deg);
+    }
+  }
+
+  @keyframes mapEnergyRotate3d {
     0% {
       transform: translate(-50%, -50%) rotateX(62deg) rotate(0deg);
     }
@@ -2320,13 +2851,4 @@
       opacity: 0;
     }
   }
-
-  @keyframes alarmBlink {
-    0%, 100% {
-      filter: drop-shadow(0 0 8px var(--tech-danger));
-    }
-    50% {
-      filter: drop-shadow(0 0 18px var(--tech-danger));
-    }
-  }
 </style>