-

-
-
{{ station.name }}
-
距离灾害点{{ station.distance }}公里
+
+
+

+
+ {{ 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);