jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue

<template>
  <div class="TrafficFlowMain">
    <el-tabs class="full_tab" v-model="activeName">
      <el-tab-pane label="交通流分析" name="first" class="tab_con">
        <TrafficFlowAnalysis />
      </el-tab-pane>
      <el-tab-pane label="交通流统计" name="second" class="tab_con">
        <TrafficFlowStatistics />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TrafficFlowAnalysis from "./analysis/index.vue";
import TrafficFlowStatistics from "./statistics/index.vue";

export default {
  name: "TrafficFlow",
  components: {
    TrafficFlowAnalysis,
    TrafficFlowStatistics
  },
  data() {
    return {
      activeName:'first'
    }
  }
};
</script>

<style lang="scss" scoped>
.TrafficFlowMain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px 20px 20px;
}
.full_tab {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  ::v-deep .el-tabs__header {
    margin: 0 0 15px;
  }
  ::v-deep .el-tabs__content {
    flex: 1;
    .el-tab-pane {
      width: 100%;
      height: 100%;
    }
  }
}
.tab_con {
  display: flex;
  flex-direction: column;
}
</style>