ColorUI/pages/image/image.wxml

<view class="bar solid-bottom">
  <view class='ml-sm'>
    <text class='iconfont icon-titles success-text'></text>
    <text class='text-lg ml-xs'>基础形状</text>
  </view>
</view>
<view class="doc-main">
  <view class='text-center'>
    <image src='http://image.weilanwl.com/img/square-4.jpg' mode='widthFix' class='radius mr-df' style='width:280rpx;'></image>
    <image src='http://image.weilanwl.com/img/square-3.jpg' mode='widthFix' class='round' style='width:280rpx;'></image>
  </view>
</view>
<view class="bar solid-bottom mt-sm">
  <view class='ml-sm'>
    <text class='iconfont icon-titles success-text'></text>
    <text class='text-lg ml-xs'>尺寸大小</text>
  </view>
</view>

<view class="doc-main">
  <view class='text-center'>
    <image src='http://image.weilanwl.com/img/square-1.jpg' mode='widthFix' class='round mr-df img-xs'></image>
    <image src='http://image.weilanwl.com/img/square-2.jpg' mode='widthFix' class='round mr-df img-sm'></image>
    <image src='http://image.weilanwl.com/img/square-3.jpg' mode='widthFix' class='round mr-df img-df'></image>
    <image src='http://image.weilanwl.com/img/square-4.jpg' mode='widthFix' class='round mr-df img-lg'></image>
    <image src='http://image.weilanwl.com/img/square-1.jpg' mode='widthFix' class='round img-xl'></image>
  </view>
</view>
<view class="bar solid-bottom mt-sm">
  <view class='ml-sm'>
    <text class='iconfont icon-titles success-text'></text>
    <text class='text-lg ml-xs'>百分百图片</text>
  </view>
</view>
<view class="doc-main">
  <view class='text-center'>
    <image src='http://image.weilanwl.com/img/4x3-1.jpg' mode='widthFix' class='img-block'></image>
  </view>
</view>
<view class="bar solid-bottom mt-sm">
  <view class='ml-sm'>
    <text class='iconfont icon-titles success-text'></text>
    <text class='text-lg ml-xs'>宫格图片</text>
  </view>
</view>
<view class="doc-main">
  <view class="lattice-image">
    <view>
      <image src='http://image.weilanwl.com/img/4x3-2.jpg' mode='aspectFill'></image>
    </view>
    <view style="background-image:url('http://image.weilanwl.com/img/4x3-3.jpg')">
      <view class='iconfont icon-close'></view>
    </view>
    <view style="background-image:url('http://image.weilanwl.com/img/4x3-4.jpg')"></view>
    <view>
      <view class='iconfont icon-upload'></view>
      <image src='http://image.weilanwl.com/img/4x3-1.jpg' mode='aspectFill'></image>
    </view>
    <view>
      <image src='http://image.weilanwl.com/img/3x4-4.jpg' mode='aspectFill'></image>
    </view>
    <view>
      <image src='http://image.weilanwl.com/img/3x4-1.jpg' mode='aspectFill'></image>
    </view>
    <view>
      <image src='http://image.weilanwl.com/img/3x4-2.jpg' mode='aspectFill'></image>
    </view>
    <view>
      <image src='http://image.weilanwl.com/img/3x4-3.jpg' mode='aspectFill'></image>
    </view>
    <view class='lattice-btn'>
      <text class='iconfont icon-pic'></text>
    </view>
  </view>
</view>