hjc-web/app/templates/template-07/pages/About.vue

<template>
  <div>
    <!-- Hero 横幅 -->
    <section class="relative overflow-hidden bg-gradient-to-r from-blue-700 to-blue-500">
      <div class="absolute -top-20 -right-16 w-72 h-72 rounded-full bg-white/10 blur-3xl" />
      <div class="absolute -bottom-24 left-10 w-64 h-64 rounded-full bg-black/10 blur-3xl" />
      <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16 relative z-10">
        <nav class="text-xs text-white/70 mb-3" aria-label="面包屑">
          <NuxtLink to="/" class="hover:text-white transition-colors">首页</NuxtLink>
          <span class="mx-2">/</span>
          <span class="text-white">关于我们</span>
        </nav>
        <h1 class="text-3xl sm:text-4xl font-bold text-white">关于我们</h1>
        <p class="text-white/75 mt-3 max-w-2xl leading-relaxed">
          {{ slogan || '汇全咨之力·吉政企发展·采专业服务' }}
        </p>
      </div>
    </section>

    <!-- 公司简介 -->
    <section class="py-16 lg:py-20 bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-5xl mx-auto">
          <div class="grid lg:grid-cols-2 gap-12 items-center">
            <div class="order-1 lg:order-2">
              <span class="inline-block px-3 py-1 rounded-full bg-blue-50 text-blue-600 text-sm font-semibold mb-4">公司简介</span>
              <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-6">汇吉采——政企信赖的全生命周期咨询伙伴</h2>
              <div class="text-gray-600 leading-relaxed mb-8 space-y-4">
                <p v-if="introText">{{ introText }}</p>
                <template v-else>
                  <p>我们深耕企业软件与行业信息化领域，聚焦客户需求，提供从咨询规划、产品设计到研发交付、运维支持的一站式服务。</p>
                  <p>以稳定可靠的架构与持续优化的服务，帮助客户降低数字化门槛、提升运营效率，实现可持续的业务增长。</p>
                </template>
              </div>
              <div class="flex flex-wrap gap-3 mb-8">
                <span v-for="tag in tags" :key="tag"
                      class="px-3 py-1.5 rounded-full bg-blue-50 border border-blue-100 text-sm text-gray-700">{{ tag }}</span>
              </div>
              <NuxtLink to="/contact" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors shadow-sm">
                联系我们
                <svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
              </NuxtLink>
            </div>
            <!-- 右侧装饰图区域：有 coverImage 时显示实际图片，否则显示 CSS 渐变装饰块 -->
            <div class="order-2 lg:order-1 rounded-2xl overflow-hidden shadow-lg"
                 :class="coverImage ? '' : 'bg-gradient-to-br from-blue-100 to-blue-50 flex items-center justify-center min-h-[280px] lg:min-h-[384px]'">
              <img v-if="coverImage" :src="coverImage" alt="关于我们" class="w-full h-72 lg:h-96 object-cover">
              <div v-else class="p-8 text-center">
                <svg class="w-20 h-20 mx-auto text-blue-300 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                </svg>
                <p class="text-blue-400 font-medium">{{ pageTitle }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心优势 -->
    <section class="py-16 lg:py-20 bg-gray-50">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-5xl mx-auto">
          <div class="text-center mb-12">
            <span class="inline-block px-3 py-1 rounded-full bg-white text-blue-600 text-sm font-semibold mb-4">核心优势</span>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">为什么选择我们</h2>
            <p class="text-gray-500 max-w-2xl mx-auto">从技术到服务，全链路保障客户的数字化投资回报</p>
          </div>
          <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <div v-for="(item, index) in advantages" :key="item.title"
                 class="bg-white rounded-2xl p-7 shadow-sm hover:shadow-md transition-shadow border border-gray-100 group">
              <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-5 bg-blue-50">
                <svg class="w-7 h-7 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" /></svg>
              </div>
              <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ item.title }}</h3>
              <p class="text-sm text-gray-500 leading-relaxed">{{ item.desc }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 资质与荣誉 -->
    <section class="py-16 lg:py-20 bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-5xl mx-auto">
          <div class="text-center mb-12">
            <span class="inline-block px-3 py-1 rounded-full bg-blue-50 text-blue-600 text-sm font-semibold mb-4">资质与荣誉</span>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">权威认证，实力背书</h2>
            <p class="text-gray-500 max-w-2xl mx-auto">全面通过国际标准管理体系认证与行业信用评价，以规范运营筑牢发展基石</p>
          </div>
          <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <div v-for="(h, index) in honors" :key="h.title"
                 class="bg-gray-50 rounded-2xl p-7 border border-gray-100 hover:shadow-md transition-shadow">
              <div class="flex items-center gap-3 mb-3">
                <span class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center text-blue-600 font-bold">{{ index + 1 }}</span>
                <h3 class="text-lg font-semibold text-gray-900">{{ h.title }}</h3>
              </div>
              <p class="text-sm text-gray-500 leading-relaxed">{{ h.desc }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 数据实力 -->
    <section class="py-16 lg:py-20 bg-gray-50">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-5xl mx-auto">
          <div class="text-center mb-12">
            <span class="inline-block px-3 py-1 rounded-full bg-white text-blue-600 text-sm font-semibold mb-4">数据实力</span>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">用结果说话</h2>
            <p class="text-gray-500 max-w-2xl mx-auto">沉淀多年的交付能力与行业口碑，是我们最扎实的底气</p>
          </div>
          <div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
            <div v-for="(s, index) in stats" :key="s.label"
                 class="bg-white rounded-2xl p-8 text-center shadow-sm border border-gray-100">
              <div class="text-gray-900 font-bold text-3xl sm:text-4xl">
                {{ s.value }}<span class="text-blue-600">{{ s.suffix }}</span>
              </div>
              <div class="text-sm text-gray-500 mt-2">{{ s.label }}</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CMS 富文本扩展区（仅当后台有录入内容时显示） -->
    <section v-if="hasContent" class="py-16 lg:py-20 bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-5xl mx-auto">
          <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="p-6 sm:p-10">
              <div class="flex items-center gap-3 mb-6 pb-6 border-b border-gray-100">
                <span class="w-1.5 h-6 rounded-full bg-blue-600" />
                <h2 class="text-xl sm:text-2xl font-bold text-gray-900">{{ pageData?.title || '详细介绍' }}</h2>
                <span v-if="updateTimeText" class="sm:ml-auto text-sm text-gray-400">
                  更新于 {{ updateTimeText }}
                </span>
              </div>
              <RichText :content="pageData?.content" />
              <PageAttachments
                v-if="pageData?.attachments?.length"
                :attachments="pageData.attachments"
              />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系 CTA -->
    <section class="py-16 lg:py-20 bg-gradient-to-r from-blue-700 to-blue-500 relative overflow-hidden">
      <div class="absolute -top-20 -right-20 w-80 h-80 rounded-full bg-white/10 blur-3xl" />
      <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <h2 class="text-2xl sm:text-3xl font-bold text-white mb-4">有项目需求或合作意向？</h2>
        <p class="text-white/80 max-w-2xl mx-auto mb-8">立即联系我们，获取专属方案与产品演示</p>
        <div class="flex flex-wrap items-center justify-center gap-4">
          <NuxtLink
            to="/contact"
            class="inline-flex items-center px-8 py-3 bg-white text-blue-700 font-semibold rounded-lg hover:bg-gray-100 transition-colors shadow-lg"
          >
            立即咨询
          </NuxtLink>
          <a
            v-if="siteInfo?.phone"
            :href="`tel:${siteInfo.phone}`"
            class="inline-flex items-center px-6 py-3 border-2 border-white/40 text-white font-semibold rounded-lg hover:bg-white/10 transition-colors"
          >
            {{ siteInfo.phone }}
          </a>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
/**
 * 模板 7 - 关于我们（科技蓝）
 *
 * 重构为「模板内置内容 + 可选 CMS 增强」模式：
 *   - 默认展示公司简介 / 核心优势 / 资质与荣誉 / 数据实力 / CTA 五大板块
 *   - 汇吉采（租户 10626）专属内容：简介/优势/资质/数据均写死模板内置，底部可选 CMS 富文本增强
 *   - 若后台「单页管理」录入了 about 正文（cms_page），底部追加富文本扩展区
 *   - 彻底解决 API 410/空数据导致页面白屏的问题
 */
import dayjs from 'dayjs'
import type { PageDetail } from '~/types'

const { siteInfo, slogan, fetchSiteInfo } = useSite()
const { fileUrl } = useFileUrl()

await fetchSiteInfo()

// ========== CMS 单页数据（可选增强） ==========
const { data: pageData } = await useFetch<PageDetail>('/api/page/detail', {
  key: 'page-about',
  query: { path: 'about' }
})

const pageTitle = computed(() => pageData.value?.title?.trim() || '关于我们')
const coverImage = computed(() => fileUrl(pageData.value?.photo || ''))
const hasContent = computed(() => Boolean(pageData.value?.hasContent && pageData.value?.content))

const updateTimeText = computed(() => {
  const t = pageData.value?.updateTime
  return t ? dayjs(t).format('YYYY-MM-DD') : ''
})

// ========== 公司简介（模板内置，汇吉采专属） ==========
const introText = '广西汇吉采咨询有限公司成立于2017年，是具备独立法人资质的综合性专业咨询服务机构，总部设于南宁，布局柳州、崇左、北海、梧州、百色、贺州、玉林多地分支机构，建成覆盖广西全域的服务网络。公司聚焦项目全生命周期采购咨询服务，搭建政府采购全过程咨询、工程全过程咨询、投融资全过程咨询、政府采购AI定制化开发服务四大核心业务板块，配套30余项咨询服务，为各级党政机关、事业单位、国有企业及产业园区提供一站式全生命周期一体化服务。'
const tags = ['政府采购全过程咨询', '工程全过程咨询', '投融资全过程咨询', '政府采购AI定制开发']

// ========== 核心优势（汇吉采专属） ==========
const advantages = [
  { title: '标准化服务体系', desc: '恪守合同履约率 100%、客户满意度 98% 以上，全流程规范化管控，让项目合规高效落地。', icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z' },
  { title: '数智化管理平台', desc: '招标业务系统、线上审批、OA 协同一体，实现全区远程移动办公，提升服务规范性。', icon: 'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z' },
  { title: '自有专属场地', desc: '近 2000㎡ 专属办公场地，独立开标室与评标室，满足各类评审、研讨需求。', icon: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4' },
  { title: '专业人才支撑', desc: '高级专业技术人员占比 77%，中高级工程师及各类注册持证人才超 90%，务实求精。', icon: 'M12 14l9-5-9-5-9 5 9 5z M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z' }
]

// ========== 资质与荣誉（汇吉采专属） ==========
const honors = [
  { title: 'ISO9001 质量管理体系', desc: '确保产品与服务质量的稳定可靠，建立科学的质量管理机制。' },
  { title: 'ISO14001 环境管理体系', desc: '坚持绿色发展，履行环境责任，推动可持续运营。' },
  { title: 'ISO45001 职业健康安全', desc: '以人为本，保障员工健康与安全，规范作业环境管理。' },
  { title: 'AAA 信用评价体系', desc: '通过中盛华科（北京）信用评价有限公司全面认证，诚信服务筑牢基石。' },
  { title: '政府采购双重备案', desc: '完成中国政府采购网与广西政府采购网双重登记备案，具备全国承接资格。' },
  { title: '全国投资项目平台', desc: '接入全国投资项目在线审批监管平台，投融资咨询服务规范可溯。' }
]

// ========== 数据实力（汇吉采专属，写死真实指标） ==========
const stats = [
  { value: '2017', suffix: '年', label: '公司成立' },
  { value: '7', suffix: '地', label: '分支服务网络' },
  { value: '2000', suffix: '㎡', label: '自有专属场地' },
  { value: '90', suffix: '%+', label: '注册持证人才' }
]

// ========== SEO ==========
usePageSeo(
  {
    title: pageTitle.value,
    path: '/about',
    keywords: pageData.value?.keywords || undefined,
    description: pageData.value?.description || undefined,
    image: coverImage.value || undefined
  },
  siteInfo.value
)
</script>