--- title: 标签 date: 2023-05-28 15:20:38 permalink: /pages/basics/tag article: false --- 需要设置成标签的元素加上 class 类名 `cu-tag` 即可 ## 标签形状 > css 代码 ```css .cu-tag 默认　　 .cu-tag round 椭圆 .cu-tag radius 圆角 ``` > 演示代码 ```vue 默认椭圆圆角 ``` ## 标签尺寸 > css 代码 ```css .cu-tag sm 小尺寸 .cu-tag 默认 ``` > 演示代码 ```vue 小尺寸普通尺寸 ``` ## 标签颜色 > css 代码 ```css .bg-red 背景颜色 | .bg-... ``` > 演示代码 ```vue 标签 ``` ## 镂空标签 `.bg-` 换成 `.line-` > css 代码 ```css .line-red|... ``` > 演示代码 ```vue 标签 ``` ## 胶囊样式父容器加样式 `.cu-capsule`，里面包裹需要的图标和标签 > 演示代码可对比右侧预览 ```vue 12 23 说明 123 23 23 ``` ## 数字标签父容器一般为头像 `cu-avatar`，其中包裹**标签**，class 为 `cu-tag badge`，元素内部没有内容，则默认为红色圆点 > 演示代码可对比右侧预览 ```vue 港 99+ 9 99 99+ ```