From 3ffc2086e3f896b6acdaf47f2483fe2879747daa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=A5?= <chenchun@chenchundeMacBook-Air.local>
Date: Wed, 3 Jun 2026 20:15:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AE=A2=E6=88=B7?=
 =?UTF-8?q?=E8=AF=84=E4=BB=B7=E6=A8=A1=E7=B3=8A=20+=20=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=8D=A1=E7=89=87=E6=BA=A2=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 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>
---
 app/components/home/HomeProcess.vue      |  8 +++---
 app/components/home/HomeTestimonials.vue | 33 +++++++++++++-----------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/app/components/home/HomeProcess.vue b/app/components/home/HomeProcess.vue
index 0e27b73..ff31f68 100644
--- a/app/components/home/HomeProcess.vue
+++ b/app/components/home/HomeProcess.vue
@@ -43,13 +43,13 @@
             v-for="(step, index) in steps"
             :key="step.id"
             :ref="el => setStepRef(el, index)"
-            class="process-step flex-shrink-0 w-[280px] md:w-[320px]"
+            class="process-step flex-shrink-0 w-[240px] md:w-[280px]"
            
           >
             <!-- 步骤编号节点 -->
             <div class="relative flex justify-center mb-8">
               <div
-                class="w-20 h-20 md:w-24 md:h-24 rounded-full flex items-center justify-center text-white text-2xl md:text-3xl font-bold shadow-xl relative z-10"
+                class="w-16 h-16 md:w-20 md:h-20 rounded-full flex items-center justify-center text-white text-xl md:text-2xl font-bold shadow-xl relative z-10"
                 :class="step.gradient"
               >
                 {{ index + 1 }}
@@ -59,8 +59,8 @@
             </div>
 
             <!-- 卡片内容 -->
-            <div class="bg-white rounded-2xl p-6 md:p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
-              <div class="w-14 h-14 md:w-16 md:h-16 rounded-xl mb-5 flex items-center justify-center" :class="step.iconBg">
+            <div class="bg-white rounded-2xl p-5 md:p-6 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
+              <div class="w-12 h-12 md:w-14 md:h-14 rounded-xl mb-4 flex items-center justify-center" :class="step.iconBg">
                 <Icon :name="step.icon" class="w-7 h-7 md:w-8 md:h-8" :class="step.iconColor" />
               </div>
 
diff --git a/app/components/home/HomeTestimonials.vue b/app/components/home/HomeTestimonials.vue
index 5e187db..1215a3c 100644
--- a/app/components/home/HomeTestimonials.vue
+++ b/app/components/home/HomeTestimonials.vue
@@ -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>