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:
@@ -12,10 +12,10 @@
|
||||
</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
|
||||
ref="trackRef"
|
||||
class="flex gap-6 md:gap-8"
|
||||
class="flex gap-6 md:gap-8 py-4"
|
||||
:style="{ transform: `translateX(${offset}px)` }"
|
||||
@mouseenter="pauseAutoplay"
|
||||
@mouseleave="resumeAutoplay"
|
||||
@@ -93,7 +93,7 @@ const allTestimonials = computed(() => [...testimonials, ...testimonials])
|
||||
|
||||
// 自动滚动状态
|
||||
const offset = ref(0)
|
||||
const speed = 0.5 // 每帧移动像素
|
||||
const speed = 1.5 // 每帧移动像素
|
||||
let isPaused = false
|
||||
const cardWidth = 400 + 32 // 卡片宽度 + gap
|
||||
|
||||
|
||||
Reference in New Issue
Block a user