<template> <el-container class="main-container"> <el-header> <head-index/> </el-header> <el-container class="refresh-container"> <!--<el-main>--> <transition name="el-fade-in"> <div class="menu-block"> <left-menu/> </div> </transition> <!--<div class="content">--> <el-container class="content"> <div class="router-block"> <!--<tab/>--> <router-view class="child-view" v-loading="$store.state.mainLoad"/> </div> </el-container> <!--</div>--> <!--</el-main>--> </el-container> </el-container> </template> <script> import headIndex from './headIndex' import leftMenu from './leftMenu' // import tab from './tab' export default { components: {leftMenu, headIndex}, data() { return { transitionName: 'slide-left', menuList: this.$store.state.menuList } }, computed: { menuType() { return this.$store.state.menuType; } } } </script> <style lang="less"> @import "../../util/public"; .el-header { background: #333333; color: white; } .refresh-container { height: calc(100% - 60px); .content { display: flex; height: 100%; .router-block { position: relative; width: 100%; height: 100%; .child-view { box-sizing: border-box; overflow-y: auto; height: 100%; /*height: calc(100% - 40px); width: 100%; overflow-y: auto;*/ } } } } .el-main { margin: 0; padding: 0; background: #f8f8f8; .menu-block { flex-shrink: 0; float: left; height: 100%; background-color: #333333; /*height: calc(100vh - 60px);*/ /*overflow: auto; position: fixed; left: 0; top: 60px; bottom: 0; z-index: 10;*/ } } .main-container { height: 100%; } </style>