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 "@/components/post/publishList.vue";

export default {
  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;
}

.frame {
  width: 100%;
  height: calc(100vh - 220rpx);
  border: 1px solid red;
  padding: 28rpx 0 0 50rpx;

  .title {
    font-size: 38rpx;
    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: calc(100vh - 200rpx);
    overflow: auto;
  }
}
</style>