gxwebsoft
2b69686795
- 新增404页面，优化未找到页面体验，避免被搜索引擎索引 - 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理 - 实现/article、/case、/product及/page动态路由兼容列表与详情展示 - 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置 - 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持 - 模板增强支持CMS单页内容加载及SEO信息动态设置 - 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
109 lines
5.3 KiB
Vue
109 lines
5.3 KiB
Vue
<template>
|
||
<section class="relative overflow-hidden text-white">
|
||
<!-- 背景图 -->
|
||
<img
|
||
:src="heroBanner"
|
||
alt=""
|
||
class="absolute inset-0 w-full h-full object-cover"
|
||
>
|
||
<!-- 品牌渐变叠加，保证文字可读性与主题色 -->
|
||
<div class="absolute inset-0 bg-gradient-to-br from-[#E5472E]/85 via-[#EE6A22]/40 to-[#F2A900]/5" />
|
||
<!-- 装饰光斑（缓慢浮动，增加首屏活力） -->
|
||
<div class="anim-blob absolute -top-24 -right-24 w-96 h-96 rounded-full bg-white/10 blur-3xl" />
|
||
<div class="anim-blob anim-blob--2 absolute -bottom-32 -left-20 w-96 h-96 rounded-full bg-[#5BA53A]/20 blur-3xl" />
|
||
<div class="absolute top-1/3 left-10 w-3 h-3 rounded-full bg-white/40" />
|
||
<div class="absolute top-1/2 right-1/4 w-2 h-2 rounded-full bg-white/30" />
|
||
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||
<div class="grid lg:grid-cols-2 gap-12 items-center py-20 lg:py-28">
|
||
<div class="max-w-2xl">
|
||
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/15 text-sm font-medium mb-6" data-reveal>
|
||
<span class="w-2 h-2 rounded-full bg-[#5BA53A]" />
|
||
新鲜 · 自然 · 健康美味
|
||
</span>
|
||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold leading-tight mb-6" data-reveal>
|
||
{{ heroTitle }}
|
||
</h1>
|
||
<p class="text-base sm:text-lg text-white/90 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-7 py-3 bg-white text-[#E5472E] font-semibold rounded-full hover:bg-[#FFF1E6] transition-colors shadow-lg anim-shimmer"
|
||
@click="openConsult()"
|
||
>
|
||
免费咨询
|
||
</button>
|
||
<NuxtLink
|
||
v-if="newsNav"
|
||
:to="newsNav.path || '/news'"
|
||
class="inline-flex items-center justify-center px-7 py-3 border-2 border-white text-white font-semibold rounded-full 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-md">
|
||
<div class="absolute inset-0 bg-white/15 rounded-[2.5rem] transform rotate-3" />
|
||
<div class="relative bg-white/20 backdrop-blur-sm rounded-[2.5rem] p-8 border border-white/30">
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div
|
||
v-for="(feature, index) in features"
|
||
:key="feature.title"
|
||
class="bg-white/15 rounded-2xl p-4 transition-transform duration-300 hover:-translate-y-1"
|
||
:style="{ transitionDelay: index * 60 + 'ms' }"
|
||
>
|
||
<div class="w-10 h-10 rounded-full bg-white/25 flex items-center justify-center mb-3">
|
||
<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="feature.icon" />
|
||
</svg>
|
||
</div>
|
||
<p class="text-sm font-semibold text-white">{{ feature.title }}</p>
|
||
<p class="text-xs text-white/75 mt-1">{{ feature.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
/**
|
||
* 模板 5 - Hero 主视觉区（温暖自然食品风）
|
||
*/
|
||
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(() => {
|
||
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 = [
|
||
{ title: '源头甄选', desc: '全球优质产区', icon: 'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z' },
|
||
{ title: '新鲜锁鲜', desc: '先进保鲜工艺', icon: 'M12 2C7 2 3 6 3 11c0 5 4 9 9 9s9-4 9-9c0-5-4-9-9-9zm0 16c-3.9 0-7-3-7-7 0-2.8 1.6-5.2 4-6.4.2 1.6 1.1 3 2.5 3.8-1-.7-1.6-1.9-1.6-3.1 2.3.3 4.1 2.1 4.4 4.4.8.7 1.3 1.7 1.3 2.9 0 .6-.1 1.2-.4 1.7 1.4-.7 2.4-2.1 2.4-3.7 1.8 1.2 3 3.3 3 5.4 0 4-3.1 7-7 7z' },
|
||
{ title: '严苛质检', desc: '全程品质管控', icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z' },
|
||
{ title: '营养健康', desc: '均衡天然配方', icon: 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z' }
|
||
]
|
||
</script>
|