【微信小程序】之自定义四宫格（不用mp-grids扩展组件实现，这个组件太难用了）

<view class="grid">
  <view class="grid-item" wx:for="{{gridItems}}" wx:key="*this" bindtap="gridTap">
    <image src="{{item.imgUrl}}" mode="aspectFit" />
    <text class="text">{{item.text}}</text>
    <text class="num">{{item.num}}</text>
    <text class="tag">{{item.tag}}</text>
  </view>
</view>

 
.grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 600rpx;
}
 
.grid .grid-item {
  position: relative;
  padding: 30rpx;
  width: 50%;
  box-sizing: border-box;
  border: 1px solid #eee;
  font-size: 30rpx;
  flex-direction: column;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.grid .grid-item image {
  margin: 0 auto;
  width: 60rpx;
  height: 60rpx;
}
 
.grid .grid-item .num {
  font-size: 40rpx;
  color: red;
}
 
.grid .grid-item .tag {
  font-size: 20rpx;
  border-radius: 30rpx;
  padding: 2rpx 10rpx;
  height: 30rpx;
  color: white;
  background: red;
  position: absolute;
  margin: auto;
  top: 40rpx;
  right: 40rpx;
}

Page({
  data: {
    gridItems: [{
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '回收量',
        num: 141230.9,
        tag: '本月'
      },
      {
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '销售量',
        num: 3214.1,
        tag: '本周'
      },
      {
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '打包总量',
        num: 9963.2,
        tag: '本季度'
      },
      {
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '未打包量',
        num: 2451.2,
        tag: '本年'
      },
    ]
  },
  gridTap(e) {
    console.log(e);
  },
})