24kycj
132 lines
2.9 KiB
Vue
132 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex_box flex_row_between top_box">
|
|
<div class="flex_box top_left">
|
|
<div @click="goHome" class="flex_box flex_row_center top_btn1">
|
|
<img src="@/assets/images/Home_icon.png" />
|
|
<div>回到主界面</div>
|
|
</div>
|
|
<div class="top_left_line"></div>
|
|
<div class="flex_box flex_col_top tab_box">
|
|
<div @click="goPath(item)" v-for="item in tabs" :key="item.id" class="flex_box flex_row_center flex_col tab_item" :class="{'tab_item1': active===item.id}">
|
|
<div class="tab_name">{{item.name}}</div>
|
|
<div class="tab_line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<user-info></user-info>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import UserInfo from '../userInfo/userInfo.vue';
|
|
export default {
|
|
name: 'TabBar',
|
|
components: { UserInfo },
|
|
props: {
|
|
active: {
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
tabs: [
|
|
{
|
|
id: 1,
|
|
name: '系统管理',
|
|
path: '/manage'
|
|
},
|
|
// {
|
|
// id: 2,
|
|
// name: '用户管理',
|
|
// path: '/user'
|
|
// },
|
|
{
|
|
id: 3,
|
|
name: '系统配置',
|
|
path: '/set'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['name', 'roles'])
|
|
},
|
|
methods: {
|
|
goHome() {
|
|
this.$router.go(-1)
|
|
},
|
|
goPath(e) {
|
|
console.log(e)
|
|
if (e.id === this.active) {
|
|
return
|
|
}
|
|
this.$router.replace(e.path)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.top_box {
|
|
height: 86px;
|
|
padding: 0 32px;
|
|
background-color: #ffffff;
|
|
border-bottom: 8px solid #F8F8F8;
|
|
.top_left {
|
|
.top_btn1 {
|
|
cursor: pointer;
|
|
padding: 0 16px;
|
|
height: 30px;
|
|
background: #00C325;
|
|
border-radius: 4px;
|
|
margin-right: 16px;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
color: #FFFFFF;
|
|
img {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
.top_left_line {
|
|
width: 2px;
|
|
height: 30px;
|
|
background: #E0E0E0;
|
|
margin: 0 16px;
|
|
}
|
|
.tab_box {
|
|
.tab_item {
|
|
padding: 20px 16px;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
color: #000000;
|
|
line-height: 24px;
|
|
cursor: pointer;
|
|
.tab_name {
|
|
padding-bottom: 4px;
|
|
}
|
|
.tab_line {
|
|
display: none;
|
|
width: 24px;
|
|
height: 4px;
|
|
background: #00C325;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
.tab_item1 {
|
|
color: #00C325;
|
|
font-weight: bold;
|
|
.tab_line {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|