gxwebsoft
2b69686795
- 新增404页面，优化未找到页面体验，避免被搜索引擎索引 - 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理 - 实现/article、/case、/product及/page动态路由兼容列表与详情展示 - 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置 - 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持 - 模板增强支持CMS单页内容加载及SEO信息动态设置 - 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
96 lines
3.5 KiB
Vue
96 lines
3.5 KiB
Vue
<template>
|
|
<section class="relative py-20 lg:py-28 bg-gradient-to-br from-[#8b6f47] to-[#6f5638] text-white overflow-hidden">
|
|
<!-- 漂浮装饰 -->
|
|
<div class="absolute w-72 h-72 bg-white/10 -top-16 -left-10 rounded-full blur-3xl" />
|
|
<div class="absolute w-80 h-80 bg-[#d4b896]/20 -bottom-24 right-0 rounded-full blur-3xl" />
|
|
|
|
<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-[#e8dcc8] 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-[#8b6f47] font-semibold rounded-lg hover:bg-[#fff8ed] transition-colors"
|
|
@click="openConsult()"
|
|
>
|
|
免费咨询
|
|
</button>
|
|
<NuxtLink
|
|
v-if="newsNav"
|
|
:to="newsNav.path || '/article'"
|
|
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/15 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 flex-shrink-0">
|
|
<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-[#e8dcc8]">{{ feature }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
/**
|
|
* 模板 3 - 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 友好',
|
|
'独立域名绑定'
|
|
]
|
|
</script>
|