website-vue/components/FooterSection.vue

<template>
  <footer class="bg-primary text-white py-12">
    <div class="container">
      <div class="grid md:grid-cols-4 gap-8">
        <div>
          <h5 class="text-lg font-semibold mb-4">{{ $t('common.appName') }}</h5>
          <p class="text-white/50 mb-4">{{ $t('footer.description') }}</p>
          <div class="flex space-x-4">
            <a href="#" class="text-white/50 hover:text-white transition-colors">
              <i class="fab fa-weixin"></i>
            </a>
            <a href="#" class="text-white/50 hover:text-white transition-colors">
              <i class="fab fa-weibo"></i>
            </a>
            <a href="#" class="text-white/50 hover:text-white transition-colors">
              <i class="fab fa-linkedin"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h5 class="text-lg font-semibold mb-4">{{ $t('footer.products') }}</h5>
          <ul class="space-y-2">
            <li v-for="(product, index) in products" :key="index">
              <NuxtLink :to="product.path" class="text-white/70 hover:text-white transition-colors">
                {{ $t(product.i18nKey) }}
              </NuxtLink>
            </li>
          </ul>
        </div>
        
        <div>
          <h5 class="text-lg font-semibold mb-4">{{ $t('footer.solutions') }}</h5>
          <ul class="space-y-2">
            <li v-for="(solution, index) in solutions" :key="index">
              <NuxtLink :to="solution.path" class="text-white/70 hover:text-white transition-colors">
                {{ $t(solution.i18nKey) }}
              </NuxtLink>
            </li>
          </ul>
        </div>
        
        <div>
          <h5 class="text-lg font-semibold mb-4">{{ $t('footer.contactUs') }}</h5>
          <ul class="space-y-3">
            <li class="flex items-start">
              <i class="fas fa-map-marker-alt text-white/70 mt-1 mr-3"></i>
              <span class="text-white/70">{{ $t('footer.address') }}</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-phone text-white/70 mt-1 mr-3"></i>
              <span class="text-white/70">{{ $t('footer.phone') }}</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-envelope text-white/70 mt-1 mr-3"></i>
              <span class="text-white/70">{{ $t('footer.email') }}</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="mt-12 pt-8 border-t border-white/10 text-center">
        <p class="text-white/50">&copy; {{ new Date().getFullYear() }} {{ $t('common.appName') }}. {{ $t('footer.allRightsReserved') }}</p>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const products = [
  { i18nKey: 'footer.productLinks.ec2', path: '/products' },
  { i18nKey: 'footer.productLinks.s3', path: '/products' },
  { i18nKey: 'footer.productLinks.rds', path: '/products' },
  { i18nKey: 'footer.productLinks.lambda', path: '/products' },
  { i18nKey: 'footer.productLinks.more', path: '/products' }
];

const solutions = [
  { i18nKey: 'footer.solutionLinks.web', path: '/solutions' },
  { i18nKey: 'footer.solutionLinks.enterprise', path: '/solutions' },
  { i18nKey: 'footer.solutionLinks.disaster', path: '/solutions' },
  { i18nKey: 'footer.solutionLinks.bigdata', path: '/solutions' },
  { i18nKey: 'footer.solutionLinks.microservice', path: '/solutions' }
];
</script>