diff --git a/app/components/home/HomeProcess.vue b/app/components/home/HomeProcess.vue index ff31f68..428b533 100644 --- a/app/components/home/HomeProcess.vue +++ b/app/components/home/HomeProcess.vue @@ -38,7 +38,18 @@ -
+
(null) const headerRef = ref(null) const scrollContainerRef = ref(null) +const cardsContainerRef = ref(null) const lineRef = ref(null) const linePathRef = ref(null) const stepElements = ref<(HTMLElement | null)[]>([]) let ctx: gsap.Context | null = null +// 拖拽状态 +const isDragging = ref(false) +let startX = 0 +let scrollLeft = 0 + +const startDrag = (e: MouseEvent | TouchEvent) => { + if (!cardsContainerRef.value) return + isDragging.value = true + const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX + startX = clientX - cardsContainerRef.value.offsetLeft + scrollLeft = cardsContainerRef.value.scrollLeft +} + +const onDrag = (e: MouseEvent | TouchEvent) => { + if (!isDragging.value || !cardsContainerRef.value) return + e.preventDefault() + const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX + const x = clientX - cardsContainerRef.value.offsetLeft + const walk = (x - startX) * 1.5 // 1.5x 速度 + cardsContainerRef.value.scrollLeft = scrollLeft - walk +} + +const endDrag = () => { + isDragging.value = false +} + const setStepRef = (el: any, index: number) => { if (el) stepElements.value[index] = el }