<template>
  <div class="public_service_statistic">

      <el-tabs class="content_tab" v-model="activeName" @tab-click="changeTabs">
        <el-tab-pane label="公众服务统计分析" name="first" class="con_tab first_tab">
          <TopComponent class="line_01"/>
          <div class="line_02">
            <ChannelAnalytics class="unit" />
            <EventTypeAnalysis class="unit" />
            <NucleusThrough class="unit2" />
            <!-- <PostTrendsDay class="unit" /> -->
          </div>
          <div class="line_03">
            <PostTrendsMonth class="unit" />
            <PostTrendsDay class="unit" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="公众服务统计查询" name="second" class="con_tab">
          <Record />
        </el-tab-pane>
      </el-tabs>

  </div>
</template>

<script>
import TopComponent from "./components/topComponent";
import ChannelAnalytics from "./components/channelAnalytics";
import EventTypeAnalysis from "./components/eventTypeAnalysis";
import AuditAnalytics from "./components/auditAnalytics";
import PostTrendsDay from "./components/postTrendsDay";
import PostTrendsMonth from "./components/postTrendsMonth";
import NucleusThrough from "./components/nucleusThrough";
import Record from "./components/record";

export default {
  name: "publicService",
  components: {
    Record,
    TopComponent,
    ChannelAnalytics,
    EventTypeAnalysis,
    AuditAnalytics,
    PostTrendsDay,
    PostTrendsMonth,
    NucleusThrough,
  },
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    changeTabs() {},
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__item {
  display: inline-flex;
  justify-content: center;
  font-size: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  min-width: 128px;
  position: relative;
  // left: 10px;
}

::v-deep .el-tabs__active-bar {
  min-width: 128px;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: #133242;
  opacity: 0.1;
}

.public_service_statistic {
  width: 100%;
  height: 100%;
  padding: 15px;
  display: flex; justify-content: stretch; align-items: stretch;
  // position: relative;
  z-index: 6;
  color: white;
  overflow: hidden;

  .content_tab{
    display: flex; flex-direction: column; flex: 1;
    ::v-deep .el-tabs__header{}
    ::v-deep .el-tabs__content{ flex: 1;}
  }

  .con_tab{
    width: 100%; height: 100%;
  }
  .first_tab{
    display: flex; flex-direction: column;
    .line_01 {
      flex-basis: 140px; margin-bottom: 16px;
    }
    .line_02{
      flex: 1;
      height: 0;
      display: flex;
      margin-bottom: 16px;
      .unit{ margin-right: 16px; flex: 1; width: 0;}
      .unit2{width: 50%;margin-left:-4px}
      .unit:last-child{ margin-right: 0;}
    }
    .line_03{
      height: 0;
      flex: 1;
      display: flex; align-items: stretch;
      .unit{ margin-right: 16px; flex: 1; }
      .unit:last-child{ margin-right: 0;}
    }
  }
}
</style>
