最终效果如图：

教程

核心仍然是CSS的掌握，想实现这种list-item，最简单的方式便是用CSS3中的flex布局了。
下面是WXML代码，以及CSS代码：

WXML：

<view class="c-task" bindtap="tapTask">
  <view class="card">
    <view class="cover">
      <image class="image" src="{{contestItem.images[0]}}" mode="aspectFill"></image>
    </view>
    <view class="content">
      <view class="title">{{contestItem.name}}</view>
      <view class="tip">
        <view >报名截止：{{contestItem.timeEnd}}</view>
      </view>
    </view>
  </view>
</view>

CSS:

.c-task .card {
  border-radius: 4px;
  background-color: white;
}

.card .cover .image {
  height: 100px;
  width: 100%;
  background-color: #f8f8f8;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  display:block;
}

.card .content {
  padding: 8px;
  border: 1px solid #f0f7fa;
  border-top: none;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.content .title {
  height: 40px;
  font-size: 14px;
  color: #1a1a1a;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card .tip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  color: #777;
}

.card .price {
  color: red;
  font-size: 15px;
}

在最后，我建议大家为了移动端适配不同屏幕时，可以将你的rpx或px单位换成百分比，这样基本可以做到不同分辨率，例如Iphone6/7/8和iphone4不同分辨率的适配