pay-video-applet-uniapp-24-8-22/components/post/promotionRecordList.vue

<template>
  <view class="promotionRecordList">
    <view class="item" v-for="(item, index) in list"
          @click="$utils.navigateTo('/publish/postDetail?id=123')"
          :key="index">
      <image src="/static/image/center/1.png" style="width: 40%"></image>
      <view class="text">
        <view>
          <view class="title">
            {{ item.title }}
          </view>
          <view class="createBy">
            <view class="">
              推广时效：{{ item.createBy }}
            </view>
          </view>
        </view>

        <view>
          <view class="isPay">
            <view class="">
              价格：{{ item.isPay }}
            </view>
          </view>
          <view class="createTime">
            推广时间：{{ item.createTime }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "promotionRecordList",
  props: ['list'],
  data() {
    return {};
  }
}
</script>

<style lang="scss" scoped>
.promotionRecordList {
  width: 90%;

  .item {
    height: 220rpx;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    border-radius: 10rpx;
    color: #777;
    display: flex;
    font-size: 24rpx;
    margin: 30rpx 0;
    /* 为第一个.item设置不同的上边距 */
    &.first-item {
      margin-top: 0; /* 可以根据需要调整数值 */
    }

    image {
      width: 50%;
      height: 100%;
    }

    .text {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 10rpx 0 10rpx 16rpx;
      width: 52%;

      .title {
        font-size: 30rpx;
        font-weight: 600;
        color: #000;
      }

      .createBy {
        display: flex;
        justify-content: space-between;

        & > view {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .isPay {
        display: flex;
        color: #7395f4;
        justify-content: space-between;

        & > view {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .createTime {
        display: flex;
        justify-content: space-between;

        & > view {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }


    }
  }
}
</style>