<template>
  <div class="app-container operStatisticsPage">
    <!-- tab切换start -->
    <div class="grid-content">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="本月" name="first"></el-tab-pane>
        <el-tab-pane label="上月" name="second"></el-tab-pane>
        <el-tab-pane label="本季度" name="third"></el-tab-pane>
        <el-tab-pane label="上季度" name="five"></el-tab-pane>
        <el-tab-pane label="本年" name="six"></el-tab-pane>
        <el-tab-pane label="上一年" name="seven"></el-tab-pane>
        <el-tab-pane label="自定义时间" name="eight"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- tab切换end -->

    <!-- 主题部分 -->
    <div class="operStatisticsInner">
      <el-row :gutter="20" class="mt-20">
         <el-col :span="18">11</el-col>
          <el-col :span="6">11</el-col>
      </el-row>
    </div>
    <!-- 主题部分end -->
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      activeName: 'first',
    }
  },
  watch: {},

  methods: {},
}
</script>



<style lang="scss">
// tab重置样式
.el-tabs--card > .el-tabs__header .el-tabs__item {
  line-height: 50px;
  height: 50px;
  font-size: 16px;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 2px solid #409eff;
  color: #409eff;
}
.el-tabs--card .el-tabs__header:hover,
.el-tabs__item:hover {
  color: #409eff !important;
}
.el-tabs__header {
  margin-bottom: 0;
}
.el-tabs--card > .el-tabs__header .el-tabs__item,
.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
</style>