<template>
  <div class="wrapper">
    <home-sidebar></home-sidebar>
    <section class="main">
      <home-header></home-header>
      <div class="content-box">
        <menus-edit />
        <div class="content">
          <transition name="move" mode="out-in">
            <!-- <keep-alive exclude="prize"> -->
            <router-view></router-view>
            <!-- </keep-alive> -->
          </transition>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import HomeSidebar from 'components/Sidebar'
import HomeHeader from 'components/Header'
import menusEdit from 'components/menus/edit'
export default {
  data () {
    return {

    }
  },
  components: {
    HomeSidebar,
    HomeHeader,
    menusEdit
  },
  created () {
    this.getMenus()
  },
  methods: {
    ...mapActions([
      'getMenus'
    ])
  }
}
</script>
<style lang="stylus" scoped>
.wrapper
  display flex
  width 100%
  height 100%
  overflow hidden
  .main
    flex 1
    display flex
    position relative
.content-box
  /*position absolute*/
  display inline-block
  flex 1
  margin-top 58px
  /*top 58px*/
  /*bottom 0*/
  width 80%
  -webkit-transition left 0.3s ease-in-out
  transition left 0.3s ease-in-out
  background #F3F2F8
  min-height 720px
.content
  width auto
  padding 15px
</style>
