hanye-website/components/TheFooter.vue

<template>
  <footer
    class="text-white py-8 w-full relative bg-stone-950 border-t border-zinc-800 overflow-hidden"
  >
    <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-10">
      <div
        class="grid grid-cols-1 md:grid-cols-2 sm:grid-cols-1 lg:grid-cols-4 gap-8 lg:py-14"
      >
        <!-- Logo & 描述 -->
        <div
          class="flex flex-col lg:items-start :lg:justify-start sm:items-center text-center lg:text-left"
        >
          <h3 class="mb-4">
            <i class="icon-brand text-white text-2xl"></i>
          </h3>
          <LanguageSwitcher class="mb-8 hidden lg:block" />
          <p class="text-white opacity-60 text-xs">
            &copy; {{ new Date().getFullYear() }} Hanye. All rights reserved.
          </p>
        </div>

        <!-- 快捷链接 -->
        <div class="hidden lg:block">
          <h3
            class="w-36 justify-start text-zinc-300 text-xl font-normal leading-snug mb-4"
          >
            {{ $t("common.home") }}
          </h3>
          <ul class="space-y-4">
            <li v-for="item in menuItems" :key="item.path">
              <NuxtLink
                :to="item.path"
                class="text-zinc-500 text-sm font-normal hover:text-white transition"
              >
                {{ $t(item.label) }}
              </NuxtLink>
            </li>
          </ul>
        </div>
        <!-- 快捷链接 -->
        <div class="hidden lg:block">
          <h3
            class="w-36 justify-start text-zinc-300 text-xl font-normal leading-snug mb-4"
          >
            {{ $t("common.home") }}
          </h3>
          <ul class="space-y-4">
            <li v-for="item in menuItems" :key="item.path">
              <NuxtLink
                :to="item.path"
                class="text-zinc-500 text-sm font-normal hover:text-white transition"
              >
                {{ $t(item.label) }}
              </NuxtLink>
            </li>
          </ul>
        </div>
        <!-- 快捷链接 -->
        <div class="hidden lg:block">
          <h3
            class="w-36 justify-start text-zinc-300 text-xl font-normal leading-snug mb-4"
          >
            {{ $t("common.home") }}
          </h3>
          <ul class="space-y-4">
            <li v-for="item in menuItems" :key="item.path">
              <NuxtLink
                :to="item.path"
                class="text-zinc-500 text-sm font-normal hover:text-white transition"
              >
                {{ $t(item.label) }}
              </NuxtLink>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
/**
 * 页脚组件
 * 包含网站导航、联系信息和版权信息
 */
// 导航菜单项
const menuItems = [
  { label: "common.home", path: "/" },
  { label: "common.products", path: "/products" },
  { label: "common.faq", path: "/faq" },
  { label: "common.about", path: "/about" },
  { label: "common.contact", path: "/contact" },
];
</script>