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

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

    <!--主页面-->
    <view class="frame">
      <!--标题-->
      <view class="title">
        <span>我的发布</span>
      </view>
      <!--标签栏-->
      <view class="tabbar">
        <view class="tabbarItemActive" @click="getData('all')">
          <span class="1==1 ? 'active' : ''">全部</span>
        </view>
        <view class="tabbarItemNoActive" @click="getData('all')">
          <span class="1==1 ? 'active' : ''">贴子</span>
        </view>
        <view class="tabbarItemNoActive" @click="getData('all')">
          <span class="1==1 ? 'active' : ''">名片</span>
        </view>
      </view>
      <!--发布列表-->
      <view style="" class="publishListClass">
        <PublishList :list="publishList"/>
      </view>
    </view>
  </view>
</template>

<script>
import PublishList from "@/pages/mine/sonPage/release/releaseList.vue";

export default {
  name: "releaseRecord",
  components: {
    PublishList
  },
  data() {
    return {
      publishList: [
        {
          title: "这是一条动态",
          createTime: '2024-08-22 09:00:00',
          createBy: "小飞",
          isPay: "是"
        },
        {
          title: "这是一条动态",
          createTime: '2024-08-22 09:00:00',
          createBy: "小飞",
          isPay: "是"
        },
        {
          title: "这是一条动态",
          createTime: '2024-08-22 09:00:00',
          createBy: "小飞",
          isPay: "是"
        },
        {
          title: "这是一条动态",
          createTime: '2024-08-22 09:00:00',
          createBy: "小飞",
          isPay: "是"
        },
        {
          title: "这是一条动态",
          createTime: '2024-08-22 09:00:00',
          createBy: "小飞",
          isPay: "是"
        },
        {
          title: "这是一条动态",
          createTime: '2024-08-22 09:00:00',
          createBy: "小飞",
          isPay: "是"
        },
        {
          title: "这是一条动态",
          createTime: '2024-08-22 09:00:00',
          createBy: "小飞",
          isPay: "是"
        },
        {
          title: "这是一条动态",
          createTime: '2024-08-22 09:00:00',
          createBy: "小飞",
          isPay: "是"
        },
      ],
    };
  },
  methods: {
    getData(type) {
      console.log(type, "点击了标签栏")
    }
  }
}
</script>

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

.releaseRecord {
  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
    }

    .tabbar {
      display: flex;
      justify-content: flex-start;
      gap: 20rpx;
      margin-top: 40rpx;

      .tabbarItemActive {
        padding: 10rpx 40rpx;
        background: $uni-linear-gradient-color;
        -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
        -webkit-text-fill-color: transparent; /*给文字设置成透明*/
      }

      .tabbarItemNoActive {
        padding: 10rpx 40rpx;
        background-color: #eaeaeb;
        color: #777777;
        border-radius: 20rpx;
      }
    }


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

</style>