mjz update

docs/10.文档/20.基础元素/60.标签.md

@@ -5,10 +5,126 @@ permalink: /pages/basics/tag
 article: false
 ---
 
-## 标签
-
-::: details 点此查看页面源代码
-页面位置：`/pages/basics/tag`
-```vue
+## 标签形状
+> css 代码
+```css
+.cu-tag  默认　　
+.cu-tag round  椭圆
+.cu-tag radius  圆角
 ```
-:::
+
+> 演示代码
+```vue
+<view class='cu-tag'>默认</view>
+<view class='cu-tag round'>椭圆</view>
+<view class='cu-tag radius'>圆角</view>
+```
+
+## 标签尺寸
+
+> css 代码
+```css
+.cu-tag sm  小尺寸
+.cu-tag  默认
+```
+
+> 演示代码
+```vue
+<view class='cu-tag radius sm'>小尺寸</view>
+<view class='cu-tag radius'>普通尺寸</view>
+```
+
+## 标签颜色
+
+> css 代码
+```css
+.bg-red 背景颜色 | .bg-...
+```
+
+> 演示代码
+```vue
+<view class="cu-tag bg-red">标签</view>
+```
+
+## 镂空标签
+`.bg-` 换成 `.line-`
+
+> css 代码
+```css
+.line-red|...
+```
+
+> 演示代码
+```vue
+<view class="cu-tag line-red">标签</view>
+```
+
+## 胶囊样式
+
+父容器加样式 `.cu-capsule`，里面包裹需要的图标和标签
+
+> 演示代码 可对比右侧预览
+```vue
+<view class="cu-capsule">
+    <view class='cu-tag bg-red'>
+        <text class='cuIcon-likefill'></text>
+    </view>
+    <view class="cu-tag line-red">
+        12
+    </view>
+</view>
+<view class="cu-capsule round">
+    <view class='cu-tag bg-blue '>
+        <text class='cuIcon-likefill'></text>
+    </view>
+    <view class="cu-tag line-blue">
+        23
+    </view>
+</view>
+<view class="cu-capsule round">
+    <view class='cu-tag bg-blue '>
+        说明
+    </view>
+    <view class="cu-tag line-blue">
+        123
+    </view>
+</view>
+<view class="cu-capsule radius">
+    <view class='cu-tag bg-grey '>
+        <text class='cuIcon-likefill'></text>
+    </view>
+    <view class="cu-tag line-grey">
+        23
+    </view>
+</view>
+<view class="cu-capsule radius">
+    <view class='cu-tag bg-brown sm'>
+        <text class='cuIcon-likefill'></text>
+    </view>
+    <view class="cu-tag line-brown sm">
+        23
+    </view>
+</view>
+```
+
+## 数字标签
+
+父容器一般为头像 `cu-avatar`，其中包裹**标签**，加入样式 `.badge`
+
+> 演示代码 可对比右侧预览
+```vue
+<view class='cu-avatar xl radius'>
+    港
+    <view class="cu-tag badge">99+</view>
+</view>
+<view class='cu-avatar xl radius' style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)">
+    <view class='cu-tag badge'>9</view>
+</view>
+<view class='cu-avatar xl radius'>
+    <view class='cu-tag badge'>99</view>
+    <text class='cuIcon-people'></text>
+</view>
+<view class='cu-avatar xl radius'>
+    <view class='cu-tag badge'>99+</view>
+</view>
+```