You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

209 lines
5.4 KiB

2 years ago
<template>
<el-container class="home-container" >
<el-header class="navigation">
<div>
<!-- <img src="../assets/images/logo.png" /> -->
<span>贷后监管系统</span>
</div>
<el-button type="info" @click="logout" class="butt">退出</el-button>
</el-header>
<el-container >
<!-- 当打开左侧菜单时 宽度为200, 当不打开时为默认值-->
<el-aside :width="isCollapse ? '64px' : '200px' " class="sidemenu">
<!-- 这是左侧菜单-->
<!--定义折叠项-->
<div class="leftCollapse" @click="collspseClick" style="background-color: #55557f ;color: #000000;">|||</div>
<!--
1.background-color="#2C3E50"
2.text-color="#fff" 文本颜色
3.active-text-color="#4094ff"
4.unique-opened=true 是否只打开一个菜单
5.collapse 是否折叠
6.collapse-transition 折叠时是否展现动画效果
7.default-active 默认选中的菜单
8.router 启动以path路径当做请求地址
-->
<el-menu background-color="#55557f" text-color="#ffffff"
active-text-color="#ffff00"
unique-opened
:collapse="isCollapse" :collapse-transition="isCollapseTransition" router :default-active="defaultActive">
<!-- 定义一级菜单 -->
<el-submenu :index="menu.id+''" v-for="menu in menuList" :key="menu.id">
<!-- 定义一级菜单模版 -->
<template slot="title">
<!-- 定义左侧图标-->
<!-- <i :class="menuIcon[menu.id]"></i> -->
<i class="el-icon-star-on"></i>
<!-- 定义菜单名称-->
<span>{{menu.name}}</span>
</template>
<!-- 定义二级菜单 -->
<el-menu-item :index="childrenMenu.path" v-for="childrenMenu in menu.children" :key="childrenMenu.id"
@click="defaultActiveMenu(childrenMenu.path)">
<template slot="title">
<i class="el-icon-menu"></i>
<span>{{childrenMenu.name}}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 定义主页面结构-->
<el-main>
<!-- <el-container class="home-container">
</el-container> -->
<!-- 定义路由展现页面-->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
// 初始化函数
created () {
this.getMenuList()
// 设定模式选中按钮
this.defaultActive = window.sessionStorage.getItem('activeMenu')
},
data () {
return {
menuList: [],
menuIcon: {
1: 'iconfont iconuser',
3: 'iconfont iconshangpin',
5: 'iconfont iconicon--copy',
7: 'iconfont iconquanxian',
8: 'iconfont iconziyuan'
},
// 定义是否折叠
isCollapse: false,
// 是否展现折叠动态效果
isCollapseTransition: false,
// 定义默认高亮
defaultActive: '',
user: ''
}
},
methods: {
logout () {
// 1.删除session中的记录
window.sessionStorage.clear()
// 2.要求跳转到用户登录页面
this.$router.push('/login')
},
async getMenuList () {
// 1.查询左侧菜单
const { data: result } =
await this.$http.get('/rights/getRightsList')
if (result.status !== 200) return this.$message.error('获取权限列表失败')
this.menuList = result.data
},
// 设定左侧折叠展开效果
collspseClick () {
this.isCollapse = !this.isCollapse
},
defaultActiveMenu (activeMenu) {
// 为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory
window.sessionStorage.setItem('activeMenu', activeMenu)
this.defaultActive = activeMenu
}
},
mounted () {
this.user = window.sessionStorage.getItem('token').substr(32)
}
}
</script>
<!-- 防止样式重叠 -->
<style lang="less" scoped>
.el-header {
background-color: #55ffff;
display: flex; //灵活的盒子容器
justify-content: space-between; //左右对齐
align-items: center; //文本元素居中对齐
color: #232323; //设定字体颜色
padding-left: 1px;
>div {
display: flex;
align-items: center;
span {
margin-left: 15px;
font-size: 25px; //设定字体高度
}
}
}
.el-aside {
background-color: #55007f;
.el-menu {
border-right: none;
}
}
.el-main {
background-color: #EEEEEE;
}
.home-container {
height: 100%;
width: 100%;
}
.iconfont {
margin-right: 8px;
}
// 导航栏渐变
.navigation{
background:linear-gradient(45deg,#55557f,#ffffff);
color: #ffffff;
}
// 按钮
.butt{
background-color: #cecece;
border-color: #cecece;
}
.sidemenu{
background-color: #55557f;
}
//定义折叠项
.leftCollapse {
//设定背景色
background-color: #708090;
//定义字体大小
font-size: 10px;
//定义行高
line-height: 30px;
//定义颜色
color: #FFFFFF;
//设置居中
text-align: center;
//设定字符间距
letter-spacing: 4px;
//鼠标放上之后设置为小手
cursor: pointer;
}
.el-icon-star-on{
color: white;
}
.el-icon-menu{
color: white;
}
</style>