@@ -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: `
`,
+ 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, '&')
@@ -628,35 +703,13 @@
.replace(/'/g, ''')
}
- 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 `
-
- `
- }
-
const createInfoWindowContent = (device) => {
- const statusText = device.status === 'online' ? '在线' : device.status === 'alarm' ? '告警' : '离线'
- const statusColor = getMapStatusColor(device.status)
const locationName = escapeMapHtml(getDeviceLocationName(device))
return `
-
-
-
-
设备位置
-
${locationName}
-
+
`
}
@@ -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 = ''
})
@@ -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));
- }
- }