独立胶囊 Tab · 对比 Demo

在现网胶囊内容结构不变的前提下,将每个 Tab 从轨道连体改为独立胶囊,并加大间距。 下方 A 为现网对照,B/C/D 为独立方案(间距 16 / 24 / 32px,均可点击切换)。

← 索引 第二组方案

A 现网 · 轨道内连体(对照)

多个 Tab 包在同一 panel-pill-tabs__track 绿底容器内,胶囊之间 gap 10px,视觉上像一组。

推荐 B 独立胶囊 · 间距 16px

去掉外层轨道,每个 Tab 自带白底 + 2px 边框 + 轻阴影;未选中按来源保留绿/琥珀边框色。

C 独立胶囊 · 间距 24px

同 B,胶囊间距加大到 24px,分离感更强。

D 独立胶囊 · 间距 32px + 略放大

间距 32px,胶囊 min-height 40px、圆角 12px,点击区域更大。