【微信小程序】之自定义三宫格一行展示row-grid（简单数据看板）

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

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

Page({
  data: { 
    rowGridItems: [{
        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: '本季度'
      },
    ]
  }, 
  rowGridTap(e) {
    console.log(e);
  },
})