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>
This commit is contained in:
陈春
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<section ref="rootRef" class="relative bg-white py-32 md:py-40 overflow-hidden">
|
||||
<div class="w-page-container max-w-[1200px] mx-auto px-6 md:px-10">
|
||||
<!-- 标题区 -->
|
||||
<div ref="headerRef" class="text-center mb-20 md:mb-28" style="opacity: 0;">
|
||||
<h2 class="text-4xl md:text-6xl font-bold tracking-tight text-black mb-6">
|
||||
{{ t('home.services.title') }}
|
||||
</h2>
|
||||
<p class="text-lg md:text-xl 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-8 md:gap-10"
|
||||
@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] md:h-[420px] 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 md:p-10 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 md:p-10 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'
|
||||
}
|
||||
)
|
||||
|
||||
// 卡片入场动画 - 从四周飞入
|
||||
cardElements.value.forEach((card, index) => {
|
||||
if (!card) return
|
||||
|
||||
const positions = [
|
||||
{ x: -200, y: -200 }, // 左上
|
||||
{ x: 0, y: -200 }, // 上
|
||||
{ x: 200, y: -200 }, // 右上
|
||||
{ x: -200, y: 200 }, // 左下
|
||||
{ x: 0, y: 200 }, // 下
|
||||
{ x: 200, y: 200 } // 右下
|
||||
]
|
||||
|
||||
const startPos = positions[index]
|
||||
|
||||
gsap.fromTo(card,
|
||||
{
|
||||
autoAlpha: 0,
|
||||
x: startPos.x,
|
||||
y: startPos.y,
|
||||
scale: 0.8,
|
||||
rotateZ: index % 2 === 0 ? -15 : 15
|
||||
},
|
||||
{
|
||||
scrollTrigger: {
|
||||
trigger: card,
|
||||
start: 'top 85%',
|
||||
toggleActions: 'play none none reverse'
|
||||
},
|
||||
autoAlpha: 1,
|
||||
x: 0,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
rotateZ: 0,
|
||||
duration: 1.2,
|
||||
delay: index * 0.1,
|
||||
ease: 'back.out(1.2)'
|
||||
}
|
||||
)
|
||||
})
|
||||
}, 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>
|
||||
Reference in New Issue
Block a user