后台管理系统自己手写页面布局 vue

头部固定，底部固定，左侧菜单出现滚动条，效果图如下：

文章图片

代码

.mars-header { background-color: #FFFFFF; z-index: 1000; height: 60px; position: relative; border-bottom: none; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); } .mars-layout-admin .mars-logo { position: absolute; left: 0; top: 0; width: 200px; height: 100%; line-height: 60px; text-align: center; color: #F43B66; font-size: 28px; font-weight: bold; background: #2f3848; box-sizing: border-box; border-bottom: 1px solid #626e83; cursor: pointer; } .mars-layout-admin .mars-header .mars-nav { background: 0 0; } .mars-nav { position: relative; padding: 0 20px; background-color: #393D49; color: #fff; border-radius: 2px; font-size: 0; box-sizing: border-box; } .mars-nav * { font-size: 16px; } .mars-nav .mars-nav-item { position: relative; display: inline-block; vertical-align: middle; line-height: 60px; } .mars-layout-left { position: absolute !important; left: 200px; top: 0; line-height: 60px; color: #282828; } .mars-layout-right { position: absolute !important; right: 0; top: 0; line-height: 60px; } .mars-layout-admin .mars-side { top: 60px; width: 200px; overflow-x: hidden; } .mars-bg-black { background-color: #2f3848 !important; color: #fff !important; } .mars-side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 999; width: 200px; overflow-x: hidden; } .mars-side-scroll { position: relative; width: 220px; height: 100%; overflow-x: hidden; } .mars-layout-admin .mars-body { position: fixed; top: 60px; /* bottom: 44px; */ } .mars-body { position: absolute; left: 200px; right: 0; top: 0; bottom: 0; z-index: 998; width: auto; overflow: hidden; overflow-y: auto; box-sizing: border-box; background: #F2F2F2; } .mars-layout-admin .mars-footer { position: fixed; left: 200px; right: 0; bottom: 0; height: 44px; line-height: 44px; padding: 0 15px; background-color: #8A8A8A; } /* 顶部右侧样式 */ .el-dropdown-link { cursor: pointer; } .el-icon-arrow-down { font-size: 12px; } .mars-nav-img { width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; } /* 面包屑样式 */ .el-breadcrumb__item:last-child .el-breadcrumb__inner { color: #F43B66 !important; } /* 左侧菜单栏二级菜单样式 */ .menu-item { padding-left: 55px !important; }

后台管理系统自己手写页面布局

推荐阅读

众筹怎么操作,微信群众筹怎么操作

信托代销的优缺点信托的直销和代销是什么意思

筑梦庄园之心火电视剧筑梦庄园之心火电视剧免费

明兰是什么时候出嫁的

sat是什么

mysql复合索引范围查找 mysql复合索引的结构

怎么确定销户成功

浙江省高考成绩排名怎么查浙江省高考成绩排名前十

长高最有效的方法

眼袋怎么那么严重，我都没怎么熬夜啊？

抖音怎么加好友

江西省养老金计算公式2023年？2023年江西省养老金调整方案细则预估

对《王牌部队》不看好的人那么多,为什么收视率却很高？

云南贿赂金额多少为定罪贿赂人金额多少为定罪

kpl秋季赛新KDA之王诞生,不是老帅和杨过,而是XQ九尾,英雄池比猫神还深,你如何评价？

剑与远征心愿单怎么选心愿单选谁好

90hz+65w|降价800元都没人要？90Hz+65w快充，内行人：白给都不要

隔夜的玉米能不能吃

如何有效解决ipf765废墨盒问题？

潘嘎之交文言文原文潘嘎之交文言文原文搞笑