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:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user