diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForcePreset.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForcePreset.vue index f922f96..85f2313 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForcePreset.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForcePreset.vue @@ -102,21 +102,23 @@
-
- station -
- {{ station.name }} - 距离灾害点{{ station.distance }}公里 +
+
+ station +
+ {{ station.name }} + 距离灾害点{{ station.distance }}公里 +
@@ -352,10 +354,10 @@ const vClickOutside = { font-size: fs(14); font-family: SourceHanSansCN-Medium, sans-serif; height: 20px; - width:70px; + width: 70px; } - .flexBox{ + .flexBox { display: flex; align-items: center; } @@ -394,10 +396,26 @@ const vClickOutside = { display: flex; flex-direction: column; gap: vh(8); + position: relative; max-height: vw(120); - overflow-y: auto; + overflow-y: hidden; + margin: vh(5) 0; - // 滚动条 + &-inner { + display: flex; + flex-direction: column; + gap: vh(8); + animation: scroll 40s linear infinite; + will-change: transform; + padding-right: vw(4); // 保留滚动条空间 + + // 鼠标悬停暂停滚动 + &:hover { + animation-play-state: paused; + } + } + + &::-webkit-scrollbar { width: vw(4); } @@ -406,18 +424,25 @@ const vClickOutside = { background: rgba(20, 53, 118, 0.5); border-radius: vw(2); } - + @keyframes scroll { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(calc(-100% + vw(120))); + } + } + .station-item { display: flex; align-items: center; gap: vw(12); padding: vh(0) vw(12); - // background: rgba(20, 53, 118, 0.3); background: url("../../assets/images/文本线条框.png") no-repeat center center; background-size: 100% 100%; border-radius: vw(6); - + flex-shrink: 0; .station-icon { width: vw(32); height: vh(32);