.navbar-box {
  position: relative;
  height: 56px;
  background: #396aff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  z-index: 2000;
  width: 100%;
}
.navbar-box .left-box {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  display: grid;
  grid-template-columns: 4fr 2fr 2fr 2fr 2fr 2fr 2fr;
  line-height: 56px;
  text-align: center;
  cursor: pointer;
}
.navbar-item-box > i {
  margin-right: 10px;
}
.left-box .navbar-name {
  font-weight: bold;
  font-size: 18px;
}
.right-box {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-right: 20px;
}
.right-box > i {
  margin-right: 10px;
}
.right-box > * {
  cursor: pointer;
}
.right-box .el-avatar {
  margin: 0 5px 0 10px;
}