微信小程序 细线表格

html

<view class="table">
    <view class="list-box" >
      <view class="bg-w">
        <view class="th">购买类型</view>
        <view class="th">购买时间</view>
      </view>
      <block wx:for="{{listData}}" wx:key="index" wx:for-item="item">
        <view class="tr">
          <view class="td">{{ item.name }}</view>
          <view class="td time">{{ item.create_time }}</view>
        </view>
      </block>
    </view>
</view>

css

.list-box {
    margin: 197rpx auto 24rpx;
    width: 528rpx;
    height: 280rpx;
    border: 2rpx solid #FCC971;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    overflow-y: scroll;
    background: #fff;

    /* 标题 */
    .bg-w {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 71rpx;
        line-height: 71rpx;
        border-radius: 12rpx 12rpx 0 0;
        font-family: MiSans, MiSans;
        font-weight: 500;
        font-size: 28rpx;
        color: #642A1C;
        background: linear-gradient(180deg, #FEF1C9 0%, #FAB45A 100%);
    }


    .tr {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        font-family: PingFangSC-Regular, PingFang SC;
        border-bottom: 2rpx solid #FCC971;
        white-space: pre-wrap;
        text-align: center;
        background: #fff;
        height: 71rpx;
        box-sizing: border-box;
        line-height: 71rpx;
        background: #fff;
    }

    .tr:last-child {
        border-bottom: none;
    }




    .th {
        width: 50%;
        justify-content: center;
        color: rgba(44, 63, 83, 1);
        display: flex;
        align-items: center;
        height: 100rpx;
        font-family: MiSans, MiSans;
        font-weight: 500;
        font-size: 28rpx;
        color: #121216;
    }

    /* 具体内容  */
    .td {
        width: 50%;
        justify-content: center;
        text-align: center;
        height: 80rpx;
        font-family: MiSans, MiSans;
        font-weight: 400;
        font-size: 24rpx;
        color: #414141;
        line-height: 80rpx;
        text-align: center;
    }

}

js

   listData: [
      {
        id: 10,
        name: "荆楚宝盒季度包",
        create_time: '2024-03-25 12:03:22',
        unprocessing: 42,
      },
      {
        id: 11,
        name: "荆楚宝盒季度包",
        create_time: '2024-03-25 12:03:22',
      },
      {
        id: 11,
        name: "荆楚宝盒半年包",
        create_time: '2024-03-25 12:03:22',
      },
      {
        id: 11,
        name: "荆楚宝盒半年包",
        create_time: '2024-03-25 12:03:22',
      },
    ],
    ```