vite+vue+ts+element-plus从零开发管理后台框架(08)-顶部整体布局
顶部整体使用
左
、中
、右
的布局。左侧宽度跟菜单宽度一样,如果菜单未折叠就显示后台logo和后台名称,如果折叠了就只显示后台logo。右侧内容自适应,主要是显示系统工具按钮和用户信息。中间使用剩余空间,主要是显示菜单折叠按钮和多页签。
布局
编辑src/views/Main.vue
,template
段el-header
修改如下。
<el-header>
<div class="header-left">left</div>
<div class="header-center">center</div>
<div class="header-right">right</div>
</el-header>
style
段el-header
类修改如下
.el-header {
padding: 0px;
border-bottom: 1px solid var(--el-border-color);
.header-left {
background-color: red;
}
.header-center {
background-color: green;
}
.header-right {
background-color: blue;
}
}
浏览器查看效果,发现依次从上到下布局了。
使用 flex 完成布局效果
编辑src/views/Main.vue
,style
段el-header
类修改如下。
.el-header {
padding: 0px;
border-bottom: 1px solid var(--el-border-color);
display: flex;
align-items: center;
.header-left {
background-color: red;
width: 300px;
}
.header-center {
background-color: green;
flex-grow: 1;
}
.header-right {
background-color: blue;
}
}
浏览器查看效果,实现了左侧固定宽度,右侧内容自适应,中间使用剩余空间。
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: