gxwebsoft
2b69686795
- 新增404页面，优化未找到页面体验，避免被搜索引擎索引 - 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理 - 实现/article、/case、/product及/page动态路由兼容列表与详情展示 - 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置 - 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持 - 模板增强支持CMS单页内容加载及SEO信息动态设置 - 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
96 lines
3.6 KiB
Vue
96 lines
3.6 KiB
Vue
<template>
|
||
<section class="relative py-20 lg:py-28 bg-gradient-to-br from-[var(--t2-primary)] to-[var(--t2-primary-dark)] text-white overflow-hidden anim-gradient">
|
||
<!-- 漂浮柔光球：缓慢浮动，增加首屏活力 -->
|
||
<div class="anim-blob w-72 h-72 bg-white/25 -top-16 -left-10" />
|
||
<div class="anim-blob anim-blob--2 w-80 h-80 bg-white/20 -bottom-24 right-0" />
|
||
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
|
||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||
<div class="max-w-2xl">
|
||
<h1
|
||
class="text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight mb-6"
|
||
data-reveal
|
||
>
|
||
{{ heroTitle }}
|
||
</h1>
|
||
<p
|
||
class="text-base sm:text-lg text-[var(--t2-primary-light)] mb-8 leading-relaxed"
|
||
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-6 py-3 bg-white text-[var(--t2-primary)] font-semibold rounded-lg hover:bg-[var(--t2-primary-light)] transition-colors anim-shimmer"
|
||
@click="openConsult()"
|
||
>
|
||
免费咨询
|
||
</button>
|
||
<NuxtLink
|
||
v-if="newsNav"
|
||
:to="newsNav.path || '/news'"
|
||
class="inline-flex items-center justify-center px-6 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white/10 transition-colors"
|
||
>
|
||
查看动态
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hidden lg:flex justify-center" data-reveal data-reveal-delay="360">
|
||
<div class="relative w-full max-w-lg">
|
||
<div class="absolute inset-0 bg-white/10 rounded-3xl transform rotate-3" />
|
||
<div class="relative bg-white/20 backdrop-blur-sm rounded-3xl p-8 border border-white/20">
|
||
<div class="space-y-4">
|
||
<div v-for="feature in features" :key="feature" class="flex items-center gap-3">
|
||
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
|
||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
</div>
|
||
<span class="text-[var(--t2-primary-light)]">{{ feature }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
/**
|
||
* 模板 1 - Hero 主视觉区
|
||
* 使用站点名称动态展示
|
||
*/
|
||
import type { CmsNavigation } from '~/types'
|
||
|
||
const { siteInfo, siteName, navigations, fetchSiteInfo } = useSite()
|
||
const { openConsult } = useConsult()
|
||
|
||
await fetchSiteInfo()
|
||
|
||
const heroTitle = computed(() => {
|
||
return siteName.value ? `欢迎来到 ${siteName.value}` : '专注企业数字化官网建设'
|
||
})
|
||
|
||
const heroSubtitle = computed(() => {
|
||
return siteInfo.value?.comments
|
||
|| '快速搭建品牌展示、产品发布与客户咨询一体化官网，助力企业数字化转型与业务增长。'
|
||
})
|
||
|
||
const newsNav = computed<CmsNavigation | undefined>(() => {
|
||
const navs = navigations.value || []
|
||
return navs.find((n) => n.model === 'article')
|
||
})
|
||
|
||
const features = [
|
||
'多模板一键切换',
|
||
'响应式多端适配',
|
||
'SEO/GEO 友好',
|
||
'独立域名绑定'
|
||
]
|
||
</script>
|