diff --git a/packages/screen/src/styles/index.scss b/packages/screen/src/styles/index.scss index 474e258..ff0520d 100644 --- a/packages/screen/src/styles/index.scss +++ b/packages/screen/src/styles/index.scss @@ -9,6 +9,23 @@ :root { --cq-inline-100: 100vw; --cq-block-100: 100vh; + + /* 3D 态势感知颜色变量 */ + --primary-color: rgba(28, 161, 255, 1); + --primary-light: rgba(28, 161, 255, 0.44); + --primary-lighter: rgba(28, 161, 255, 0.2); + + --bg-dark: rgba(9, 22, 40, 1); + --bg-panel: rgba(20, 53, 118, 1); + + --text-white: rgba(255, 255, 255, 1); + --text-gray: rgba(179, 204, 226, 1); + + --success-color: rgba(17, 187, 119, 1); + --warning-color: rgba(255, 128, 11, 1); + --danger-color: rgba(255, 6, 36, 1); + + --border-color: rgba(28, 161, 255, 0.3); } * { diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/中心.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/中心.png new file mode 100644 index 0000000..a488f1a Binary files /dev/null and b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/中心.png differ diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng7f65d0aa2425301baab2664863fb64259a15c66f7dcca2d5e8c6bf1b09558168.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/信息面板bg.png similarity index 100% rename from packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng7f65d0aa2425301baab2664863fb64259a15c66f7dcca2d5e8c6bf1b09558168.png rename to packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/信息面板bg.png diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng9946fe61af9abb158f585a49bc4ea3d72f7451022351a124fa3a5da373b1a40c.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/力量调度圆圈.png similarity index 100% rename from packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng9946fe61af9abb158f585a49bc4ea3d72f7451022351a124fa3a5da373b1a40c.png rename to packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/力量调度圆圈.png diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPngaafb813d12b883ad9eb332715e44be92cde1b8fd644dfb243cc9d231bd9a5919.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/地图tooltip-button.png similarity index 100% rename from packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPngaafb813d12b883ad9eb332715e44be92cde1b8fd644dfb243cc9d231bd9a5919.png rename to packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/地图tooltip-button.png diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng753a456c1847586cb7f369e3b90a8459432a27811a579827ba86f9bb427841b2.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/展开icon.png similarity index 100% rename from packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng753a456c1847586cb7f369e3b90a8459432a27811a579827ba86f9bb427841b2.png rename to packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/展开icon.png diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPnga96e6ce64e80f6d935217d64400481f3e0361d9e60a7425f6f09c8287716904d.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/左折叠箭头icon.png similarity index 100% rename from packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPnga96e6ce64e80f6d935217d64400481f3e0361d9e60a7425f6f09c8287716904d.png rename to packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/左折叠箭头icon.png diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPnge203f50bf78f838bbe8bbaac3ee29b40913f42d9dffa92dbe0f028dfa5eb42b6.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/按钮bg.png similarity index 100% rename from packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPnge203f50bf78f838bbe8bbaac3ee29b40913f42d9dffa92dbe0f028dfa5eb42b6.png rename to packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/按钮bg.png diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng9f6b24d0f7676a515fbcb6ccd101869c03ffe18494366495ce93f7394812a540.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/文本线条.png similarity index 100% rename from packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng9f6b24d0f7676a515fbcb6ccd101869c03ffe18494366495ce93f7394812a540.png rename to packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/文本线条.png diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/文本线条框.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/文本线条框.png new file mode 100644 index 0000000..2cdc6fa Binary files /dev/null and b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/文本线条框.png differ diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng5318515e0c6f2242f4a741937e0c245f050ab76eeb57b8eb0deec58c4bac16e3.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/视频icon.png similarity index 100% rename from packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng5318515e0c6f2242f4a741937e0c245f050ab76eeb57b8eb0deec58c4bac16e3.png rename to packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/视频icon.png diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng177d541aa28d9eab2d1c8e742deeeada8928da5868af55e3f855dfdaa50e7122.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/视频面板bg.png similarity index 100% rename from packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng177d541aa28d9eab2d1c8e742deeeada8928da5868af55e3f855dfdaa50e7122.png rename to packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/视频面板bg.png diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng29c48e78664083bc5e328e52875fb8faede186b3f690ab748dce73703785d7e2.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/视频面板title.png similarity index 100% rename from packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng29c48e78664083bc5e328e52875fb8faede186b3f690ab748dce73703785d7e2.png rename to packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/视频面板title.png diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/路线icon(1).png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/路线icon.png similarity index 100% rename from packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/路线icon(1).png rename to packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/路线icon.png diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPnge54852f2dbf23aeabe7bfd58d2b0fad279041cbf01ce1a8908b70d93846e0a4c.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/返回按钮.png similarity index 100% rename from packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPnge54852f2dbf23aeabe7bfd58d2b0fad279041cbf01ce1a8908b70d93846e0a4c.png rename to packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/返回按钮.png diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng9af7e0b52fd95788cea5083d9e34c8dfc01da302a90dab175752d526592da30e.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/面板bg.png similarity index 100% rename from packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/SketchPng9af7e0b52fd95788cea5083d9e34c8dfc01da302a90dab175752d526592da30e.png rename to packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/面板bg.png diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/styles/common.scss b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/styles/common.scss index 585ac59..14cfbeb 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/styles/common.scss +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/styles/common.scss @@ -2,27 +2,13 @@ /** * 3D态势感知公共样式 + * + * 注意：CSS 变量（--primary-color, --text-white 等）已定义在全局样式中 + * 文件位置：/src/styles/index.scss + * + * 这样可以避免 Vue scoped 样式导致的 :root 变量不生效问题 */ -// 公共颜色变量 -:root { - --primary-color: rgba(28, 161, 255, 1); - --primary-light: rgba(28, 161, 255, 0.44); - --primary-lighter: rgba(28, 161, 255, 0.2); - - --bg-dark: rgba(9, 22, 40, 1); - --bg-panel: rgba(20, 53, 118, 1); - - --text-white: rgba(255, 255, 255, 1); - --text-gray: rgba(179, 204, 226, 1); - - --success-color: rgba(17, 187, 119, 1); - --warning-color: rgba(255, 128, 11, 1); - --danger-color: rgba(255, 6, 36, 1); - - --border-color: rgba(28, 161, 255, 0.3); -} - // 公共面板样式 .panel { display: flex; diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForceDispatch.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForceDispatch.vue index 7c292b6..4c68cfc 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForceDispatch.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForceDispatch.vue @@ -46,7 +46,7 @@
-
+
建议
调度力量
@@ -226,9 +226,10 @@ const handleStartDispatch = () => { .force-dispatch__middle { display: grid; grid-template-columns: 1fr auto 1fr; - gap: vw(16); + gap: vw(18); align-items: center; padding: vh(12) 0; + // background: url('../../assets/images/ForceDispatchBg.png') center top no-repeat; } /* 左右列统一样式 */ @@ -245,6 +246,8 @@ const handleStartDispatch = () => { justify-content: space-between; align-items: center; padding: vh(8) 0; + background: url('../../assets/images/文本线条框.png') no-repeat center center; + background-size: 100% 100%; } .force-dispatch__stat-label { @@ -278,11 +281,13 @@ const handleStartDispatch = () => { align-items: center; justify-content: center; position: relative; + background: url('../../assets/images/中心.png') no-repeat center center; + background-size: contain; } .force-dispatch__circle { position: relative; - width: vw(120); + width: vw(140); height: vh(120); display: flex; align-items: center; @@ -369,13 +374,17 @@ const handleStartDispatch = () => { justify-content: space-between; align-items: center; gap: vw(16); - padding-top: vh(12); + // padding-top: vh(12); } .force-dispatch__eta { display: flex; - flex-direction: column; + // flex-direction: column; + align-items: center; gap: vh(2); + background: url('../../assets/images/文本线条框.png') no-repeat center center; + background-size: 100% 100%; + padding: vh(8) vw(12); } .force-dispatch__eta-label { diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForcePreset.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForcePreset.vue index 7b6d453..5db08b0 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForcePreset.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForcePreset.vue @@ -42,7 +42,7 @@ :key="station.id" class="station-item" > - station + station
{{ station.name }} 距离灾害点{{ station.distance }}公里 @@ -118,7 +118,7 @@ const { forcePreset } = inject('disasterData') .stat-group { display: flex; justify-content: center; - gap: vw(12); + gap: vw(32); .stat-card { // flex: 1; @@ -127,11 +127,11 @@ const { forcePreset } = inject('disasterData') align-items: center; justify-content: center; gap: vh(8); - padding: vh(12) vw(12); + padding: vh(12) vw(12) vh(30); border-radius: vw(6); position: relative; - background: url('../../assets/images/完成里程.png') no-repeat center center; - background-size: 100% 100%; + background: url('../../assets/images/完成里程.png') no-repeat center bottom; + // background-size: 100% 100%; width: vw(84); .stat-label { @@ -180,7 +180,8 @@ const { forcePreset } = inject('disasterData') align-items: center; gap: vw(12); padding: vh(10) vw(12); - background: rgba(20, 53, 118, 0.3); + // background: rgba(20, 53, 118, 0.3); + background: url('../../assets/images/文本线条框.png') no-repeat center center; border-radius: vw(6); .station-icon { diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/MapViewer/MapControls.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/MapViewer/MapControls.vue index 9e00e8b..8c195ab 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/MapViewer/MapControls.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/MapViewer/MapControls.vue @@ -246,7 +246,7 @@ const handleToolClick = (toolKey) => { &__icon { width: vw(32); - height: vh(28); + height: vw(32); flex-shrink: 0; transition: all 0.3s ease; } diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/PageHeader.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/PageHeader.vue index fcd3d23..97c08ed 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/PageHeader.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/PageHeader.vue @@ -6,23 +6,23 @@ 返回驾驶舱 -
- logo -
+
+ logo +

渝路智管-公路安全畅通运行管理

-
+ @@ -61,9 +61,10 @@ const handleBack = () => { display: flex; align-items: center; gap: vw(10); - padding: vh(12) vw(24); - background: url('../assets/images/SketchPnge54852f2dbf23aeabe7bfd58d2b0fad279041cbf01ce1a8908b70d93846e0a4c.png') 0 -1px no-repeat; - background-size: vw(136) vh(46); + padding: vh(10) vw(24); + margin-top: vh(20); + background: url('../assets/images/返回按钮.png') 0 -1px no-repeat; + background-size: 100% 100%; border: none; cursor: pointer; transition: opacity 0.3s; @@ -99,7 +100,16 @@ const handleBack = () => { left: 50%; top: 50%; transform: translate(-50%, -50%); + display: flex; + align-items: center; + .logo-section { + .logo-image { + width: vw(42); + height: vh(30); + border-radius: 50%; + } + } .page-title { background-image: linear-gradient( 180deg, @@ -128,7 +138,7 @@ const handleBack = () => { display: flex; align-items: center; gap: vw(6); - padding: vh(10) vw(16); + padding: vw(5); background: rgba(20, 53, 118, 1); border: 1px solid var(--border-color); border-radius: vw(8); @@ -141,8 +151,8 @@ const handleBack = () => { } .scene-icon { - width: vw(17); - height: vh(22); + width: vw(32); + height: vw(32); } .scene-text { diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/CollaborationInfo.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/CollaborationInfo.vue index f982cc3..678aed4 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/CollaborationInfo.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/CollaborationInfo.vue @@ -1,7 +1,11 @@ diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue index 1fcb753..8c538b7 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue @@ -11,7 +11,7 @@
- +
@@ -160,22 +160,30 @@ const handlePersonnelLink = (personnel) => { --sa-right-width: calc(486 / 1920 * var(--cq-inline-100, 100vw)); --sa-gap: calc(16 / 1920 * var(--cq-inline-100, 100vw)); --sa-padding: calc(16 / 1920 * var(--cq-inline-100, 100vw)); + --sa-header-height: calc(121 / 1080 * var(--cq-block-100, 100vh)); // Header 高度 --sa-min-width: 1280px; --sa-min-height: 720px; + position: relative; width: 100%; height: 100%; min-width: var(--sa-min-width); min-height: var(--sa-min-height); background-color: var(--bg-dark); overflow: auto; // 当宿主尺寸 < 最小尺寸时允许滚动 - display: flex; - flex-direction: column; + + // PageHeader 浮在顶部 + > :first-child { + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 10; + } &__main { - position: relative; - flex: 1; - min-height: 0; + position: absolute; + inset: 0; // 铺满整个容器 background: url(./assets/images/main-bg.png) center/cover no-repeat; overflow: hidden; } @@ -207,7 +215,7 @@ const handlePersonnelLink = (personnel) => { grid-auto-rows: 1fr; gap: var(--sa-gap); // 列之间的间距 height: 100%; - padding: var(--sa-padding); // 面板与容器边缘的间距 + padding-top: var(--sa-header-height); // 预留 Header 高度 pointer-events: none; // 容器不拦截事件，让中间区域透明 }