<template>
  <div style="height: 100%;">
    <!-- <div class="el-tab">
      <el-tabs v-model="activeName">
        <el-tab-pane label="日志监控" name="logMonitor"> </el-tab-pane>
        <el-tab-pane label="系统监控" name="systemMonitor"> </el-tab-pane>
      </el-tabs>
    </div> -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "logMonitor",
    };
  },
  watch: {
    activeName(val) {
      switch (val) {
        case "logMonitor":
            // 触发左侧菜单栏导航
        //   this.$router.push(val);
          break;
        case "systemMonitor":
        //   this.$router.push(val);
          break;
      }
    },
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.el-tab {
  position: absolute;
  left: 218px;
  right: 16px;
  top: 77px;
  height: 51px;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 1);
  text-align: center;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);

  /deep/.el-tabs__active-bar {
    background-color: #2ea8e6;
  }

  /deep/.el-tabs__item:hover{
    color: #2ea8e6 !important;
    font-weight: 500 !important;
  }

  /deep/.el-tabs__item.is-active {
    color: #2ea8e6;
    font-weight: 500;
  }

  /deep/.el-tabs__nav {
    left: 25px;
  }

  /deep/.el-tabs__nav-wrap::after {
    height: 0;
  }
}
</style>
