feat(页脚): 添加多语言支持和动画效果

重构页脚组件，增加中英文翻译支持创建 FooterLogo 和 AnimatedButton 通用组件实现滚动动画和按钮悬停效果
2026-04-27 21:07:22 +08:00
parent e6e0426d25
commit 0a738e2074
6 changed files with 435 additions and 40 deletions
@@ -1,5 +1,208 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { onMounted, ref, onUnmounted } from 'vue'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import FooterLogo from '~/components/common/FooterLogo.vue'
+import AnimatedButton from '~/components/common/AnimatedButton.vue'
+
+gsap.registerPlugin(ScrollTrigger)
+
+const { t } = useI18n()
+const footerRef = ref<HTMLElement | null>(null)
+let ctx: gsap.Context
+
+const pagesLinks = [
+  { name: 'nav.home', url: '/' },
+  { name: 'nav.studio', url: '/studio' },
+  { name: 'nav.work', url: '/work' },
+  { name: 'nav.news', url: '/news' },
+]
+
+const onTalkHover = () => {
+  if (!talkBtnRef.value) return
+  const origs = talkBtnRef.value.querySelectorAll('.btn-char-orig')
+  const clones = talkBtnRef.value.querySelectorAll('.btn-char-clone')
+  const bg = talkBtnRef.value.querySelector('.btn-bg-hover')
+  
+  // 背景从底部滑入 (yPercent: 100 -> 0)
+  gsap.to(bg, { yPercent: 0, duration: 0.4, ease: 'power3.out', overwrite: true })
+
+  gsap.to(origs, { yPercent: -100, duration: 0.4, stagger: { amount: 0.2, from: 'start' }, ease: 'power3.out', overwrite: true })
+  gsap.to(clones, { yPercent: 0, duration: 0.4, stagger: { amount: 0.2, from: 'start' }, ease: 'power3.out', overwrite: true })
+}
+
+const onTalkLeave = () => {
+  if (!talkBtnRef.value) return
+  const origs = talkBtnRef.value.querySelectorAll('.btn-char-orig')
+  const clones = talkBtnRef.value.querySelectorAll('.btn-char-clone')
+  const bg = talkBtnRef.value.querySelector('.btn-bg-hover')
+  
+  // 背景向下反向滑出回收 (yPercent: 0 -> 100)
+  gsap.to(bg, { yPercent: 100, duration: 0.4, ease: 'power3.out', overwrite: true })
+
+  gsap.to(origs, { yPercent: 0, duration: 0.4, stagger: { amount: 0.2, from: 'end' }, ease: 'power3.out', overwrite: true })
+  gsap.to(clones, { yPercent: 100, duration: 0.4, stagger: { amount: 0.2, from: 'end' }, ease: 'power3.out', overwrite: true })
+}
+
+onMounted(() => {
+  if (!footerRef.value) return
+
+  ctx = gsap.context(() => {
+      const items = gsap.utils.toArray<HTMLElement>('.animated-item')
+      
+      gsap.from(items, {
+        scrollTrigger: {
+          trigger: footerRef.value,
+          start: 'top 80%',
+          toggleActions: 'play none none reverse',
+        },
+        y: 20,
+        opacity: 0,
+        duration: 0.6,
+        stagger: 0.1,
+        ease: 'power3.out'
+      })
+    }, footerRef.value)
+})
+
+onUnmounted(() => {
+  ctx?.revert()
+})
+</script>
+
 <template>
