gxwebsoft
2b69686795
- 新增404页面，优化未找到页面体验，避免被搜索引擎索引 - 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理 - 实现/article、/case、/product及/page动态路由兼容列表与详情展示 - 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置 - 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持 - 模板增强支持CMS单页内容加载及SEO信息动态设置 - 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
186 lines
11 KiB
Vue
186 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<!-- Hero 横幅 -->
|
||
<section class="bg-[#1E2A47] relative overflow-hidden">
|
||
<div class="absolute -top-16 -right-16 w-72 h-72 rounded-full bg-[#CF1313]/20 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/60 mb-3" aria-label="面包屑">
|
||
<NuxtLink to="/" class="hover:text-white">首页</NuxtLink>
|
||
<span class="mx-2">/</span>
|
||
<span class="text-white">关于我们</span>
|
||
</nav>
|
||
<h1 class="text-3xl font-bold text-white" data-reveal>关于我们</h1>
|
||
<p class="text-white/70 mt-3 max-w-2xl leading-relaxed" data-reveal data-reveal-delay="100">
|
||
{{ 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="grid lg:grid-cols-2 gap-12 items-center">
|
||
<div class="rounded-2xl overflow-hidden shadow-lg order-2 lg:order-1" data-reveal data-reveal-delay="120">
|
||
<img :src="aboutImg1" alt="关于我们" class="w-full h-72 lg:h-96 object-cover">
|
||
</div>
|
||
<div class="order-1 lg:order-2">
|
||
<span class="inline-block px-3 py-1 rounded-full bg-[#F4F6FA] text-[#CF1313] text-sm font-semibold mb-4" data-reveal>公司简介</span>
|
||
<h2 class="text-2xl sm:text-3xl font-bold text-[#1E2A47] mb-6" data-reveal>专业务实，做企业值得信赖的数字化伙伴</h2>
|
||
<div class="text-[#666666] 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-[#F4F6FA] border border-[#E5E7EB] text-sm text-[#1E2A47]">{{ tag }}</span>
|
||
</div>
|
||
<NuxtLink to="/contact" class="inline-flex items-center px-6 py-3 bg-[#CF1313] text-white font-semibold rounded-full hover:bg-[#A60E0E] 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>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 我们的优势 -->
|
||
<section class="py-16 lg:py-20 bg-[#F4F6FA]">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-12">
|
||
<span class="inline-block px-3 py-1 rounded-full bg-white text-[#CF1313] text-sm font-semibold mb-4" data-reveal>核心优势</span>
|
||
<h2 class="text-2xl sm:text-3xl font-bold text-[#1E2A47] mb-4" data-reveal>为什么选择我们</h2>
|
||
<p class="text-[#666666] 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-[#E5E7EB] anim-card group" data-reveal :data-reveal-delay="index * 100">
|
||
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-5 bg-[#FDECEC]">
|
||
<svg class="w-7 h-7 text-[#CF1313]" 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-[#1E2A47] mb-2">{{ item.title }}</h3>
|
||
<p class="text-sm text-[#666666] leading-relaxed">{{ item.desc }}</p>
|
||
</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="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-[#F4F6FA] text-[#CF1313] text-sm font-semibold mb-4" data-reveal>发展历程</span>
|
||
<h2 class="text-2xl sm:text-3xl font-bold text-[#1E2A47] mb-8" data-reveal>一路同行，步履不停</h2>
|
||
<div class="relative border-l-2 border-[#E5E7EB] pl-8 space-y-8">
|
||
<div v-for="(m, index) in milestones" :key="m.year" class="relative" data-reveal :data-reveal-delay="index * 100">
|
||
<span class="absolute -left-[41px] top-1 w-5 h-5 rounded-full bg-[#CF1313] border-4 border-white shadow"></span>
|
||
<div class="text-[#CF1313] font-bold text-lg">{{ m.year }}</div>
|
||
<div class="text-[#1E2A47] font-semibold mt-1">{{ m.title }}</div>
|
||
<p class="text-[#666666] 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" data-reveal data-reveal-delay="120">
|
||
<img :src="aboutImg2" alt="发展历程" class="w-full h-80 lg:h-[480px] object-cover">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 数据实力 -->
|
||
<section class="py-16 lg:py-20 bg-[#F4F6FA]">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-12">
|
||
<span class="inline-block px-3 py-1 rounded-full bg-white text-[#CF1313] text-sm font-semibold mb-4" data-reveal>数据实力</span>
|
||
<h2 class="text-2xl sm:text-3xl font-bold text-[#1E2A47] mb-4" data-reveal>用结果说话</h2>
|
||
<p class="text-[#666666] 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-[#E5E7EB] anim-card" data-reveal :data-reveal-delay="index * 100">
|
||
<div class="text-[#1E2A47] font-bold text-3xl sm:text-4xl">
|
||
{{ s.value }}<span class="text-[#CF1313]">{{ s.suffix }}</span>
|
||
</div>
|
||
<div class="text-sm text-[#666666] mt-2">{{ s.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系 CTA -->
|
||
<section class="py-16 lg:py-20 bg-[#1E2A47] relative overflow-hidden">
|
||
<div class="absolute -top-20 -right-20 w-80 h-80 rounded-full bg-[#CF1313]/20 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" data-reveal>有项目需求或合作意向？</h2>
|
||
<p class="text-white/80 max-w-2xl mx-auto mb-8" data-reveal data-reveal-delay="100">立即联系我们，获取专属方案与产品演示</p>
|
||
<button type="button" class="inline-flex items-center justify-center px-8 py-3 bg-[#CF1313] text-white font-semibold rounded-full hover:bg-[#A60E0E] transition-colors shadow-lg" @click="openConsult()">立即咨询</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- 关于页附件（CMS 单页管理维护） -->
|
||
<PageAttachments
|
||
v-if="aboutAttachments.length"
|
||
:attachments="aboutAttachments"
|
||
class="mt-10"
|
||
/>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import aboutImg1 from '../assets/about-1.jpg'
|
||
import aboutImg2 from '../assets/about-2.jpg'
|
||
import type { CaseItem, Product, PageResult, ApiEnvelope, PageDetail, PageAttachment } from '~/types'
|
||
|
||
const { siteInfo, slogan, fetchSiteInfo } = useSite()
|
||
const { openConsult } = useConsult()
|
||
await fetchSiteInfo()
|
||
|
||
// 关于页附件（CMS「单页管理」按 path=about 维护）
|
||
const { data: aboutPage } = await useFetch<PageDetail>('/api/page/detail', { query: { path: 'about' } })
|
||
const aboutAttachments = computed<PageAttachment[]>(() => aboutPage.value?.attachments || [])
|
||
|
||
// 公司简介：优先取自 CMS 站点描述，回退到模板内置文案
|
||
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: '行业经验' }
|
||
])
|
||
</script>
|