ColorUI/pages/item/item.wxml

<view class='column-box'>
  <view class='column-li'>
    <image src='http://www.diwuyuan.com/attachs/case/137/201803/20180319_7E4E388763E70039631E31B9F9BB8A42.jpg_thumb.png' mode='widthFix'></image>
  </view>
  <view class='column-li'>
    <image src='http://www.diwuyuan.com/attachs/case/137/201803/20180319_06C12D2703D564BAC06F2BCC311E9440.jpg_thumb.png' mode='widthFix'></image>
  </view>
  <view class='column-li'>
    <image src='http://www.diwuyuan.com/attachs/case/18/201801/20180123_C4B1DD3B9D4326F9458A1C11FAFD23F6.jpg_thumb.png' mode='widthFix'></image>
  </view>
  <view class='column-li'>
    <image src='http://www.diwuyuan.com/attachs/case/18/201801/20180123_5B3C4F1DAFB8F86186B50D18919A7BA8.jpg_thumb.png' mode='widthFix'></image>
  </view>
</view>
<view class='order-box'>
  <view class='order-item'>
    <view class='order-bar justify-between'>
      <view class='ml-sm'>喵星酱的杂货铺
        <text class='iconfont icon-right'></text> </view>
      <view class='warning-text mr-sm'>等待付款</view>
    </view>
    <view class='goods-main'>
      <image src='http://image.weilanwl.com/img/square-1.jpg' mode='aspectFill' class='goods-list-img'></image>
      <view class='goods-text'>
        <view class=''>非常可爱的喵咪爬架 喵星酱特价供货</view>
        <view class='gray-text text-sm'>主子爱不释爪的首选</view>
        <view class='mt-xs'>
          <text class='badge danger round mr-sm'>爬架</text>
          <text class='badge success round'>喵星酱</text>
        </view>
      </view>
      <view class='goods-info'>
        <view class='price'>¥ 520.00</view>
        <view class='del-price'>¥ 1314.00</view>
        <view class='goods-num'>x 2</view>
      </view>
    </view>
    <view class='pt-sm pr-sm text-right'>
      共2件商品 合计:￥2360.00 (含运费￥)
    </view>
    <view class='flex p-sm justify-end'>
      <view class=''>
        <button class='gray btn mr-sm'>查看详情</button>
        <button class='warning btn'>立即付款</button>
      </view>
    </view>
  </view>
</view>

