<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>