表格2

.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: 28rpx;
  padding-top: 11rpx;
  font-size: 18rpx;
  font-weight: 400;
  color: rgba(237, 15, 15, 0.65);
  height: 46rpx;
  line-height: 46rpx;
  border: 1rpx solid #fff;
}

/* 白色背景表格 */

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

.heng1 {
  width: 100%;
  height: 75rpx;
  line-height: 75rpx;
  display: flex;
  flex-direction: row;
  font-size: 14rpx;
  justify-content: center;
  background-color: rgb(231, 240, 241);
  border-left: 1rpx solid #fff;
}

.heng2 {
  width: 100%;
  height: 75rpx;
  line-height: 75rpx;
  display: flex;
  flex-direction: row;
  font-size: 14rpx;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  border-left: 1rpx solid #fff;
}

.ge1 {
  width: 250rpx;
  height: 75rpx;
  justify-content: center;
  display: flex;
  border-right: 1rpx solid #fff;
  border-bottom: 1rpx solid #fff;
}

.ge2 {
  width: 186rpx;
  height: 75rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1rpx solid #fff;
  border-bottom: 1rpx solid #fff;
  /* border: 1rpx solid red; */
}

.ge3 {
  width: 281rpx;
  height: 75rpx;
  display: flex;
  justify-content: center;
  border-right: 1rpx solid #fff;
  border-bottom: 1rpx solid #fff;
}

.shang {
  height: 36rpx;
  line-height: 36rpx;
  display: flex;
  justify-content: center;
}

.xia {
  height: 36rpx;
  line-height: 36rpx;
  display: flex;
  justify-content: center;
}

.rulestitle {
  font-size: 24rpx;
  padding-left: 29rpx;
  padding-top: 26rpx;
}

.rulescontent {
  padding: 24rpx 29rpx 0 29rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(106, 106, 106, 1);
}

  <view class="textexample">邀请好关注后，你将永久获得好友佣金的提成 </view>
  <block wx:for="{{listData2}}" wx:key="{[index]}">
    <view wx:if="{{index==0}}" class='heng1'>
      <view class='ge1'>{{item.level}}</view>
      <view class='ge2'>
        <view class='shang'>{{item.percent}}</view>
        <view class='xia'>{{item.subscrite}}</view>
      </view>
      <view class='ge3'>{{item.num}}</view>

    </view>


    <view wx:else class='heng2'>
      <view class='ge1'>{{item.level}}</view>
      <view class='ge2'>{{item.percent}}</view>
      <view class='ge3'>{{item.num}}</view>

    </view>
  </block>
  <view class='rulestitle'>推广大使规则说明：</view>
  <view class='rulescontent'>1.推广大使需要申请，首次申请成为推广大使，需要邀请一个好友关注公众号。</view>
  <view class='rulescontent'>2.你可以申请成为会员，同时也可以申请成为推广大使，推广大 使和会员是两种奖励模式。你可以既是会员，也是推广大使，两 种奖励都可以获得。成为推广大使后，可以实现躺赚，你和你的 好友都可以省钱、赚钱！</view>
  <view class='rulescontent'>3.成为推广大使后，你只要分享你的推广海报，让别人通过你的 二维码关注公众号，别人就自动绑定成为你的一级好友。你的好 友再邀请其他人关注，他们会成为你的二级好友。</view>
  <view class='rulescontent'>4.你不需要分享商品，你的好友只要在公众号里面购买了商品获 得补贴（或者他们分享商品获得补贴），你就可以获得相应的奖 励。</view>





</view>

    listData2: [{
        "level": "推广大使等级",
        "percent": "提成比例",
        "subscrite": "（占商品基础补贴的比例）",
        "num": "累计邀请好友数",
      },

      {
        "level": "初级",
        "percent": "20%",
        "subscrite": "",
        "num": "1人",
      }, {
        "level": "中级",
        "percent": "30%",
        "subscrite": "",
        "num": "5人",
      }, {
        "level": "高级",
        "percent": "40%",
        "subscrite": "",
        "num": "20人",
      }, {
        "level": "顶级",
        "percent": "50%",
        "subscrite": "",
        "num": "50人",
      },

    ],

  },