<template>
  <div class="system flex flexc">
    <el-tabs :value="activeKey" @tab-click="changeRouter">
      <el-tab-pane label="系统参数" name="/system/parameter"></el-tab-pane>
      <el-tab-pane label="任务信息" name="/system/task"></el-tab-pane>
      <el-tab-pane label="操作日志" name="/system/systemlogs"></el-tab-pane>
    </el-tabs>
    <div class="system-out-box flex1">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    activeKey() {
      return this.$route.path;
    },
  },
  methods: {
    changeRouter(e) {
      this.$router.push(e.name);
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-tabs__nav-scroll) {
  padding-left: 15px;
}
.system {
  width: 100%;
  height: 100%;
  .system-out-box {
    padding: 0px 15px 15px 15px;
    overflow-y: auto;
  }
  /deep/.ant-tabs-nav-container {
    border-bottom: 1px solid #f0f0f0 !important;
  }
}
</style>