共享组件样式规范（已验证）
来源：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个月(不含本月，不支持客源储值最高)
