434 lines
9.7 KiB
434 lines
9.7 KiB
<template>
|
|
<div class="container">
|
|
<div class="myHeader">
|
|
<myHeader></myHeader>
|
|
</div>
|
|
<div v-if="$route.meta.title && $route.meta.title == '首页'">
|
|
<router-view />
|
|
</div>
|
|
<div class="body-container" v-else>
|
|
<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="mydiv">
|
|
<div class="view-child" @click="$store.commit('SET_ROUTWESHOWFALS')">
|
|
<img :src="item.icon" alt="" class="router-icon" />
|
|
{{ item.meta.title }}
|
|
</div>
|
|
</div>
|
|
</router-link> -->
|
|
|
|
|
|
<el-menu class="el-menu-vertical-demo" :router="true" :default-active="activeMenu" >
|
|
<div v-for="(item, index) in myRouter" :key="item.path">
|
|
<el-submenu :index="item.path" v-if="item.children">
|
|
<template slot="title" v-show="item.meta.title != '详情'">
|
|
<img :src="item.icon" alt="" class="router-icon" />
|
|
<span>{{ item.meta.title }}</span>
|
|
</template>
|
|
<el-menu-item-group>
|
|
<el-menu-item :index="itemb.path" v-for="(itemb, indexb) in item.children">{{
|
|
itemb.meta.title }}</el-menu-item>
|
|
</el-menu-item-group>
|
|
</el-submenu>
|
|
<el-menu-item :index="item.path" v-else v-show="item.meta.title != '详情'">
|
|
<img :src="item.icon" alt="" class="router-icon" />
|
|
<span slot="title">{{ item.meta.title }}</span>
|
|
</el-menu-item>
|
|
</div>
|
|
</el-menu>
|
|
|
|
</div>
|
|
<div class="view-box">
|
|
|
|
<tags-view ref="tagsView" />
|
|
<div class="view_box_title" v-show="$router.currentRoute.meta.title != '详情'">{{
|
|
$router.currentRoute.meta.topTitle ||
|
|
$router.currentRoute.meta.title }}</div>
|
|
<div class="child-views">
|
|
<keep-alive>
|
|
<router-view></router-view>
|
|
</keep-alive>
|
|
<div class="view_box_title-bottom"
|
|
v-show="$router.currentRoute.meta.titlefootChilder.length != 0 && $router.currentRoute.meta.title != '详情'">
|
|
<div class="view_box_title-bottom-sanjiao" @click="handleClick">
|
|
<i class="el-icon-caret-top icon" v-show="!vShow"></i>
|
|
<i class="el-icon-caret-bottom icon" v-show="vShow"></i>
|
|
</div>
|
|
<div v-show="vShow" class="view_box_title-bottom-box">
|
|
<div class="view_box_title-bottom-box-title" v-for="item in $router.currentRoute.meta.titlefootChilder">
|
|
<div class="view_box_title-bottom-box-title-title">{{ item.name }}</div>
|
|
<div class="view_box_title-bottom-box-title-line">
|
|
<div v-for="item2 in item.children">{{ item2 }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<el-backtop target=".view-box" :bottom="50" :visibility-height="450">
|
|
<div class="view-box-top">
|
|
回到</br>顶部
|
|
</div>
|
|
</el-backtop>
|
|
</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 {
|
|
vShow: true,
|
|
};
|
|
},
|
|
computed: {
|
|
//获取自定义路由
|
|
myRouter() {
|
|
console.log("路由", this.$store.state.myselfPermission.routerList);
|
|
|
|
return this.$store.state.myselfPermission.routerList.filter((item) => item.name != "portal");
|
|
// return this.$store.state.myselfPermission.routerList;
|
|
//.slice(0,this.$store.state.myselfPermission.routerList.length-1)
|
|
},
|
|
activeMenu() {
|
|
// 返回当前激活的路由路径
|
|
return this.$route.path;
|
|
/*
|
|
|
|
*/
|
|
},
|
|
},
|
|
created() { },
|
|
methods: {
|
|
handleClick() {
|
|
this.vShow = !this.vShow;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.leftIcon {
|
|
display: inline-block;
|
|
height: 14px;
|
|
width: 14px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
::v-deep .el-submenu.is-active {
|
|
background: none !important;
|
|
border-radius: 5px !important;
|
|
|
|
}
|
|
|
|
::v-deep .el-submenu__title {
|
|
padding: 0 8px !important;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
::v-deep .el-menu-item {
|
|
padding: 0 8px !important;
|
|
margin-right: -1px;
|
|
|
|
}
|
|
|
|
::v-deep .el-menu-item-group .el-menu-item {
|
|
align-items: center;
|
|
margin-left: 20px !important;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
::v-deep .el-menu-item-group__title {
|
|
padding: 0 !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.container {
|
|
height: 100%;
|
|
|
|
.body-container {
|
|
height: calc(100% - 50px);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&>div {
|
|
height: 100%;
|
|
}
|
|
|
|
.tree-menu {
|
|
// overflow: hidden;
|
|
overflow-y: auto;
|
|
background: #465970;
|
|
width: 180px;
|
|
box-sizing: border-box;
|
|
padding: 14px 10px;
|
|
|
|
|
|
.mydiv {
|
|
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;
|
|
width: 100%;
|
|
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;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-menu {
|
|
border-right: none;
|
|
background: none;
|
|
|
|
.router-icon {
|
|
display: inline-block;
|
|
height: 16px;
|
|
width: 16px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.el-submenu__title {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
border-radius: 5px;
|
|
color: #ffffff;
|
|
font-size: 15px;
|
|
|
|
i {
|
|
color: #ffffff;
|
|
right: 5px;
|
|
}
|
|
|
|
&:hover {
|
|
background: #1e80eb;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
&:focus {
|
|
background: #1e80eb;
|
|
border-radius: 5px;
|
|
|
|
}
|
|
}
|
|
|
|
.is-active {
|
|
background: #1e80eb;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.el-menu-item {
|
|
min-width: 0;
|
|
// display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
padding: 0 10px;
|
|
margin: 5px 0;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
|
|
|
|
|
|
&:hover {
|
|
background: #1e80eb;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
&:focus {
|
|
background: #1e80eb;
|
|
border-radius: 5px;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.tree-menu::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.view_box_title {
|
|
// width: 700px;
|
|
position: sticky;
|
|
top: 0;
|
|
width: 98.8%;
|
|
height: 38px;
|
|
line-height: 38px;
|
|
text-align: center;
|
|
font-size: 19px;
|
|
font-family: SourceHanSansCN;
|
|
border-radius: 5px;
|
|
color: #00356f;
|
|
margin: 10px 0 0 10px;
|
|
background: url("../assets/images/sub-title.png");
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
font-weight: bold;
|
|
z-index: 9999;
|
|
|
|
}
|
|
|
|
.view-box-top {
|
|
position: relative;
|
|
z-index: 999;
|
|
padding: 5px 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
font-family: SourceHanSansCN;
|
|
color: #fff;
|
|
background: -webkit-linear-gradient(top, #1f80ea 0%, #005dc2 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#1f80ea), to(#005dc2));
|
|
background: linear-gradient(180deg, #1f80ea 0%, #005dc2 100%);
|
|
-webkit-box-shadow: 0px 3px 12px rgba(0, 0, 0, .26);
|
|
border-radius: 5px;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-webkit-justify-content: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
::v-deep .el-backtop {
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
|
|
.view_box_title-bottom {
|
|
position: sticky;
|
|
bottom: 0px;
|
|
z-index: 9999;
|
|
// padding: 5px 0 0 0;
|
|
box-sizing: border-box;
|
|
background: #f2f2f2;
|
|
|
|
.view_box_title-bottom-sanjiao {
|
|
position: sticky;
|
|
top: -24px;
|
|
left: 50%;
|
|
transform: translateX(-26%);
|
|
width: 90px;
|
|
height: 20px;
|
|
background: #1F80EA;
|
|
border-radius: 5px 5px 0px 0;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
|
|
.icon {
|
|
color: #fff;
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
|
|
.view_box_title-bottom-box {
|
|
padding: 5px;
|
|
background: #ffffff;
|
|
border-radius: 5px;
|
|
|
|
.view_box_title-bottom-box-title {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 26px;
|
|
margin: 10px 0;
|
|
border-bottom: 1px solid #D3D3D3;
|
|
|
|
/* 设置下边框为2px宽的黑色实线 */
|
|
.view_box_title-bottom-box-title-title {
|
|
width: 180px;
|
|
height: 26px;
|
|
background: #1F80EA;
|
|
border-radius: 5px 5px 0px 0px;
|
|
margin-right: 10px;
|
|
color: #ffffff;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.view_box_title-bottom-box-title-line {
|
|
min-width: 80%;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #00356F;
|
|
display: flex;
|
|
align-items: center;
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: space-around;
|
|
|
|
div {
|
|
min-width: 100px;
|
|
margin-right: 20px;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.myHeader{
|
|
position: relative;
|
|
z-index: 99999;
|
|
}
|
|
</style> |