shop-back/src/views/statistic/index.vue

<template>
  <div class="statistic-container">
    <a-tabs
      class="status-tabs"
      v-model:activeKey="activeKey"
      tab-position="left"
      animated
    >
      <a-tab-pane key="1">
        <template #tab>
          <span class="tab-title">
            <AppstoreOutlined />
            整体概况
          </span>
        </template>
        <tab1 />
      </a-tab-pane>
      <a-tab-pane key="2">
        <template #tab>
          <span class="tab-title">
            <PieChartOutlined />

            房间数据
          </span>
        </template>
        <tab2 />
      </a-tab-pane>
      <a-tab-pane key="3">
        <template #tab>
          <span class="tab-title">
            <BarChartOutlined />
            房间留言
          </span>
        </template>

        <tab3 />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script lang="ts" setup>
import tab1 from './tab/tab1.vue'
import tab2 from './tab/tab2.vue'
import tab3 from './tab/tab3.vue'
import { ref } from 'vue'
const activeKey = ref('1')
</script>
<style lang="less">
.statistic-container {
  margin-top: 30px;
  // width: ;
}
.status-tabs {
  .ant-tabs-nav-list {
    background: #fff;
    padding: 10px;
    max-height: 170px;
    overflow: hidden;
  }
  .ant-tabs-tab .anticon {
    margin-right: 5px;
  }
  .ant-tabs-content-holder {
    // background: #fff;
    margin-left: 15px;
    // padding: 15px;
    padding-top: 0px;
  }
}
</style>