<template> <el-container class="main-container"> <el-header> <head-index/> </el-header> <el-container> <el-main> <transition name="el-fade-in"> <div class="menu-block"> <left-menu/> </div> </transition> <div class="content"> <div class="router-block"> <!--<tab/>--> <transition name="el-fade-in-linear"> <router-view class="child-view" v-loading="$store.state.mainLoad"/> </transition> </div> </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,tab}, data(){ return { transitionName: 'slide-left', menuList:this.$store.state.menuList } }, computed: { menuType() { return this.$store.state.menuType; } } } </script> <style scoped lang="less"> @import "../../util/public"; .el-header{ background: #333333; color: white; } .el-main{ margin: 0; padding: 0; background: #f8f8f8; .menu-block{ float: left; height: 100%; overflow: auto; } .content{ display: flex; height: 100%; .router-block{ flex: 1; height: 100%; position: relative; .child-view{ position: absolute; top: 0; height: auto; overflow-y: auto; left: 0; bottom:0; right: 0; } } } } .main-container{ height: 100%; } </style>