以上所有代码:
<template>
<div>
<div class="box">
<el-container class="buju">
<div class="box1">
<el-aside width="200px">
<!-- 左导航栏 -->
<p class="p1"><img class="img1" src="../assets/images/2_03.gif" alt=""><span class="p2">系统</span></p>
<el-row class="tac">
<el-col :span="24">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#1a233c"
text-color="#fff"
active-text-color="#409eff">
<el-menu-item index="1" class="shouye">
<img class="imgs" src="../assets/images/首页-首页.png" alt="">
<span slot="title">首页</span>
</el-menu-item>
<el-menu-item index="2" class="shouye1">
<img class="imgs" src="../assets/images/企业管理.png" alt="">
<span slot="title">企业管理</span>
</el-menu-item>
<el-submenu index="3">
<template slot="title">
<img class="imgs" src="../assets/images/当月通话记录.png" alt="">
<span>通话统计</span>
</template>
</el-submenu>
<el-submenu index="4">
<template slot="title">
<img class="imgs" src="../assets/images/权限管理.png" alt="">
<span>权限管理</span>
</template>
<el-menu-item-group>
<el-menu-item class="xitong" index="1-1">系统角色管理</el-menu-item>
<el-menu-item class="xitong" index="1-2">系统用户管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="5">
<template slot="title">
<img class="imgs" src="../assets/images/系统配置.png" alt="">
<span>系统配置</span>
</template>
<el-menu-item-group>
<el-menu-item class="xitong" index="1-1">呼转计费配置</el-menu-item>
<el-menu-item class="xitong1" index="1-2">客户端版本维护</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="6" class="zongji">
<template slot="title">
<img class="imgs" src="../assets/images/权限配置.png" alt="权限配置">
<span>总机号码管理</span>
</template>
<el-menu-item class="xitong" index="1-1">总机号码管理</el-menu-item>
<el-menu-item class="xitong" index="1-2">直线号码管理</el-menu-item>
<el-menu-item class="xitong" index="1-3">外呼模式配置</el-menu-item>
</el-submenu>
<el-submenu index="7">
<template slot="title">
<i class="el-icon-location"></i>
<span>话机管理</span>
</template>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</el-aside>
</div>
<el-container>
<el-header><p class="headp1"><img class="img2" src="../assets/images/2_09.gif" alt=""></p><p class="headp2"><img class="img3" src="../assets/images/2_06.gif" alt=""><span class="span1">zy123456</span><img class="img4" src="../assets/images/2_12.gif" alt=""></p></el-header>
<!-- 右侧页面 -->
<el-main>
</el-main>
</el-container>
</el-container>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<style scoped>
.imgs{
width: 20px;
height: 20px;
margin-right: 10px;
margin-left: 10px;
}
.img3{
margin-top: 10px;
}
.span1{
float: left;
margin-right: 10px;
}
.img3{
float: left;
margin-right: 10px;
}
.img2{
margin-left: 15px;
margin-top: 18px;
padding-right: 10px;
border-right: 1px solid #e4e0e0;
}
.headp1{
float: left;
}
.headp2{
float: right;
margin-right: 50px;
}
.box1{
height: 100%;
background: #1a233c;
}
.img1{
float: left;
margin-left: 10px;
}
.p2{
width:152px;
height: 47px;
line-height: 47px;
float: left;
font-size: 20px;
color: #fff;
background: #121a2c;
}
.p1{
line-height: 30px;
width: 199px;
height: 50px;
background: #121a2c;
}
.zongji{
margin-left: 25px;
}
.xitong{
left: 60px;
}
.xitong1{
left: 65px;
}
.shouye{
margin-left: -45px;
}
.shouye1{
margin-left: -15px;
}
.el-menu-vertical-demo{
margin-left: -90px;
}
.buju{
height: 753px;
}
.el-header, .el-footer {
background-color: #fff;
color: #333;
/* text-align: center; */
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
overflow: hidden;
}
.el-main {
background-color: #E9EEF3;
color: #333;
/* text-align: center; */
}
*{
margin: 0;
padding: 0;
}
</style>