style(index): 优化首页样式与布局
- 重新设计首页背景色与容器安全区适配 - 优化Hero Banner区域增加圆角遮罩效果 - 调整Hero Grid菜单区样式,去除背景色实现透明效果 - 新增公告条样式,自定义样式替代NutUI NoticeBar - 优化底部购买按钮样式,调整高度及阴影 - 统一首页通用section的左右边距,融合TrustSection和ContactSection样式
This commit is contained in:
23
.workbuddy/memory/2026-04-09.md
Normal file
23
.workbuddy/memory/2026-04-09.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# 2026-04-09 工作日志
|
||||
|
||||
## 首页UI重构 — 去除"豆腐块"布局
|
||||
用户反馈首页过于规整的"豆腐块"布局,要求重新设计。完成以下改动:
|
||||
|
||||
### 设计思路
|
||||
- 打破均匀间距,各模块使用差异化 padding/margin
|
||||
- 去掉公式化的"模块标题+白色卡片"结构
|
||||
- 引入沉浸式视觉区域和横向交互
|
||||
|
||||
### 具体改动
|
||||
1. **index.tsx** — 重构布局结构,引入 Hero 区域概念,Banner+Grid 融为一体
|
||||
2. **index.scss** — 全局样式重写,浅灰背景(#f5f5f7),自定义公告条样式
|
||||
3. **TrustSection** — 从均匀三列改为横向滑动渐变卡片,突出数据亮点(10年/15年/98%)
|
||||
4. **ContactSection** — 从2x2网格改为全宽深色底部(#1e293b→#0f172a),沉浸式设计
|
||||
5. **BestSellers** — 从纵向列表改为横向图文卡片(左图右信息),更紧凑
|
||||
6. **CatalogShowcase** — 从小卡片改为大面积渐变视觉卡片,带装饰性书本图形
|
||||
7. **NoticeBar** — 替换NutUI NoticeBar为自定义轻量公告条
|
||||
|
||||
### 注意事项
|
||||
- `Fire` 图标在 @nutui/icons-react-taro 中不存在,改用 `StarFill`
|
||||
- Banner 组件保留动态数据加载能力,圆角样式通过外层 CSS 控制
|
||||
- Menu 组件已在原代码中 hidden,本次未改动
|
||||
Reference in New Issue
Block a user