小程序 表格

两个Item-level如果想对last-child设置样式是不可以的，因为他后面后面还有个空兄弟节点。
设置first-child伪类时我们看第一个的前面有没有兄弟节点，
设置last-child伪类时看最后一个有没有兄弟节点。
所以要设置这种伪类时如果没有起到效果，我们可以先看一下他有没有同级的兄弟节点。
解决办法：是我们可以把Item-level用一个容器包起来再设置。

  会员奖励和升级规则:
  
    
      
       {{item.level}}
       {{item.level2}}
      
      {{item.vip_1_name}}
      {{item.vip_2_name}}
      {{item.vip_3_name}}
      {{item.vip_4_name}}
      {{item.vip_5_name}}
      {{item.vip_6_name}}
    
  






  参考:
  举例：假如有件商品原价98元，优惠券50元，券后价48元，基础补贴为10元 
  
    
      
       {{item.level}}
       {{item.level2}}
      
      {{item.vip_1_name}}
      {{item.vip_2_name}}
      {{item.vip_3_name}}
      {{item.vip_4_name}}
      {{item.vip_5_name}}
      {{item.vip_6_name}}
      {{item.remarks}}
    
  

js

    listData1: [{
      "level": "会员等级",
      "vip_1_name": "会员",
      "vip_2_name": "铁牌",
      "vip_3_name": "铜牌",
      "vip_4_name": "银牌",
      "vip_5_name": "金牌",
      "vip_6_name": "钻石",
      "remarks": ""
    }, {
      "level": "高佣奖励",
      "vip_1_name": "110%",
      "vip_2_name": "120%",
      "vip_3_name": "140%",
      "vip_4_name": "160%",
      "vip_5_name": "180%",
      "vip_6_name": "200%",
    }, {
      "vip_name": '会员',
      "level": "会员升级条件",
      "level2": "累计购买单数",
      "vip_1_name": "1",
      "vip_2_name": "5",
      "vip_3_name": "20",
      "vip_4_name": "40",
      "vip_5_name": "70",
      "vip_6_name": "100",
    }],
    listData2: [{
        "level": "会员等级",
        "vip_1_name": "会员",
        "vip_2_name": "铁牌",
        "vip_3_name": "铜牌",
        "vip_4_name": "银牌",
        "vip_5_name": "金牌",
        "vip_6_name": "钻石",
        "remarks": "备注说明"
      },

      {
        "vip_name": '会员',
        "level": "基础补贴",
        "vip_1_name": "10",
        "vip_2_name": "10",
        "vip_3_name": "10",
        "vip_4_name": "10",
        "vip_5_name": "10",
        "vip_6_name": "10",
        "remarks": "元"
      }, {
        "vip_name": '会员',
        "level": "高佣奖励",
        "vip_1_name": "110%",
        "vip_2_name": "120%",
        "vip_3_name": "140%",
        "vip_4_name": "160%",
        "vip_5_name": "180%",
        "vip_6_name": "200%",
        "remarks": "占基础补贴比例"
      }, {
        "vip_name": '会员',
        "level": "会员升级条件",
        "level2": "（累计购买单数）",
        "vip_1_name": "1",
        "vip_2_name": "5",
        "vip_3_name": "20",
        "vip_4_name": "40",
        "vip_5_name": "70",
        "vip_6_name": "100",
        "remarks": "单"
      }, {
        "vip_name": '会员',
        "level": "实际获得奖励",
        "vip_1_name": "11",
        "vip_2_name": "12",
        "vip_3_name": "14",
        "vip_4_name": "16",
        "vip_5_name": "18",
        "vip_6_name": "20",
        "remarks": "元"
      },

    ],
    listData3: [{
      "level": "会员升级条件",
      "level2": "（累计购买单数）",
      "vip_1_name": "1",
      "vip_2_name": "5",
      "vip_3_name": "20",
      "vip_4_name": "40",
      "vip_5_name": "70",
      "vip_6_name": "100"
    }]
  },

cs

.table-title {
  padding-left: 20rpx;
  line-height: 80rpx;
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(73, 73, 73, 1);
  background: rgb(255, 255, 255);
  border-bottom: 1rpx solid rgba(218, 217, 217, 1);
}

/* 例如文字说明 */

.textexample {
  padding-left: 48rpx;
  padding-top: 11rpx;
  font-size: 18rpx;
  font-weight: 400;
  color: rgba(237, 15, 15, 0.65);
  background: rgb(255, 255, 255);
  height: 46rpx;
  line-height: 46rpx;
  border-left: 1rpx solid rgba(218, 217, 217, 1);
  border-right: 1rpx solid rgba(218, 217, 217, 1);
  border-bottom: 1rpx solid rgba(218, 217, 217, 1);
}

/* 白色背景表格 */

.table {
  margin: 10rpx 14rpx;
  padding: 15rpx 15rpx 37rpx 15rpx;
  background: rgb(255, 255, 255);
  box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(196, 196, 196, 0.5);
  border-radius: 8rpx;
}

/* 第一个表 */

.cell1 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 92rpx;
  border-right: 1rpx solid rgba(218, 217, 217, 1);
  border-bottom: 1rpx solid rgba(218, 217, 217, 1);
}

.content0 {
  border-left: 1rpx solid rgba(218, 217, 217, 1);
  height: 46rpx;
  line-height: 46rpx;
  font-size: 14rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.content1 {
  border-left: 1rpx solid rgba(218, 217, 217, 1);
  height: 67rpx;
  line-height: 31rpx;
  font-size: 14rpx;
  display: flex;
  justify-content: center;
}

.content0 .cell1:first-child {
  width: 171rpx;
  border-bottom: none;
  border: 1rpx solid rgb(25, 199, 97);
}

.content1 .cell1:first-child {
  width: 171rpx;
  border-bottom: none;
  border: 1rpx solid rgb(27, 164, 206);
}

/* 第二个表 */

.cell2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 12%;
  border-right: 1rpx solid rgba(218, 217, 217, 1);
  border-bottom: 1rpx solid rgba(218, 217, 217, 1);
}

.content2 {
  border-left: 1rpx solid rgba(218, 217, 217, 1);
  height: 46rpx;
  line-height: 46rpx;
  font-size: 14rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.content3 {
  border-left: 1rpx solid rgba(218, 217, 217, 1);
  height: 67rpx;
  line-height: 33rpx;
  font-size: 14rpx;
  display: flex;
  justify-content: center;
}

.content2 .cell2:first-child {
  width: 138rpx;
  border-bottom: none;
}

.content2 .cell2:last-child {
  width: 138rpx;
}

.content3 .cell2:first-child {
  width: 138rpx;
  border-bottom: none;
}

.content3 .cell2:last-child {
  width: 138rpx;
}

QQ截图20190604121044.png