Capsule & Dropdown
胶囊选择器 & 弹出菜单
Capsule · 胶囊选择器
高度 32px，宽度 334px，全圆角 G05 背景；选中项白色全圆角背景，文字 G60，未选中文字 G50
Dropdown · 弹出菜单
与 PC 端下拉菜单样式一致，白色背景 #FFFFFF，阴影 #124AB4 透明度 0.16，圆角 8px，选项高度 32px，文字 G60
| 属性 | 值 | Token |
|---|
| 高度 | 32px | --cap-height |
| 默认宽度 | 334px | --cap-width |
| 宽度自适应 | 选项变多时宽度自适应变宽 | width: auto; min-width |
| 圆角 | 全圆角 999px | --cap-radius |
| 背景颜色 | #F5F7FA G05 | --cap-bg → --G05 |
| 未选中文字颜色 | #6B7A99 G50 | --cap-text → --G50 |
| 选中文字颜色 | #223355 G60 | --cap-active-text → --G60 |
| 选中文字字重 | 500 | --cap-active-font |
| 未选中文字字重 | 400 | --cap-font |
| 字号 | 14px | --cap-font |
| 选中背景 | #FFFFFF G0 白色全圆角 | --cap-active-bg → --G0 |
| 选中背景高度 | 28px（上下各 2px 间距） | --cap-slider-height |
| 选中背景圆角 | 999px（全圆角） | --cap-item-radius |
| 选项边距 | 两端 12px | --cap-padding |
| 背景颜色 | #FFFFFF G0 | --dd-bg → --G0 |
| 阴影颜色 | #124AB4 透明度 0.16 | --dd-shadow-color / --dd-shadow-opacity |
| 圆角 | 8px | --dd-radius |
| 内边距 | 6px | padding |
| 选项高度 | 32px | --dd-item-height |
| 选项文字颜色 | #223355 G60 | --dd-item-text → --G60 |
| 选中文字颜色 | #3388FF DB60 | --dd-item-active-text → --DB60 |
| 选中文字字重 | 500 | font-weight |
| 字号 | 14px | --dd-item-font |
| Hover 背景 | #F5F7FA G05 | --dd-item-hover-bg → --G05 |
| 选项圆角 | 4px | --dd-item-radius |
| 选项内边距 | 0 12px | --dd-item-padding |
| 触发器高度 | 32px | 同 --cap-height |
| 触发器背景 | G05 / 选中 G0 | --G05 / --G0 |
| 触发器圆角 | 999px（全圆角） | 同 --cap-radius |
| 箭头图标 | 16×16px 下拉箭头 | arrow icon |
| 展开时箭头 | 旋转 180° | transform: rotate(180deg) |
| 胶囊选中滑块 | 0.2s cubic-bezier(.4,0,.2,1) | transition |
| 菜单展开 | 0.15s ease | opacity + translateY |