vite+vue+ts+element-plus从零开发管理后台框架(08)-顶部整体布局

顶部整体使用的布局。左侧宽度跟菜单宽度一样,如果菜单未折叠就显示后台logo和后台名称,如果折叠了就只显示后台logo。右侧内容自适应,主要是显示系统工具按钮和用户信息。中间使用剩余空间,主要是显示菜单折叠按钮和多页签。

布局

编辑src/views/Main.vuetemplateel-header修改如下。

<el-header>
    <div class="header-left">left</div>
    <div class="header-center">center</div>
    <div class="header-right">right</div>
</el-header>

styleel-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;
    }
}

浏览器查看效果,发现依次从上到下布局了。

布局1

使用 flex 完成布局效果

编辑src/views/Main.vuestyleel-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;
    }
}

浏览器查看效果,实现了左侧固定宽度,右侧内容自适应,中间使用剩余空间。

布局2

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!