gxwebsoft
2b69686795
- 新增404页面，优化未找到页面体验，避免被搜索引擎索引 - 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理 - 实现/article、/case、/product及/page动态路由兼容列表与详情展示 - 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置 - 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持 - 模板增强支持CMS单页内容加载及SEO信息动态设置 - 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
52 lines
2.4 KiB
Vue
52 lines
2.4 KiB
Vue
<template>
|
|
<section v-if="enabled" class="py-16 lg:py-20 bg-[#FFF8F0]">
|
|
<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-[#FFF1E6] text-[#E5472E] text-sm font-semibold mb-4">我们的承诺</span>
|
|
<h2 class="text-2xl sm:text-3xl font-bold text-[#33291F] mb-4">{{ title }}</h2>
|
|
<p v-if="subtitle" class="text-[#8A7B6B] max-w-2xl mx-auto">
|
|
{{ subtitle }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div
|
|
v-for="(item, index) in items"
|
|
:key="item.title || index"
|
|
class="bg-white rounded-3xl p-7 shadow-sm hover:shadow-md transition-shadow border border-[#F0E2D5] anim-card group"
|
|
data-reveal
|
|
:data-reveal-delay="index * 100"
|
|
>
|
|
<div
|
|
class="w-14 h-14 rounded-2xl bg-[#FFF1E6] flex items-center justify-center mb-5 transition-transform duration-300 group-hover:scale-110"
|
|
>
|
|
<FeatureIcon :name="item.icon" class="w-7 h-7 text-[#E5472E]" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-[#33291F] mb-2">{{ item.title }}</h3>
|
|
<p class="text-sm text-[#8A7B6B] leading-relaxed">{{ item.desc }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
/**
|
|
* 模板 5 - 品牌承诺模块（温暖自然食品风，后台可配置）
|
|
* 数据来自 useFeatures()，未配置时回退到下方默认值。
|
|
* 图标统一使用食品主题暖色（模板视觉标识），颜色不随后台配置变化。
|
|
*/
|
|
import FeatureIcon from '~/components/FeatureIcon.vue'
|
|
import { useFeatures } from '~/composables/useFeatures'
|
|
import type { FeatureItem } from '~/types'
|
|
|
|
const defaultFeatures: FeatureItem[] = [
|
|
{ title: '源头甄选', desc: '深入全球优质产区，严选当季好原料，从源头把控品质。', icon: 'globe' },
|
|
{ title: '新鲜锁鲜', desc: '掌握关键保鲜工艺，锁住原料的本真营养与风味。', icon: 'cloud' },
|
|
{ title: '严苛质检', desc: '全程质量管控体系，每一批产品都经过严格检测。', icon: 'check' },
|
|
{ title: '营养健康', desc: '科学均衡配方，让美味与营养兼得，吃得开心更安心。', icon: 'heart' }
|
|
]
|
|
|
|
const { enabled, title, subtitle, items } = useFeatures(defaultFeatures)
|
|
</script>
|