<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">标签</view></cu-custom>
<view class="cu-bar bg-white solid-bottom">
  <view class="action">
    <text class="icon-title text-blue"></text>标签形状
  </view>
</view>
<view class="padding bg-white solid-bottom">
  <view class="cu-tag">默认</view>
  <view class="cu-tag round">椭圆</view>
  <view class="cu-tag radius">圆角</view>
</view>
<view class="cu-bar bg-white margin-top  solid-bottom">
  <view class="action">
    <text class="icon-title text-blue"></text>标签尺寸
  </view>
</view>
<view class="padding bg-white">
  <view class="cu-tag radius sm">小尺寸</view>
  <view class="cu-tag radius">普通尺寸</view>
</view>
<view class="cu-bar bg-white margin-top">
  <view class="action">
    <text class="icon-title text-blue"></text>标签颜色
  </view>
</view>
<view class="padding-sm flex flex-wrap">
  <view class="padding-xs" wx:for="{{ColorList}}" wx:key>
    <view class="cu-tag bg-{{item.name}}">{{item.title}}</view>
  </view>
  <view class="padding-xs" wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
    <view class="cu-tag bg-{{item.name}} light">{{item.title}}</view>
  </view>
</view>
<view class="cu-bar bg-white margin-top">
  <view class="action">
    <text class="icon-title text-blue"></text>镂空标签
  </view>
</view>
<view class="padding-sm flex flex-wrap">
  <view class="padding-xs" wx:for="{{ColorList}}" wx:key>
    <view class="cu-tag line-{{item.name}}">{{item.title}}</view>
  </view>
</view>
<view class="cu-bar bg-white margin-top">
  <view class="action">
    <text class="icon-title text-blue"></text>胶囊样式
  </view>
</view>
<view class="padding">
  <view class="cu-capsule">
    <view class="cu-tag bg-red">
      <text class="icon-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="icon-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="icon-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="icon-likefill"></text>
    </view>
    <view class="cu-tag line-brown sm">
      23
    </view>
  </view>
</view>
<view class="cu-bar bg-white margin-top">
  <view class="action">
    <text class="icon-title text-blue"></text>数字标签
  </view>
</view>
<view class="padding flex justify-between align-center">
  <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"></view>
    <text class="icon-people"></text>
  </view>
  <view class="cu-avatar xl radius">
    <view class="cu-tag badge">99+</view>
  </view>
</view>