<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>