<view class="cu-custom" style="height:{{CustomBar}}px;">
  <view class="cu-bar fixed gradual-pink" 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-chat">
  <view class="cu-item self">
    <view class="main">
      <view class='content bg-green shadow-blur'>
        <text>喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！</text>
      </view>
    </view>
    <view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
    <view class='date'>2018年3月23日 13:23</view>
  </view>
  <view class='cu-info round'>对方撤回一条消息!</view>
  <view class="cu-item">
    <view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
    <view class="main">
      <view class='content shadow'>
        <text>喵喵喵！喵喵喵！</text>
      </view>
    </view>
    <view class='date '> 13:23</view>
  </view>
  <view class="cu-info">
    <text class='icon-roundclosefill text-red '></text> 对方拒绝了你的消息
  </view>
  <view  class="cu-info">
    对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
    <text class='text-blue'>发送好友验证</text>
  </view>
  <view class="cu-item self">
    <view class="main">
      <image src="https://image.weilanwl.com/img/3x4-1.jpg" class='radius' mode="widthFix"></image>
    </view>
    <view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
    <view class='date'> 13:23</view>
  </view>
  <view class="cu-item self">
    <view class="main">
      <view class='action text-bold text-grey'>
        3"
      </view>
      <view class='content shadow'>
        <text class='icon-sound text-xxl padding-right-xl'> </text>
      </view>
    </view>
    <view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
    <view class='date'>13:23</view>
  </view>
  <view class="cu-item self">
    <view class="main">
      <view class='action'>
        <text class='icon-locationfill text-orange text-xxl'></text>
      </view>
      <view class='content shadow'>
        喵星球，喵喵市
      </view>
    </view>
    <view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
    <view class='date'>13:23</view>
  </view>
  <view class="cu-item">
    <view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
    <view class="main">
      <view class='content shadow'>
       @#$^&**
      </view>      
      <view class='action text-grey'>
        <text class='icon-warnfill text-red text-xxl'></text> <text class='text-sm margin-left-sm'>翻译错误</text> 
      </view>
    </view>
    <view class='date'>13:23</view>
  </view>
</view>

<view class="cu-bar foot input">
  <view class='action'>
    <text class='icon-sound text-grey'></text>
  </view>
  <input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
  <view class='action'>
    <text class='icon-emojifill text-grey'></text>
  </view>
  <button class='cu-btn bg-green shadow-blur'>发送</button>
</view>
