<template>
|
<div class="zykMenu pageMenu">
|
<div class="menu-one" v-for="(oneMenu,i) in menus" :key="i">
|
<div class="menu-title" @click="select(oneMenu)" :class="{'active':oneMenu.id==id}">
|
<div class="left">
|
<i v-if="oneMenu.icon" :class="oneMenu.icon"></i>
|
<span class="text">{{ oneMenu.name }}</span>
|
</div>
|
<i class="el-icon-arrow-up" v-if="oneMenu.subMenus"></i>
|
</div>
|
<div class="menu-two-con" v-if="oneMenu.subMenus">
|
<div class="menu-two" v-for="(twoMenu,j) in oneMenu.subMenus" :key="j">
|
<div class="menu-title" @click="select(twoMenu)" :class="{'active':twoMenu.id==id}">
|
<div class="left">
|
<i v-if="twoMenu.icon" :class="twoMenu.icon"></i>
|
<span class="text">{{ twoMenu.name }}</span>
|
</div>
|
<i class="el-icon-arrow-right" v-if="twoMenu.subMenus"></i>
|
</div>
|
<transition name="el-zoom-in-center">
|
<div class="menu-three-con" v-if="twoMenu.subMenus">
|
<div class="menu-three" v-for="(threeMenu,k) in twoMenu.subMenus" :key="k">
|
<div class="menu-title" @click="select(threeMenu)" :class="{'active':threeMenu.id==id}">
|
<div class="left">
|
<i v-if="threeMenu.icon" :class="threeMenu.icon"></i>
|
<span class="text">{{ threeMenu.name }}</span>
|
</div>
|
<i class="el-icon-arrow-right" v-if="threeMenu.subMenus"></i>
|
</div>
|
</div>
|
</div>
|
</transition>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
acTabs: 'topoGraph',
|
menus: [],
|
id: ''
|
}
|
},
|
methods: {
|
select(data) {
|
this.id = data.id;
|
if (data.url) {
|
this.$router.push({
|
path: `/index/${data.url}`,
|
}).catch(err => {
|
console.log(err)
|
});
|
}
|
},
|
},
|
mounted() {
|
let pageMenu = JSON.parse(sessionStorage.getItem('pageMenu'));
|
pageMenu.map(item => {
|
if (item.level == '1') {
|
this.menus.push(item)
|
}
|
})
|
this.menus.map(item => {
|
item.subMenus.map(ktem => {
|
pageMenu.map(jtem => {
|
if (jtem.level == '2') {
|
if (ktem.id == jtem.id) {
|
ktem.subMenus = jtem.subMenus;
|
}
|
}
|
})
|
})
|
})
|
},
|
}
|
</script>
|
|
<style scoped>
|
.text {
|
display: inline-block;
|
width: 100%;
|
white-space: normal;
|
}
|
|
.zykMenu {
|
width: 100%;
|
}
|
|
.zykMenu .menu-title {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 8px 16px;
|
cursor: pointer;
|
color: #d2cccc;
|
transition: 0.3s;
|
}
|
|
.zykMenu .menu-title.active {
|
background: rgba(111, 114, 157, 1);
|
color: #ffffff;
|
}
|
|
.zykMenu .menu-title:hover {
|
color: #ffffff;
|
}
|
|
.zykMenu .menu-one .menu-title .left {
|
display: flex;
|
align-items: center;
|
}
|
|
.zykMenu .menu-one .menu-title .left i {
|
font-size: 14px;
|
}
|
|
.zykMenu .menu-one .menu-title .text {
|
font-size: 12px;
|
margin-left: 8px;
|
}
|
|
.zykMenu .menu-one>.menu-title {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
background-color: rgba(82, 87, 177, 1);
|
padding: 8px 14px;
|
border-bottom: 1px solid #818181;
|
color: #ffffff;
|
}
|
|
.zykMenu .menu-one:last-of-type>.menu-title {
|
border-bottom: none;
|
}
|
|
.zykMenu .menu-one>.menu-title .left i {
|
font-size: 16px;
|
}
|
|
.zykMenu .menu-one>.menu-title .text {
|
font-size: 14px;
|
margin-left: 8px;
|
}
|
|
.zykMenu .el-icon-arrow-up,
|
.zykMenu .el-icon-arrow-right {
|
font-weight: bold;
|
font-size: 12px;
|
}
|
|
.zykMenu .menu-two {
|
position: relative;
|
}
|
|
.zykMenu .menu-two-con {
|
padding: 6px 0;
|
}
|
|
.zykMenu .menu-two .menu-three-con {
|
width: 220px;
|
position: absolute;
|
right: -180px;
|
top: 0;
|
z-index: 9;
|
background-image: linear-gradient(#2a3879, #222767);
|
display: none;
|
padding: 6px 0;
|
border-radius: 4px;
|
border-top: 4px solid rgba(82, 87, 177, 1);
|
box-shadow: 0 0 4px rgb(255 255 255 / 30%);
|
transition: 0.3s;
|
}
|
|
.zykMenu .menu-two .menu-three-con:before {
|
position: absolute;
|
content: '';
|
border-top: 10px transparent dashed;
|
border-left: 10px transparent dashed;
|
border-bottom: 10px transparent dashed;
|
border-right: 10px #d2cccc solid;
|
}
|
|
.zykMenu .menu-two .menu-three-con:before {
|
top: 4px;
|
left: -20px;
|
/*覆盖并错开1px*/
|
border-right: 10px #d2cccc solid;
|
}
|
|
.zykMenu .menu-two:hover .menu-three-con {
|
display: block;
|
right: -220px;
|
}
|
</style>
|
