<template>
  <!-- 编辑器顶部栏以下部分 -->
  <main class="app-main">
    <!-- 左侧菜单栏 -->
    <app-menu class="app-menu"></app-menu>
    <!-- 作品预览区域。无论切换至哪个菜单页面，始终存在。-->
    <app-play />
    <!-- 其余 -->
    <div class="app-view">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
  </main>
</template>
<script>
import AppMenu from "./MenuPC";
import AppPlay from "./play/index.vue";

export default {
  name: "editor-main",
  components: {
    AppMenu,
    AppPlay,
  },
  created() {},
  async mounted() {},
  computed: {},
};
</script>

<style lang="less">
.app-main {
  display: flex;
  flex: 1 1 auto;
  height: 1px;
  width: 100%;
  position: relative;
  > .app-menu {
    flex: 0 0 auto;
  }

  > .app-view {
    position: relative;
    flex: 1 0 auto;
    min-height: 100%;
    overflow-y: scroll;
    display: flex;
    &::-webkit-scrollbar {
      width: 1px;
    }
    > div {
      flex: 1;
    }
  }
}
</style>
