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

<template>
  <div class="uc-layout">
    <div style="height: 72px;"><top></top></div>
    <!-- <div style="position: fixed;left: 0px; top: 60px;" :style="{width:isCollapse? '54px':'200px'}">
      <div :style="{width:isCollapse? '64px':'200px'}">
        <div>
          <div class="el-aside-header">
             <span v-if="!isCollapse" style="padding: 0px 10px;color: #1EA0FA;">全部功能导航</span>
             <hamburger id="hamburger-container" :is-active="isCollapse" class="hamburger-container" @toggleClick="toggleSideBar" />
          </div>
        </div>
        <div>
          <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>
        </div>
      </div>
    </div> -->
    <div class="main-container">
      <uc-header></uc-header>
      <app-main />
      <right-panel v-if="showSettings">
        <settings />
      </right-panel>
      <portalFloatTools></portalFloatTools>
    </div>

  </div>
</template>

<script>
import top from './components/TopNav/Index.vue'
import UcHeader from '@/components/UcHeader/Index.vue'
import Hamburger from '@/components/Hamburger'
import { AppMain, Navbar, Settings} from './components'
import { mapGetters, mapState } from "vuex";
import SidebarItem from "./components/Sidebar/SidebarItem";
import portalFloatTools from '@/components/PortalFloatTools.vue';
export default {
  name: 'Layout',
  data(){
     return {
        aside:{
          collapse:true,
          width:'54px'
        }
     }
  },
  components: {
    AppMain,
    Navbar,
    Settings,
    top,
    portalFloatTools,
    Hamburger,
    SidebarItem,
    UcHeader
  },
  mounted() {

  },
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      showSettings: state => state.settings.showSettings
    }),
    ...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;
    },
    isCollapse() {
        return this.aside.collapse;
    }
  },
  methods: {
    toggleSideBar(){
      // console.log(this.aside.collapse);
      this.aside.collapse=!this.aside.collapse;
    }
  }
}
</script>

<style lang="scss" scoped>
  .uc-layout{
    height: 100%;
    // background-image:url(../assets/images/uc-bg.png);
    // background-repeat: no-repeat;
    //background-position: center;
    //background-color: #F4F4F4;
    
    background-color: #F6F7FB;
  }
  .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>