diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/LocationPanel/地理位置内容背景.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/LocationPanel/地理位置内容背景.png index 43e9c7b..0ddb80c 100644 Binary files a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/LocationPanel/地理位置内容背景.png and b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/LocationPanel/地理位置内容背景.png differ diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/LocationPanel/地理位置按钮背景.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/LocationPanel/地理位置按钮背景.png index 25ba1d4..82d2275 100644 Binary files a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/LocationPanel/地理位置按钮背景.png and b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/LocationPanel/地理位置按钮背景.png differ diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForceDispatch.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForceDispatch.vue index 18af93e..f978156 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForceDispatch.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForceDispatch.vue @@ -169,14 +169,14 @@ const handleStartDispatch = () => { .force-dispatch__level-label { font-size: fs(18); font-family: SourceHanSansCN-Regular, sans-serif; - color: rgba(255, 255, 255, 0.8); + color: var(--text-white); } .force-dispatch__level-value { font-size: fs(18); font-family: SourceHanSansCN-Bold, sans-serif; font-weight: 600; - color: rgba(255, 255, 255, 0.95); + color: var(--text-white); } /* 智能应急方案按钮 */ @@ -210,7 +210,7 @@ const handleStartDispatch = () => { font-size: fs(18); font-family: SourceHanSansCN-Medium, sans-serif; font-weight: 500; - color: rgba(255, 255, 255, 0.95); + color: var(--text-white); } .force-dispatch__plan-icon { @@ -254,7 +254,7 @@ const handleStartDispatch = () => { .force-dispatch__stat-label { font-size: fs(12); font-family: SourceHanSansCN-Regular, sans-serif; - color: rgba(255, 255, 255, 0.7); + color: var(--text-white); } .force-dispatch__stat-value { @@ -272,7 +272,7 @@ const handleStartDispatch = () => { font-size: fs(12); font-family: SourceHanSansCN-Regular, sans-serif; font-weight: 400; - color: rgba(255, 255, 255, 0.8); + color: var(--text-white); margin-left: vw(2); } @@ -349,14 +349,14 @@ const handleStartDispatch = () => { font-size: fs(14); font-family: SourceHanSansCN-Medium, sans-serif; font-weight: 500; - color: rgba(255, 255, 255, 0.9); + color: var(--text-white); } .force-dispatch__circle-line2 { font-size: fs(13); font-family: SourceHanSansCN-Regular, sans-serif; font-weight: 400; - color: rgba(255, 255, 255, 0.8); + color: var(--text-white); } /* 旋转动画 */ @@ -391,13 +391,13 @@ const handleStartDispatch = () => { .force-dispatch__eta-label { font-size: fs(11); font-family: SourceHanSansCN-Regular, sans-serif; - color: rgba(255, 255, 255, 0.6); + color: var(--text-white); } .force-dispatch__eta-value { font-size: fs(13); font-family: SourceHanSansCN-Bold, sans-serif; font-weight: 600; - color: rgba(255, 255, 255, 0.95); + color: var(--text-white); } diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/PageHeader.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/PageHeader.vue index 6d360ca..68ee91e 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/PageHeader.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/PageHeader.vue @@ -106,7 +106,7 @@ const handleBack = () => { .logo-section { .logo-image { width: vw(42); - height: vh(30); + height: vw(42); border-radius: 50%; } } diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/CollaborationInfo.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/CollaborationInfo.vue index 678aed4..baa9bbe 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/CollaborationInfo.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/CollaborationInfo.vue @@ -1,16 +1,17 @@ @@ -59,13 +78,19 @@ const getSourceColor = (source) => { &__header { position: absolute; - top: vh(16); + top: 10px; right: vw(5); z-index: 1; .header-icon { width: vw(20); height: vh(20); + cursor: pointer; + transition: all 0.3s ease; + + &:hover { + opacity: 0.8; + } } } @@ -76,6 +101,8 @@ const getSourceColor = (source) => { padding: vw(8) vw(16); max-height: vh(200); overflow-y: auto; + transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; + opacity: 1; &::-webkit-scrollbar { width: vw(4); @@ -114,5 +141,27 @@ const getSourceColor = (source) => { } } } + + // 折叠状态 + &.is-collapsed { + .header-icon { + transform: rotate(180deg); + } + + .collaboration-info__list { + max-height: vh(30); // 折叠时只显示一行的高度 + overflow: hidden; + + .info-item:not(:first-child) { + opacity: 0; + transform: translateY(-10px); + } + } + } + + // 为列表项添加过渡 + .info-item { + transition: opacity 0.3s ease, transform 0.3s ease; + } }