<!-- 布局布局页面 ，决定整个后台的布局 其他页面在此此渲染 -->
<template>
<el-row class="container">
<!-- 页面头部 通栏宽度100%高度60px-->
<el-col :span="24" class="header">
<!-- logo 展开的时候是320px,关闭的时候是60px -->
<div class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
{{collapsed?'':systemname}}
</div>
<!-- 图标，点击collapse or expand -->
<div class="tools" @click="collapsed=!collapsed"> <!-- 开关按钮 -->
<!-- 字体图标 -->
<i :class="collapsed?'el-icon-d-arrow-right':'el-icon-d-arrow-left'"></i>
</div>
<!-- user icon and loginout -->
<div class="userinfo">
<el-dropdown trigger="hover">
<span class="el-dropdown-link userinfo-inner"><img :src="userimg" />King</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item ><i class="el-icon-setting"></i> 个人信息</el-dropdown-item>
<el-dropdown-item ><i class="el-icon-circle-cross"></i> 退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-col>
<!-- 页面主体 宽度100% 高度100%-60px -->
<el-col :span="24" class="main">
<!-- aside最大宽度230px;最小宽度60px; -->
<!-- 左侧菜单 -->
<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
<!-- el菜单结构 -->
<el-menu default-active="0" :collapse="collapsed">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">系统菜单</span>
</template>
<el-menu-item index="1-1">
<i class="el-icon-message"></i>
<span slot="title">菜单管理</span>
</el-menu-item >
<el-menu-item index="1-2">
<i class="el-icon-message"></i>
<span slot="title">角色管理</span>
</el-menu-item >
<el-menu-item index="1-3">
<i class="el-icon-message"></i>
<span slot="title">用户管理</span>
</el-menu-item >
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">文章管理</span>
</template>
<el-menu-item index="2-1">
<i class="el-icon-message"></i>
<span slot="title">文章分类</span>
</el-menu-item >
<el-menu-item index="2-2">
<i class="el-icon-message"></i>
<span slot="title">文章列表</span>
</el-menu-item >
<el-menu-item index="2-3">
<i class="el-icon-message"></i>
<span slot="title">回收站</span>
</el-menu-item >
</el-submenu>
<el-menu-item index="3">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
</el-menu>
</aside>
<!-- 其他页面渲染位置 -->
<article>
<el-row>
<!-- 面包屑 -->
<el-col :span="24" class="breadcrumb-container">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
<!-- page页面渲染出口 -->
<el-col :span="24" class="content-wrapper">
</el-col>
</el-row>
</article>
</el-col>
</el-row>
</template>
<script>
export default {
name: 'Home',
data () {
return {
collapsed:false ,//侧边栏默认是expanded
systemname:"KINGADMIN",//系统的名称，当做logo显示
userimg:'./src/assets/63885668tw1dtxtodpk6ej.jpg'
};
}
};
</script>
<style >
.container{
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
}
.container>.header{
height: 60px;
line-height: 60px;
background: #7e57c2;
color:#fff;
}
.container>.header>.logo{
height: 60px;
text-align: center;
font-size: 20px;
border-right: solid #fff 1px;
color: #fff;
line-height: 60px;
}
.container>.header>div{
display: inline-block;
}
/* expand width*/
.container>.header> .logo-width{
width:230px;
}
/*collapse wdith*/
.container>.header>.logo-collapse-width{
width:60px;
height: 0px;/*按钮掉落问题*/
}
.container>.header>.tools{
padding: 0px 10px;
width:25px;
position: relative;
font-size: 20px;
}
.userinfo{
float: right;
}
.userinfo .el-dropdown{
float: right;
}
.userinfo-inner{
float: right;
color: #fff;
}
.userinfo-inner img{
width: 40px;
height:40px;
border-radius: 20px;
margin: 10px 30px 10px 10px;
float: right;
}
/*header结束*/
/*flex布局*/
.main{
display: flex;
position: absolute;
top: 60px;
bottom: 0px;
overflow: hidden;
}
/* 左侧菜单砍断*/
aside.menu-collapsed{
flex: 0 0 60px;/*不放大缩小，宽度为60px;*/
width: 60px;
}
aside.menu-expanded{
flex: 0 0 230px;
width: 230px;
}
aside{
background: #ccc;
}
article{
flex: 1; /*占据剩余位置*/
overflow-y: scroll; /*出现滚动条*/
padding: 0px 10px;
}
.breadcrumb-container{
padding: 20px 20px;
height: 35px;
line-height: 35px;
}
</style>
面包屑代码
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-ite
</el-breadcrumb>
