<template>
  <div class="app-main vertical-scrollbar">
    <div class="inner">
      <transition
        name="fade"
        mode="out-in"
      >
        <keep-alive :include="cachedViews">
          <router-view :key="key" />
        </keep-alive>
      </transition>
      <!-- 全局数据 -->
      <GlobalData></GlobalData>
    </div>
  </div>
</template>

<script>
import GlobalData from '../../../GlobalData'
export default {
  name: 'AppMain',
  components: {
    GlobalData
  },
  computed: {
    cachedViews () {
      return this.$store.state.tagsView.cachedViews
    },
    key () {
      return this.$route.fullPath
    }
  }
}
</script>

<style lang="scss">
.app-main {
  // box-shadow: 0 0 10px #ddd;border-radius: 10px;
  position: absolute; top: 86px; right: 0; bottom: 0; left: 0; overflow-x: hidden!important; background: #f0f2f5;
  .el-scrollbar {
    height: 100%;
  }
  .scrollBar {
    overflow-x: hidden!important;
    .el-scrollbar__view {
      height: 100%;
    }
  }

  .inner {
    padding: 10px;
  }
}

</style>
