2022-06-08 14:51:11 +08:00

87 lines
1.9 KiB
Vue

<template>
<div class="fullHeight pages">
<div class="menuBox">
<el-menu
:default-active="$route.path"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
active-text-color="#5181F6"
router
>
<el-menu-item :index="item.url" v-for="(item,index) in menuList" :key="index">{{item.name}}</el-menu-item>
</el-menu>
</div>
<div class="pageContainer">
<div class="pageDataContainer">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
// LOGO_white:LOGO_white,
currentUrl:'',
menuList:[
// { name: '评估任务', url: "/companyAdmin/progressOfWorks/evaluate" },
// { name: '检查统计', url: "/companyAdmin/progressOfWorks/statistics" },
// { name: '问题分类', url: "/companyAdmin/progressOfWorks/classify" },
]
};
},
mounted(){
console.log('mounted',this.$route.path)
},
methods: {
handleSelect(url) {
// this.$store.commit('setCurrentUrl',url)
// this.$store.dispatch('currentUrl',url)
},
},
};
</script>
<style lang="less" scoped>
.el-menu.el-menu--horizontal {
box-sizing: border-box;
padding: 0 20px 4px;
border-bottom: none;
}
.el-menu--horizontal > .el-menu-item {
font-family: PingFangSC-Medium;
font-size: 14px;
letter-spacing: 0;
height: 44px;
line-height: 44px;
padding: 0;
margin-right: 70px;
}
.el-menu--horizontal > .el-menu-item.is-active {
border-bottom: 3px solid #409eff;
}
.menuBox{
position: relative;
}
.flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.pageContainer{
width: 100%;
height: calc(100% - 50px);
padding: 0;
margin-top: 12px;
.pageDataContainer{
background: #fff;
padding: 0;
height: 100%;
width: 100%;
}
}
</style>