fix: 加快客户评价滚动速度 + 修复阴影被裁剪

- 滚动速度从 0.5px/帧 提升到 1.5px/帧
- 使用 mask-image 渐变边缘替代 overflow-hidden
  卡片阴影不再被裁剪,边缘自然淡出
- 添加 py-4 上下留白,阴影完整显示

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
陈春
2026-06-03 20:26:06 +08:00
parent 2ed3c5092d
commit 05f2e56ff3
+3 -3
View File
@@ -12,10 +12,10 @@
</div> </div>
<!-- 自动滚动轮播 --> <!-- 自动滚动轮播 -->
<div class="relative overflow-hidden"> <div class="relative -mx-6 md:-mx-10 px-6 md:px-10 overflow-hidden" style="mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);">
<div <div
ref="trackRef" ref="trackRef"
class="flex gap-6 md:gap-8" class="flex gap-6 md:gap-8 py-4"
:style="{ transform: `translateX(${offset}px)` }" :style="{ transform: `translateX(${offset}px)` }"
@mouseenter="pauseAutoplay" @mouseenter="pauseAutoplay"
@mouseleave="resumeAutoplay" @mouseleave="resumeAutoplay"
@@ -93,7 +93,7 @@ const allTestimonials = computed(() => [...testimonials, ...testimonials])
// 自动滚动状态 // 自动滚动状态
const offset = ref(0) const offset = ref(0)
const speed = 0.5 // 每帧移动像素 const speed = 1.5 // 每帧移动像素
let isPaused = false let isPaused = false
const cardWidth = 400 + 32 // 卡片宽度 + gap const cardWidth = 400 + 32 // 卡片宽度 + gap