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-cyan-400 rounded-full border-t-transparent"
        ></div>
      </div>

      <div v-else class="scroll-smooth">
        <!-- 右侧锚点导航 -->
        <div
          class="fixed right-8 top-1/2 transform -translate-y-1/2 z-50 hidden lg:block"
        >
          <nav class="flex flex-col space-y-4">
            <button
              v-for="section in sections"
              :key="section.id"
              @click="scrollToSection(section.id)"
              class="group relative flex items-center"
              :class="{
                'opacity-100': currentSection === section.id,
                'opacity-50 hover:opacity-100': currentSection !== section.id,
              }"
            >
              <span
                class="w-2 h-2 rounded-full bg-[#35F1FF] transition-all duration-300"
                :class="{ 'scale-150': currentSection === section.id }"
              ></span>
              <span
                class="ml-3 text-sm text-white transition-all duration-300 transform translate-x-0 opacity-0 group-hover:translate-x-0 group-hover:opacity-100"
                :class="{
                  'translate-x-0 opacity-100': currentSection === section.id,
                }"
                >{{ section.name }}</span
              >
            </button>
          </nav>
        </div>

        <!-- 顶部横幅 (v-if="false" 保持原样, 但内容已准备好国际化) -->
        <div v-if="false" class="w-full select-none">
          <div
            class="max-w-screen-2xl mx-auto h-[70vh] relative overflow-hidden"
          >
            <div
              class="w-full h-full relative z-30 flex flex-col text-center justify-center items-center transform transition-transform duration-1000"
              :style="{ transform: `translateY(${scrollY * 0.5}px)` }"
            >
              <h1
                class="text-white text-5xl font-bold mb-6 tracking-wider animate-title-in"
              >
                {{ t('about.full.page.banner.title') }}
              </h1>
              <div
                class="w-24 h-px bg-[#35F1FF]/60 mx-auto mb-8 animate-line-expand"
              ></div>
              <p
                class="text-zinc-300/80 text-lg max-w-2xl mx-auto leading-relaxed animate-fade-in-delay"
              >
                {{ t('about.full.page.banner.subtitle') }}
              </p>
            </div>
            <div
              class="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/60 z-20"
            ></div>
            <video
              autoplay
              muted
              loop
              poster="/assets/videos/about.webp"
              class="w-full h-full object-cover absolute z-10 left-0 right-0 top-0 bottom-0"
              src="/assets/videos/about.mp4"
            ></video>
          </div>
        </div>

        <!-- 关于我们 (公司简介) -->
        <div
          id="company-profile"
          class="section-block w-full bg-gradient-to-b from-zinc-900 via-zinc-800/80 to-zinc-900 py-40 relative overflow-hidden"
          ref="companyProfileRef"
        >
          <!-- 商务风格背景图 -->
          <div class="absolute inset-0 bg-business-overlay"></div>
          <!-- 添加pattern遮罩层 -->
          <div class="absolute inset-0 bg-[url('~/assets/images/pattern.png')] bg-[100px_100px] bg-repeat"></div>
          <div class="absolute inset-0 bg-gradient-to-b from-black/70 via-black/50 to-black/70"></div>
          <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="text-center mb-32 animate-fade-in">
              <h2
                class="section-title text-[#35F1FF] text-sm font-bold mb-4 tracking-[0.2em] animate-slide-in-left"
              >
                {{ t('about.full.page.profile.sectionTitle') }}
              </h2>
              <h1
                class="text-zinc-300 text-3xl font-bold mb-6 tracking-wider animate-slide-in-right"
              >
                {{ t('about.full.page.profile.titleEn') }}
              </h1>
              <div
                class="w-16 h-px bg-[#35F1FF]/60 mx-auto animate-line-expand"
              ></div>
            </div>

            <div class="max-w-4xl mx-auto">
              <div class="mb-32 text-center">
                <h3 class="text-white text-2xl font-bold mb-8 tracking-wide">
                  {{ t('about.full.page.profile.mainTitle') }}
                </h3>
                <p
                  class="text-zinc-300/80 text-base leading-relaxed max-w-2xl mx-auto"
                >
                  {{ t('about.full.page.profile.mainDescription') }}
                </p>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-2 gap-32">
                <div class="space-y-24">
                  <div class="relative">
                    <div class="absolute -left-6 top-0 w-px h-full bg-[#35F1FF]/60"></div>
                    <div class="pl-8">
                      <h4 class="text-[#35F1FF] text-lg font-bold mb-6 tracking-wide">
                        {{ t('about.full.page.profile.item1.title') }}
                      </h4>
                      <p class="text-zinc-300/80 text-sm leading-relaxed">
                        {{ t('about.full.page.profile.item1.description') }}
                      </p>
                    </div>
                  </div>
                  <div class="relative">
                    <div class="absolute -left-6 top-0 w-px h-full bg-[#35F1FF]/60"></div>
                    <div class="pl-8">
                      <h4 class="text-[#35F1FF] text-lg font-bold mb-6 tracking-wide">
                        {{ t('about.full.page.profile.item2.title') }}
                      </h4>
                      <p class="text-zinc-300/80 text-sm leading-relaxed">
                        {{ t('about.full.page.profile.item2.description') }}
                      </p>
                    </div>
                  </div>
                </div>

                <div class="space-y-24">
                  <div class="relative">
                    <div class="absolute -left-6 top-0 w-px h-full bg-[#35F1FF]/60"></div>
                    <div class="pl-8">
                      <h4 class="text-[#35F1FF] text-lg font-bold mb-6 tracking-wide">
                        {{ t('about.full.page.profile.item3.title') }}
                      </h4>
                      <p class="text-zinc-300/80 text-sm leading-relaxed">
                        {{ t('about.full.page.profile.item3.description') }}
                      </p>
                    </div>
                  </div>
                  <div class="relative">
                    <div class="absolute -left-6 top-0 w-px h-full bg-[#35F1FF]/60"></div>
                    <div class="pl-8">
                      <h4 class="text-[#35F1FF] text-lg font-bold mb-6 tracking-wide">
                        {{ t('about.full.page.profile.item4.title') }}
                      </h4>
                      <p class="text-zinc-300/80 text-sm leading-relaxed">
                        {{ t('about.full.page.profile.item4.description') }}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 业务内容 -->
        <div
          id="business-content"
          class="section-block w-full bg-gradient-to-b from-indigo-900/60 via-indigo-800/40 to-indigo-900/60 py-48 relative overflow-hidden"
          ref="businessContentRef"
        >
          <div class="bg-decoration">
            <div class="bg-decoration-circle top-0 left-0 w-96 h-96 bg-indigo-500 transform -translate-x-1/2 -translate-y-1/2 animate-float"></div>
            <div class="bg-decoration-circle bottom-0 right-0 w-96 h-96 bg-indigo-500 transform translate-x-1/2 translate-y-1/2 animate-float-delay"></div>
            <div class="bg-decoration-circle top-1/2 left-1/2 w-64 h-64 bg-indigo-500 transform -translate-x-1/2 -translate-y-1/2 animate-pulse-slow"></div>
          </div>

          <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 relative">
            <div class="text-center mb-40">
              <h2 class="text-indigo-400 text-sm font-bold mb-4 tracking-[0.2em]">
                {{ t('about.full.page.business.sectionTitle') }}
              </h2>
              <h1 class="text-zinc-300 text-3xl font-bold mb-6 tracking-wider">
                {{ t('about.full.page.business.titleEn') }}
              </h1>
              <div class="w-16 h-px bg-indigo-400/60 mx-auto mb-8"></div>
              <p
                class="text-zinc-300/80 text-base max-w-2xl mx-auto leading-relaxed"
                v-html="t('about.full.page.business.description').replace(/\n/g, '<br class=\'hidden sm:block\' />')"
              ></p>
            </div>

            <div class="space-y-48">
              <!-- 存储产品的研发 -->
              <div class="relative group">
                <div class="absolute -left-8 top-0 w-px h-full bg-[#35F1FF]/60 transition-all duration-300 group-hover:h-[calc(100%+2rem)] group-hover:-top-4"></div>
                <div class="pl-12">
                  <div class="flex items-center space-x-6 mb-12">
                    <div class="text-[#35F1FF] text-3xl font-bold tracking-tight">01</div>
                    <h3 class="text-white text-2xl font-bold tracking-wide">
                      {{ t('about.full.page.business.item1.title') }}
                    </h3>
                  </div>
                  <p class="text-zinc-300/80 text-sm leading-relaxed mb-16 max-w-2xl">
                    {{ t('about.full.page.business.item1.description') }}
                  </p>
                  <div class="grid grid-cols-2 md:grid-cols-4 gap-12">
                    <div class="group/item">
                      <div class="text-[#35F1FF] text-xl font-bold mb-4 group-hover/item:scale-105 transition-all duration-300">
                        {{ t('about.full.page.business.item1.subItem1.title') }}
                      </div>
                      <div class="text-zinc-300/80 text-sm relative">
                        {{ t('about.full.page.business.item1.subItem1.description') }}
                        <div class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"></div>
                      </div>
                    </div>
                    <div class="group/item">
                      <div class="text-[#35F1FF] text-xl font-bold mb-4 group-hover/item:scale-105 transition-all duration-300">
                        {{ t('about.full.page.business.item1.subItem2.title') }}
                      </div>
                      <div class="text-zinc-300/80 text-sm relative">
                        {{ t('about.full.page.business.item1.subItem2.description') }}
                        <div class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"></div>
                      </div>
                    </div>
                    <div class="group/item">
                      <div class="text-[#35F1FF] text-xl font-bold mb-4 group-hover/item:scale-105 transition-all duration-300">
                        {{ t('about.full.page.business.item1.subItem3.title') }}
                      </div>
                      <div class="text-zinc-300/80 text-sm relative">
                        {{ t('about.full.page.business.item1.subItem3.description') }}
                        <div class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"></div>
                      </div>
                    </div>
                    <div class="group/item">
                      <div class="text-[#35F1FF] text-xl font-bold mb-4 group-hover/item:scale-105 transition-all duration-300">
                        {{ t('about.full.page.business.item1.subItem4.title') }}
                      </div>
                      <div class="text-zinc-300/80 text-sm relative">
                        {{ t('about.full.page.business.item1.subItem4.description') }}
                        <div class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 提供存储解决方案 -->
              <div class="relative group">
                <div class="absolute -left-8 top-0 w-px h-full bg-[#35F1FF]/60 transition-all duration-300 group-hover:h-[calc(100%+2rem)] group-hover:-top-4"></div>
                <div class="pl-12">
                  <div class="flex items-center space-x-6 mb-12">
                    <div class="text-[#35F1FF] text-3xl font-bold tracking-tight">02</div>
                    <h3 class="text-white text-2xl font-bold tracking-wide">
                      {{ t('about.full.page.business.item2.title') }}
                    </h3>
                  </div>
                  <p class="text-zinc-300/80 text-sm leading-relaxed mb-16 max-w-2xl">
                    {{ t('about.full.page.business.item2.description') }}
                  </p>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-16">
                    <div class="group/item">
                      <h4 class="text-[#35F1FF] text-lg font-bold mb-8 relative inline-block tracking-wide">
                        {{ t('about.full.page.business.item2.consumer.title') }}
                        <div class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"></div>
                      </h4>
                      <div class="space-y-8">
                        <div class="flex items-center space-x-4 group/list">
                          <div class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"></div>
                          <span class="text-zinc-300/80 text-sm">{{ t('about.full.page.business.item2.consumer.item1') }}</span>
                        </div>
                        <div class="flex items-center space-x-4 group/list">
                          <div class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"></div>
                          <span class="text-zinc-300/80 text-sm">{{ t('about.full.page.business.item2.consumer.item2') }}</span>
                        </div>
                        <div class="flex items-center space-x-4 group/list">
                          <div class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"></div>
                          <span class="text-zinc-300/80 text-sm">{{ t('about.full.page.business.item2.consumer.item3') }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="group/item">
                      <h4 class="text-[#35F1FF] text-lg font-bold mb-8 relative inline-block tracking-wide">
                        {{ t('about.full.page.business.item2.industrial.title') }}
                        <div class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"></div>
                      </h4>
                      <div class="space-y-8">
                         <div class="flex items-center space-x-4 group/list">
                          <div class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"></div>
                          <span class="text-zinc-300/80 text-sm">{{ t('about.full.page.business.item2.industrial.item1') }}</span>
                        </div>
                        <div class="flex items-center space-x-4 group/list">
                          <div class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"></div>
                          <span class="text-zinc-300/80 text-sm">{{ t('about.full.page.business.item2.industrial.item2') }}</span>
                        </div>
                        <div class="flex items-center space-x-4 group/list">
                          <div class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"></div>
                          <span class="text-zinc-300/80 text-sm">{{ t('about.full.page.business.item2.industrial.item3') }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 技术支持与品质管理 -->
              <div class="relative group">
                <div class="absolute -left-8 top-0 w-px h-full bg-[#35F1FF]/60 transition-all duration-300 group-hover:h-[calc(100%+2rem)] group-hover:-top-4"></div>
                <div class="pl-12">
                  <div class="flex items-center space-x-6 mb-12">
                    <div class="text-[#35F1FF] text-3xl font-bold tracking-tight">03</div>
                    <h3 class="text-white text-2xl font-bold tracking-wide">
                      {{ t('about.full.page.business.item3.title') }}
                    </h3>
                  </div>
                  <p class="text-zinc-300/80 text-sm leading-relaxed mb-16 max-w-2xl">
                    {{ t('about.full.page.business.item3.description') }}
                  </p>
                   <div class="grid grid-cols-1 md:grid-cols-2 gap-16">
                    <div class="group/item">
                      <h4 class="text-[#35F1FF] text-xl font-bold mb-8 relative inline-block tracking-wide">
                        {{ t('about.full.page.business.item3.support.title') }}
                        <div class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"></div>
                      </h4>
                      <div class="space-y-8">
                        <div class="flex items-center space-x-4 group/list">
                          <div class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"></div>
                          <span class="text-zinc-300/80 text-sm">{{ t('about.full.page.business.item3.support.item1') }}</span>
                        </div>
                         <div class="flex items-center space-x-4 group/list">
                          <div class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"></div>
                          <span class="text-zinc-300/80 text-sm">{{ t('about.full.page.business.item3.support.item2') }}</span>
                        </div>
                        <div class="flex items-center space-x-4 group/list">
                          <div class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"></div>
                          <span class="text-zinc-300/80 text-sm">{{ t('about.full.page.business.item3.support.item3') }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="group/item">
                       <h4 class="text-[#35F1FF] text-xl font-bold mb-8 relative inline-block tracking-wide">
                        {{ t('about.full.page.business.item3.quality.title') }}
                        <div class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"></div>
                      </h4>
                      <div class="space-y-8">
                         <div class="flex items-center space-x-4 group/list">
                          <div class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"></div>
                          <span class="text-zinc-300/80 text-sm">{{ t('about.full.page.business.item3.quality.item1') }}</span>
                        </div>
                        <div class="flex items-center space-x-4 group/list">
                          <div class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"></div>
                          <span class="text-zinc-300/80 text-sm">{{ t('about.full.page.business.item3.quality.item2') }}</span>
                        </div>
                        <div class="flex items-center space-x-4 group/list">
                          <div class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"></div>
                          <span class="text-zinc-300/80 text-sm">{{ t('about.full.page.business.item3.quality.item3') }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 创新的研发与品质管理 -->
              <div class="relative group">
                <div class="absolute -left-8 top-0 w-px h-full bg-[#35F1FF]/60 transition-all duration-300 group-hover:h-[calc(100%+2rem)] group-hover:-top-4"></div>
                <div class="pl-12">
                  <div class="flex items-center space-x-6 mb-12">
                    <div class="text-[#35F1FF] text-3xl font-bold tracking-tight">04</div>
                    <h3 class="text-white text-2xl font-bold tracking-wide">
                      {{ t('about.full.page.business.item4.title') }}
                    </h3>
                  </div>
                  <p class="text-zinc-300/80 text-sm leading-relaxed max-w-2xl">
                    {{ t('about.full.page.business.item4.description') }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 经营理念 -->
        <div
          id="philosophy"
          class="section-block w-full bg-gradient-to-b from-emerald-900/60 via-emerald-800/40 to-emerald-900/60 py-40"
          ref="philosophyRef"
        >
          <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-32 animate-fade-in">
              <h2
                class="section-title text-emerald-400 text-sm font-bold mb-4 tracking-[0.2em] animate-slide-in-left"
              >
                {{ t('about.full.page.philosophy.sectionTitle') }}
              </h2>
              <h1
                class="text-zinc-300 text-3xl font-bold mb-6 tracking-wider animate-slide-in-right"
              >
                {{ t('about.full.page.philosophy.titleEn') }}
              </h1>
              <div
                class="w-16 h-px bg-emerald-400/60 mx-auto animate-line-expand"
              ></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-24">
              <div class="relative">
                <div class="absolute -left-4 top-0 w-px h-full bg-[#35F1FF]/60"></div>
                <div class="pl-8">
                  <h3 class="text-white text-xl font-bold mb-6 tracking-wide">
                    {{ t('about.full.page.philosophy.item1.title') }}
                  </h3>
                  <p class="text-zinc-300/80 text-sm leading-relaxed">
                    {{ t('about.full.page.philosophy.item1.description') }}
                  </p>
                </div>
              </div>
              <div class="relative">
                <div class="absolute -left-4 top-0 w-px h-full bg-[#35F1FF]/60"></div>
                <div class="pl-8">
                  <h3 class="text-white text-xl font-bold mb-6 tracking-wide">
                    {{ t('about.full.page.philosophy.item2.title') }}
                  </h3>
                  <p class="text-zinc-300/80 text-sm leading-relaxed">
                    {{ t('about.full.page.philosophy.item2.description') }}
                  </p>
                </div>
              </div>
              <div class="relative">
                <div class="absolute -left-4 top-0 w-px h-full bg-[#35F1FF]/60"></div>
                <div class="pl-8">
                  <h3 class="text-white text-xl font-bold mb-6 tracking-wide">
                    {{ t('about.full.page.philosophy.item3.title') }}
                  </h3>
                  <p class="text-zinc-300/80 text-sm leading-relaxed">
                    {{ t('about.full.page.philosophy.item3.description') }}
                  </p>
                </div>
              </div>
            </div>

            <div class="mt-32 text-center">
              <p class="text-zinc-300/80 text-sm leading-relaxed max-w-3xl mx-auto">
                {{ t('about.full.page.philosophy.summary1') }}
              </p>
              <p class="text-zinc-300/80 text-sm leading-relaxed max-w-3xl mx-auto mt-8">
                {{ t('about.full.page.philosophy.summary2') }}
              </p>
            </div>
          </div>
        </div>

        <!-- 公司信息 -->
        <div
          id="company-info"
          class="section-block w-full bg-gradient-to-b from-rose-900/60 via-rose-800/40 to-rose-900/60 py-48"
          ref="companyInfoRef"
        >
          <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-24 animate-fade-in">
              <h2
                class="section-title text-rose-400 text-sm font-bold mb-4 tracking-[0.2em] animate-slide-in-left"
              >
                {{ t('about.full.page.info.sectionTitle') }}
              </h2>
              <h1
                class="text-zinc-300 text-3xl font-bold mb-6 tracking-wider animate-slide-in-right"
              >
                {{ t('about.full.page.info.titleEn') }}
              </h1>
              <div
                class="w-16 h-px bg-rose-400/60 mx-auto animate-line-expand"
              ></div>
            </div>

            <div class="max-w-3xl mx-auto">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-16">
                <div class="space-y-10">
                  <div class="flex items-start">
                    <span class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm">{{ t('about.full.page.info.nameLabel') }}</span>
                    <div class="text-zinc-300">
                      <div>{{ t('about.companyInfo.companyName') }}</div>
                      <div class="text-xs text-zinc-400">{{ t('about.companyInfo.englishName') }}</div>
                    </div>
                  </div>
                  <div class="flex items-start">
                    <span class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm">{{ t('about.full.page.info.establishedLabel') }}</span>
                    <span class="text-zinc-300">{{ t('about.companyInfo.established') }}</span>
                  </div>
                  <div class="flex items-start">
                    <span class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm">{{ t('about.full.page.info.ceoLabel') }}</span>
                    <span class="text-zinc-300">{{ t('about.companyInfo.ceo') }}</span>
                  </div>
                  <div class="flex items-start">
                    <span class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm">{{ t('about.full.page.info.employeesLabel') }}</span>
                    <span class="text-zinc-300">{{ t('about.companyInfo.employees') }}</span>
                  </div>
                </div>
                <div class="space-y-10">
                  <div class="flex items-start">
                    <span class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm">{{ t('about.full.page.info.locationLabel') }}</span>
                    <div class="text-zinc-300">
                      <div>{{ t('about.full.page.info.locationValue1') }}</div>
                      <div class="text-xs text-zinc-400" v-html="t('about.companyInfo.location').replace(/\n/g, '<br />')"></div>
                    </div>
                  </div>
                  <div class="flex items-start">
                    <span class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm">{{ t('about.full.page.info.businessLabel') }}</span>
                    <span class="text-zinc-300">{{ t('about.full.page.info.businessValue') }}</span>
                  </div>
                  <div class="flex items-start">
                    <span class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm">{{ t('about.full.page.info.telLabel') }}</span>
                    <span class="text-zinc-300">{{ companyInfoData.tel }}</span>
                  </div>
                  <div class="flex items-start">
                    <span class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm">{{ t('about.full.page.info.emailLabel') }}</span>
                    <span class="text-zinc-300">{{ companyInfoData.email }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 产品咨询 -->
        <div id="contact" ref="contactRef" class="max-w-full h-[240px] md:h-[480px] bg-black/80 md:block">
          <div class="h-full relative">
            <div
              class="absolute top-0 left-0 w-full h-full flex flex-col gap-4 md:gap-6 items-center justify-center z-10 px-4"
            >
              <h1
                class="text-center text-white font-normal text-lg sm:text-xl md:text-3xl"
              >
                {{ t("products.consultation") }}
              </h1>
              <nuxt-link
                :to="`${homepagePath}/contact`"
                class="w-28 h-9 md:w-40 md:h-11 bg-zinc-300/10 rounded-lg outline outline-1 flex items-center justify-center gap-2 outline-white/20 backdrop-blur-[10px] cursor-pointer hover:bg-zinc-300/20 transition-colors duration-200"
              >
                <span class="text-sm md:text-base font-normal">{{
                  t("products.consultation_button")
                }}</span>
                <i class="icon-arrow-right text-xs md:text-sm font-normal"></i>
              </nuxt-link>
            </div>
            <img
              v-if="isMobile"
              :src="videoWebp"
              alt="video"
              class="w-full h-full object-cover opacity-20"
            />
            <video
              v-else
              :src="videoSrc"
              autoplay
              muted
              loop
              :poster="videoWebp"
              class="w-full h-full object-cover opacity-20"
            ></video>
          </div>
        </div>
      </div>
    </ErrorBoundary>
  </div>
</template>

<script setup lang="ts">
/**
 * 公司简介页面
 * 展示公司基本信息、理念等
 */
import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
import { useErrorHandler } from "~/composables/useErrorHandler";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
// 是否移动端
const breakpoints = useBreakpoints(breakpointsTailwind);
const isMobile = breakpoints.smaller("md");

import video from "@/assets/videos/video.mp4";
import videoWebp from "@/assets/videos/video.webp";
const videoSrc = ref(video);
// 公司信息接口定义
interface CompanyInfo {
  email: string;
  tel: string;
  fax: string;
}

const homepagePath = computed(() => {
  return locale.value === "zh" ? "" : `/${locale.value}`;
});

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

// 滚动相关
const scrollY = ref(0);
const companyProfileRef = ref<HTMLElement | null>(null);
const businessContentRef = ref<HTMLElement | null>(null);
const philosophyRef = ref<HTMLElement | null>(null);
const companyInfoRef = ref<HTMLElement | null>(null);
const contactRef = ref<HTMLElement | null>(null);

// 定义区块信息 (使用 computed 确保 t 函数能响应语言切换)
const sections = computed(() => [
  { id: "company-profile", name: t('about.full.nav.companyProfile') },
  { id: "business-content", name: t('about.full.nav.businessContent') },
  { id: "philosophy", name: t('about.full.nav.philosophy') },
  { id: "company-info", name: t('about.full.nav.companyInfo') },
  { id: "contact", name: t('about.full.nav.contact') },
]);


// 当前激活的区块
const currentSection = ref("company-profile"); // 默认激活第一个

// 滚动到指定区块
const scrollToSection = (id: string) => {
  const element = document.getElementById(id);
  if (element) {
    element.scrollIntoView({ behavior: "smooth" });
  }
};

// 监听滚动
onMounted(() => {
  // 使用 Intersection Observer 优化性能和准确性
  const observerOptions = {
    root: null, // 视口
    rootMargin: '-20% 0px -20% 0px', // 提前触发动画
    threshold: [0, 0.1, 0.2, 0.3] // 多个阈值，更灵敏
  };

  const observerCallback = (entries: IntersectionObserverEntry[]) => {
    entries.forEach(entry => {
      if (entry.isIntersecting && entry.intersectionRatio > 0.1) {
        currentSection.value = entry.target.id;
        entry.target.classList.add('animate-in');
      }
    });
  };

  const observer = new IntersectionObserver(observerCallback, observerOptions);
  
  // 延迟确保 ref 已被正确赋值
  nextTick(() => {
    const sectionElements = [
      companyProfileRef.value,
      businessContentRef.value,
      philosophyRef.value,
      companyInfoRef.value,
      contactRef.value
    ];
    sectionElements.forEach(el => {
      if (el) {
        observer.observe(el);
        
        // 检查是否已经在视口中，如果是则立即显示
        const rect = el.getBoundingClientRect();
        const windowHeight = window.innerHeight;
        if (rect.top < windowHeight * 0.8 && rect.bottom > 0) {
          el.classList.add('animate-in');
        }
      }
    });
  });

  window.addEventListener("scroll", handleLegacyScroll);

  onUnmounted(() => {
    window.removeEventListener("scroll", handleLegacyScroll);
    observer.disconnect();
  });
});

// 处理滚动 (保留用于横幅视差效果和备用动画触发)
const handleLegacyScroll = () => {
  scrollY.value = window.scrollY;
  
  // 备用动画触发机制
  const sections = [
    companyProfileRef.value,
    businessContentRef.value, 
    philosophyRef.value,
    companyInfoRef.value,
    contactRef.value
  ];
  
  sections.forEach(section => {
    if (section && !section.classList.contains('animate-in')) {
      const rect = section.getBoundingClientRect();
      const windowHeight = window.innerHeight;
      
      // 当元素进入视口的80%时触发动画
      if (rect.top < windowHeight * 0.8 && rect.bottom > 0) {
        section.classList.add('animate-in');
      }
    }
  });
};

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

<style scoped>
/* 商务风格背景图样式 */
.bg-business-overlay {
  background-image: url('/assets/images/about.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.3;
  transition: all 0.5s ease;
}

@media (max-width: 768px) {
  .bg-business-overlay {
    background-attachment: scroll; /* 移动端不支持 fixed */
    opacity: 0.2;
  }
}

/* 悬停效果 */
#company-profile:hover .bg-business-overlay {
  opacity: 0.4;
  transform: scale(1.02);
}

#company-profile:hover {
  background: linear-gradient(to bottom, rgba(53, 241, 255, 0.08), rgba(53, 241, 255, 0.04));
}

/* 基础动画类 */
.section-block {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 优化动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  opacity: 0;
  animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fade-in-delay {
  opacity: 0;
  animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

@keyframes lineExpand {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 4rem;
    opacity: 1;
  }
}

.animate-line-expand {
  width: 0;
  opacity: 0;
  animation: lineExpand 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-in-left {
  opacity: 0;
  animation: slideInLeft 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-in-right {
  opacity: 0;
  animation: slideInRight 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 模块特定的样式 */
.section-block {
  position: relative;
  transition: all 0.5s ease;
}

.section-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.03),
    transparent
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.section-block:hover::before {
  opacity: 1;
}

/* 为每个模块添加特定的样式 */
#company-profile {
  background: linear-gradient(to bottom, rgba(53, 241, 255, 0.1), transparent);
  border-top: 1px solid rgba(53, 241, 255, 0.2);
  border-bottom: 1px solid rgba(53, 241, 255, 0.2);
}

#business-content {
  background: linear-gradient(to bottom, rgba(99, 102, 241, 0.1), transparent);
  border-top: 1px solid rgba(99, 102, 241, 0.1);
  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}

#philosophy {
  background: linear-gradient(to bottom, rgba(52, 211, 153, 0.1), transparent);
  border-top: 1px solid rgba(52, 211, 153, 0.1);
  border-bottom: 1px solid rgba(52, 211, 153, 0.1);
}

#company-info {
  background: linear-gradient(to bottom, rgba(251, 113, 133, 0.1), transparent);
  border-top: 1px solid rgba(251, 113, 133, 0.1);
  border-bottom: 1px solid rgba(251, 113, 133, 0.1);
}

#contact {
  background: linear-gradient(to bottom, rgba(251, 191, 36, 0.1), transparent);
  border-top: 1px solid rgba(251, 191, 36, 0.1);
  border-bottom: 1px solid rgba(251, 191, 36, 0.1);
}

/* 优化滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(53, 241, 255, 0.3);
  border-radius: 3px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(53, 241, 255, 0.5);
}

/* 优化背景装饰 */
.bg-decoration {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
}

.bg-decoration-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  transition: all 0.5s ease;
}

/* 添加模块分隔线 */
.section-block::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  opacity: 0.5;
}

/* 优化标题颜色 */
#company-profile h2 {
  color: #35f1ff;
}
#business-content h2 {
  color: #818cf8;
}
#philosophy h2 {
  color: #34d399;
}
#company-info h2 {
  color: #fb7185;
}
#contact h2 {
  color: #fbbf24;
}

