568 lines
36 KiB
Markdown
568 lines
36 KiB
Markdown
# 创高家具官网 - 前端页面框架设计
|
||
|
||
## 一、页面结构总览
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ AppHeader │
|
||
│ Logo │ 首页 产品中心 案例展示 关于创高 联系我们 │ 语言 热线 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ RouterView │
|
||
│ │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ AppFooter │
|
||
│ Logo/简介 │ 快速导航 │ 产品分类 │ 联系方式 │ 二维码 │
|
||
│ ©2024 创高家具 版权所有 │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 二、首页（HomeView.vue）
|
||
|
||
### 2.1 页面结构
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ Section 1: HeroBanner（全屏首屏） │
|
||
│ ┌─────────────────────────────────────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ 全屋定制 匠心之作 │ │
|
||
│ │ 专注高端家具定制，为品质生活而生 │ │
|
||
│ │ │ │
|
||
│ │ [立即咨询] [查看产品] │ │
|
||
│ │ │ │
|
||
│ │ ← 轮播指示器 → │ │
|
||
│ └─────────────────────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ Section 2: ServiceSection（核心业务） │
|
||
│ ┌─────────────────────────────────────────────────────┐ │
|
||
│ │ 核心业务 │ │
|
||
│ │ 三大业务板块，全方位满足您的需求 │ │
|
||
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
|
||
│ │ │ 全屋定制 │ │ 成品家具 │ │ 工程项目 │ │ │
|
||
│ │ │ 图标 │ │ 图标 │ │ 图标 │ │ │
|
||
│ │ │ 描述... │ │ 描述... │ │ 描述... │ │ │
|
||
│ │ └──────────┘ └──────────┘ └──────────┘ │ │
|
||
│ └─────────────────────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ Section 3: ProductSection（热门产品） │
|
||
│ ┌─────────────────────────────────────────────────────┐ │
|
||
│ │ 热门产品 │ │
|
||
│ │ 精选系列，品质之选 │ │
|
||
│ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
|
||
│ │ │图1 │ │图2 │ │图3 │ │图4 │ ← 产品卡片网格 │ │
|
||
│ │ │名称│ │名称│ │名称│ │名称│ │ │
|
||
│ │ └────┘ └────┘ └────┘ └────┘ │ │
|
||
│ │ │ │
|
||
│ │ [查看全部产品] │ │
|
||
│ └─────────────────────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ Section 4: CaseSection（经典案例） │
|
||
│ ┌─────────────────────────────────────────────────────┐ │
|
||
│ │ 经典案例 │ │
|
||
│ │ 实景呈现，见证品质 │ │
|
||
│ │ ┌────────────┐ ┌────────────┐ │ │
|
||
│ │ │ │ │ │ ← 案例大图+悬停效果 │ │
|
||
│ │ │ 案例1 │ │ 案例2 │ │ │
|
||
│ │ │ 标题/地点 │ │ 标题/地点 │ │ │
|
||
│ │ └────────────┘ └────────────┘ │ │
|
||
│ └─────────────────────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ Section 5: StrengthSection（品牌实力） │
|
||
│ ┌─────────────────────────────────────────────────────┐ │
|
||
│ │ 深色背景 + 金属质感数字 │ │
|
||
│ │ │ │
|
||
│ │ 20+ 50000+ 1000+ 50+ │ │
|
||
│ │ 年经验 ㎡基地 家客户 项专利 │ │
|
||
│ │ │ │
|
||
│ │ [了解更多品牌实力] │ │
|
||
│ └─────────────────────────────────────────────────────┘ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 2.2 组件结构
|
||
|
||
```vue
|
||
<template>
|
||
<div class="home-view">
|
||
<!-- 全屏首屏轮播 -->
|
||
<HeroBanner :banners="homeData.banners" />
|
||
|
||
<!-- 核心业务板块 -->
|
||
<ServiceSection
|
||
:title="pageBlocks.services_title"
|
||
:subtitle="pageBlocks.services_subtitle"
|
||
:services="serviceList"
|
||
/>
|
||
|
||
<!-- 热门产品 -->
|
||
<ProductSection
|
||
:title="pageBlocks.products_title"
|
||
:products="homeData.hotProducts"
|
||
/>
|
||
|
||
<!-- 经典案例 -->
|
||
<CaseSection
|
||
:title="pageBlocks.cases_title"
|
||
:cases="homeData.recommendCases"
|
||
/>
|
||
|
||
<!-- 品牌实力 -->
|
||
<StrengthSection
|
||
:title="pageBlocks.strength_title"
|
||
:data="pageBlocks.strength_data"
|
||
/>
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
---
|
||
|
||
## 三、产品中心（ProductView.vue）
|
||
|
||
### 3.1 页面结构
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ Banner（产品页头图） │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 左侧分类导航 │ 右侧产品列表 │
|
||
│ ┌─────────────────────┐ │ ┌─────────────────────────┐ │
|
||
│ │ 产品中心 │ │ │ 筛选：分类 ▼ 风格 ▼ │ │
|
||
│ │ │ │ └─────────────────────────┘ │
|
||
│ │ ▼ 全屋定制 │ │ │
|
||
│ │ ├ 衣柜 │ │ ┌────┐ ┌────┐ ┌────┐ │ │
|
||
│ │ ├ 橱柜 │ │ │图1 │ │图2 │ │图3 │ │ │
|
||
│ │ └ 书柜 │ │ │名称│ │名称│ │名称│ │ │
|
||
│ │ │ │ │价格│ │价格│ │价格│ │ │
|
||
│ │ ▶ 客厅家具 │ │ └────┘ └────┘ └────┘ │ │
|
||
│ │ ▶ 卧室家具 │ │ │ │
|
||
│ │ │ │ ┌────┐ ┌────┐ ┌────┐ │ │
|
||
│ │ ▶ 餐厅家具 │ │ │图4 │ │图5 │ │图6 │ │ │
|
||
│ │ │ │ └────┘ └────┘ └────┘ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ │ ┌─────────────────────┐ │ │
|
||
│ │ │ │ │ 分页组件 │ │ │
|
||
│ │ │ │ │ < 1 2 3 4 5 > │ │ │
|
||
│ │ │ │ └─────────────────────┘ │ │
|
||
│ └─────────────────────┘ └──────────────────────────────┘ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 3.2 交互说明
|
||
|
||
| 交互 | 行为 |
|
||
|------|------|
|
||
| 分类点击 | 右侧列表筛选，URL 更新（`/products?category=1`） |
|
||
| 产品卡片悬停 | 图片放大，显示"查看详情"遮罩 |
|
||
| 产品点击 | 进入详情页 `/products/{id}` |
|
||
| 分页 | 保持筛选状态，滚动到顶部 |
|
||
| 面包屑 | 首页 > 产品中心 > 分类名 |
|
||
|
||
---
|
||
|
||
## 四、产品详情页（ProductDetailView.vue）
|
||
|
||
### 4.1 页面结构
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 面包屑：首页 > 产品中心 > 全屋定制 > 产品名称 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 左侧图片区（60%） │ 右侧信息区（40%） │
|
||
│ ┌─────────────────────────┐ │ ┌──────────────────────┐ │
|
||
│ │ │ │ │ 产品名称 │ │
|
||
│ │ 主图展示 │ │ │ Product Name │ │
|
||
│ │ │ │ │ │ │
|
||
│ │ ┌────┐ ┌────┐ ┌────┐ │ │ │ ★★★★★ (5.0) │ │
|
||
│ │ │图1 │ │图2 │ │图3 │ │ │ │ │ │
|
||
│ │ └────┘ └────┘ └────┘ │ │ │ 简介描述... │ │
|
||
│ │ │ │ │ │ │
|
||
│ │ ← 缩略图可点击切换主图 → │ │ │ 产品参数（表格） │ │
|
||
│ │ │ │ │ ├ 材质：真皮 │ │
|
||
│ │ │ │ │ ├ 尺寸：200*90cm │ │
|
||
│ └─────────────────────────┘ │ │ └ 风格：意式极简 │ │
|
||
│ │ │ │ │
|
||
│ ┌─────────────────────────┐ │ │ [立即咨询] │ │
|
||
│ │ 场景展示图 │ │ │ [加入对比] │ │
|
||
│ │ （产品在实际场景中） │ │ └──────────────────────┘ │
|
||
│ └─────────────────────────┘ └──────────────────────────┘ │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ Tab切换：产品详情 │ 规格参数 │ 场景展示 │ 售后服务 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 详细内容区（富文本/HTML） │
|
||
│ ... │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 相关产品推荐 │
|
||
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
|
||
│ │图1 │ │图2 │ │图3 │ │图4 │ │
|
||
│ └────┘ └────┘ └────┘ └────┘ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 五、案例展示（CaseView.vue）
|
||
|
||
### 5.1 页面结构
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ Banner（案例页头图） │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 分类筛选栏 │
|
||
│ [全部] [全屋定制案例] [客厅空间] [卧室空间] [工程案例...] │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 案例网格（瀑布流/等高分栏） │
|
||
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
|
||
│ │ │ │ │ │ │ │
|
||
│ │ 案例图 │ │ 案例图 │ │ 案例图 │ │
|
||
│ │ ┌────────┐│ │ ┌────────┐│ │ ┌────────┐│ │
|
||
│ │ │悬停显示││ │ │悬停显示││ │ │悬停显示││ │
|
||
│ │ │标题/地 ││ │ │标题/地 ││ │ │标题/地 ││ │
|
||
│ │ └────────┘│ │ └────────┘│ │ └────────┘│ │
|
||
│ └────────────┘ └────────────┘ └────────────┘ │
|
||
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
|
||
│ │ │ │ │ │ │ │
|
||
│ └────────────┘ └────────────┘ └────────────┘ │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 分页组件 │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 六、案例详情（CaseDetailView.vue）
|
||
|
||
### 6.1 页面结构
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 面包屑：首页 > 案例展示 > 全屋定制案例 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 案例标题 │
|
||
│ Case Subtitle / Project Location │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ ┌─────────────────────────────────────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ 大图轮播展示 │ │
|
||
│ │ │ │
|
||
│ │ ← Swiper → │ │
|
||
│ │ │ │
|
||
│ └─────────────────────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 项目信息卡片 │
|
||
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
|
||
│ │项目类型│ │项目面积│ │项目地点│ │完工时间│ │
|
||
│ │全屋定制│ │ 180㎡ │ │ 深圳 │ │2024.03 │ │
|
||
│ └────────┘ └────────┘ └────────┘ └────────┘ │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 案例描述（富文本内容） │
|
||
│ ... │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 使用产品 │
|
||
│ ┌────┐ ┌────┐ ┌────┐ │
|
||
│ │产品1│ │产品2│ │产品3│ ← 点击跳转产品详情 │
|
||
│ └────┘ └────┘ └────┘ │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 上一篇 / 下一篇 导航 │
|
||
│ [← 某某别墅全屋定制案例] [某某酒店工程项目 →] │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 七、关于创高（AboutView.vue）
|
||
|
||
### 7.1 页面结构
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ Banner（关于页头图） │
|
||
│ About ChuangGao / 关于创高 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ Tab导航：品牌故事 │ 工厂实力 │ 荣誉资质 │ 新闻资讯 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────────────────────────────────────────┐ │
|
||
│ │ Tab 内容区 │ │
|
||
│ │ │ │
|
||
│ │ 【品牌故事】 │ │
|
||
│ │ 左图右文 或 上图下文 │ │
|
||
│ │ 公司发展历程时间线 │ │
|
||
│ │ │ │
|
||
│ │ 【工厂实力】 │ │
|
||
│ │ 工厂图片展示 + 设备介绍 + 生产流程 │ │
|
||
│ │ │ │
|
||
│ │ 【荣誉资质】 │ │
|
||
│ │ 证书/奖项/专利 网格展示 │ │
|
||
│ │ │ │
|
||
│ │ 【新闻资讯】 │ │
|
||
│ │ 新闻列表（标题+摘要+日期+封面图） │ │
|
||
│ │ │ │
|
||
│ └─────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 八、联系我们（ContactView.vue）
|
||
|
||
### 8.1 页面结构
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ Banner（联系页头图） │
|
||
│ Contact Us / 联系我们 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 加盟政策预览 │
|
||
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
|
||
│ │品牌支持│ │培训支持│ │营销支持│ │区域保护│ │
|
||
│ │ 图标 │ │ 图标 │ │ 图标 │ │ 图标 │ │
|
||
│ └────────┘ └────────┘ └────────┘ └────────┘ │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 左侧信息区（40%） │ 右侧表单区（60%） │
|
||
│ ┌─────────────────────────────┐ │ ┌────────────────────────┐│
|
||
│ │ │ │ │ 在线留言表单 ││
|
||
│ │ 联系信息 │ │ │ ││
|
||
│ │ │ │ │ 咨询类型 * ││
|
||
│ │ 咨询热线 │ │ │ ○ 加盟咨询 ││
|
||
│ │ 400-xxx-xxxx │ │ │ ○ 工程合作 ││
|
||
│ │ │ │ │ ○ 客户反馈 ││
|
||
│ │ 电子邮箱 │ │ │ ○ 其他 ││
|
||
│ │ contact@chuanggao.com │ │ │ ││
|
||
│ │ │ │ │ 您的姓名 * ││
|
||
│ │ 公司地址 │ │ │ [________________] ││
|
||
│ │ 广东省佛山市... │ │ │ ││
|
||
│ │ │ │ │ 联系电话 * ││
|
||
│ │ [查看地图位置] │ │ │ [________________] ││
|
||
│ │ │ │ │ ││
|
||
│ │ 关注我们 │ │ │ 电子邮箱 ││
|
||
│ │ [微信] [微博] [抖音] │ │ │ [________________] ││
|
||
│ │ │ │ │ ││
|
||
│ │ │ │ │ 公司名称 ││
|
||
│ └─────────────────────────────┘ │ │ [________________] ││
|
||
│ │ │ ││
|
||
│ │ │ 留言内容 * ││
|
||
│ │ │ [ ] ││
|
||
│ │ │ [ ] ││
|
||
│ │ │ ││
|
||
│ │ │ [ 提 交 ] ││
|
||
│ │ └────────────────────────┘│
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 加盟流程图示 │
|
||
│ 咨询了解 → 实地考察 → 提交申请 → 签订合同 → 店面装修 → 开业 │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 九、后台管理页面
|
||
|
||
### 9.1 后台布局（Layout.vue）
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ ┌─────────┐ 创高家具管理系统 管理员 │ 退出 │
|
||
│ │ Logo │ │
|
||
├──────────┴──────────────────────────────────────────────────┤
|
||
│ ┌──────────┐ ┌─────────────────────────────────────────────┐│
|
||
│ │ │ │ ││
|
||
│ │ 控制台 │ │ ││
|
||
│ │ │ │ ││
|
||
│ ├──────────┤ │ ││
|
||
│ │ 内容管理 │ │ RouterView ││
|
||
│ │ ·轮播图 │ │ (后台页面内容) ││
|
||
│ │ ·页面区块│ │ ││
|
||
│ │ ·媒体库 │ │ ││
|
||
│ ├──────────┤ │ ││
|
||
│ │ 产品管理 │ │ ││
|
||
│ │ ·分类 │ │ ││
|
||
│ │ ·产品 │ └─────────────────────────────────────────────┘│
|
||
│ ├──────────┤ │
|
||
│ │ 案例管理 │ │
|
||
│ ├──────────┤ │
|
||
│ │ 新闻管理 │ │
|
||
│ ├──────────┤ │
|
||
│ │ 留言管理 │ │
|
||
│ ├──────────┤ │
|
||
│ │ 系统设置 │ │
|
||
│ │ ·公司信息│ │
|
||
│ │ ·管理员 │ │
|
||
│ │ ·操作日志│ │
|
||
│ └──────────┘ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 9.2 核心后台页面清单
|
||
|
||
| 页面 | 功能描述 |
|
||
|------|----------|
|
||
| **Dashboard** | 数据统计概览：今日访问、新增留言、待办事项 |
|
||
| **轮播图管理** | 增删改查轮播图，支持拖拽排序，预览效果 |
|
||
| **页面区块管理** | 可视化编辑首页各板块文本/图片，实时预览 |
|
||
| **媒体库** | 上传/查看/删除图片，显示MinIO直链，支持批量上传 |
|
||
| **产品分类** | 多级分类管理，图标上传，排序调整 |
|
||
| **产品管理** | 产品增删改查，富文本编辑，多图上传，参数配置 |
|
||
| **案例管理** | 案例增删改查，图片轮播排序，关联产品 |
|
||
| **新闻管理** | 新闻增删改查，发布/下线，置顶设置 |
|
||
| **留言管理** | 留言列表，状态筛选，回复功能 |
|
||
| **公司信息** | 编辑所有公司配置，SEO设置，上传logo/二维码 |
|
||
|
||
---
|
||
|
||
## 十、关键组件设计细节
|
||
|
||
### 10.1 HeroBanner（首屏轮播）
|
||
|
||
```vue
|
||
<!-- 特性 -->
|
||
- 全屏高度（100vh）
|
||
- 支持视频背景或图片背景
|
||
- 深色渐变遮罩（保证文字可读）
|
||
- 金属质感标题动画（GSAP）
|
||
- 响应式：移动端显示简化文案
|
||
- 支持手势滑动（移动端）
|
||
- 自动轮播 + 手动控制
|
||
```
|
||
|
||
### 10.2 ProductCard（产品卡片）
|
||
|
||
```vue
|
||
<!-- 悬停效果 -->
|
||
- 图片缩放 1.05
|
||
- 显示"查看详情"按钮（金色）
|
||
- 产品名称高亮
|
||
- 阴影加深
|
||
|
||
<!-- 布局 -->
|
||
- 图片区：宽高比 4:3
|
||
- 信息区：名称 + 价格（如显示）
|
||
- 移动端：单列布局
|
||
```
|
||
|
||
### 10.3 CaseCard（案例卡片）
|
||
|
||
```vue
|
||
<!-- 悬停效果 -->
|
||
- 图片轻微变暗
|
||
- 从底部滑入信息层
|
||
- 显示标题 + 地点/面积
|
||
- "查看案例"按钮
|
||
|
||
<!-- 布局 -->
|
||
- 瀑布流或等高分栏
|
||
- PC端：3列
|
||
- 平板：2列
|
||
- 手机：1列
|
||
```
|
||
|
||
### 10.4 LangSwitch（语言切换）
|
||
|
||
```vue
|
||
<!-- 设计 -->
|
||
- 简洁的下拉或按钮组
|
||
- 中文 / EN 切换
|
||
- 切换后刷新页面获取对应语言数据
|
||
- 记住选择（localStorage）
|
||
```
|
||
|
||
---
|
||
|
||
## 十一、响应式断点适配
|
||
|
||
### 11.1 首页响应式
|
||
|
||
| 元素 | PC (≥1200px) | 平板 (768-1199px) | 手机 (<768px) |
|
||
|------|--------------|-------------------|---------------|
|
||
| HeroBanner | 全屏高度 | 80vh高度 | 70vh高度 |
|
||
| 服务卡片 | 3列并排 | 2列+1列 | 单列堆叠 |
|
||
| 产品网格 | 4列 | 3列 | 2列 |
|
||
| 案例网格 | 3列 | 2列 | 1列 |
|
||
| 品牌实力数字 | 4列并排 | 2×2网格 | 2×2网格 |
|
||
|
||
### 11.2 导航响应式
|
||
|
||
| 设备 | 导航形式 |
|
||
|------|----------|
|
||
| PC | 水平导航，完整菜单 |
|
||
| 平板 | 水平导航，部分折叠 |
|
||
| 手机 | 汉堡菜单，全屏抽屉 |
|
||
|
||
---
|
||
|
||
## 十二、动画效果规划
|
||
|
||
### 12.1 入场动画
|
||
|
||
| 元素 | 动画 | 触发条件 |
|
||
|------|------|----------|
|
||
| Hero标题 | 从下向上滑入+淡入 | 页面加载 |
|
||
| 服务卡片 | 依次从下方弹入 | 滚动到视口 |
|
||
| 产品卡片 | 缩放淡入 | 滚动到视口 |
|
||
| 案例图片 | 从左/右滑入 | 滚动到视口 |
|
||
| 数字统计 | 数字递增动画 | 滚动到视口 |
|
||
|
||
### 12.2 交互动画
|
||
|
||
| 交互 | 动画效果 |
|
||
|------|----------|
|
||
| 导航悬停 | 下划线从左到右展开 |
|
||
| 按钮悬停 | 背景色渐变+轻微上移 |
|
||
| 卡片悬停 | 图片放大+阴影加深 |
|
||
| 页面切换 | 淡入淡出 |
|
||
| 图片加载 | 骨架屏→渐显 |
|
||
|
||
---
|
||
|
||
## 十三、SEO 结构
|
||
|
||
### 13.1 页面SEO配置
|
||
|
||
```typescript
|
||
// useSEO.ts 组合式函数
|
||
interface SEOConfig {
|
||
title: string
|
||
titleEn: string
|
||
keywords: string
|
||
keywordsEn: string
|
||
description: string
|
||
descriptionEn: string
|
||
ogImage?: string
|
||
}
|
||
|
||
// 每个页面调用
|
||
useSEO({
|
||
title: '产品中心',
|
||
titleEn: 'Products',
|
||
keywords: '全屋定制,家具,沙发,床',
|
||
keywordsEn: 'custom furniture,sofa,bed',
|
||
description: '创高家具产品中心...',
|
||
descriptionEn: 'ChuangGao Furniture products...',
|
||
})
|
||
```
|
||
|
||
### 13.2 路由元信息
|
||
|
||
```typescript
|
||
// router/portal.ts
|
||
meta: {
|
||
title: '产品中心',
|
||
titleEn: 'Products',
|
||
seo: {
|
||
keywords: '...',
|
||
description: '...',
|
||
}
|
||
}
|
||
```
|
||
|
||
### 13.3 SSR/预渲染建议
|
||
|
||
- 产品详情页：预渲染（重要SEO页面）
|
||
- 案例详情页：预渲染
|
||
- 新闻详情页：预渲染
|
||
- 列表页：客户端渲染 + 动态Meta
|