若依左边菜单栏调到上方显示

我们一共需要改动这几个文件

1.找到Sidebar文件夹下的index.vue文件中的控制属性，把vertical改成horizontal

mode="vertical"

改为

 mode="horizontal"

然后设置为flex布局

.menu{
    display: flex;
}

如图：

2.logo.vue文件

做出如下改动

改动后的代码如下：

.sidebar-logo-container {
  position: relative;
    width: 180px;
  height: 50px;
  line-height: 50px;
    float: left;
  background: #2b2f3a;
  text-align: center;
  overflow: hidden;

  & .sidebar-logo-link {
    height: 100%;
    width: 100%;

    & .sidebar-logo {
      width: 32px;
      //height: 32px;
      vertical-align: middle;
        margin-right: 6px;
        margin-left: 6px;
    }

3.Layout——components文件夹下的Navbar.vue文件

style部分：

@import "~@/assets/styles/variables.scss";

.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #304156;//修改
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
    width: 100%;//新增
    z-index: 998;//新增
  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color:transparent;

    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #fff;//修改
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background .3s;

        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }

    .avatar-container {
      //margin-right: 30px;//注释掉

      .avatar-wrapper {
          margin-top: 10px;//修改
        position: relative;

          .user-avatar {//修改
              cursor: pointer;
              width: 30px;
              height: 30px;
              border-radius: 15px;
          }
          .name {//新增
              font-size: 14px;
              position: relative;
              bottom: 12px;
              margin-left: 10px;
          }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }

html部分：该注释的注释

<template>
  <div class="navbar">
<!--    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />-->

<!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
<!--    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>-->

    <div class="right-menu">
      <template v-if="device!=='mobile'">

          <!--          语言选择器-->
          <el-dropdown class="right-menu-item hover-effect" trigger="click" @command="handleSetLanguage">
              <span class="international-icon">{{ language }}<i class="el-icon-caret-bottom" /></span>
              <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="zh" :disabled="language === '中文'">中文</el-dropdown-item>
                  <el-dropdown-item command="en" :disabled="language === 'English'">English</el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>

        <screenfull id="screenfull" class="right-menu-item hover-effect" />

<!--        <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
<!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
<!--        </el-tooltip>-->

<!--        <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->

      </template>

      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <img :src="avatar" class="user-avatar">
            <span class="name">{{ name }}</span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/user/profile">
            <el-dropdown-item>个人中心</el-dropdown-item>
          </router-link>
<!--          <el-dropdown-item @click.native="setting = true">-->
<!--            <span>布局设置</span>-->
<!--          </el-dropdown-item>-->
          <el-dropdown-item divided @click.native="logout">
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

js部分：加上个name，显示用户名称

  ...mapGetters(["sidebar", "avatar", "device",'name']),

4.Layout文件夹下index.vue文件

  .fixed-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    //width: calc(100% - #{$base-sidebar-width});//注释掉
      width: 100%;//新增
    transition: width 0.28s;
  }

5.assets——styles文件夹下sidebar.scss文件

  .main-container {
    min-height: 100%;
    transition: margin-left .28s;
    //margin-left: $base-sidebar-width;//注释掉
    position: relative;
  }

新增以下样式：

  .el-menu--horizontal > div > .el-submenu {
    float: left;
  }
  /* 水平样式 */
  .el-menu--horizontal > div > .el-submenu {
    float: left;
  }
  /* 一级菜单的样式 */
  .el-menu--horizontal > div > .el-menu-item {
    float: left;
    height: 60px;
    line-height: 60px;
    margin: 0;
    color: #909399;
  }
  /* 解决下图1 下拉三角图标 */
  .el-menu--horizontal > div > .el-submenu .el-submenu__icon-arrow {
    position: static;
    vertical-align: middle;
    color: #fff;
    margin-left: 8px;
    margin-top: -1px;
  }
  /* 解决无下拉菜单时不对齐问题 */
  .el-menu--horizontal > div > .el-submenu .el-submenu__title {
    height: 50px;
    line-height: 50px;
    color: #909399;
  }

.sidebar-container中的：以下是需要修改的子类和属性

    -webkit-transition: width 0.28s;//修改
    transition: width 0.28s;
    //width: $base-sidebar-width !important;//注释掉
    width: calc(100% - 220px);//修改
    background-color: $base-menu-background;
    height: 50px;//修改
    position: fixed;
    font-size: 0px;

    // reset element-ui css
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out,//修改
      0s padding-right ease-in-out;//修改
    }

   .scrollbar-wrapper {
      //overflow-x: hidden !important;//注释掉
      height: 90px;//修改
    }
 &.has-logo {
      .el-scrollbar {
        //height: calc(100% - 50px);//注释掉
      }
    }
    .svg-icon {
      position: relative;//修改
      top: 2px;//修改
      margin-right: 6px;//修改
    }
    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
      display: flex;//修改
      // by kofi//注释掉
      .el-menu-item {//新增
        height: 60px !important;
        padding-left: 30px !important;
      }
    //.el-menu-item, .el-submenu__title {//注释掉
    //  overflow: hidden !important;
    //  text-overflow: ellipsis !important;
    //  white-space: nowrap !important;
    //}
    // menu hover
    .submenu-title-noDropdown,
    .el-submenu__title {
      height: 50px;//修改
      line-height: 50px;//修改
      &:hover {
        background-color: rgba(0, 0, 0, 0.06) !important;
      }
    }

  // mobile responsive
  .mobile {
    .main-container {
      margin-left: 0px;
    }

    .sidebar-container {
      transition: transform 0.28s;//修改
      width: $base-sidebar-width !important;
    }

    &.hideSidebar {
      .sidebar-container {
        pointer-events: none;
        transition-duration: 0.3s;
        transform: translate3d(-$base-sidebar-width, 0, 0);
      }
    }
  }

// when menu collapsed
.el-menu--vertical {
  &>.el-menu {
    .svg-icon {
      margin-right: 6px;
    }
  }

6.views文件夹下的index.vue文件

.login-container{
    margin-top: 100px;
    margin-left: 90px;
    background-size: 100% 100%;
    width: 100%;
    //height: 86vh;//注释掉
    position: relative;
    overflow: hidden;


}

搞定！