【vue-admin-element】在侧边栏和主体部位之上添加区域

第一步：新建IndexNavTop页面

<template>
  <div class="head">
    新添加的部分栏
  div>
template>
1
2
3
4
5

.head{
  margin: 0;
  padding: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background-color: $--mainClor;
  display: flex;
  align-items: center;
  color: #fff;
  z-index: 999;
  position: fixed;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

第二步：修改 sidebar.scss, 调整侧边栏位置

.sidebar-container {
    transition: width 0.28s;
    width: $sideBarWidth !important;
    background-color: $menuBg;
    height: 100%;
    position: fixed;
    font-size: 0px;
    /* 下移80px,这个根据自己导航的高度来的  */
    top:80px;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;	
    ....
1
2
3
4
5
6
7
8
9
10
11
12
13
14

第三步：修改Navbar.vue，调整主体页面上间距

.navbar {
    /* 添加一个margin-top  */
  margin-top: 80px;
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
1
2
3
4
5
6
7
8

第四步：页面组件引入并且挂载注册 layout\index.vue