<template>
  <div>
      <PageTitle :malginLeft="10" :height="35" backgroundColor="#ffff" :marginBottom="5" :marginTop="5">
        <template #left>
          <el-button size="small" v-for="(el,index) in tabBtn" :type="tabActive==index?'primary':''" @click="tabActive=index" :key="el">{{ el }}</el-button>
        </template>
      </PageTitle>
    <ZdrPage v-if="tabActive==0" />
    <ZdqtPage v-else-if="tabActive==1" />
    <ZdclPage v-else-if="tabActive==2" />
  </div>
</template>

<script setup>
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import ZdrPage from "./components/zdrPage.vue";
import ZdqtPage from "./components/zdqtPage.vue";
import ZdclPage from "./components/zdclPage.vue";
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance();
const tabBtn=ref(["重点人库","重点群体库","重点车辆库"])
const tabActive=ref(0)

onMounted(() => {
});

</script>

<style lang="scss" scoped>
.marks {
  padding: 0 4px;
  white-space: nowrap;
  background: #73acf1;
  border-radius: 4px;
  color: #fff;
}
</style>
<style>
.el-loading-mask {
  background: rgba(0, 0, 0, 0.5) !important;
}
</style>
