gxwebsoft
2b69686795
- 新增404页面，优化未找到页面体验，避免被搜索引擎索引 - 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理 - 实现/article、/case、/product及/page动态路由兼容列表与详情展示 - 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置 - 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持 - 模板增强支持CMS单页内容加载及SEO信息动态设置 - 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
49 lines
2.9 KiB
Vue
49 lines
2.9 KiB
Vue
<template>
|
||
<section class="relative overflow-hidden">
|
||
<img :src="heroBanner" alt="" class="absolute inset-0 w-full h-full object-cover">
|
||
<div class="absolute inset-0 bg-gradient-to-r from-[#16203A]/95 via-[#1E2A47]/80 to-[#1E2A47]/30" />
|
||
<div class="absolute -top-24 -right-24 w-96 h-96 rounded-full bg-[#CF1313]/20 blur-3xl" />
|
||
<div class="absolute bottom-0 left-0 w-full h-1.5 bg-[#CF1313]" />
|
||
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||
<div class="max-w-3xl py-24 lg:py-32">
|
||
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-sm font-medium text-white mb-6 border border-white/20" data-reveal>
|
||
<span class="w-2 h-2 rounded-full bg-[#CF1313]" /> 专业 · 可靠 · 数字化
|
||
</span>
|
||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-6" data-reveal>{{ heroTitle }}</h1>
|
||
<p class="text-base sm:text-lg text-white/85 mb-8 leading-relaxed max-w-2xl" data-reveal data-reveal-delay="120">{{ heroSubtitle }}</p>
|
||
<div class="flex flex-wrap gap-4" data-reveal data-reveal-delay="240">
|
||
<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>
|
||
<NuxtLink v-if="productNav" :to="productNav.path || '/product'" class="inline-flex items-center justify-center px-8 py-3 border-2 border-white text-white font-semibold rounded-full hover:bg-white/10 transition-colors">产品与方案</NuxtLink>
|
||
</div>
|
||
|
||
<!-- 数据指标 -->
|
||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-6 mt-14" data-reveal data-reveal-delay="360">
|
||
<div v-for="stat in stats" :key="stat.label">
|
||
<div class="text-2xl lg:text-3xl font-bold text-white">{{ stat.value }}</div>
|
||
<div class="text-xs text-white/70 mt-1">{{ stat.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { CmsNavigation } from '~/types'
|
||
import heroBanner from '../assets/hero-banner.jpg'
|
||
const { siteInfo, siteName, navigations, fetchSiteInfo } = useSite()
|
||
const { openConsult } = useConsult()
|
||
await fetchSiteInfo()
|
||
|
||
const heroTitle = computed(() => siteName.value ? `${siteName.value} · 企业数字化伙伴` : '企业数字化升级的首选伙伴')
|
||
const heroSubtitle = computed(() => siteInfo.value?.comments || '以技术驱动业务增长，提供专业、安全、可落地的软件产品与行业解决方案，助力企业实现数字化转型。')
|
||
const productNav = computed<CmsNavigation | undefined>(() => (navigations.value || []).find((n) => n.model === 'product'))
|
||
const stats = [
|
||
{ value: '20+', label: '服务行业' },
|
||
{ value: '500+', label: '合作客户' },
|
||
{ value: '99.9%', label: '服务可用率' },
|
||
{ value: '7×24', label: '技术支持' }
|
||
]
|
||
</script>
|