<view class='item-list-box mt-sm'>
  <view class="goods-list-li">
    <view class='goods-list-main'>
      <image src='http://image.weilanwl.com/img/4x4.jpg' mode='aspectFill' class='goods-list-img'></image>
      <view class='goods-list-text'>
        <view class='goods-list-top'>
          <view class='text-lg'>【新品首发】微信小程序前端定制化服务 </view>
          <view class='gray-text'>ColorUi规范 精简 高效</view>
        </view>
        <view class='goods-list-foot'>
          <view class='goods-list-price'>0.01
            <text class='gray-text'>9689</text>
          </view>
          <button class='danger btn sm'> 去购买
            <text class='iconfont icon-right'></text>
          </button>
        </view>
      </view>
    </view>
  </view>

  <view class="case-list-li">
    <view class="case-list-img">
      <image src="http://image.weilanwl.com/img/4x3-1.jpg" mode="widthFix"></image>
      <view class="case-list-badge">标签</view>
      <view class="case-list-title">小主子卖萌熊猫套装</view>
    </view>
    <view class="item-list-data">
      <image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
      <view class='item-list-author'>
        <view class="item-list-name">文晓港
          <text>/ 伪铲屎官</text>
        </view>
        <view class="item-list-info">
          <text class="iconfont icon-timefill"> 十天前</text>
          <view class="item-list-num">
            <text class="iconfont icon-attentionfill"> 10</text>
            <text class="iconfont icon-favorfill"> 20</text>
            <text class="iconfont icon-messagefill"> 30</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="article-list-li">
    <view class="article-list-title">这里有个戏精铲屎官，主子了解一下？</view>
    <view class="article-list-content">
      <view class="article-list-thumbs">
        <image src="http://image.weilanwl.com/img/4x3-3.jpg" mode="widthFix"></image>
      </view>
      <view class="article-list-desc">
        <view class='article-list-text'> 这是一个伪铲屎官为了给自己的程序凑字数瞎几把乱写的一堆文字，了解一下就OK！ヾ(=･ω･=)o</view>
        <view class="article-list-tag">
          <view class='badge danger round mr-sm'>假装有猫系列</view>
          <view class='badge success round'>戏精系列</view>
        </view>
      </view>
    </view>
    <view class="item-list-data">
      <image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
      <view class='item-list-author'>
        <view class="item-list-name">文晓港
          <text>/ 程序员</text>
        </view>
        <view class="item-list-info">
          <text class="iconfont icon-timefill"> 十天前</text>
          <view class="item-list-num">
            <text class="iconfont icon-attentionfill"> 10</text>
            <text class="iconfont icon-favorfill"> 20</text>
            <text class="iconfont icon-messagefill"> 30</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="article-list-li">
    <view class="article-list-title">这是没有图片的文章列表项的标题</view>
    <view class="article-list-content">
      <view class="article-list-desc">
        <view class='article-list-text'>其实吧，做程序员也不都是枯燥乏味的，比如我吧，为了写段话在这里凑字数也是很开心的呀，嘻嘻嘻！求关注！持续更新组件...</view>
        <view class="article-list-tag">
          <view class='badge warning round'># 严肃脸 #</view>
        </view>
      </view>
    </view>
    <view class="item-list-data">
      <image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
      <view class='item-list-author'>
        <view class="item-list-name">文晓港
          <text>/ 90后</text>
        </view>
        <view class="item-list-info">
          <text class="iconfont icon-timefill"> 十天前</text>
          <view class="item-list-num">
            <text class="iconfont icon-attentionfill"> 10</text>
            <text class="iconfont icon-favorfill"> 20</text>
            <text class="iconfont icon-messagefill"> 30</text>
          </view>
        </view>
      </view>
    </view>
  </view>


</view>
<view class='card-list-box'>
  <view class="ins-list-li">
    <view class="ins-list-img">
      <image src="http://image.weilanwl.com/img/3x4-1.jpg" mode="widthFix"></image>
      <view class="ins-list-num">
        <text class="iconfont icon-attentionfill">10</text>
        <text class="iconfont icon-favorfill">20</text>
        <text class="iconfont icon-picfill">30</text>
      </view>
      <view class="ins-list-title">小兔几</view>
    </view>
    <view class="ins-list-author">
      <image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
      <view class="ins-list-name">文晓港</view>
    </view>
  </view>
  <view class="ins-list-li">
    <view class="ins-list-img">
      <image src="http://image.weilanwl.com/img/3x4-2.jpg" mode="widthFix"></image>
      <view class="ins-list-num">
        <text class="iconfont icon-attentionfill">10</text>
        <text class="iconfont icon-favorfill">20</text>
        <text class="iconfont icon-picfill">30</text>
      </view>
      <view class="ins-list-title">瓜皮的id酱的照片</view>
    </view>
    <view class="ins-list-author">
      <image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
      <view class="ins-list-name">文晓港</view>
    </view>
  </view>
  <view class="ins-list-li">
    <view class="ins-list-img">
      <image src="http://image.weilanwl.com/img/3x4-3.jpg" mode="widthFix"></image>
      <view class="ins-list-num">
        <text class="iconfont icon-attentionfill"> 10</text>
        <text class="iconfont icon-favorfill"> 20</text>
        <text class="iconfont icon-picfill"> 30</text>
      </view>
      <view class="ins-list-title">求收养</view>
    </view>
    <view class="ins-list-author">
      <image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
      <view class="ins-list-name">文晓港</view>
    </view>
  </view>
  <view class="ins-list-li">
    <view class="ins-list-img">
      <image src="http://image.weilanwl.com/img/3x4-4.jpg" mode="widthFix"></image>
      <view class="ins-list-num">
        <text class="iconfont icon-attentionfill"> 10</text>
        <text class="iconfont icon-favorfill"> 20</text>
        <text class="iconfont icon-picfill"> 30</text>
      </view>
      <view class="ins-list-title">小主子和Ta的玩具.jpg</view>
    </view>
    <view class="ins-list-author">
      <image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
      <view class="ins-list-name">文晓港</view>
    </view>
  </view>
</view>