|  |  |  | 
|---|
|  |  |  | <header> | 
|---|
|  |  |  | <AppHeader/> | 
|---|
|  |  |  | </header> | 
|---|
|  |  |  | <div style="height:10px;"></div> | 
|---|
|  |  |  | <main ref="containerS"> | 
|---|
|  |  |  | <transition name="fade"> | 
|---|
|  |  |  | <!--            <keep-alive>--> | 
|---|
|  |  |  | <keep-alive :include="cachedViews"> | 
|---|
|  |  |  | <router-view></router-view> | 
|---|
|  |  |  | <!--            </keep-alive>--> | 
|---|
|  |  |  | </keep-alive> | 
|---|
|  |  |  | </transition> | 
|---|
|  |  |  | </main> | 
|---|
|  |  |  | </el-main> | 
|---|
|  |  |  | </el-container> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | import { mapState } from 'vuex' | 
|---|
|  |  |  | import Header from '@/components/common/Header' | 
|---|
|  |  |  | import BaseComputHeight from '@/components/base/BaseComputHeight' | 
|---|
|  |  |  | import CommonHeader from '@/components/common/CommonHeader' | 
|---|
|  |  |  | import Menu from '@/components/common/Menu' | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | extends: BaseComputHeight, | 
|---|
|  |  |  | name: 'DefaultLayout', | 
|---|
|  |  |  | components: { AppHeader: Header, Menu, CommonHeader }, | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | cachedViews:['abccdd'], | 
|---|
|  |  |  | isFinishData: false, | 
|---|
|  |  |  | orgBackground: '' | 
|---|
|  |  |  | orgBackground: '' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | computed: { | 
|---|
|  |  |  | ...mapState(['menuData', 'userInfo']) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | mounted() { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | mounted() { | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  | 
|---|
|  |  |  | .el-container { | 
|---|
|  |  |  | background: #F7F8F9; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | // overflow: hidden; | 
|---|
|  |  |  | overflow: scroll; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | //overflow: scroll; | 
|---|
|  |  |  | // 左边菜单 | 
|---|
|  |  |  | .el-aside { | 
|---|
|  |  |  | width: $menu-width !important; | 
|---|
|  |  |  | flex-shrink: 0; | 
|---|
|  |  |  | // height: 100%; | 
|---|
|  |  |  | // height: 900px; | 
|---|
|  |  |  | height: calc(100vh - 80px); | 
|---|
|  |  |  | height: calc(100vh - 60px); | 
|---|
|  |  |  | overflow-y: scroll; | 
|---|
|  |  |  | overflow-x: hidden; | 
|---|
|  |  |  | background: $primary-color; | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | background: #fff; | 
|---|
|  |  |  | color: #333333; | 
|---|
|  |  |  | transition: width ease .3s; | 
|---|
|  |  |  | scrollbar-width: none; /* firefox */ | 
|---|
|  |  |  | -ms-overflow-style: none; /* IE 10+ */ | 
|---|
|  |  |  | 
|---|
|  |  |  | // 右边内容 | 
|---|
|  |  |  | .el-main { | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | // height: 100%; | 
|---|
|  |  |  | height: calc(100vh - 90px); | 
|---|
|  |  |  | //height: 100%; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | height: calc(100vh - 60px); | 
|---|
|  |  |  | padding: 0; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | overflow-y: scroll; | 
|---|
|  |  |  | //overflow-y: scroll; | 
|---|
|  |  |  | overflow-x: hidden; | 
|---|
|  |  |  | scrollbar-width: none; /* firefox */ | 
|---|
|  |  |  | -ms-overflow-style: none; /* IE 10+ */ | 
|---|
|  |  |  | 
|---|
|  |  |  | & > main { | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | box-sizing: border-box; | 
|---|
|  |  |  | overflow-y: auto; | 
|---|
|  |  |  | /* overflow-y: auto; */ | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|