<template>
<!--  <el-empty description="等待开发" />-->
  <div class="container-wrapper">
  <el-tabs
      v-model="activeName"
      type="border-card"
  >
    <el-tab-pane label="营收概况" name="first">
      <Revenue></Revenue>
    </el-tab-pane>
    <el-tab-pane label="收费日报" name="second">
      <Charge></Charge>
    </el-tab-pane>
    <el-tab-pane label="收费员统计" name="third">
      <ChargeMan></ChargeMan>
    </el-tab-pane>
    <el-tab-pane label="收费明细" name="fourth">
      <ChargeDetail></ChargeDetail>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Revenue from "@/components/statistics/over/Revenue.vue";
import Charge from "@/components/statistics/over/Charge.vue";
import ChargeMan from "@/components/statistics/over/ChargeMan.vue";
import ChargeDetail from "@/components/statistics/over/ChargeDetail.vue";
import Retail from "@/components/statistics/over/Retail.vue";

const activeName = ref('first')
</script>

<style scoped lang="scss">
.container-wrapper{
  overflow-y: auto;
}
:deep(.el-tabs--border-card) {
  background: #f1f5fb;
}
</style>