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

修改了轮播循环 10秒 8秒完成滚动 2秒停顿

Browse Source
This commit is contained in:
huangchenhao 2025-12-02 17:18:30 +08:00
parent 01d70420d5
commit 05b4d8dcc0
1 changed files with 16 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,9 +62,7 @@
<div class="summary-stats"> <div class="summary-stats">
<div class="stat-group"> <div class="stat-group">
<div class="stat-card stat-card--base"> <div class="stat-card stat-card--base">
<span class="stat-label flexBox" <span class="stat-label flexBox" @click="handleJump"
@click="handleJump"
>应急基地与预置点 >应急基地与预置点
<img <img
@ -136,19 +134,17 @@ import { ref, inject } from "vue";
const { forcePreset } = inject("disasterData"); const { forcePreset } = inject("disasterData");
const onDistanceChange = inject("onDistanceChange"); const onDistanceChange = inject("onDistanceChange");
const viewer = inject('cesiumViewer') const viewer = inject("cesiumViewer");
const triggerJump = inject('triggerJump') const triggerJump = inject("triggerJump");
// 触发跳动 // 触发跳动
const handleJump = () => { const handleJump = () => {
console.log('viewer',viewer.value); console.log("viewer", viewer.value);
console.log('triggerJump',triggerJump); console.log("triggerJump", triggerJump);
if (viewer.value && triggerJump) { if (viewer.value && triggerJump) {
triggerJump(5, 10); // 触发5秒跳动，高度10像素
triggerJump(5, 10) // 触发5秒跳动，高度10像素
}
} }
};
// 下拉框状态 // 下拉框状态
const isDropdownOpen = ref(false); const isDropdownOpen = ref(false);
@ -424,31 +420,26 @@ const vClickOutside = {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: vh(8); gap: vh(8);
animation: scroll 8s linear infinite; animation: scroll 10s linear infinite; // 改为10秒，包含2秒停顿
will-change: transform; will-change: transform;
padding-right: vw(4); // 保留滚动条空间 padding-right: vw(4);
// 鼠标悬停暂停滚动
&:hover { &:hover {
animation-play-state: paused; animation-play-state: paused;
} }
} }
&::-webkit-scrollbar {
width: vw(4);
}
&::-webkit-scrollbar-thumb {
background: rgba(20, 53, 118, 0.5);
border-radius: vw(2);
}
@keyframes scroll { @keyframes scroll {
0% { 0% {
transform: translateY(0); transform: translateY(0);
} }
80% {
transform: translateY(calc(-100% + vw(120))); // 前8秒完成滚动
}
100% { 100% {
transform: translateY(calc(-100% + vw(120))); transform: translateY(
calc(-100% + vw(120))
); // 后2秒保持位置（停顿）
} }
} }