<template>
  <div class="root">
    <top-bar :menuData="menuData" :userInfo="userInfo"></top-bar>
    <div class="container">
      <div class="content">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import TopBar from '@/components/TopBar.vue'
export default {
  data () {
    return {
      menuData: [],
      userInfo: {
        name: '',
        avatar: ''
      }
    }
  },
  created () {
    this.$router.push('managePage')
  },
  methods: {},
  components: {
    TopBar
  }
}
</script>

<style scoped lang="scss">
@import '../style/mixin';
.root {
  width: 100%;
  height: 100%;
  min-width: $screen-min-width;
  max-width: $screen-max-width;
  position: relative;
  overflow: hidden;
  .container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - #{$header-height});
    overflow: hidden;
  }
  .content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: $bg;
  }
}
</style>
