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>
|
||||||
|
|
||||||
<!-- 自动滚动轮播 -->
|
<!-- 自动滚动轮播 -->
|
||||||
<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
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user