|  |  | 
 |  |  |         </header> | 
 |  |  |         <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; | 
 |  |  | 
 |  |  |     height: calc(100vh - 80px); | 
 |  |  |     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 - 94px); | 
 |  |  |     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; */ | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } |