pay-video-applet-uniapp-24-8-22/pages/mine/incomeRecord.vue

<template>
  <view class="incomeRecord">
    <!--顶部导航栏-->
    <navbar leftClick @leftClick="$utils.navigateBack" title="收益记录"/>


    <!--内容区域-->
    <view class="content">
      <view class="title">收益记录</view>

      <view class="list">
        <view class="item" v-for="(item,index) in 20" :key="index">
          <view class="left">
            <image src="/static/image/incomeRecord/1.png" style="width: 70%;height: 70%;"></image>
          </view>
          <view class="center">
            <view>小李</view>
            <view>2024.02.02</view>
          </view>
          <view class="right">
            <view>收益金额</view>
            <view>¥10000</view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

<style lang="scss" scoped>
.incomeRecord {
  .content {
    padding: 0 40rpx;
    height: calc(100vh - 240rpx);

    .title {
      font-weight: bold;
      margin-top: 5%;
    }

    .list {
      padding-top: 50rpx;

      .item {
        display: flex;
        gap: 20rpx;
        //height: 80rpx;
        margin-bottom: 40rpx;


        .left {
          display: flex;
          justify-content: center;
          align-items: flex-start;
          width: 15%;

        }

        .center {
          width: 60%;
        }

        .right {
          width: 30%;
          text-align: center;
        }
      }
    }
  }
}
</style>