PinnovateCloud/components/Service.vue

<template>
  <div>
    <!-- 服务优势 -->
    <section class="py-20 relative">
      <div
        class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-10"
        style="background-image: url('/images/bg/advantage.webp')"
      ></div>
      <div class="container relative z-10">
        <div class="max-w-4xl mx-auto text-center mb-16">
          <h2 class="text-4xl font-bold text-[#333333] dark:text-white mb-4">
            {{ $t("home.advantages.title") }}
          </h2>
          <p class="text-xl text-gray-600 dark:text-gray-300 leading-relaxed">
            {{ $t("home.advantages.subtitle") }}
          </p>
        </div>

        <div
          class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-x-8 gap-y-12"
        >
          <!-- 官方认证 -->
          <div class="col-span-2 text-center">
            <div
              class="flex flex-col items-center pb-8 relative bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 h-full"
            >
              <div
                class="w-20 h-20 mx-auto bg-white dark:bg-gray-700 rounded-full p-3 shadow-md mb-6 flex items-center justify-center"
              >
                <i class="fas fa-check-circle text-4xl text-blue-500 dark:text-blue-400"></i>
              </div>
              <h3 class="text-xl font-bold mb-3 dark:text-white">
                {{ $t("home.advantages.items.authorized.title") }}
              </h3>
              <p class="text-gray-600 dark:text-gray-300 leading-relaxed flex-grow">
                {{ $t("home.advantages.items.authorized.description") }}
              </p>
              <div class="absolute bottom-0 w-4/5 h-px bg-gray-200 dark:bg-gray-600"></div>
            </div>
          </div>

          <!-- 专业团队 -->
          <div class="col-span-2 text-center">
            <div
              class="flex flex-col items-center pb-8 relative bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 h-full"
            >
              <div
                class="w-20 h-20 mx-auto bg-white dark:bg-gray-700 rounded-full p-3 shadow-md mb-6 flex items-center justify-center"
              >
                <i class="fas fa-users text-4xl text-blue-500 dark:text-blue-400"></i>
              </div>
              <h3 class="text-xl font-bold mb-3 dark:text-white">
                {{ $t("home.advantages.items.team.title") }}
              </h3>
              <p class="text-gray-600 dark:text-gray-300 leading-relaxed flex-grow">
                {{ $t("home.advantages.items.team.description") }}
              </p>
              <div class="absolute bottom-0 w-4/5 h-px bg-gray-200 dark:bg-gray-600"></div>
            </div>
          </div>

          <!-- 多种支付 -->
          <div class="col-span-2 text-center">
            <div
              class="flex flex-col items-center pb-8 relative bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 h-full"
            >
              <div
                class="w-20 h-20 mx-auto bg-white dark:bg-gray-700 rounded-full p-3 shadow-md mb-6 flex items-center justify-center"
              >
              <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="dark:opacity-90">
                  <path d="M20 4L20.2 4.6V27.3L20 27.5L20 4Z" fill="#3B82F6"/>
                  <path d="M20 4L8 22.2L20 27.5V4Z" fill="#3B82F6"/>
                  <path d="M20 27.5L32 22.2L20 4V27.5Z" fill="#2563EB"/>
                  <path d="M20 29.2L8 23.2L20 36V29.2Z" fill="#3B82F6"/>
                  <path d="M20 36V29.2L32 23.2L20 36Z" fill="#2563EB"/>
                </svg>
              </div>
              <h3 class="text-xl font-bold mb-3 dark:text-white">
                {{ $t("home.advantages.items.payment.title") }}
              </h3>
              <p class="text-gray-600 dark:text-gray-300 leading-relaxed flex-grow">
                {{ $t("home.advantages.items.payment.description") }}
              </p>
              <div class="absolute bottom-0 w-4/5 h-px bg-gray-200 dark:bg-gray-600"></div>
            </div>
          </div>

          <!-- 价格优势 -->
          <div class="col-span-2 text-center">
            <div
              class="flex flex-col items-center pb-8 relative bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 h-full"
            >
              <div
                class="w-20 h-20 mx-auto bg-white dark:bg-gray-700 rounded-full p-3 shadow-md mb-6 flex items-center justify-center"
              >
              <i class="fas fa-chart-line text-4xl text-blue-500 dark:text-blue-400"></i>
              </div>
              <h3 class="text-xl font-bold mb-3 dark:text-white">
                {{ $t("home.advantages.items.pricing.title") }}
              </h3>
              <p class="text-gray-600 dark:text-gray-300 leading-relaxed flex-grow">
                {{ $t("home.advantages.items.pricing.description") }}
              </p>
            </div>
          </div>

          <!-- 全程支持 -->
          <div class="col-span-2 text-center">
            <div
              class="flex flex-col items-center pb-8 relative bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 h-full"
            >
              <div
                class="w-20 h-20 mx-auto bg-white dark:bg-gray-700 rounded-full p-3 shadow-md mb-6 flex items-center justify-center"
              >
                <i class="fas fa-headset text-4xl text-blue-500 dark:text-blue-400"></i>
              </div>
              <h3 class="text-xl font-bold mb-3 dark:text-white">
                {{ $t("home.advantages.items.support.title") }}
              </h3>
              <p class="text-gray-600 dark:text-gray-300 leading-relaxed flex-grow">
                {{ $t("home.advantages.items.support.description") }}
              </p>
              <div class="absolute bottom-0 w-4/5 h-px bg-gray-200 dark:bg-gray-600"></div>
            </div>
          </div>

          <!-- 增值服务 -->
          <div class="col-span-2 text-center">
            <div
              class="flex flex-col items-center pb-8 relative bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 h-full"
            >
              <div
                class="w-20 h-20 mx-auto bg-white dark:bg-gray-700 rounded-full p-3 shadow-md mb-6 flex items-center justify-center"
              >
                <i class="fas fa-graduation-cap text-4xl text-blue-500 dark:text-blue-400"></i>
              </div>
              <h3 class="text-xl font-bold mb-3 dark:text-white">
                {{ $t("home.advantages.items.training.title") }}
              </h3>
              <p class="text-gray-600 dark:text-gray-300 leading-relaxed flex-grow">
                {{ $t("home.advantages.items.training.description") }}
              </p>
              <div class="absolute bottom-0 w-4/5 h-px bg-gray-200 dark:bg-gray-600"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
// 服务优势数据
const servicesData = {
  authorized: {
    icon: "fas fa-check-circle",
    titleKey: "home.advantages.items.authorized.title",
    descriptionKey: "home.advantages.items.authorized.description",
  },
  pricing: {
    icon: "fas fa-percentage",
    titleKey: "home.advantages.items.pricing.title",
    descriptionKey: "home.advantages.items.pricing.description",
  },
  support: {
    icon: "fas fa-headset",
    titleKey: "home.advantages.items.support.title",
    descriptionKey: "home.advantages.items.support.description",
  },
  training: {
    icon: "fas fa-graduation-cap",
    titleKey: "home.advantages.items.training.title",
    descriptionKey: "home.advantages.items.training.description",
  },
};
</script>

<style>

</style>