<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">
              <keep-alive>
                <router-view class="child-view" v-loading="$store.state.mainLoad"/>
              </keep-alive>
            </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%;
    }
    .content{
      display: flex;
      height: 100%;
      .router-block{
        flex: 1;
        height: 100%;
        position: relative;
        .child-view{
          position: absolute;
          top: 42px;
          height: auto;
          left: 0;
          bottom:0;
          right: 0;
        }
      }
    }
  }
  .main-container{
    height: 100%;
  }
</style>