learning-system-portal/src/layout/index2.vue

<template>
  <el-container style="background-color: #f2f2f2;">
        <el-header>
          <top></top>
        </el-header>
        <el-container style="padding-top: 10px;">
          <el-aside :width="isCollapse? '54px':'200px'">
             <div class="el-aside-header">
                <span v-if="!isCollapse" style="padding: 0px 10px;">全部功能</span>
                <hamburger id="hamburger-container" :is-active="isCollapse" class="hamburger-container" @toggleClick="toggleSideBar" />
             </div>
             <div class="el-aside-menu" >
               <el-scrollbar class="theme-dark" wrap-class="scrollbar-wrapper">
                   <el-menu :default-active="activeMenu"
                       :collapse="isCollapse"
                       :unique-opened="true"
                       active-text-color="#ffd04b"
                       :collapse-transition="false"
                       mode="vertical" >
                       <sidebar-item
                           v-for="(route, index) in sidebarRouters"
                           :key="route.path  + index"
                           :item="route"
                           :base-path="route.path" />
                   </el-menu>
               </el-scrollbar>
             </div>
          </el-aside>
          <el-main>
            <div class="main-container">
              <uc-header></uc-header>
              <app-main />
              <right-panel v-if="showSettings">
                <settings />
              </right-panel>
            </div>
          </el-main>
        </el-container>
  </el-container>
</template>

<script>
import top from './components/TopNav/Index.vue'
import UcHeader from './components/UcHeader/Index.vue'
import Hamburger from '@/components/Hamburger'
import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapGetters, mapState } from "vuex";
import SidebarItem from "./components/Sidebar/SidebarItem";
import variables from "@/assets/styles/variables.scss";

export default {
  name: 'Layout',
  data(){
     return {
        aside:{
          collapse:false,
          width:'200px'
        }
     }
  },
  components: {
    AppMain,
    Navbar,
    RightPanel,
    Settings,
    Sidebar,
    TagsView,
    top,
    Hamburger,
    SidebarItem,
    UcHeader
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      showSettings: state => state.settings.showSettings,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    ...mapGetters(["sidebarRouters", "sidebar"]),
    activeMenu() {
        const route = this.$route;
        const { meta, path } = route;
        // if set path, the sidebar will highlight the path you set
        if (meta.activeMenu) {
            return meta.activeMenu;
        }
        return path;
    },
    showLogo() {
        return this.$store.state.settings.sidebarLogo;
    },
    isCollapse() {
        return !this.sidebar.opened;
    },
    variables() {
      return variables;
    },
    mainHeight(){
      let windowHeight=document.documentElement.clientHeight;
      return windowHeight-60;
    }
  },
  methods: {
    toggleSideBar(){
      this.$store.dispatch('app/toggleSideBar')
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/mixin.scss";
  @import "~@/assets/styles/variables.scss";
 .el-container {
     height: 100%;
     // 不能通过css引用public下的图片，虚拟目录下会找不到
     //background: url($WEB_BASE_URL/images/center_bg.jpg);
    //  background-size: cover;
  }
  .el-header {
    padding: 0px;
    height: 40px !important;
  }
  .el-aside{
    margin-bottom: 0px;
    padding: 0px;
    background-color: transparent;
   
  }
  .el-aside-header{
    height: 40px;
    line-height: 40px;
  }
  .el-aside-menu{
    overflow: hidden;
    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }
    .el-scrollbar__bar.is-vertical {
      right: 0px;
    }

    .el-scrollbar {
      height: 100%;
    }
    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
    }

    .el-menu-item, .el-submenu__title {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

  }
  .el-menu{
    border-right: solid 0px #e6e6e6;
  }
  .el-main{
    padding: 0px;
    margin: 0px;
    height: 100%;
  }

  .hamburger-container {
    line-height: 30px;
    height: 100%;
    float: right;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color:transparent;

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

</style>