fix: 修复客户评价模糊 + 工作流程卡片溢出
🐛 HomeTestimonials: - 移除 blur 滤镜,卡片不再模糊 - 添加触摸支持(touchstart/touchmove/touchend) - 降低拖拽阈值(100px → 50px),更灵敏 - 加快切换动画(0.8s → 0.5s) - 添加 select-none 防止拖拽选中文本 - 鼠标样式:grab / grabbing 🐛 HomeProcess: - 卡片宽度缩小(280/320px → 240/280px) - 编号圆圈缩小(20/24 → 16/20) - 图标容器缩小 - 内边距缩小(p-6/8 → p-5/6) - 防止最后一张卡片被遮挡 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -12,7 +12,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 轮播容器 -->
|
||||
<div class="relative h-[500px] md:h-[600px]" @mousedown="startDrag" @mousemove="onDrag" @mouseup="endDrag" @mouseleave="endDrag">
|
||||
<div class="relative h-[500px] md:h-[600px] select-none" @mousedown.prevent="startDrag" @mousemove="onDrag" @mouseup="endDrag" @mouseleave="endDrag" @touchstart="startDrag" @touchmove="onDrag" @touchend="endDrag">
|
||||
<div ref="carouselRef" class="flex items-center h-full cursor-grab active:cursor-grabbing">
|
||||
<div
|
||||
v-for="(testimonial, index) in testimonials"
|
||||
@@ -140,30 +140,29 @@ const getCardStyle = (index: number) => {
|
||||
}
|
||||
|
||||
// 左右卡片
|
||||
const scale = 1 - Math.abs(diff) * 0.1
|
||||
const opacity = Math.max(0.3, 1 - Math.abs(diff) * 0.3)
|
||||
const blur = Math.abs(diff) * 3
|
||||
const scale = 1 - Math.abs(diff) * 0.12
|
||||
const opacity = Math.max(0.5, 1 - Math.abs(diff) * 0.25)
|
||||
|
||||
return {
|
||||
transform: `translateX(calc(50vw - 50% + ${offset}px)) translateZ(-${Math.abs(diff) * 100}px) scale(${scale})`,
|
||||
transform: `translateX(calc(50vw - 50% + ${offset}px)) scale(${scale})`,
|
||||
opacity: opacity,
|
||||
zIndex: 10 - Math.abs(diff),
|
||||
filter: `blur(${blur}px)`
|
||||
}
|
||||
}
|
||||
|
||||
// 拖拽功能
|
||||
const startDrag = (e: MouseEvent) => {
|
||||
// 拖拽功能(鼠标 + 触摸)
|
||||
const startDrag = (e: MouseEvent | TouchEvent) => {
|
||||
isDragging.value = true
|
||||
startX.value = e.clientX
|
||||
startX.value = 'touches' in e ? e.touches[0].clientX : e.clientX
|
||||
if (carouselRef.value) {
|
||||
carouselRef.value.style.cursor = 'grabbing'
|
||||
}
|
||||
}
|
||||
|
||||
const onDrag = (e: MouseEvent) => {
|
||||
const onDrag = (e: MouseEvent | TouchEvent) => {
|
||||
if (!isDragging.value) return
|
||||
currentX.value = e.clientX - startX.value
|
||||
const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX
|
||||
currentX.value = clientX - startX.value
|
||||
}
|
||||
|
||||
const endDrag = () => {
|
||||
@@ -174,8 +173,8 @@ const endDrag = () => {
|
||||
carouselRef.value.style.cursor = 'grab'
|
||||
}
|
||||
|
||||
// 根据拖拽距离决定是否切换
|
||||
if (Math.abs(currentX.value) > 100) {
|
||||
// 降低阈值到 50px,更灵敏
|
||||
if (Math.abs(currentX.value) > 50) {
|
||||
if (currentX.value > 0) {
|
||||
goToSlide(Math.max(0, currentIndex.value - 1))
|
||||
} else {
|
||||
@@ -266,7 +265,11 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.testimonial-card {
|
||||
transition: transform 0.8s ease, opacity 0.8s ease, filter 0.8s ease;
|
||||
will-change: transform, opacity, filter;
|
||||
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
|
||||
will-change: transform, opacity;
|
||||
cursor: grab;
|
||||
}
|
||||
.testimonial-card:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user