bdzl2/bxztApp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
huangchenhao 2025-11-25 10:58:51 +08:00
parent 83c414932a
commit e1a6f8be3e
1 changed files with 47 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -102,21 +102,23 @@
</div> </div>
<div class="station-list"> <div class="station-list">
<div <div class="station-list-inner">
v-for="station in forcePreset.stations" <div
:key="station.id" v-for="station in forcePreset.stations"
class="station-item" :key="station.id"
> class="station-item"
<img >
src="../../assets/images/路线icon.png" <img
alt="station" src="../../assets/images/路线icon.png"
class="station-icon" alt="station"
/> class="station-icon"
<div class="station-info"> />
<span class="station-name">{{ station.name }}</span> <div class="station-info">
<span class="station-distance" <span class="station-name">{{ station.name }}</span>
>距离灾害点{{ station.distance }}公里</span <span class="station-distance"
> >距离灾害点{{ station.distance }}公里</span
>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -352,10 +354,10 @@ const vClickOutside = {
font-size: fs(14); font-size: fs(14);
font-family: SourceHanSansCN-Medium, sans-serif; font-family: SourceHanSansCN-Medium, sans-serif;
height: 20px; height: 20px;
width:70px; width: 70px;
} }
.flexBox{ .flexBox {
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -394,10 +396,26 @@ const vClickOutside = {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: vh(8); gap: vh(8);
position: relative;
max-height: vw(120); 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 { &::-webkit-scrollbar {
width: vw(4); width: vw(4);
} }
@ -406,18 +424,25 @@ const vClickOutside = {
background: rgba(20, 53, 118, 0.5); background: rgba(20, 53, 118, 0.5);
border-radius: vw(2); border-radius: vw(2);
} }
@keyframes scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(calc(-100% + vw(120)));
}
}
.station-item { .station-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: vw(12); gap: vw(12);
padding: vh(0) vw(12); padding: vh(0) vw(12);
// background: rgba(20, 53, 118, 0.3);
background: url("../../assets/images/文本线条框.png") no-repeat center background: url("../../assets/images/文本线条框.png") no-repeat center
center; center;
background-size: 100% 100%; background-size: 100% 100%;
border-radius: vw(6); border-radius: vw(6);
flex-shrink: 0;
.station-icon { .station-icon {
width: vw(32); width: vw(32);
height: vh(32); height: vh(32);