blandarebiter/number
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
number/首页重构方案.md

7.5 KiB
Raw Permalink Blame History

首页顶部区域重构方案

现状问题

当前首页顶部分为两大区块，布局臃肿且视觉层次不清晰：

  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 链接
<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 区的按钮
  • 统计卡片：保留现有的彩色渐变数字风格，但改为更紧凑的横向布局
<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（如果其他地方不用的话）

预期效果

  • 首屏信息密度提高，轮播图作为视觉焦点占据主导
  • 统计数据和活动信息紧凑排列，一屏可见
  • 去掉搜索框后页面更干净，用户通过导航栏搜索即可
  • 整体视觉从"信息堆砌"变为"图片驱动 + 数据辅助"的现代电商首页风格