<view class="cu-custom" style="height:{{CustomBar}}px;">
  <view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
      <text class='icon-back'></text> 头像
    </navigator>
  </view>
</view>
<view class="cu-bar bg-white">
  <view class='action'>
    <text class='icon-title text-blue'></text>头像形状
  </view>
</view>
<view class="padding">
  <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
  <view class="cu-avatar radius margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></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-avatar sm round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
  <view class="cu-avatar round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
  <view class="cu-avatar lg round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
  <view class="cu-avatar xl round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></view>
</view>
<view class="padding">
  <view class="cu-avatar sm round margin-left bg-red"> A</view>
  <view class="cu-avatar round margin-left bg-red">B</view>
  <view class="cu-avatar lg round margin-left bg-red">C</view>
  <view class="cu-avatar xl round margin-left bg-red">D</view>
</view>
<view class="padding">
  <view class="cu-avatar sm round margin-left bg-red"> 蔚</view>
  <view class="cu-avatar round margin-left bg-red">蓝</view>
  <view class="cu-avatar lg round margin-left bg-red">
    <text>wl</text>
  </view>
  <view class="cu-avatar xl round margin-left bg-red">
    <text class='avatar-text'>网络</text>
  </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-avatar radius">
    <text class='icon-people'></text>
  </view>
  <view class="cu-avatar radius  margin-left">
    <text>港</text>
  </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">
  <view class="cu-avatar round lg bg-{{item.name}} margin-xs" wx:for="{{ColorList}}" wx:key>
    <text class='avatar-text'>{{item.name}}</text>
  </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-avatar-group">
    <view class="cu-avatar round lg" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></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-avatar round lg margin-left" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);">
    <view class="cu-tag badge {{index%2==0?'icon-female bg-pink':'icon-male bg-blue'}}"></view>
  </view>
</view>