VAVABUY/pages/community/index.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar leftShow fixed bgColor="transparent">
        <template #center>
          <view class="nav_center">
            <view class="nav_tab">
              <view class="tab_list" :class="tabActive == index ? 'active' : ''" v-for="item, index in tab" :key="index"
                @click="tabClick(index)">
                <trans :_t="item.text" />
              </view>
            </view>
            <up-icon name="search" class="search" size="56rpx" color="var(--bg)"></up-icon>
          </view>
        </template>
      </Navbar>
      <view class="content">
        <playVideo />
      </view>
    </view>
    <Tabbar page="community" />
  </Theme>
</template>
<script setup>
import { ref, reactive, computed, onMounted, nextTick } from "vue";
import Tabbar from '@/components/tabbar';
import navMenu from '@/components/nav_menu';
import Navbar from '@/components/navbar';
import playVideo from "@/components/play";


const tabActive = ref(2);
const tab = [
  //   {
  //   text: '直播'
  // }, 
  {
    text: '关注'
  }, {
    text: '精选'
  }, {
    text: '推荐'
  }]

const tabClick = (index) => {
  tabActive.value = index;
}

uni.hideTabBar();
</script>
<style lang="less" scoped>
@import url('@/style.less');

.wrap {
  min-height: calc(100vh - 50px);
  background-color: var(--black);

  .nav_center {
    height: inherit;
    padding: 0 30rpx;
    .ver();

    .search {
      position: fixed;
      right: 40rpx;
      top: 20rpx
    }

    .nav_tab {
      .ver();
      gap: 30rpx;
      color: var(--light);
    }

    .active {
      position: relative;

      &::before {
        position: absolute;
        content: '';
        left: 50%;
        bottom: -2px;
        width: 70%;
        transform: translateX(-50%);
        height: 2px;
        border-radius: 100px;
        background-color: var(--light);

      }
    }
  }

  .content {
    // padding: 16rpx 32rpx;
    margin-top: -44px;
  }
}
</style>