feat: 成功案例滑动效果优化 - 鼠标悬停暂停,移开继续滚动

This commit is contained in:
leisileken
2026-06-25 14:56:45 +08:00
parent 00eb7a3883
commit 488327339f

View File

@@ -132,16 +132,21 @@ const scrollCases = computed(() => {
// 滚动位置状态 // 滚动位置状态
const scrollPosition = ref(0) const scrollPosition = ref(0)
// 暂停状态
const isPaused = ref(false)
// 自动滚动逻辑 // 自动滚动逻辑
let scrollInterval: number | null = null let scrollInterval: number | null = null
onMounted(() => { onMounted(() => {
const scrollSpeed = 0.3 // 滚动速度 const scrollSpeed = 0.3
scrollInterval = window.setInterval(() => { scrollInterval = window.setInterval(() => {
if (!isPaused.value) {
const totalCases = successCases.length const totalCases = successCases.length
const itemWidth = 100 / 3 // 每次显示3个每个占33.33% const itemWidth = 100 / 3
const maxScroll = (totalCases / 3) * 100 // 滚动到所有案例都展示完 const maxScroll = (totalCases / 3) * 100
scrollPosition.value = (scrollPosition.value + scrollSpeed) % maxScroll scrollPosition.value = (scrollPosition.value + scrollSpeed) % maxScroll
}
}, 50) }, 50)
}) })
@@ -286,7 +291,7 @@ const closeCaseDetail = () => {
<h2 class="text-3xl font-bold text-white mb-4">成功案例</h2> <h2 class="text-3xl font-bold text-white mb-4">成功案例</h2>
<p class="text-white/70">我们在各行业的成功实践</p> <p class="text-white/70">我们在各行业的成功实践</p>
</div> </div>
<div class="relative h-32 overflow-hidden"> <div class="relative h-32 overflow-hidden" @mouseenter="isPaused = true" @mouseleave="isPaused = false">
<div <div
class="absolute inset-0 flex transition-transform duration-500 ease-in-out" class="absolute inset-0 flex transition-transform duration-500 ease-in-out"
:style="{ transform: `translateX(-${scrollPosition}%)` }" :style="{ transform: `translateX(-${scrollPosition}%)` }"