后台管理----首页布局分析1

1.常见的后台管理布局如下

2.使用elementPlus 组件库的 container 组件进行布局

3. 代码展示

相关代码的样式

.main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main-content{
  height: calc(100% - 48px);
}
.el-aside {
  background-color: #001529;
  overflow-x: hidden;
  overflow-y: auto;
  color: #333;
  text-align: center;
  line-height: 200px;
  text-align: left;
  cursor: pointer;
}
.main-content,.page{
  height: 100%;
}
.el-header,
.el-footer {
  display: flex;
  color: #333;
  text-align: center;
  align-items: center;
}
.el-header {
  height: 48px !important;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

最终效果如下：