<template>
  <el-container>
    <el-header height="60px">
      <head-index/>
    </el-header>
    <el-container>
      <el-aside width="60px">
        <left-menu></left-menu>
      </el-aside>
      <el-main>
        <tab/>
        <div class="router-block">
          <el-collapse-transition>
            <keep-alive>
              <router-view class="child-view"/>
            </keep-alive>
          </el-collapse-transition>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
  import headIndex from './headIndex'
  import leftMenu from './leftMenu'
  import tab from './tab'
  export default {
    name: "index",
    components: {leftMenu, headIndex,tab},
    data(){
      return {
        asideWidth:'200px',
        transitionName: 'slide-left',
        menuList:this.$store.state.menuList
      }
    },
    computed: {
      menuType() {
        return this.$store.state.menuType;
      }
    },
    watch:{
      'menuType':function (value) {
        console.log(value)
        if(value){
          this.asideWidth = '68px'
        }else{
          this.asideWidth = '200px'
        }
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .el-container{
    height: 100%;
    overflow: hidden;
  }
  .el-header{
    border-bottom: 1px solid @light-line;
  }
  .child-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition: all .5s;
  }
  .el-main{
    padding: 0;
    overflow: hidden;
    position: relative;
    .router-block{
      position: absolute;
      top: 49px;
      left: 0;
      bottom: 0;
      right: 0;
    }
  }
  .el-aside{
    transition: all .5s;
    background-color: @bg-b;
  }
</style>

