feat: 扩展首页内容，新增7个高级动画板块

✨ 新增首页板块: - HomeServices: 服务能力展示（3D卡片翻转 + 视差移动） - HomeAchievements: 数字成就展示（数字滚动 + 粒子背景） - HomeTestimonials: 客户评价轮播（3D轮播 + 拖拽交互） - HomeTechStack: 技术栈展示（3D球体 + 鼠标控制旋转） - HomeProcess: 创意流程时间线（横向滚动 + SVG线条动画） - HomeUpdates: 最新动态网格（Bento布局 + 悬浮卡片） - HomeCTA: 全屏CTA区域（文字分裂动画 + 星空粒子） 🎨 设计亮点: - 每个板块独特的动画效果（翻转、滚动、拖拽、旋转、绘制） - 避免传统布局，采用创意设计 - 丰富的交互效果（hover、拖拽、视差） - Canvas粒子动画和SVG路径动画 - 响应式设计，完美适配移动端 🌍 国际化: - 完整的中英文内容 - 涵盖所有新板块的文案 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-03 19:14:53 +08:00
parent f4684f694e
commit cd87644d41
10 changed files with 2408 additions and 45 deletions
@@ -0,0 +1,250 @@
+<template>
+  <section ref="rootRef" class="relative bg-black text-white py-32 md:py-40 overflow-hidden">
+    <!-- 背景粒子 -->
+    <canvas ref="canvasRef" class="absolute inset-0 w-full h-full opacity-30"></canvas>
+
+    <div class="relative z-10 w-page-container max-w-[1200px] mx-auto px-6 md:px-10">
+      <!-- 成就网格 -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-16 md:gap-20">
+        <div
+          v-for="(achievement, index) in achievements"
+          :key="achievement.id"
+          :ref="el => setAchievementRef(el, index)"
+          class="achievement-item flex flex-col md:flex-row items-start md:items-center gap-8"
+          style="opacity: 0;"
+        >
+          <!-- 数字 -->
+          <div class="flex-shrink-0">
+            <div class="relative">
+              <div
+                :ref="el => setNumberRef(el, index)"
+                class="text-6xl md:text-8xl font-bold tracking-tight"
+                :class="achievement.color"
+              >
+                0
+              </div>
+              <div
+                class="absolute -top-2 -right-2 w-20 h-20 rounded-full blur-2xl opacity-50"
+                :class="achievement.bgColor"
+              ></div>
+            </div>
+          </div>
+
+          <!-- 描述 -->
+          <div class="flex-1">
+            <h3 class="text-2xl md:text-3xl font-bold mb-3">
+              {{ t(`home.achievements.items.${achievement.id}.title`) }}
+            </h3>
+            <p class="text-gray-400 text-base md:text-lg leading-relaxed">
+              {{ t(`home.achievements.items.${achievement.id}.description`) }}
+            </p>
+          </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 canvasRef = ref<HTMLCanvasElement | null>(null)
+const achievementElements = ref<(HTMLElement | null)[]>([])
+const numberElements = ref<(HTMLElement | null)[]>([])
+let ctx: gsap.Context | null = null
+let animationId: number | null = null
+
+const setAchievementRef = (el: any, index: number) => {
+  if (el) achievementElements.value[index] = el
+}
+
+const setNumberRef = (el: any, index: number) => {
+  if (el) numberElements.value[index] = el
+}
+
+const achievements = [
+  {
+    id: 'projects',
+    number: 150,
+    suffix: '+',
+    color: 'text-blue-400',
+    bgColor: 'bg-blue-500'
+  },
+  {
+    id: 'clients',
+    number: 85,
+    suffix: '+',
+    color: 'text-purple-400',
+    bgColor: 'bg-purple-500'
+  },
+  {
+    id: 'experience',
+    number: 12,
+    suffix: '+',
+    color: 'text-green-400',
+    bgColor: 'bg-green-500'
+  },
+  {
+    id: 'satisfaction',
+    number: 98,
+    suffix: '%',
+    color: 'text-orange-400',
+    bgColor: 'bg-orange-500'
+  }
+]
+
+// 粒子动画
+const initParticles = () => {
+  const canvas = canvasRef.value
+  if (!canvas) return
+
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  const resize = () => {
+    canvas.width = canvas.offsetWidth
+    canvas.height = canvas.offsetHeight
+  }
+  resize()
+  window.addEventListener('resize', resize)
+
+  const particles: Array<{
+    x: number
+    y: number
+    vx: number
+    vy: number
+    size: number
+    opacity: number
+  }> = []
+
+  // 创建粒子
+  for (let i = 0; i < 80; i++) {
+    particles.push({
+      x: Math.random() * canvas.width,
+      y: Math.random() * canvas.height,
+      vx: (Math.random() - 0.5) * 0.5,
+      vy: (Math.random() - 0.5) * 0.5,
+      size: Math.random() * 2 + 1,
+      opacity: Math.random() * 0.5 + 0.3
+    })
+  }
+
+  const animate = () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+    particles.forEach(p => {
+      // 更新位置
+      p.x += p.vx
+      p.y += p.vy
+
+      // 边界检测
+      if (p.x < 0 || p.x > canvas.width) p.vx *= -1
+      if (p.y < 0 || p.y > canvas.height) p.vy *= -1
+
+      // 绘制粒子
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2)
+      ctx.fillStyle = `rgba(255, 255, 255, ${p.opacity})`
+      ctx.fill()
+    })
+
+    // 绘制连线
+    particles.forEach((p1, i) => {
+      particles.slice(i + 1).forEach(p2 => {
+        const dx = p1.x - p2.x
+        const dy = p1.y - p2.y
+        const distance = Math.sqrt(dx * dx + dy * dy)
+
+        if (distance < 150) {
+          ctx.beginPath()
+          ctx.moveTo(p1.x, p1.y)
+          ctx.lineTo(p2.x, p2.y)
+          ctx.strokeStyle = `rgba(255, 255, 255, ${0.1 * (1 - distance / 150)})`
+          ctx.lineWidth = 0.5
+          ctx.stroke()
+        }
+      })
+    })
+
+    animationId = requestAnimationFrame(animate)
+  }
+
+  animate()
+
+  return () => {
+    window.removeEventListener('resize', resize)
+    if (animationId) cancelAnimationFrame(animationId)
+  }
+}
+
+// 数字计数动画
+const animateNumber = (element: HTMLElement, target: number, suffix: string) => {
+  const obj = { value: 0 }
+
+  gsap.to(obj, {
+    value: target,
+    duration: 2.5,
+    ease: 'power2.out',
+    onUpdate: () => {
+      element.textContent = Math.floor(obj.value) + suffix
+    }
+  })
+}
+
+onMounted(async () => {
+  await nextTick()
+  if (!rootRef.value) return
+
+  // 初始化粒子
+  const cleanupParticles = initParticles()
+
+  ctx = gsap.context(() => {
+    achievementElements.value.forEach((item, index) => {
+      if (!item) return
+
+      // 成就项入场动画
+      gsap.fromTo(item,
+        { autoAlpha: 0, x: index % 2 === 0 ? -100 : 100 },
+        {
+          scrollTrigger: {
+            trigger: item,
+            start: 'top 80%',
+            toggleActions: 'play none none reverse',
+            onEnter: () => {
+              // 触发数字计数
+              const numberEl = numberElements.value[index]
+              if (numberEl) {
+                animateNumber(numberEl, achievements[index].number, achievements[index].suffix)
+              }
+            }
+          },
+          autoAlpha: 1,
+          x: 0,
+          duration: 1,
+          delay: index * 0.2,
+          ease: 'power3.out'
+        }
+      )
+    })
+  }, rootRef.value)
+
+  onUnmounted(() => {
+    ctx?.revert()
+    if (cleanupParticles) cleanupParticles()
+  })
+})
+</script>
+
+<style scoped>
+.achievement-item {
+  will-change: transform, opacity;
+}
+</style>