-  <footer>
-    <h1>Arctic New One Footer</h1>
+  <footer ref="footerRef" class="bg-black text-white px-6 py-16 md:px-12 md:py-24 overflow-hidden">
+    <div class="max-w-[1440px] mx-auto">
+      <!-- Top Section -->
+      <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-8 mb-16">
+        <h2 class="text-3xl md:text-4xl lg:text-[44px] font-normal tracking-normal !leading-[1.4] max-w-none whitespace-pre-line">
+          {{ t('footer.title') }}
+        </h2>
+        <div class="inline-flex items-center shrink-0">
+          <AnimatedButton 
+            :text="t('footer.collaborate')" 
+            to="/contact" 
+            theme="light" 
+          />
+        </div>
+      </div>
+
+      <!-- Divider -->
+      <hr class="border-white/10 w-full mb-16" />
+
+      <!-- Bottom Section -->
+      <div class="grid grid-cols-1 lg:grid-cols-2">
+        
+        <!-- Left Column -->
+        <div class="flex flex-col justify-between lg:border-r border-white/10 lg:pr-16 pb-16 lg:pb-0 border-b lg:border-b-0 mb-16 lg:mb-0">
+          <div>
+            <FooterLogo class="mb-16 animated-item justify-start" />
+            
+            <h3 class="text-2xl font-medium mb-6 animated-item">{{ t('footer.newsletterTitle') }}</h3>
+            
+            <form @submit.prevent class="relative w-full max-w-sm mb-4 animated-item">
+              <input 
+                type="email" 
+                :placeholder="t('footer.emailPlaceholder')" 
+                class="w-full h-[64px] bg-[#1f1f1f] border border-white/10 rounded-full pl-6 pr-[120px] text-sm text-white placeholder-white/40 focus:outline-none focus:bg-[#2f2f2f] transition-colors"
+              />
+              <button 
+                type="submit" 
+                class="absolute right-2 top-2 bottom-2 bg-black text-white text-sm px-6 rounded-full font-medium hover:opacity-75 transition-opacity"
+              >
+                {{ t('footer.subscribe') }}
+              </button>
+            </form>
+            
+            <div class="text-xs text-white/40 flex items-center gap-2 animated-item">
+              <span class="w-1.5 h-1.5 bg-white rounded-full inline-block shrink-0"></span>
+              {{ t('footer.newsletterNote') }}
+            </div>
+          </div>
+          
+          <div class="mt-24 lg:mt-0 flex items-center gap-2 animated-item">
+            <div class="text-[16px] font-bold text-white/30 font-sans">
+              {{ t('footer.copyright') }}
+            </div>
+          </div>
+        </div>
+
+        <!-- Right Column -->
+        <div class="flex flex-col gap-[50px] lg:pl-16">
+          
+          <!-- Links Grid (Top Half) -->
+          <div>
+            <ul class="space-y-3">
+              <li v-for="link in pagesLinks" :key="link.name" class="animated-item">
+                <NuxtLink :to="link.url" class="group flex items-center overflow-hidden text-[16px] font-bold text-white/80 hover:text-white transition-colors" style="justify-content: flex-start;">
+                  <div class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[21px] pr-[21px]">
+                    <span class="mr-[10px] h-[11px] w-[11px] rounded-full bg-white shrink-0"></span>
+                    <span>{{ t(link.name) }}</span>
+                  </div>
+                </NuxtLink>
+              </li>
+            </ul>
+          </div>
+
+          <!-- Contact / Location / Social Grid (Bottom Half) -->
+          <!-- Contacts Row -->
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
+            <ul class="space-y-3">
+              <li class="animated-item">
+                <a href="mailto:chenchun@virtheart.com" class="group flex items-center overflow-hidden text-[16px] font-bold text-white/80 hover:text-white transition-colors" style="justify-content: flex-start;">
+                  <div class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[21px] pr-[21px]">
+                    <span class="mr-[10px] h-[11px] w-[11px] rounded-full bg-white shrink-0"></span>
+                    <span>chenchun@virtheart.com</span>
+                  </div>
+                </a>
+              </li>
+              <li class="animated-item">
+                <span class="group flex items-center overflow-hidden text-[16px] font-bold text-white/80 transition-colors cursor-default" style="justify-content: flex-start;">
+                  <div class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[21px] pr-[21px]">
+                    <span class="mr-[10px] h-[11px] w-[11px] rounded-full bg-white shrink-0"></span>
+                    <span>{{ t('footer.wechat') }}: LucskyNew</span>
+                  </div>
+                </span>
+              </li>
+            </ul>
+
+            <ul class="space-y-3">
+              <li class="animated-item">
+                <a href="mailto:info@virtheart.com" class="group flex items-center overflow-hidden text-[16px] font-bold text-white/80 hover:text-white transition-colors" style="justify-content: flex-start;">
+                  <div class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[21px] pr-[21px]">
+                    <span class="mr-[10px] h-[11px] w-[11px] rounded-full bg-white shrink-0"></span>
+                    <span>info@virtheart.com</span>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <!-- Address & Social Row -->
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 items-start">
+            <div class="group flex items-start overflow-hidden text-[16px] font-bold text-white/80 hover:text-white transition-colors animated-item cursor-default" style="justify-content: flex-start;">
+              <div class="flex items-start transition-transform duration-300 group-hover:translate-x-0 -translate-x-[21px] pr-[21px]">
+                <span class="mr-[10px] mt-[6px] h-[11px] w-[11px] rounded-full bg-white shrink-0"></span>
+                <span class="leading-relaxed whitespace-pre-line">{{ t('footer.address') }}</span>
+              </div>
+            </div>
+
+            <div class="flex gap-3 animated-item">
+                <a href="#" class="w-10 h-10 rounded-full bg-[#1f1f1f] hover:bg-[#2f2f2f] flex items-center justify-center transition-colors text-white">
+                  <Icon name="ph:instagram-logo" class="w-4 h-4" />
+                </a>
+                <a href="#" class="w-10 h-10 rounded-full bg-[#1f1f1f] hover:bg-[#2f2f2f] flex items-center justify-center transition-colors text-white">
+                  <Icon name="pajamas:twitter-x" class="w-3.5 h-3.5" />
+                </a>
+                <a href="#" class="w-10 h-10 rounded-full bg-[#1f1f1f] hover:bg-[#2f2f2f] flex items-center justify-center transition-colors text-white">
+                  <Icon name="ph:diamond-fill" class="w-4 h-4" />
+                </a>
+              </div>
+            </div>
+
+        </div>
+      </div>
+    </div>
  </footer>
 </template>