<template>
  <div>
    <div class="flex-align-stretch">
      <asideTemp style="width:200px;height:100vh;" @getModules="getModules"></asideTemp>
      <div style="flex:1;" class="body__panel">
        <headeTemp></headeTemp>
        <div>
          <menuTemp class="sticky" ref="menu"></menuTemp>
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headeTemp from './modules/header.vue'
import asideTemp from './modules/aside.vue'
import menuTemp from './modules/menu.vue'

export default {
  components:{
    headeTemp,
    asideTemp,
    menuTemp
  },
  data () {
    return {

    }
  },
  methods:{
    getModules (mod,type) {
      this.$refs['menu'].setModules(mod,type)
    }
  }
}

</script>
<style>
.el-menu{
  border-right:0
}
</style>
<style scoped>
.body__panel{
  height: 100vh;
  overflow-y: scroll;
}
.sticky {
  position: sticky;
}
</style>