hjc-web/app/templates/template-10/pages/Contact.vue

<template>
  <div class="min-h-screen bg-[var(--t10-bg-soft)] pb-16">
    <!-- Banner -->
    <section
      class="t10-page-banner"
      style="background-image: url('/images/template-10/contact-banner.jpg'); min-height: 300px;"
    >
      <div class="t10-container t10-banner-inner">
        <nav class="t10-breadcrumb mb-3">
          <NuxtLink to="/">首页</NuxtLink>
          <span class="mx-2">/</span>
          <span class="text-white">联系我们</span>
        </nav>
        <h1 class="text-3xl sm:text-4xl font-bold text-white mb-2">联系我们</h1>
        <p class="text-lg text-white/80 tracking-[0.2em] uppercase">Contact Us</p>
      </div>
    </section>

    <!-- 子导航 -->
    <div class="border-b border-[var(--t10-border)] bg-white">
      <div class="t10-container">
        <div class="flex flex-wrap items-center justify-between py-4 gap-4">
          <nav class="flex flex-wrap gap-6 text-sm lg:pl-[460px]">
            <NuxtLink
              v-for="link in subNavs"
              :key="link.path"
              :to="link.path"
              class="text-[var(--t10-text-secondary)] hover:text-[var(--t10-primary)] transition-colors"
              :class="{ '!text-[var(--t10-primary)] font-medium': route.path === link.path }"
            >
              {{ link.title }}
            </NuxtLink>
          </nav>
          <nav class="text-xs text-[var(--t10-muted-2)]">
            <NuxtLink to="/" class="hover:text-[var(--t10-primary)]">首页</NuxtLink>
            <span class="mx-2">/</span>
            <span class="text-[var(--t10-text)]">联系我们</span>
          </nav>
        </div>
      </div>
    </div>

    <div class="t10-container py-12 lg:py-16">
      <div class="grid lg:grid-cols-5 gap-8">
        <!-- 联系信息卡片 -->
        <div class="lg:col-span-3 bg-white rounded-2xl border border-[var(--t10-border)] overflow-hidden shadow-sm">
          <div class="grid md:grid-cols-2">
            <div class="h-[280px] md:h-full min-h-[280px]">
              <img
                src="/images/template-10/contact-chip.jpg"
                alt="公司产品"
                class="w-full h-full object-cover"
              >
            </div>
            <div class="p-8 lg:p-10 flex flex-col justify-center">
              <h2 class="text-xl font-bold text-[var(--t10-text-strong)] mb-1">
                {{ siteName || '深圳市创芯存储技术有限公司' }}
              </h2>
              <p class="text-sm text-[var(--t10-muted-2)] mb-8">{{ englishName || 'C-MVP Electronics Co.,Ltd.' }}</p>

              <ul class="space-y-5 text-sm">
                <li class="flex items-start gap-3">
                  <span class="text-[var(--t10-muted-2)] w-10 flex-shrink-0">电话</span>
                  <a v-if="phone" :href="`tel:${phone}`" class="text-[var(--t10-text)] hover:text-[var(--t10-primary)] font-medium">{{ phone }}</a>
                  <span v-else class="text-[var(--t10-muted)]">—</span>
                </li>
                <li class="flex items-start gap-3">
                  <span class="text-[var(--t10-muted-2)] w-10 flex-shrink-0">邮箱</span>
                  <a v-if="email" :href="`mailto:${email}`" class="text-[var(--t10-text)] hover:text-[var(--t10-primary)] font-medium break-all">{{ email }}</a>
                  <span v-else class="text-[var(--t10-muted)]">—</span>
                </li>
                <li class="flex items-start gap-3">
                  <span class="text-[var(--t10-muted-2)] w-10 flex-shrink-0">网址</span>
                  <a v-if="siteUrl" :href="siteUrl" target="_blank" rel="noopener" class="text-[var(--t10-text)] hover:text-[var(--t10-primary)] font-medium break-all">{{ siteUrl }}</a>
                  <span v-else class="text-[var(--t10-muted)]">—</span>
                </li>
                <li class="flex items-start gap-3">
                  <span class="text-[var(--t10-muted-2)] w-10 flex-shrink-0">地址</span>
                  <span class="text-[var(--t10-text)] font-medium">{{ address || '—' }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 在线留言 -->
        <div class="lg:col-span-2 bg-white rounded-2xl border border-[var(--t10-border)] p-8 shadow-sm">
          <h2 class="text-xl font-bold text-[var(--t10-text-strong)] mb-6">在线留言</h2>
          <ContactForm
            input-class="w-full px-4 py-2.5 border border-[var(--t10-border)] rounded-lg focus:outline-none focus:border-[var(--t10-primary)] bg-[var(--t10-bg-soft)] placeholder-[var(--t10-muted)]"
            submit-class="w-full px-6 py-3 bg-[var(--t10-primary)] text-white font-semibold rounded-lg hover:bg-[var(--t10-primary-dark)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            label-class="block text-sm font-medium text-[var(--t10-text)] mb-1"
            :accent="config.themeConfig.primaryColor"
          />
        </div>
      </div>

      <!-- 附件 -->
      <PageAttachments
        v-if="contactAttachments.length"
        :attachments="contactAttachments"
        class="mt-10"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 模板 10 - 联系我们页（创芯存储科技蓝风格）
 */
import type { PageDetail, PageAttachment } from '~/types'
import config from '../config'

const { siteInfo, siteName, phone, email, address, fetchSiteInfo } = useSite()
const route = useRoute()

await fetchSiteInfo()

const { data: contactPage } = await useFetch<PageDetail>('/api/page/detail', { query: { path: 'contact' } })
const contactAttachments = computed<PageAttachment[]>(() => contactPage.value?.attachments || [])

const englishName = computed(() => {
  const cfg = siteInfo.value?.config as Record<string, unknown> | undefined
  return cfg?.englishName as string | undefined
})

const siteUrl = computed(() => {
  const url = siteInfo.value?.domain || ''
  if (!url) return ''
  return url.startsWith('http') ? url : `https://${url}`
})

const subNavs = [
  { title: '关于创芯', path: '/about' },
  { title: '新闻资讯', path: '/article' },
  { title: '联系我们', path: '/contact' }
]
</script>