115 lines
3.2 KiB
Markdown
115 lines
3.2 KiB
Markdown
# 共享组件样式规范（已验证）
|
||
|
||
> 来源：board-coach 页面迁移验收通过后提取
|
||
> 用途：board-customer、board-finance 等看板页面复用
|
||
> 更新日期：2026-03-07
|
||
|
||
## 1. AI 悬浮按钮（ai-float-button）
|
||
|
||
- 组件路径：`components/ai-float-button/`
|
||
- 机器人 SVG icon + 渐变流动动画背景
|
||
- 默认 bottom 220rpx（在自定义底部导航栏上方）
|
||
|
||
## 2. 自定义底部导航栏（board-tab-bar）
|
||
|
||
- 组件路径：`components/board-tab-bar/`
|
||
- 用于非 TabBar 的看板子页面（board-coach、board-customer）
|
||
- SVG icon 从 H5 原型提取，路径 `/assets/icons/tab-*-nav*.svg`
|
||
|
||
### 样式参数
|
||
| 属性 | 值 |
|
||
|------|-----|
|
||
| 高度 | 100rpx |
|
||
| 背景 | #ffffff |
|
||
| 边框 | 1rpx solid #eeeeee |
|
||
| icon 尺寸 | 44rpx × 44rpx |
|
||
| label 字号 | 20rpx |
|
||
| label 颜色 | #8b8b8b（默认）/ #0052d9（active） |
|
||
| active 字重 | 500 |
|
||
| gap（icon↔label） | 4rpx |
|
||
| safe-area | padding-bottom: env(safe-area-inset-bottom) |
|
||
|
||
## 3. 筛选下拉组件（filter-dropdown）
|
||
|
||
- 组件路径：`components/filter-dropdown/`
|
||
- 全屏宽度面板 + 半透明遮罩 + 动态 top 计算
|
||
|
||
### 触发按钮样式
|
||
| 属性 | 值 |
|
||
|------|-----|
|
||
| padding | 16rpx 20rpx |
|
||
| 背景 | #ffffff |
|
||
| 边框 | 2rpx solid var(--color-gray-1) |
|
||
| 圆角 | var(--radius-md) |
|
||
| 文字+箭头 | justify-content: center |
|
||
| label 字号 | 24rpx |
|
||
| label 字重 | 600 |
|
||
| active 边框色 | var(--color-primary) |
|
||
| active 背景 | var(--color-primary-light) |
|
||
|
||
### 下拉面板样式
|
||
| 属性 | 值 |
|
||
|------|-----|
|
||
| 定位 | fixed, left:0, right:0 |
|
||
| 最大高度 | 60vh |
|
||
| 圆角 | 0 0 28rpx 28rpx |
|
||
| 阴影 | 0 16rpx 48rpx rgba(0,0,0,0.15) |
|
||
| 选项 padding | 34rpx 32rpx |
|
||
| 选项字号 | 28rpx |
|
||
| 分隔线 | 1rpx solid rgba(0,0,0,0.03) |
|
||
| active 颜色 | var(--color-primary) |
|
||
| active 字重 | 500 |
|
||
|
||
### 遮罩层
|
||
| 属性 | 值 |
|
||
|------|-----|
|
||
| 背景 | rgba(0,0,0,0.5) |
|
||
| z-index | 999（遮罩）/ 1000（面板） |
|
||
|
||
## 4. 顶部看板 Tab 栏
|
||
|
||
- 直接写在页面 wxml 中（非独立组件）
|
||
- sticky top: 0, z-index: 20
|
||
|
||
### 样式参数
|
||
| 属性 | 值 |
|
||
|------|-----|
|
||
| 背景 | #ffffff |
|
||
| 边框 | 2rpx solid #eeeeee |
|
||
| tab padding | 24rpx 0 |
|
||
| tab 字号 | 26rpx |
|
||
| tab 字重 | 500（默认）/ 600（active） |
|
||
| tab 颜色 | #8b8b8b（默认）/ #0052d9（active） |
|
||
| 下划线宽 | 42rpx |
|
||
| 下划线高 | 5rpx |
|
||
| 下划线渐变 | linear-gradient(90deg, #0052d9, #5b9cf8) |
|
||
|
||
## 5. 筛选栏容器
|
||
|
||
- sticky top: 70rpx, z-index: 15
|
||
- 滚动隐藏/显示（220ms ease 过渡）
|
||
|
||
### 样式参数
|
||
| 属性 | 值 |
|
||
|------|-----|
|
||
| 背景 | #f3f3f3 |
|
||
| padding | 14rpx 28rpx |
|
||
| 内框背景 | #ffffff |
|
||
| 内框圆角 | 14rpx |
|
||
| 内框 padding | 10rpx |
|
||
| 内框 gap | 14rpx |
|
||
| 内框边框 | 2rpx solid #eeeeee |
|
||
| 第一个筛选项 | flex: 1.8 |
|
||
| 其他筛选项 | flex: 1 |
|
||
|
||
## 6. 筛选选项内容（board-coach 专用，供参考）
|
||
|
||
### 排序维度
|
||
- 定档业绩最高 / 定档业绩最低 / 工资最高 / 工资最低 / 客源储值最高 / 任务完成最多
|
||
|
||
### 技能筛选
|
||
- 不限 / 🎱 中式追分 / 斯诺克 / 🀄 麻将棋牌 / 🎤团建K歌
|
||
|
||
### 时间筛选
|
||
- 本月 / 本季度 / 上月 / 前3个月(不含本月) / 上季度 / 最近6个月(不含本月，不支持客源储值最高)
|