<template>
  <van-popup
    v-model:show="showPopup"
    round
    position="top"
    :style="{
      height: '100%',
      width: '100%',
      maxWidth: '100%',
      background: 'none',
    }"
  >
    <van-tabs v-model:active="active" shrink>
      <template v-slot:nav-left>
        <van-icon name="arrow-left" />
      </template>
      <van-tab v-for="item in ['关注', '推荐']" :title="item" :key="item">
        <div class="audit-list" v-show="item === '关注'">
          <ListView />
        </div>
        <div class="audit-list" v-show="item === '推荐'">
          <ListView />
        </div>
      </van-tab>
    </van-tabs>
  </van-popup>
</template>

<script setup>
import { ref } from "vue";
import ListView from "./components/ListView.vue";
const showPopup = ref(false);
const active = ref("关注");
</script>
<style scoped lang="scss">
::v-deep .van-popup {
  height: 100%;
}
::v-deep .van-tabs {
  height: 100%;
}
::v-deep .van-tabs__nav {
  display: flex;
  align-items: center;
  background: none;
  scroll-behavior: unset !important;
  background: rgba(0, 0, 0, 0.3);
  .van-icon {
    font-size: 40px;
    color: #fff;
    margin-right: 48px;
  }
  .van-tab {
    margin-right: 40px;
  }
  .van-tab__text {
    color: rgb(185, 185, 185);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
  }
  .van-tab--active {
    .van-tab__text {
      font-weight: 500;
      color: #fff;
    }
  }
  .van-tabs__line {
    background: #fff;
  }
}
::v-deep .van-tab__panel {
  height: 100%;
}
::v-deep .van-tabs__content {
  height: calc(100% - 88px);
}
.audit-list {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
</style>
