|
|
|
|
@ -1,21 +1,28 @@ |
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<el-tabs v-model="active" @tab-click="jump"> |
|
|
|
|
<el-tab-pane v-for="(item,index) in menus" :key="index" :label="item.label" |
|
|
|
|
:name="item.index"></el-tab-pane> |
|
|
|
|
</el-tabs> |
|
|
|
|
<el-menu |
|
|
|
|
:default-active="activeTab" |
|
|
|
|
mode="horizontal" |
|
|
|
|
@select="handleSelect" |
|
|
|
|
active-text-color="#9076FF" |
|
|
|
|
> |
|
|
|
|
<el-menu-item index="/station/list">实验台</el-menu-item> |
|
|
|
|
<el-menu-item index="/appraisal/list">能力测评</el-menu-item> |
|
|
|
|
<el-menu-item index="/record/list">实验记录</el-menu-item> |
|
|
|
|
<el-menu-item index="/ass/list">考核列表</el-menu-item> |
|
|
|
|
<el-menu-item index="/course/list">课程学习</el-menu-item> |
|
|
|
|
<el-menu-item index="/info/list">资讯</el-menu-item> |
|
|
|
|
<el-menu-item index="/match/list">线上赛事</el-menu-item> |
|
|
|
|
</el-menu> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { mapState, mapActions } from "vuex"; |
|
|
|
|
import Setting from "@/setting"; |
|
|
|
|
import util from "@/libs/util"; |
|
|
|
|
import { mapActions } from "vuex"; |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
active: this.$route.path, |
|
|
|
|
menus: [ |
|
|
|
|
{ |
|
|
|
|
index: "/station/list", |
|
|
|
|
@ -48,40 +55,38 @@ export default { |
|
|
|
|
] |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
"$route"(to, from) { |
|
|
|
|
this.active = this.$route.path; |
|
|
|
|
computed: { |
|
|
|
|
activeTab: { |
|
|
|
|
get () { |
|
|
|
|
return this.$store.state.user.activeTab; |
|
|
|
|
}, |
|
|
|
|
set (newValue) { |
|
|
|
|
return newValue; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
...mapActions("user", [ |
|
|
|
|
"setActiveTab" |
|
|
|
|
]), |
|
|
|
|
// 点击标签页跳转到相应的路由 |
|
|
|
|
jump(tab) { |
|
|
|
|
this.active = tab.name; |
|
|
|
|
this.$router.push(tab.name).catch(err => { |
|
|
|
|
}); |
|
|
|
|
this.setActiveTab(tab.name); |
|
|
|
|
this.$router.push(tab.name).catch(err => {}); |
|
|
|
|
}, |
|
|
|
|
handleSelect(key, keyPath) { |
|
|
|
|
this.setActiveTab(key); |
|
|
|
|
this.$router.push(key).catch(err => {}); |
|
|
|
|
console.log(key, keyPath); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
/deep/ .el-tabs__header { |
|
|
|
|
/deep/ .el-menu.el-menu--horizontal{ |
|
|
|
|
z-index: 2; |
|
|
|
|
padding: 20px 60px 0; |
|
|
|
|
margin: 0; |
|
|
|
|
padding: 0 40px; |
|
|
|
|
box-shadow: 0px 0px 25px 2px rgba(48, 115, 248, 0.14); |
|
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
|
|
.el-tabs__nav-wrap::after { |
|
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
|
|
.el-tabs__item { |
|
|
|
|
padding: 0 30px; |
|
|
|
|
outline: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
