hanye-website/pages/about.vue

<template>
  <div>
    <div class="w-full h-[55px] sm:h-[72px]"></div>
    <ErrorBoundary :error="error">
      <div v-if="isLoading" class="flex justify-center py-12">
        <!-- 加载中 -->
        <div
          class="animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent"
        ></div>
      </div>

      <div v-else>
        <!-- 面包屑导航 -->
        <div class="max-w-full mb-6 xl:px-2 lg:px-2 md:px-4 px-4 mt-6">
          <div class="max-w-screen-2xl mx-auto">
            <nuxt-link
              to="/"
              class="justify-start text-white/60 text-base font-normal hover:text-white transition-colors duration-300"
              >{{ $t("common.home") }}</nuxt-link
            >
            <span class="text-white/60 text-base font-normal px-2"> / </span>
            <span class="text-white text-base font-normal">{{
              $t("about.overview.title")
            }}</span>
          </div>
        </div>

        <!-- 顶部大标题 -->
        <div class="flex flex-col items-center justify-center px-2 mb-10">
          <h1
            class="text-white text-5xl font-bold mb-4 tracking-tight text-center"
          >
            {{ $t("about.companyInfo.name") }}
          </h1>
          <div
            class="text-stone-400 text-xl leading-relaxed text-center max-w-2xl break-words whitespace-pre-wrap"
          >
            {{ $t("about.companyInfo.description") }}
          </div>
        </div>

        <!-- 横向三栏分区卡片 -->
        <div
          class="w-full flex flex-col lg:flex-row gap-8 justify-center items-stretch max-w-screen-2xl mx-auto px-2 mb-20"
        >
          <!-- 公司信息卡片 -->
          <div
            class="flex-1 bg-zinc-900/95 backdrop-blur-sm rounded-xl p-8 border border-zinc-800/50 shadow-lg flex flex-col gap-6 min-w-[260px]"
          >
            <h2
              class="text-white text-2xl font-semibold mb-2 tracking-tight relative"
            >
              {{ $t("about.overview.companyInfo") }}
              <span
                class="absolute -bottom-2 left-0 w-12 h-1 bg-gradient-to-r from-blue-500 to-blue-300 rounded-full"
              ></span>
            </h2>
            <div class="flex flex-col gap-3">
              <div class="flex flex-col gap-1">
                <span class="text-stone-400 text-base">{{
                  $t("about.overview.companyName")
                }}</span>
                <span class="text-white text-lg font-bold">{{
                  $t("about.companyInfo.name")
                }}</span>
              </div>
              <div class="flex flex-col gap-1">
                <span class="text-stone-400 text-base">{{
                  $t("about.overview.englishName")
                }}</span>
                <span class="text-white text-lg font-bold">{{
                  $t("about.companyInfo.englishName")
                }}</span>
              </div>
              <div class="flex flex-col gap-1">
                <span class="text-stone-400 text-base">{{
                  $t("about.overview.established")
                }}</span>
                <span class="text-white text-lg font-bold">{{
                  $t("about.companyInfo.established")
                }}</span>
              </div>
              <div class="flex flex-col gap-1">
                <span class="text-stone-400 text-base">{{
                  $t("about.overview.ceo")
                }}</span>
                <span class="text-white text-lg font-bold">{{
                  $t("about.companyInfo.ceo")
                }}</span>
              </div>
              <div class="flex flex-col gap-1">
                <span class="text-stone-400 text-base">{{
                  $t("about.overview.employees")
                }}</span>
                <span class="text-white text-lg font-bold">{{
                  $t("about.companyInfo.employees")
                }}</span>
              </div>
              <div class="flex flex-col gap-1">
                <span class="text-stone-400 text-base">{{
                  $t("about.overview.location")
                }}</span>
                <span class="text-white text-lg font-bold">{{
                  $t("about.companyInfo.location")
                }}</span>
              </div>
            </div>
          </div>
          <!-- 经营理念卡片 -->
          <div
            class="flex-1 bg-zinc-900/95 backdrop-blur-sm rounded-xl p-8 border border-zinc-800/50 shadow-lg flex flex-col gap-6 min-w-[260px]"
          >
            <h2
              class="text-white text-2xl font-semibold mb-2 tracking-tight relative"
            >
              {{ $t("about.overview.philosophy") }}
              <span
                class="absolute -bottom-2 left-0 w-12 h-1 bg-gradient-to-r from-blue-500 to-blue-300 rounded-full"
              ></span>
            </h2>
            <div class="text-stone-400 text-lg leading-relaxed">
              {{ $t("about.companyInfo.philosophy") }}
            </div>
          </div>
          <!-- 联系方式卡片 -->
          <div
            class="flex-1 bg-zinc-900/95 backdrop-blur-sm rounded-xl p-8 border border-zinc-800/50 shadow-lg flex flex-col gap-6 min-w-[260px]"
          >
            <h2
              class="text-white text-2xl font-semibold mb-2 tracking-tight relative"
            >
              {{ $t("about.overview.contact") }}
              <span
                class="absolute -bottom-2 left-0 w-12 h-1 bg-gradient-to-r from-blue-500 to-blue-300 rounded-full"
              ></span>
            </h2>
            <div class="flex flex-col gap-3">
              <div class="flex flex-col gap-1">
                <span class="text-stone-400 text-base">{{
                  $t("about.overview.email")
                }}</span>
                <a
                  :href="'mailto:' + companyInfo.email"
                  class="text-white text-lg font-bold hover:text-blue-400 transition-colors"
                  >{{ companyInfo.email }}</a
                >
              </div>
              <div class="flex flex-col gap-1">
                <span class="text-stone-400 text-base">{{
                  $t("about.overview.tel")
                }}</span>
                <a
                  :href="'tel:' + companyInfo.tel.replace(/[^0-9]/g, '')"
                  class="text-white text-lg font-bold hover:text-blue-400 transition-colors"
                  >{{ companyInfo.tel }}</a
                >
              </div>
              <div class="flex flex-col gap-1">
                <span class="text-stone-400 text-base">{{
                  $t("about.overview.fax")
                }}</span>
                <span class="text-white text-lg font-bold">{{
                  companyInfo.fax
                }}</span>
              </div>
              <div class="flex flex-col gap-1">
                <span class="text-stone-400 text-base">{{
                  $t("about.overview.businessHours")
                }}</span>
                <span class="text-white text-lg font-bold">{{
                  $t("about.companyInfo.businessHours")
                }}</span>
              </div>
            </div>
            <div class="flex flex-col gap-1 mt-2">
              <span class="text-stone-400 text-base">{{
                $t("about.overview.businessActivities")
              }}</span>
              <div class="text-white text-base font-bold space-y-1">
                <p>
                  {{ $t("about.companyInfo.businessActivities") }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ErrorBoundary>
  </div>
</template>

<script setup lang="ts">
/**
 * 公司简介页面
 * 展示公司基本信息、理念等
 */
import { useErrorHandler } from "~/composables/useErrorHandler";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();

// 公司信息接口定义
interface CompanyInfo {
  email: string;
  tel: string;
  fax: string;
}

const { error, isLoading, wrapAsync } = useErrorHandler();
const companyInfo = ref<CompanyInfo>({
  email: "hanye@hanye.cn",
  tel: "86)024-8399-0696",
  fax: "86)024-8399-0696",
});

// SEO优化
useHead({
  title: t("about.title"),
  meta: [
    {
      name: "description",
      content: t("about.description"),
    },
    {
      name: "keywords",
      content: t("about.keywords"),
    },
  ],
});
</script>

<style scoped>
/* 信息卡片效果 */
.info-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 动画效果 */
@keyframes float {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-5px) scale(1.2);
    opacity: 1;
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-slow-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 120s linear infinite;
  transform-origin: center;
}

.animate-spin-slow-reverse {
  animation: spin-slow-reverse 100s linear infinite;
  transform-origin: center;
}

@keyframes dash {
  from {
    stroke-dashoffset: 500;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.animate-dash {
  stroke-dasharray: 5, 5;
  animation: dash 10s linear infinite;
}

.animate-dash-delay {
  stroke-dasharray: 5, 5;
  animation: dash 10s linear infinite;
  animation-delay: 3s;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.6));
  }
  50% {
    opacity: 0.7;
    filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.9));
  }
}

/* 其他样式保持不变 */
</style>