<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/>-->
                <router-view class="child-view" v-loading="$store.state.mainLoad"/>
          </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%;
      background-color: #333333;
      /*height: calc(100vh - 60px);*/
      /*overflow: auto;
      position: fixed;
      left: 0;
      top: 60px;
      bottom: 0;
      z-index: 10;*/
    }
    .content{
      display: flex;
      height: 100%;
      .router-block{
        width: 100%;
        height: 100%;
        position: relative;
        .child-view{
          /*height: calc(100% - 40px);
          width: 100%;
          overflow-y: auto;*/
        }
      }
    }
  }
  .main-container{
    height: 100%;
  }
</style>