/* 优化装饰线颜色 */
#company-profile .animate-line-expand {
  background: rgba(53, 241, 255, 0.6);
}
#business-content .animate-line-expand {
  background: rgba(99, 102, 241, 0.6);
}
#philosophy .animate-line-expand {
  background: rgba(52, 211, 153, 0.6);
}
#company-info .animate-line-expand {
  background: rgba(251, 113, 133, 0.6);
}
#contact .animate-line-expand {
  background: rgba(251, 191, 36, 0.6);
}

/* 响应式优化 */
@media (max-width: 1024px) {
  .anchor-nav {
    display: none;
  }
}

@media (max-width: 768px) {
  .max-w-2xl,
  .max-w-3xl,
  .max-w-4xl {
    max-width: 100%;
  }

  .grid-cols-2, .grid-cols-3 {
    grid-template-columns: 1fr;
  }

  .grid-cols-4 {
    grid-template-columns: 1fr 1fr;
  }

  .gap-32 {
    gap: 3rem;
  }
}

@media (max-width: 640px) {
  .py-48 { padding-top: 5rem; padding-bottom: 5rem; }
  .py-40 { padding-top: 4rem; padding-bottom: 4rem; }
  .mb-40 { margin-bottom: 6rem; }
  .mb-32 { margin-bottom: 5rem; }
  .space-y-48 { gap: 6rem; }

  .text-3xl { font-size: 1.875rem; }
  .text-2xl { font-size: 1.5rem; }

  .pl-12 { padding-left: 2rem; }
  .pl-8 { padding-left: 1.5rem; }
}

</style>