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 h-[380px] 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.fromTo(headerRef.value,
      { autoAlpha: 0, y: 50 },
      {
        scrollTrigger: {
          trigger: headerRef.value,
          start: 'top 80%',
          toggleActions: 'play none none reverse'
        },
        autoAlpha: 1,
        y: 0,
        duration: 1,
        ease: 'power3.out'
      }
    )

    // Pin 效果：固定板块，逐张卡片聚焦展示
    const totalCards = services.length
    const timeline = gsap.timeline()

    // 初始：所有卡片从四周飞入并归位
    cardElements.value.forEach((card, index) => {
      if (!card) return

      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 }
      ]
      const startPos = positions[index]

      gsap.set(card, {
        autoAlpha: 0,
        x: startPos.x,
        y: startPos.y,
        scale: 0.8,
        rotateZ: startPos.rotate,
      })

      // 第一屏：所有卡片飞入归位
      timeline.to(card, {
        autoAlpha: 1,
        x: 0,
        y: 0,
        scale: 1,
        rotateZ: 0,
        duration: 1,
        ease: 'back.out(1.2)',
      }, index * 0.1)
    })

    // 后续屏：每次聚焦一张卡片（放大），其他缩小
    for (let focus = 0; focus < totalCards; focus++) {
      timeline.addLabel(`focus-${focus}`, focus + 1)

      cardElements.value.forEach((card, index) => {
        if (!card) return

        timeline.to(card, {
          scale: index === focus ? 1.05 : 0.85,
          autoAlpha: index === focus ? 1 : 0.4,
          zIndex: index === focus ? 10 : 1,
          duration: 0.6,
          ease: 'power2.out',
        }, `focus-${focus}`)

        // 聚焦的卡片翻转展示背面
        if (index === focus) {
          timeline.call(() => handleCardHover(focus, true), [], `focus-${focus}`)
        } else {
          timeline.call(() => handleCardHover(index, false), [], `focus-${focus}`)
        }
      })
    }

    // 最后：恢复所有卡片正常状态
    timeline.addLabel('reset')
    cardElements.value.forEach((card, index) => {
      if (!card) return
      timeline.to(card, {
        scale: 1,
        autoAlpha: 1,
        zIndex: 1,
        duration: 0.5,
        ease: 'power2.out',
      }, 'reset')
      timeline.call(() => handleCardHover(index, false), [], 'reset')
    })

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

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

<style scoped>
.service-card {
  perspective: 1000px;
}

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

.card-back {
  transform: rotateY(180deg);
}
</style>