WAP首页整体设计样式

🎨 首页整体设计样式分析

基于代码分析，首页采用模块化配置化设计，各组件可灵活组合。

📐 整体布局架构

┌─────────────────────────────────────┐
│  Title (导航栏)                      │  ← 吸顶，滚动渐变
├─────────────────────────────────────┤
│                                     │
│  Banner (轮播图)                     │  ← 高度 280rpx，圆角 20rpx
│                                     │
├─────────────────────────────────────┤
│  ┌─────────────────────────────┐   │
│  │  Menu (功能菜单)             │   │  ← 4列网格，8个/页，可翻页
│  │  [图标] [图标] [图标] [图标]  │   │
│  │  [图标] [图标] [图标] [图标]  │   │
│  └─────────────────────────────┘   │
├─────────────────────────────────────┤
│  Ad (广告位)                         │  ← 2列或3列卡片
│  ┌─────────┐ ┌─────────┐           │
│  │  图片   │ │  图片   │           │
│  │  标题   │ │  标题   │           │
│  └─────────┘ └─────────┘           │
├─────────────────────────────────────┤
│  Hot (热门推荐)                      │  ← 网格布局
│  ┌─────────────────────────────┐   │
│  │ [图标] 标题                  │   │
│  │ 描述文字...                  │   │
│  │          ⭐ 收藏  👤 使用   │   │
│  └─────────────────────────────┘   │
├─────────────────────────────────────┤
│  Tabbar (底部导航)                   │
└─────────────────────────────────────┘

🎨 设计规范

配色方案

用途	颜色值	说明
页面背景	`#f4f8fd`	浅灰蓝色
卡片背景	`#ffffff`	纯白
主文字	`#222222`	深黑
次要文字	`#999999`	灰色
辅助文字	`#495770`	蓝灰色
主题色	`#2979ff`	蓝色（uView主色）
收藏色	`#ffcd2c`	黄色

尺寸规范

元素	尺寸	圆角
页面边距	`30rpx`	-
卡片圆角	`20rpx`	-
Banner高度	`280rpx`	`20rpx`
菜单图标	`80rpx × 80rpx`	-
广告图片	`330rpx × 236rpx` (2列)	-
间距	`20rpx ~ 30rpx`	-

字体规范

级别	大小	字重	用途
标题	`28rpx`	`bold`	导航栏
大标题	`text-xl`	`medium`	区块标题
正文	`text-lg`	`medium`	卡片标题
描述	`text-sm`	normal	描述文字
辅助	`text-xs`	normal	辅助信息

📱 核心组件分析

1. Title 导航栏

特性：吸顶效果 (u-sticky)

交互：滚动时背景渐变透明 → 白色

高度：自适应内容 + 24rpx 上下内边距

2. Banner 轮播图

组件：u-swiper

高度：280rpx

圆角：20rpx

指示器：内置圆点指示器

布局：4列网格 (grid-template-columns: repeat(4, 1fr))

分页：每页8个，超出可滑动翻页

指示器：自定义矩形指示器

高度：单页 140rpx，双页 320rpx

4. Ad 广告位

布局：2列或3列网格（可配置）

卡片结构：图片 + 标题 + 描述

图片比例：2列时 330×236，3列时 210×148

5. Hot 热门推荐

布局：可配置列数 (showType)

卡片结构：

┌────────────────────┐
│ [图标] 标题         │
│ 描述文字...         │
│         ⭐ 👤      │
└────────────────────┘

交互：点击跳转、收藏功能

🔧 技术特点

配置化设计

首页通过 getDecorate 接口获取配置数据，支持后台动态配置：

响应式布局

使用 rpx 适配多端

Grid 布局灵活配置列数

图片自适应容器

交互细节

导航栏滚动渐变效果

菜单分页指示器

收藏状态实时更新

图片懒加载

💡 设计亮点

模块化：各区块独立组件，可自由组合

配置化：后台可动态配置首页布局和内容

视觉层次：卡片阴影 + 圆角 + 留白

交互反馈：收藏、点击等操作有视觉反馈

多端适配：H5、小程序、App 统一体验

WAP首页整体设计样式

🎨 首页整体设计样式分析#

📐 整体布局架构#

🎨 设计规范#

配色方案#

尺寸规范#

字体规范#

📱 核心组件分析#

1. Title 导航栏#

2. Banner 轮播图#

3. Menu 功能菜单#

4. Ad 广告位#

5. Hot 热门推荐#

🔧 技术特点#

配置化设计#

响应式布局#

交互细节#

💡 设计亮点#