gxwebsoft
2b69686795
- 新增404页面，优化未找到页面体验，避免被搜索引擎索引 - 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理 - 实现/article、/case、/product及/page动态路由兼容列表与详情展示 - 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置 - 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持 - 模板增强支持CMS单页内容加载及SEO信息动态设置 - 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
271 lines
15 KiB
Vue
271 lines
15 KiB
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="grid lg:grid-cols-2 gap-12 items-center">
|
||
<div class="order-2 lg:order-1">
|
||
<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-8">一路同行，步履不停</h2>
|
||
<div class="relative border-l-2 border-blue-100 pl-8 space-y-8">
|
||
<div v-for="(m, index) in milestones" :key="m.year" class="relative">
|
||
<span class="absolute -left-[41px] top-1 w-5 h-5 rounded-full bg-blue-600 border-4 border-white shadow"></span>
|
||
<div class="text-blue-600 font-bold text-lg">{{ m.year }}</div>
|
||
<div class="text-gray-900 font-semibold mt-1">{{ m.title }}</div>
|
||
<p class="text-gray-500 text-sm leading-relaxed mt-1">{{ m.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="order-1 lg:order-2 rounded-2xl overflow-hidden shadow-lg bg-gradient-to-br from-blue-50 to-indigo-50 flex items-center justify-center min-h-[320px] lg:min-h-[480px]">
|
||
<div class="p-8 text-center">
|
||
<svg class="w-24 h-24 mx-auto text-blue-200 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="0.8" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||
</svg>
|
||
<p class="text-blue-400 font-medium">持续成长</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 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">
|
||
/**
|
||
* 模板 1 - 关于我们（科技蓝）
|
||
*
|
||
* 重构为「模板内置内容 + 可选 CMS 增强」模式：
|
||
* - 默认展示公司简介 / 核心优势 / 发展历程 / 数据实力 / CTA 五大板块
|
||
* - 数据优先取 siteInfo（slogan/comments），回退模板内置文案
|
||
* - 若后台「单页管理」录入了 about 正文（cms_page），底部追加富文本扩展区
|
||
* - 彻底解决 API 410/空数据导致页面白屏的问题
|
||
*/
|
||
import dayjs from 'dayjs'
|
||
import type { PageDetail, CaseItem, Product, PageResult, ApiEnvelope } 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 = computed(() => siteInfo.value?.comments || siteInfo.value?.content || '')
|
||
const tags = ['自主研发', '行业深耕', '安全稳定', '贴身服务']
|
||
|
||
// ========== 核心优势 ==========
|
||
const advantages = [
|
||
{ title: '技术实力', desc: '核心产品自主可控，技术栈先进，按需灵活扩展与定制。', icon: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z' },
|
||
{ title: '行业经验', desc: '多行业落地实践，深刻理解业务场景与真实痛点。', icon: 'M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z' },
|
||
{ title: '服务体系', desc: '从咨询规划到运维支持全流程陪伴，7×24 响应。', icon: 'M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z' },
|
||
{ title: '客户口碑', desc: '以交付质量与长期服务，赢得客户的持续信赖。', icon: 'M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z' }
|
||
]
|
||
|
||
// ========== 发展历程 ==========
|
||
const milestones = [
|
||
{ year: '2015', title: '扬帆起航', desc: '公司正式成立，组建核心研发团队，确立企业数字化服务方向。' },
|
||
{ year: '2018', title: '技术沉淀', desc: '自研核心产品体系成型，服务客户覆盖多个重点行业。' },
|
||
{ year: '2021', title: '规模跃升', desc: '交付能力持续增强，建立标准化实施与运维服务体系。' },
|
||
{ year: '2024', title: '智领未来', desc: '拥抱云原生与智能化，为客户提供更敏捷的数字化方案。' }
|
||
]
|
||
|
||
// ========== 数据实力（实时接口 + 占位兜底） ==========
|
||
const cases = ref<CaseItem[]>([])
|
||
try {
|
||
const res = await $fetch<PageResult<CaseItem>>('/api/case/list', { query: { page: 1, limit: 100 } })
|
||
cases.value = res?.list || []
|
||
} catch { cases.value = [] }
|
||
|
||
const products = ref<Product[]>([])
|
||
try {
|
||
const res = await $fetch<ApiEnvelope<PageResult<Product>> | PageResult<Product>>('/api/product/list', { query: { page: 1, limit: 50 } })
|
||
const envelope = res as ApiEnvelope<PageResult<Product>>
|
||
products.value = envelope?.data?.list || (res as PageResult<Product>)?.list || []
|
||
} catch { products.value = [] }
|
||
|
||
const stats = computed(() => [
|
||
{ value: String(cases.value.length || 200), suffix: '+', label: '成功案例' },
|
||
{ value: String(products.value.length || 50), suffix: '+', label: '产品与方案' },
|
||
{ value: '500', suffix: '+', label: '服务客户' },
|
||
{ value: '10', 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>
|