hanye-website/pages/support/faq.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-16">
        <div class="animate-spin h-8 w-8 border-2 border-cyan-400 border-t-transparent rounded-full"></div>
      </div>

      <div v-else class="pb-16">
        <!-- 面包屑导航 -->
        <div class="max-w-full xl:px-8 lg:px-6 md:px-4 px-4 mt-6 mb-8">
          <div class="max-w-screen-2xl mx-auto">
            <nuxt-link
              :to="`${homepagePath}/`"
              class="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>
            <nuxt-link
              :to="`${homepagePath}/support`"
              class="text-white/60 text-base font-normal hover:text-white transition-colors duration-300"
            >
              {{ t("support.title") }}
            </nuxt-link>
            <span class="text-white/60 text-base font-normal px-2"> / </span>
            <span class="text-white text-base font-normal">
              {{ t("support.faq.title") }}
            </span>
          </div>
        </div>

        <!-- 页面头部 -->
        <div class="max-w-full mb-16 xl:px-8 lg:px-6 md:px-4 px-4">
          <div class="max-w-screen-2xl mx-auto">
            <div class="text-center">
              <div class="inline-flex items-center px-4 py-2 bg-cyan-400/10 border border-cyan-400/30 rounded-full mb-6">
                <svg class="w-5 h-5 text-cyan-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="text-cyan-400 font-medium text-sm">FAQ CENTER</span>
              </div>
              <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">
                {{ t("support.faq.title") }}
              </h1>
              <p class="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed mb-8">
                {{ t("support.faq.description") }}
              </p>
              
              <!-- 快速统计 -->
              <div class="grid grid-cols-3 md:grid-cols-3 gap-6 max-w-2xl mx-auto">
                <div class="text-center">
                  <div class="text-2xl font-bold text-cyan-400 mb-1">90%</div>
                  <div class="text-xs text-gray-400">{{ t("support.faq.coverageRate") }}</div>
                </div>
                <div class="text-center">
                  <div class="text-2xl font-bold text-cyan-400 mb-1">24/7</div>
                  <div class="text-xs text-gray-400">{{ t("support.faq.availability") }}</div>
                </div>
                <div class="text-center">
                  <div class="text-2xl font-bold text-cyan-400 mb-1">{{ locale === 'zh' ? '即时' : locale === 'en' ? 'Instant' : 'インスタント' }}</div>
                  <div class="text-xs text-gray-400">{{ locale === 'zh' ? '获取答案' : locale === 'en' ? 'Get Answers' : '回答を取得' }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- FAQ内容区域 -->
        <div class="max-w-full xl:px-8 lg:px-6 md:px-4 px-4">
          <div class="max-w-screen-2xl mx-auto">
            <div class="bg-gradient-to-br from-zinc-900 to-zinc-800/80 rounded-xl p-8 md:p-10">
              <FaqContent />
            </div>
          </div>
        </div>

        <!-- 底部帮助区域 -->
        <div class="max-w-full xl:px-8 lg:px-6 md:px-4 px-4 mt-16">
          <div class="max-w-screen-2xl mx-auto">
            <div class="bg-gradient-to-r from-zinc-900 via-zinc-800/90 to-zinc-900 border border-zinc-700 rounded-xl p-8 md:p-10 text-center relative overflow-hidden">
              <div class="absolute inset-0 bg-grid-pattern opacity-5"></div>
              <div class="relative z-10">
                <h2 class="text-2xl md:text-3xl font-bold text-white mb-4">
                  {{ locale === 'zh' ? '未找到您需要的答案？' : locale === 'en' ? 'Can\'t find what you\'re looking for?' : 'お探しの回答が見つかりませんか？' }}
                </h2>
                <p class="text-gray-300 mb-8 max-w-2xl mx-auto text-lg leading-relaxed">
                  {{ locale === 'zh' ? '我们的技术支持专家随时准备为您提供个性化的帮助和专业解答。' : locale === 'en' ? 'Our technical support experts are ready to provide personalized help and professional answers.' : '私たちの技術サポート専門家が、個別のヘルプと専門的な回答を提供する準備ができています。' }}
                </p>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
                  <div class="text-center">
                    <div class="w-12 h-12 bg-cyan-400/20 rounded-lg flex items-center justify-center mx-auto mb-3">
                      <svg class="w-6 h-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                      </svg>
                    </div>
                    <h3 class="font-semibold text-white mb-2">
                      {{ locale === 'zh' ? '邮件支持' : locale === 'en' ? 'Email Support' : 'メールサポート' }}
                    </h3>
                    <p class="text-gray-400 text-sm">
                      {{ locale === 'zh' ? '详细问题描述' : locale === 'en' ? 'Detailed problem description' : '詳細な問題の説明' }}
                    </p>
                  </div>
                  <div class="text-center">
                    <div class="w-12 h-12 bg-cyan-400/20 rounded-lg flex items-center justify-center mx-auto mb-3">
                      <svg class="w-6 h-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                      </svg>
                    </div>
                    <h3 class="font-semibold text-white mb-2">
                      {{ locale === 'zh' ? '在线客服' : locale === 'en' ? 'Live Chat' : 'ライブチャット' }}
                    </h3>
                    <p class="text-gray-400 text-sm">
                      {{ locale === 'zh' ? '即时沟通解答' : locale === 'en' ? 'Instant communication' : 'インスタントコミュニケーション' }}
                    </p>
                  </div>
                  <div class="text-center">
                    <div class="w-12 h-12 bg-cyan-400/20 rounded-lg flex items-center justify-center mx-auto mb-3">
                      <svg class="w-6 h-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                      </svg>
                    </div>
                    <h3 class="font-semibold text-white mb-2">
                      {{ locale === 'zh' ? '电话支持' : locale === 'en' ? 'Phone Support' : '電話サポート' }}
                    </h3>
                    <p class="text-gray-400 text-sm">
                      {{ locale === 'zh' ? '直接语音交流' : locale === 'en' ? 'Direct voice communication' : '直接音声通信' }}
                    </p>
                  </div>
                </div>

                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                  <nuxt-link
                    :to="`${homepagePath}/contact`"
                    class="inline-flex items-center px-8 py-4 bg-cyan-400 text-zinc-900 font-semibold rounded-lg hover:bg-cyan-500 transition-colors duration-200"
                  >
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                    </svg>
                    {{ t("support.services.contactSupport") }}
                  </nuxt-link>
                  <nuxt-link
                    :to="`${homepagePath}/support`"
                    class="inline-flex items-center px-8 py-4 border border-zinc-600 text-white font-semibold rounded-lg hover:bg-zinc-800 hover:border-cyan-400/40 transition-all duration-200"
                  >
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>
                    </svg>
                    {{ locale === 'zh' ? '浏览支持中心' : locale === 'en' ? 'Browse Support Center' : 'サポートセンターを見る' }}
                  </nuxt-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ErrorBoundary>
  </div>
</template>

<script setup lang="ts">
/**
 * FAQ详情页面
 * 专业的常见问题解答页面
 */
import { useErrorHandler } from "~/composables/useErrorHandler";

const { error, isLoading } = useErrorHandler();
const { t, locale } = useI18n();

// 计算首页路径
const homepagePath = computed(() => {
  return locale.value === "zh" ? "" : `/${locale.value}`;
});

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

<style scoped>
/* 过渡效果 */
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-200 {
  transition-duration: 200ms;
}

/* 悬停效果 */
.hover\:bg-blue-700:hover {
  background-color: #1d4ed8;
}

.hover\:bg-gray-600:hover {
  background-color: #4b5563;
}

.hover\:text-blue-400:hover {
  color: #60a5fa;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .flex-col {
    align-items: stretch;
  }
  
  .flex-col > * {
    width: 100%;
    justify-content: center;
  }
}
</style>