You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
2.6 KiB
127 lines
2.6 KiB
<template>
|
|
<div class="container">
|
|
<myHeader></myHeader>
|
|
<div class="body-container">
|
|
<div class="tree-menu">
|
|
<router-link
|
|
tag="div"
|
|
:to="{ path: item.path }"
|
|
v-for="(item, index) in myRouter"
|
|
:key="index"
|
|
active-class="routerActive"
|
|
>
|
|
<div class="view-child">
|
|
<img :src="item.icon" alt="" class="router-icon" />
|
|
{{ item.meta.title }}
|
|
</div>
|
|
<div></div>
|
|
</router-link>
|
|
</div>
|
|
<div class="view-box">
|
|
<tags-view ref="tagsView" />
|
|
<div class="child-views">
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import myHeader from "@/components/myHeader";
|
|
import TagsView from "@/layout/components/TagsView";
|
|
import router from "@/router";
|
|
export default {
|
|
components: { myHeader, TagsView },
|
|
data() {
|
|
return {
|
|
};
|
|
},
|
|
computed: {
|
|
//获取自定义路由
|
|
myRouter() {
|
|
return this.$store.state.myselfPermission.routerList;
|
|
},
|
|
},
|
|
created() {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.leftIcon {
|
|
display: inline-block;
|
|
height: 14px;
|
|
width: 14px;
|
|
margin-right: 10px;
|
|
}
|
|
::v-deep .el-submenu__title {
|
|
padding: 0 8px !important;
|
|
}
|
|
::v-deep .el-menu-item {
|
|
padding: 0 8px !important;
|
|
margin-right: -1px;
|
|
}
|
|
::v-deep .el-menu-item-group .el-menu-item {
|
|
padding-left: 35px !important;
|
|
}
|
|
::v-deep .el-menu-item-group__title {
|
|
padding: 0 !important;
|
|
}
|
|
.container {
|
|
height: 100%;
|
|
.body-container {
|
|
height: calc(100vh - 50px);
|
|
display: flex;
|
|
align-items: center;
|
|
& > div {
|
|
height: 100%;
|
|
}
|
|
.tree-menu {
|
|
background: #465970;
|
|
width: 180px;
|
|
box-sizing: border-box;
|
|
padding: 14px 10px;
|
|
& > div {
|
|
width: 200px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
padding: 0 10px;
|
|
cursor: pointer;
|
|
.router-icon {
|
|
display: inline-block;
|
|
height: 14px;
|
|
width: 14px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
.view-box {
|
|
flex: 1;
|
|
height: 100%;
|
|
background: #f2f2f2;
|
|
|
|
overflow-y: auto;
|
|
}
|
|
.child-views {
|
|
height: calc(100% - 40px);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
.routerActive {
|
|
background: #1e80eb;
|
|
border-radius: 4px;
|
|
}
|
|
.view-child {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
</style> |