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"
              >ホーム</nuxt-link
            >
            <span class="text-white/60 text-base font-normal px-2"> / </span>
            <span class="text-white text-base font-normal">会社概要</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">
            {{ companyInfo.name }}
          </h1>
          <div class="text-stone-400 text-xl leading-relaxed text-center max-w-2xl">
            {{ 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">
              会社情報
              <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">設立</span>
                <span class="text-white text-lg font-bold">{{ companyInfo.established }}</span>
              </div>
              <div class="flex flex-col gap-1">
                <span class="text-stone-400 text-base">代表者</span>
                <span class="text-white text-lg font-bold">{{ companyInfo.ceo }}</span>
              </div>
              <div class="flex flex-col gap-1">
                <span class="text-stone-400 text-base">従業員数</span>
                <span class="text-white text-lg font-bold">{{ companyInfo.employees }}</span>
              </div>
              <div class="flex flex-col gap-1">
                <span class="text-stone-400 text-base">所在地</span>
                <span class="text-white text-lg font-bold">{{ 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">
              経営理念
              <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">
              {{ 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">
              お問い合わせ
              <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">E-mail</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">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">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">営業時間</span>
                <span class="text-white text-lg font-bold">{{ companyInfo.businessHours }}</span>
              </div>
            </div>
            <div class="flex flex-col gap-1 mt-2">
              <span class="text-stone-400 text-base">事業内容</span>
              <div class="text-white text-base font-bold space-y-1">
                <p v-for="(item, idx) in companyInfo.businessActivities" :key="idx">{{ item }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ErrorBoundary>
  </div>
</template>

<script setup lang="ts">
/**
 * 公司简介页面
 * 展示公司基本信息、理念等
 */
import { useErrorHandler } from "~/composables/useErrorHandler";
import companyImage from "@/assets/images/product-banner.webp";

// 公司信息接口定义
interface CompanyInfo {
  name: string;
  englishName: string;
  description: string;
  established: string;
  ceo: string;
  employees: string;
  location: string;
  philosophy: string;
  email: string;
  tel: string;
  fax: string;
  businessHours: string;
  businessActivities: string[];
}

const { error, isLoading, wrapAsync } = useErrorHandler();
const companyInfo = ref<CompanyInfo>({
  name: "Hanye",
  englishName: "Hanye Technology Co., Ltd.",
  description: "Hanye成立于2003年，运营总部设在中国沈阳。創業から現在に至るまで、メモリ(記憶媒体) 及び 関連製品の開発・製造・販売を統べる総合企業に成長いたしました。我司还将构筑完善的售后服务体系，全力提供技术支持。以成为客户信赖的合作伙伴为目标而更加努力。",
  established: "2003年",
  ceo: "ZHENG XIAO DONG",
  employees: "30人",
  location: "803, NO.6, AiTe, 90-6# SanHao Street, Heping District, ShenYang, China",
  philosophy: "私たちは、革新的な技術と優れた品質で、お客様のデジタルライフをより快適に、より安全にすることを目指しています。持続可能な開発と環境への配慮を重視し、社会に貢献する企業として成長し続けます。",
  email: "hanye@hanye.cn",
  tel: "86）024-8399-0696",
  fax: "86）024-8399-0696",
  businessHours: "平日 9:00-18:00 / 土日祝日休み",
  businessActivities: [
    "闪存的开发、生产和销售",
    "开发、制造和销售SSD产品",
    "其相关业务"
  ]
});

// SEO优化
useHead({
  title: "会社概要 - Hanye",
  meta: [
    {
      name: "description",
      content: "Hanyeの会社概要、経営理念、企業情報をご紹介します。",
    },
  ],
});
</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>