177 lines
7.5 KiB
Markdown
177 lines
7.5 KiB
Markdown
# 首页顶部区域重构方案
|
||
|
||
## 现状问题
|
||
|
||
当前首页顶部分为两大区块，布局臃肿且视觉层次不清晰：
|
||
|
||
1. **Hero 区**（hero-section）：左侧是大块文案卡片（标题+搜索框+按钮），右侧是3个统计卡片，占据大量空间但信息密度低
|
||
2. **Spotlight 区**（spotlight-section）：左侧轮播图，右侧活动专区，两栏并排
|
||
|
||
**主要问题：**
|
||
- 搜索框在首页价值不高（顶部导航栏已有搜索入口），浪费大量空间
|
||
- Hero 文案区占比过大，用户无法一屏看到核心内容
|
||
- 轮播图和统计数据分散在两个不同区块，视觉断裂
|
||
- 整体"头重脚轻"，首屏几乎被文案和统计占满
|
||
|
||
---
|
||
|
||
## 重构目标
|
||
|
||
将 hero-section 和 spotlight-section **合并为一个紧凑的顶部区域**，布局如下：
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 轮播图（全宽） │
|
||
│ 横跨整个内容区，高度 320-360px │
|
||
│ 叠加渐变遮罩 + 标题文案 + CTA 按钮 │
|
||
└─────────────────────────────────────────────────────┘
|
||
┌──────────────────────────┬──────────────────────────┐
|
||
│ │ │
|
||
│ 数据统计面板（左） │ 活动专区（右） │
|
||
│ │ │
|
||
│ ┌──────┬──────┬──────┐ │ ┌────────────────────┐ │
|
||
│ │Skill │ 用户 │ 下载 │ │ │ 🏷 活动 大促销 │ │
|
||
│ │ 18+ │1000+ │ 4+ │ │ │ 3/21 ~ 3/26 >│ │
|
||
│ └──────┴──────┴──────┘ │ ├────────────────────┤ │
|
||
│ │ │ 📢 公告 ... >│ │
|
||
│ ┌──────────────────┐ │ ├────────────────────┤ │
|
||
│ │ 浏览商城 需求定制 │ │ │ ... >│ │
|
||
│ └──────────────────┘ │ └────────────────────┘ │
|
||
│ │ │
|
||
└──────────────────────────┴──────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 详细设计
|
||
|
||
### 第一层：全宽轮播图
|
||
|
||
- **宽度**：100% 内容区（page-container 宽度，约 1400px）
|
||
- **高度**：320px（桌面端），200px（移动端）
|
||
- **圆角**：20px
|
||
- **叠加层**：底部渐变遮罩（transparent → rgba(0,0,0,0.5)），在遮罩上叠加：
|
||
- 左下角：品牌徽章 `AI SKILL MARKETPLACE` + 主标题 `发现优质数字员工`
|
||
- 右下角：轮播指示器小圆点
|
||
- **无 Banner 时**：显示品牌占位图（渐变背景 + 标题文案 + CTA 按钮）
|
||
- **交互**：点击跳转对应 Banner 链接
|
||
|
||
```html
|
||
<section class="hero-banner page-container">
|
||
<a-carousel autoplay :autoplaySpeed="4000" effect="fade" class="banner-carousel">
|
||
<div v-for="banner in banners" :key="banner.id" class="banner-slide" @click="handleBannerClick(banner)">
|
||
<img :src="banner.imageUrl" :alt="banner.title" />
|
||
<div class="banner-overlay">
|
||
<div class="banner-info">
|
||
<div class="hero-badge">AI SKILL MARKETPLACE</div>
|
||
<h1>发现优质<span class="highlight">数字员工</span></h1>
|
||
<p>{{ banner.title }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-carousel>
|
||
</section>
|
||
```
|
||
|
||
### 第二层：左统计 + 右活动（双栏）
|
||
|
||
紧跟轮播图下方，间距 20px，采用 `grid: 1fr 1fr` 双栏布局。
|
||
|
||
#### 左侧 — 数据统计面板
|
||
|
||
- **背景**：毛玻璃白色卡片（与现有风格一致）
|
||
- **内容**：
|
||
- 上方：3 个统计数字**横向排列**（优质 Skill / 活跃用户 / 累计下载）
|
||
- 下方：一行 CTA 按钮（浏览商城 + 需求定制），替代原 hero 区的按钮
|
||
- **统计卡片**：保留现有的彩色渐变数字风格，但改为更紧凑的横向布局
|
||
|
||
```html
|
||
<div class="info-panel stats-panel">
|
||
<div class="stats-row">
|
||
<div class="stat-item" v-for="stat in statsData" :key="stat.title">
|
||
<div class="stat-value" :style="{ color: stat.color }">
|
||
{{ stat.value.toLocaleString() }}<span class="suffix">+</span>
|
||
</div>
|
||
<div class="stat-label">{{ stat.title }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="stats-actions">
|
||
<a-button type="primary" size="large" class="neon-btn-primary" @click="router.push('/skills')">浏览商城</a-button>
|
||
<a-button size="large" class="neon-btn-ghost" @click="router.push('/customize')">需求定制</a-button>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
#### 右侧 — 活动专区
|
||
|
||
- **保持现有的活动列表设计**，几乎不变
|
||
- 调整高度与左侧对齐（`align-items: stretch`）
|
||
- 列表最多显示 4 条（活动优先，公告补充）
|
||
|
||
---
|
||
|
||
## 删除的元素
|
||
|
||
| 元素 | 原位置 | 理由 |
|
||
|------|--------|------|
|
||
| 搜索框 | hero-section | 顶部导航栏已有搜索，首页无需重复 |
|
||
| Hero 文案大卡片 | hero-section | 文案融入轮播图遮罩层，不再独立占块 |
|
||
| 描述文字 "探索数千款..." | hero-section | 信息价值低，精简后更干净 |
|
||
|
||
## 保留/迁移的元素
|
||
|
||
| 元素 | 原位置 → 新位置 |
|
||
|------|-----------------|
|
||
| 轮播图 | spotlight-section → 顶部全宽 |
|
||
| 3 个统计数字 | hero-section 右侧 → 第二层左侧横排 |
|
||
| CTA 按钮（浏览商城/需求定制）| hero-section → 第二层左侧底部 |
|
||
| 活动专区 | spotlight-section 右侧 → 第二层右侧 |
|
||
| 品牌徽章 AI SKILL MARKETPLACE | hero-section → 轮播图遮罩层 |
|
||
|
||
---
|
||
|
||
## 样式规范
|
||
|
||
| 属性 | 值 |
|
||
|------|-----|
|
||
| 轮播图高度 | 320px（桌面）/ 200px（移动） |
|
||
| 轮播图圆角 | 20px |
|
||
| 双栏间距 | 20px |
|
||
| 双栏与轮播间距 | 20px |
|
||
| 统计面板内边距 | 28px |
|
||
| 活动面板内边距 | 0（保持现有） |
|
||
| 统计数字字号 | 32px bold |
|
||
| 统计标签字号 | 13px |
|
||
|
||
---
|
||
|
||
## 响应式适配
|
||
|
||
| 断点 | 布局变化 |
|
||
|------|----------|
|
||
| > 1200px | 全宽轮播 + 下方双栏（1:1） |
|
||
| 768px - 1200px | 全宽轮播 + 下方双栏（1:1），统计数字缩小 |
|
||
| < 768px | 全宽轮播（高度 200px）+ 下方单栏（统计在上，活动在下） |
|
||
|
||
---
|
||
|
||
## 涉及文件
|
||
|
||
- `frontend/src/views/home/index.vue` — 模板和样式的主要改动
|
||
|
||
## 改动范围
|
||
|
||
- **模板**：删除 `hero-section` 和 `spotlight-section`，替换为新的 `hero-banner` + `info-grid` 区块
|
||
- **样式**：删除 `.hero-section` 和 `.spotlight-section` 相关 CSS，新增 `.hero-banner` 和 `.info-grid` 样式
|
||
- **脚本**：删除 `searchKeyword` 和 `handleSearch` 相关逻辑，其余数据获取逻辑不变
|
||
- **图标导入**：删除 `SearchOutlined`（如果其他地方不用的话）
|
||
|
||
---
|
||
|
||
## 预期效果
|
||
|
||
- 首屏信息密度提高，轮播图作为视觉焦点占据主导
|
||
- 统计数据和活动信息紧凑排列，一屏可见
|
||
- 去掉搜索框后页面更干净，用户通过导航栏搜索即可
|
||
- 整体视觉从"信息堆砌"变为"图片驱动 + 数据辅助"的现代电商首页风格
|