<template>
|
<div class="bottomMnu">
|
<div class="bottomBox">
|
<div class="menuButton" v-for="(i, k) in menuOption">
|
<el-popover popper-class="popover" placement="top" v-show="i.children && i.children.length > 0"
|
width="100" trigger="click">
|
<span slot="reference">{{ i.name }}</span>
|
<div @click="setChildData(c)" class="popover__item" v-show="i.children && i.children.length > 0"
|
v-for="(c, f) in i.children" c :title="c.name"> {{
|
c.name.slice(0, 8) }}
|
</div>
|
</el-popover>
|
<span @click="setChildData(i)" slot="reference" v-show="!i.children || i.children.length <= 0">{{ i.name }}</span>
|
</div>
|
|
</div>
|
<div class="bottomImage">
|
<img src="@/assets/images/Screen/bottombg.png" />
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
menuOption: [
|
{
|
name: '配网巡检',
|
children: [
|
{
|
id: 'a1',
|
name: '知识图谱',
|
pid: 's1',
|
}
|
]
|
}, {
|
name: '配网运检',
|
children: [{
|
id: 'a1',
|
name: '数据统计',
|
pid: 's2',
|
}]
|
}, {
|
name: '灾害管理',
|
children: [{
|
id: 'a1',
|
name: '数据分析',
|
pid: 's3',
|
}]
|
}, {
|
name: '数字线损',
|
|
}
|
],
|
visible: false
|
|
}
|
},
|
methods: {
|
setChildData(res) {
|
this.visible = false;
|
this.$emit('childData', res);
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.bottomMnu {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
.bottomBox {
|
flex: 1;
|
width: 100%;
|
|
display: flex;
|
justify-content: center;
|
|
.menuButton {
|
height: 36px;
|
width: 147px;
|
background: url(~@/assets/images/Screen/centerbtn.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
font-size: 16px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #fff;
|
font-weight: 600;
|
cursor: pointer;
|
|
&:hover {
|
background: url(~@/assets/images/Screen/centerbtnc.png);
|
background-size: 100% 100%;
|
}
|
}
|
}
|
|
.bottomImage {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
|
img {
|
width: 80%;
|
height: 50px;
|
}
|
|
}
|
|
}
|
</style>
|
<style lang="scss">
|
.popover {
|
display: flex;
|
justify-content: center;
|
width: 163px;
|
background: url(~@/assets/images/Screen/centerTooltipBg.png);
|
background-size: 100% 100%;
|
border: none;
|
padding-bottom: 0px;
|
|
&_list {
|
display: flex;
|
flex-direction: column;
|
width: 145px;
|
overflow-x: hidden;
|
align-items: center;
|
|
}
|
|
.popper__arrow {
|
display: none;
|
}
|
|
.popover-content {
|
height: auto !important;
|
}
|
|
.popover__item {
|
margin-bottom: 12px;
|
color: #fff;
|
width: 130px;
|
height: 30px;
|
line-height: 30px;
|
text-align: center;
|
background: url(~@/assets/images/Screen/btnbg.png);
|
background-size: 100% 100%;
|
|
|
}
|
|
.popover__item:hover {
|
background: url(~@/assets/images/Screen/btnc.png);
|
background-size: 100% 100%;
|
}
|
}
|
|
.elpopover {
|
.popover {
|
display: none !important;
|
}
|
}
|
</style>
|
