力量预制部分 滚动条自动滚动

packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForcePreset.vue

@@ -102,6 +102,7 @@
         </div>
 
         <div class="station-list">
+          <div class="station-list-inner">
             <div
               v-for="station in forcePreset.stations"
               :key="station.id"
@@ -123,6 +124,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -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);