PinnovateCloud-realease/components/FooterSection.vue

<template>
  <footer class="bg-[#1a2234] text-white py-10">
    <div class="container">
      <div class="grid md:grid-cols-9 gap-5">
        <!-- 云服务专家 -->
        <div class="md:col-span-2">
          <h5 class="text-lg font-semibold mb-4 text-white">
            {{ $t("footer.company") }}
          </h5>
          <p class="text-white/70 mb-4">{{ $t("footer.companyDesc") }}</p>
          <div class="flex space-x-4 mb-4">
            <a
              :href="contact.telegram"
              target="_blank"
              rel="noopener noreferrer"
              class="text-white/70 hover:text-white transition-colors"
            >
              <i class="fab fa-telegram"></i>
            </a>
            <a
              :href="contact.twitter"
              target="_blank"
              rel="noopener noreferrer"
              class="text-white/70 hover:text-white transition-colors"
            >
              <i class="fab fa-twitter"></i>
            </a>
            <a
              :href="contact.whatsapp"
              target="_blank"
              rel="noopener noreferrer"
              class="text-white/70 hover:text-white transition-colors"
            >
              <i class="fab fa-whatsapp"></i>
            </a>
            <a
              :href="contact.instagram"
              target="_blank"
              rel="noopener noreferrer"
              class="text-white/70 hover:text-white transition-colors"
            >
              <i class="fab fa-instagram"></i>
            </a>
            <a
              :href="contact.facebook"
              target="_blank"
              rel="noopener noreferrer"
              class="text-white/70 hover:text-white transition-colors"
            >
              <i class="fab fa-facebook"></i>
            </a>
          </div>
        </div>

        <!-- AWS产品 -->
        <div class="md:col-span-2">
          <h5 class="text-lg font-semibold mb-4">
            {{ $t("footer.products.title") }}
          </h5>
          <ul class="space-y-2">
            <li>
              <NuxtLink
                to="/products"
                class="text-white/70 hover:text-white transition-colors"
                >{{ $t("footer.products.ec2") }}</NuxtLink
              >
            </li>
            <li>
              <NuxtLink
                to="/products"
                class="text-white/70 hover:text-white transition-colors"
                >{{ $t("footer.products.s3") }}</NuxtLink
              >
            </li>
            <li>
              <NuxtLink
                to="/products"
                class="text-white/70 hover:text-white transition-colors"
                >{{ $t("footer.products.rds") }}</NuxtLink
              >
            </li>
            <li>
              <NuxtLink
                to="/products"
                class="text-white/70 hover:text-white transition-colors"
                >{{ $t("footer.products.lambda") }}</NuxtLink
              >
            </li>
            <li>
              <NuxtLink
                to="/products"
                class="text-white/70 hover:text-white transition-colors"
                >{{ $t("footer.products.more") }}</NuxtLink
              >
            </li>
          </ul>
        </div>

        <!-- 解决方案 -->
        <div class="md:col-span-2">
          <h5 class="text-lg font-semibold mb-4">
            {{ $t("footer.solutions.title") }}
          </h5>
          <ul class="space-y-2">
            <li>
              <NuxtLink
                to="/solutions"
                class="text-white/70 hover:text-white transition-colors"
                >{{ $t("footer.solutions.hosting") }}</NuxtLink
              >
            </li>
            <li>
              <NuxtLink
                to="/solutions"
                class="text-white/70 hover:text-white transition-colors"
                >{{ $t("footer.solutions.cloud") }}</NuxtLink
              >
            </li>
            <li>
              <NuxtLink
                to="/solutions"
                class="text-white/70 hover:text-white transition-colors"
                >{{ $t("footer.solutions.disaster") }}</NuxtLink
              >
            </li>
            <li>
              <NuxtLink
                to="/solutions"
                class="text-white/70 hover:text-white transition-colors"
                >{{ $t("footer.solutions.bigdata") }}</NuxtLink
              >
            </li>
            <li>
              <NuxtLink
                to="/solutions"
                class="text-white/70 hover:text-white transition-colors"
                >{{ $t("footer.solutions.microservice") }}</NuxtLink
              >
            </li>
          </ul>
        </div>

        <!-- 联系我们 -->
        <div class="md:col-span-3">
          <h5 class="text-lg font-semibold mb-4">{{ $t("footer.contact") }}</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") + contact.email
              }}</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 分隔线 -->
      <div class="border-t border-white/10 my-6"></div>

      <!-- 底部版权信息 -->
      <div class="flex flex-col md:flex-row justify-between items-center">
        <p class="text-white/50 text-sm">
          <!-- © 2023 PinnovateCloud.  -->
          {{ $t("footer.copyright") }}
        </p>
        <div class="flex space-x-6 mt-4 md:mt-0">
          <NuxtLink
            to="/awsnews/privacy"
            class="text-white/50 hover:text-white text-sm"
          >
            {{ $t("footer.links.privacy") }}
          </NuxtLink>
          <NuxtLink to="/terms" class="text-white/50 hover:text-white text-sm">
            {{ $t("footer.links.terms") }}
          </NuxtLink>
          <NuxtLink to="/sitemap.xml" class="text-white/50 hover:text-white text-sm">
            {{ $t("footer.links.sitemap") }}
          </NuxtLink>
          <NuxtLink to="/tag" class="text-white/50 hover:text-white text-sm">
            {{ $t("footer.links.tagsitemap") }}
          </NuxtLink>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { contact } from "../public/js/contact";
</script>