arcticnewone/app/components/home/HomeServices.vue

<template>
  <section ref="rootRef" class="relative bg-white min-h-screen flex items-center justify-center overflow-hidden py-20">
    <div class="w-full max-w-[1400px] mx-auto px-6 md:px-10">
      <!-- 标题区 -->
      <div ref="headerRef" class="text-center mb-16 md:mb-20" >
        <h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
          {{ t('home.services.title') }}
        </h2>
        <p class="text-xl md:text-2xl text-gray-600 max-w-2xl mx-auto">
          {{ t('home.services.subtitle') }}
        </p>
      </div>

      <!-- 服务卡片网格 -->
      <div
        ref="cardsRef"
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"
        @mousemove="handleMouseMove"
        @mouseleave="handleMouseLeave"
      >
        <div
          v-for="(service, index) in services"
          :key="service.id"
          :ref="el => setCardRef(el, index)"
          class="service-card group relative cursor-pointer"
          :style="{ transformStyle: 'preserve-3d' }"
          @mouseenter="() => handleCardHover(index, true)"
          @mouseleave="() => handleCardHover(index, false)"
        >
          <!-- 前面 -->
          <div
            class="card-face card-front absolute inset-0 rounded-3xl p-8 flex flex-col justify-between overflow-hidden"
            :class="service.gradient"
          >
            <div class="relative z-10">
              <div class="w-16 h-16 md:w-20 md:h-20 rounded-2xl bg-white/90 backdrop-blur-sm flex items-center justify-center mb-6 shadow-lg">
                <Icon :name="service.icon" class="w-8 h-8 md:w-10 md:h-10 text-black" />
              </div>
              <h3 class="text-2xl md:text-3xl font-bold text-white mb-3">
                {{ t(`home.services.items.${service.id}.title`) }}
              </h3>
              <p class="text-white/80 text-sm md:text-base">
                {{ t(`home.services.items.${service.id}.brief`) }}
              </p>
            </div>

            <!-- 装饰图案 -->
            <div class="absolute bottom-0 right-0 w-48 h-48 opacity-10">
              <Icon :name="service.icon" class="w-full h-full text-white" />
            </div>
          </div>

          <!-- 背面 -->
          <div
            class="card-face card-back absolute inset-0 rounded-3xl p-8 bg-white border-2 flex flex-col justify-between shadow-2xl"
            :class="service.borderColor"
          >
            <div>
              <Icon :name="service.icon" class="w-12 h-12 md:w-14 md:h-14 text-black mb-4" />
              <h3 class="text-xl md:text-2xl font-bold text-black mb-4">
                {{ t(`home.services.items.${service.id}.title`) }}
              </h3>
              <p class="text-gray-700 text-sm md:text-base leading-relaxed mb-6">
                {{ t(`home.services.items.${service.id}.description`) }}
              </p>
            </div>

            <ul class="space-y-2">
              <li
                v-for="(feature, i) in service.features"
                :key="i"
                class="flex items-center text-sm md:text-base text-gray-600"
              >
                <Icon name="ph:check-circle-fill" :class="service.iconColor" class="w-5 h-5 mr-2 flex-shrink-0" />
                <span>{{ t(`home.services.items.${service.id}.features.${i}`) }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

const { t } = useI18n()

const rootRef = ref<HTMLElement | null>(null)
const headerRef = ref<HTMLElement | null>(null)
const cardsRef = ref<HTMLElement | null>(null)
const cardElements = ref<(HTMLElement | null)[]>([])
let ctx: gsap.Context | null = null

const setCardRef = (el: any, index: number) => {
  if (el) cardElements.value[index] = el
}

const services = [
  {
    id: 'webDesign',
    icon: 'ph:palette-duotone',
    gradient: 'bg-gradient-to-br from-purple-500 via-pink-500 to-red-500',
    borderColor: 'border-purple-500',
    iconColor: 'text-purple-500',
    features: [0, 1, 2]
  },
  {
    id: 'development',
    icon: 'ph:code-duotone',
    gradient: 'bg-gradient-to-br from-blue-500 via-cyan-500 to-teal-500',
    borderColor: 'border-blue-500',
    iconColor: 'text-blue-500',
    features: [0, 1, 2]
  },
  {
    id: 'branding',
    icon: 'ph:sparkle-duotone',
    gradient: 'bg-gradient-to-br from-amber-500 via-orange-500 to-red-500',
    borderColor: 'border-amber-500',
    iconColor: 'text-amber-500',
    features: [0, 1, 2]
  },
  {
    id: 'marketing',
    icon: 'ph:megaphone-duotone',
    gradient: 'bg-gradient-to-br from-green-500 via-emerald-500 to-teal-500',
    borderColor: 'border-green-500',
    iconColor: 'text-green-500',
    features: [0, 1, 2]
  },
  {
    id: 'seo',
    icon: 'ph:magnifying-glass-duotone',
    gradient: 'bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500',
    borderColor: 'border-indigo-500',
    iconColor: 'text-indigo-500',
    features: [0, 1, 2]
  },
  {
    id: 'consulting',
    icon: 'ph:lightbulb-duotone',
    gradient: 'bg-gradient-to-br from-rose-500 via-pink-500 to-fuchsia-500',
    borderColor: 'border-rose-500',
    iconColor: 'text-rose-500',
    features: [0, 1, 2]
  }
]

// 视差效果
const handleMouseMove = (e: MouseEvent) => {
  if (!cardsRef.value) return

  const rect = cardsRef.value.getBoundingClientRect()
  const x = (e.clientX - rect.left) / rect.width - 0.5
  const y = (e.clientY - rect.top) / rect.height - 0.5

  cardElements.value.forEach((card, index) => {
    if (!card) return
    const offset = (index % 3) + 1
    gsap.to(card, {
      x: x * 20 * offset,
      y: y * 20 * offset,
      duration: 0.6,
      ease: 'power2.out'
    })
  })
}

const handleMouseLeave = () => {
  cardElements.value.forEach(card => {
    if (!card) return
    gsap.to(card, {
      x: 0,
      y: 0,
      duration: 0.6,
      ease: 'power2.out'
    })
  })
}

// 卡片翻转
const handleCardHover = (index: number, isHover: boolean) => {
  const card = cardElements.value[index]
  if (!card) return

  gsap.to(card, {
    rotateY: isHover ? 180 : 0,
    duration: 0.6,
    ease: 'power2.inOut'
  })
}

onMounted(async () => {
  await nextTick()
  if (!rootRef.value || !headerRef.value) return

  ctx = gsap.context(() => {
    // 初始状态
    gsap.set(headerRef.value, { autoAlpha: 0, y: 50 })
    const positions = [
      { x: -200, y: -200, rotate: -15 },
      { x: 0, y: -200, rotate: 10 },
      { x: 200, y: -200, rotate: -15 },
      { x: -200, y: 200, rotate: 15 },
      { x: 0, y: 200, rotate: -10 },
      { x: 200, y: 200, rotate: 15 }
    ]
    cardElements.value.forEach((card, index) => {
      if (!card) return
      const p = positions[index]
      gsap.set(card, { autoAlpha: 0, x: p.x, y: p.y, scale: 0.8, rotateZ: p.rotate })
    })

    // 统一时间线：所有动画填满时间轴，无空白
    const totalCards = services.length
    const tl = gsap.timeline()
    let cursor = 0 // 时间游标

    // 第一屏：标题入场 + 所有卡片飞入归位
    tl.to(headerRef.value, { autoAlpha: 1, y: 0, duration: 0.8, ease: 'power3.out' }, cursor)
    cardElements.value.forEach((card, index) => {
      if (!card) return
      tl.to(card, {
        autoAlpha: 1, x: 0, y: 0, scale: 1, rotateZ: 0,
        duration: 0.8, ease: 'back.out(1.2)',
      }, cursor + 0.1 + index * 0.08)
    })
    cursor += 1

    // 后续屏：逐张聚焦，每步 duration=1 填满整步
    for (let focus = 0; focus < totalCards; focus++) {
      cardElements.value.forEach((card, index) => {
        if (!card) return
        tl.to(card, {
          scale: index === focus ? 1.05 : 0.85,
          autoAlpha: index === focus ? 1 : 0.4,
          duration: 0.8, ease: 'power2.out',
        }, cursor)
        tl.call(() => handleCardHover(index, index === focus), [], cursor + 0.2)
      })
      cursor += 1
    }

    // 最后一屏：恢复正常
    cardElements.value.forEach((card, index) => {
      if (!card) return
      tl.to(card, { scale: 1, autoAlpha: 1, duration: 0.6, ease: 'power2.out' }, cursor)
      tl.call(() => handleCardHover(index, false), [], cursor)
    })
    cursor += 1

    ScrollTrigger.create({
      trigger: rootRef.value,
      start: 'top top',
      end: () => `+=${cursor * window.innerHeight}`,
      pin: true,
      scrub: 0.5,
      anticipatePin: 1,
      animation: tl,
    })
  }, rootRef.value)
})

onUnmounted(() => {
  ctx?.revert()
})
</script>

<style scoped>
.service-card {
  perspective: 1000px;
  height: clamp(260px, 38vh, 400px);
}

.card-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

/* 移动端单列时卡片更高 */
@media (max-width: 767px) {
  .service-card {
    height: clamp(300px, 50vh, 420px);
  }
}
</style>