<template>
  <section class="app-main" id="con_lf_top_div">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
  name: "AppMain",
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews;
    },
    key() {
      return this.$route.path;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: auto;
  height: calc(100vh - 84px);
  min-height: calc(100vh - 84px);
}

.fixed-header + .app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header + .app-main {
    padding-top: 84px;
  }
}
.app-main::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 5px;
}
.app-main::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  // box-shadow: inset 0 0 5px #c4c4c4;
  background: #929292a6;
}
.app-main::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  // -webkit-box-shadow:
  box-shadow: inset 0 0 5px #f6f6f6;
  border-radius: 10px;
  background: #ffffff;
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
// ::-webkit-scrollbar {
//   /*滚动条整体样式*/
//   width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
//   height: 5px;
// }
// ::-webkit-scrollbar-thumb {
//   /*滚动条里面小方块*/
//   border-radius: 10px;
//   // box-shadow: inset 0 0 5px #c4c4c4;
//   background: #929292a6;
// }
// ::-webkit-scrollbar-track {
//   /*滚动条里面轨道*/
//   // -webkit-box-shadow:
//   box-shadow: inset 0 0 5px #f6f6f6;
//   border-radius: 10px;
//   background: #ffffff;
// }


</style>
