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

<template>
  <view class="promotionRecord">
    <!--顶部导航栏-->
    <navbar
        leftClick
        @leftClick="$utils.navigateBack"
        title="我的推广"/>

    <!--主页面-->
    <view class="frame">
      <!--标题-->
      <view class="title">
        <span>推广记录</span>
      </view>

      <!--搜索条件-->
      <view class="search" >
        <!--搜索框-->
        <view style="width:40%;height:100%">
          <uv-input placeholder="请输入内容" border="surround" clearable ></uv-input>
        </view>
        <!--开始时间-->
        <view class="dateTimeCls">
          <view class="date">
            2023-12-23
          </view>
          <view class="image">
            <image src="/static/image/promotionRecord/2.svg" style="width: 100%;height: 100%"></image>
          </view>
        </view>
        <!--结束时间-->
        <view class="dateTimeCls">
          <view class="date">
            2023-12-23
          </view>
          <view class="image">
            <image src="/static/image/promotionRecord/2.svg" style="width: 100%;height: 100%"></image>
          </view>
        </view>
      </view>
      <!--发布列表-->
      <view style="" class="publishListClass">
        <PromotionRecordList :list="promotionRecordList"/>
      </view>
    </view>
  </view>
</template>

<script>
import PromotionRecordList from "@/pages/mine/sonPage/promotion/promotionRecordList.vue";

export default {
  components: {PromotionRecordList},

  data() {
    return {
      promotionRecordList: [
        {
          title: "推广记录",
          createTime: '2024-08-22 09:00:00',
          createBy: "24小时",
          isPay: "￥100"
        },
        {
          title: "推广记录",
          createTime: '2024-08-22 09:00:00',
          createBy: "24小时",
          isPay: "￥100"
        },
        {
          title: "推广记录",
          createTime: '2024-08-22 09:00:00',
          createBy: "24小时",
          isPay: "￥100"
        },
        {
          title: "推广记录",
          createTime: '2024-08-22 09:00:00',
          createBy: "24小时",
          isPay: "￥100"
        },
        {
          title: "推广记录",
          createTime: '2024-08-22 09:00:00',
          createBy: "24小时",
          isPay: "￥100"
        },
        {
          title: "推广记录",
          createTime: '2024-08-22 09:00:00',
          createBy: "24小时",
          isPay: "￥100"
        },
        {
          title: "推广记录",
          createTime: '2024-08-22 09:00:00',
          createBy: "24小时",
          isPay: "￥100"
        },
        {
          title: "推广记录",
          createTime: '2024-08-22 09:00:00',
          createBy: "24小时",
          isPay: "￥100"
        },
        {
          title: "推广记录",
          createTime: '2024-08-22 09:00:00',
          createBy: "24小时",
          isPay: "￥100"
        },
      ],
    }
  },
  methods: {}

}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.promotionRecord{
  width: 100vw;
  height: 100vh;

  .frame {
    width: 100%;
    //height: calc(100vh - 220rpx);
    padding: 28rpx 28rpx 0 28rpx;

    .title {
      font-size: 34rpx;
      color: #333;
      font-weight: 700
    }

    .search {
      display: flex;
      align-items: center;
      gap: 10rpx;
      width: 100%;
      height: 80rpx;
      margin-top: 20rpx;


      .dateTimeCls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 25%;
        height: 80%;
        border: 1px solid #b0b2b3;
        padding: 5rpx;
        border-radius: 20rpx;

        .date {
          font-size: 25rpx;
          display: flex;
          align-items: center;
          width: 80%;
          height: 100%;
          color: #b0b2b3;

        }

        .image {
          width: 20%;
          height: 100%;
        }
      }
    }


    .publishListClass {
      margin-top: 10rpx;
      height: 78vh;
      overflow: auto;
      width: 100%;
    }
  }
}

</style>