徽标示例 · 头像
李
王
张
三丰
8
v1.4.0 · 正圆16px(个位数)/数字矩形24×16px(两位数及99+)/文字矩形28×16px/圆点12px · R60 背景 + 白色外描边(box-shadow) · 头像/图标/文字场景
| 数字范围 | 徽标类型 | 尺寸 |
|---|---|---|
| 个位数（1-9） | 正圆徽标 | 16×16px |
| 两位数（10-99） | 数字矩形徽标 | 24×16px |
| 99+ / 超过两位数 | 数字矩形徽标 | 24×16px |
| 仅提示 | 圆点徽标 | 12×12px |
| 文字标签 | 文字矩形徽标 | 28×16px |
| 属性 | 值 |
|---|---|
| 圆点徽标尺寸 | 12×12px，border-radius: 50% |
| 圆点徽标颜色 | R60 #F26450 |
| 圆点徽标描边 | 2px 外描边 白色 G0 #FFFFFF（box-shadow: 0 0 0 2px） |
| 正圆徽标尺寸 | 16×16px，border-radius: 50% |
| 正圆徽标背景 | R60 #F26450 |
| 正圆徽标文字 | 白色 G0 #FFFFFF，12px/500，HarmonyOS Sans |
| 正圆徽标描边 | 2px 外描边 白色 G0 #FFFFFF（box-shadow: 0 0 0 2px） |
| 正圆徽标适用 | 个位数的徽标显示 |
| 数字矩形尺寸 | 宽度 24px，高度 16px，border-radius: 999px |
| 数字矩形背景 | R60 #F26450 |
| 数字矩形文字 | 白色 G0 #FFFFFF，10px/500，HarmonyOS Sans |
| 数字矩形描边 | 2px 外描边 白色 G0 #FFFFFF（box-shadow: 0 0 0 2px） |
| 数字矩形适用 | 两位数及99+的数字显示 |
| 文字矩形尺寸 | 宽度 28px，高度 16px，border-radius: 999px |
| 文字矩形背景 | R60 #F26450 |
| 文字矩形文字 | 白色 G0 #FFFFFF，10px/500 |
| 文字矩形描边 | 2px 外描边 白色 G0 #FFFFFF（box-shadow: 0 0 0 2px） |
| 文字矩形适用 | 两个字的文字显示 |
| 头像徽标位置 | 右上角，transform: translate(50%, -50%) |
| 图标徽标位置 | 右上角，top: -4px, right: -6px |
| 文字徽标对齐 | vertical-align: super，与文字顶部对齐 |
| 变量 | 默认值 |
|---|---|
| --badge-dot-size | 12px |
| --badge-round-size | 16px |
| --badge-num-w | 24px |
| --badge-num-h | 16px |
| --badge-text-w | 28px |
| --badge-text-h | 16px |
| --badge-bg | #F26450 (R60) |
| --badge-text-color | #FFFFFF (G0) |
| --badge-font-size | 12px |
| --badge-num-font-size | 10px |
| --badge-outline | 0 0 0 2px #FFFFFF（外描边 box-shadow） |
| 类名 | 说明 |
|---|---|
| .badge-dot | 圆点徽标，12×12px，R60背景+白色外描边，无文字 |
| .badge-round | 正圆徽标，16×16px，个位数，R60背景+白色文字12px+白色外描边 |
| .badge-num | 数字矩形徽标，24×16px全圆角，两位数及99+，R60背景+白色文字10px+白色外描边 |
| .badge-text-label | 文字矩形徽标，28×16px全圆角，两字文字，R60背景+白色文字10px+白色外描边 |
| .avatar-badge-wrap | 头像+徽标容器，相对定位 |
| .tab-icon-wrap | 图标+徽标容器，相对定位 |
| .text-badge-wrap | 文字+徽标容器 |