luojigou_xcx_agent/src/pages/audit/index.vue

<template>
    <view class="Audit">
        <custom-navbar title="开园审核" id="custom-navbar"/>
        <view class="tabs">
            <van-tabs 
                swipeable 
                animated 
                :active="active" 
                @change="onChange"
                :border="false"
                :lazy-render="false"
                class="tabs-element"
                >
                <van-tab  title="待审核" :name="0"><NeedAudit v-if="active === 0" :height="height" /></van-tab>
                <van-tab  title="已审核" :name="1"><AlreadyAudit v-if="active === 1"/></van-tab>
            </van-tabs>
            <view class="tabs-line">
                <view class="tabs-line-item" :style="{left: mulTabsLineSite }">
               
                </view>
            </view>

            
        </view>
    </view>
</template>

<script>
import CustomNavbar from '@/components/CustomNavbar'
import NeedAudit from './needAudit'
import AlreadyAudit from './alreadyAudit'
import { getNodeInfo } from '@/utils/wxTool.js'
export default {
  name: 'Audit',
  components: {
      CustomNavbar,
      NeedAudit,
      AlreadyAudit
  },
  computed: {
      activeTitle () {
          return `color:  ${String(this.active)} == ${0} ? '#666666' : '#1677FF'`
      },
      mulTabsLineSite () {
          const width = this.$store.state.systemInfo.windowWidth
          const result = width / 2 / 2 - 10
          return  this.active !== 0 ?  result * 3 + 20 + 'px' : result + 'px'
      }
  },
  onLoad () {
      this.getNodeInfo()
  },
  data () {
      return {
          active: 0,
          height: ''
      }
  },
  methods: {
      onChange (item) {
          this.active = item.target.name
      },
      async getNodeInfo () {
        const res =  await getNodeInfo('#custom-navbar', 'single')
    
        this.height = res.height
      }
  }
}
</script>
<style scoped lang="less">
.Audit {
    height: 100vh;
    .tabs {
        width: 100%;
        height: 102rpx;
        position: relative;
        .tabs-line {
            position: absolute;
            bottom: 16rpx;
            width: 100%;
            height: 6px;
            z-index: 1;
            &-item {
                width: 40rpx;
                height: 6rpx;
                background: #1677FF;
                box-shadow: 0px 2px 12px 0px rgba(22, 119, 255, 0.43);
                border-radius: 200px;
                position: absolute;
                transition: left .5s;
            }
        }

    }
}
/deep/ .van-tabs__line {
    display: none !important;
}

/deep/ .van-tabs__wrap {
    height: 102rpx !important;
}


/deep/ .van-ellipsis {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
}

/deep/ .tabs-element .van-tab--active .van-ellipsis {
  color: #1677FF;
}
</style>