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 "@/components/post/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"
        },
      ],
    }
  },
  methods: {}

}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.frame {
  width: 100%;
  height: calc(100vh - 220rpx);
  border: 1px solid red;
  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: 28rpx;
        display: flex;
        align-items: center;
        width: 80%;
        height: 100%;
        color: #b0b2b3;
      }

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


  .publishListClass {
    margin-top: 30rpx;
    height: calc(100vh - 200rpx);
    overflow: auto;
    width: 100%;
  }
}
</style>