EditorMain.vue 884 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <template>
  2. <!-- 编辑器顶部栏以下部分 -->
  3. <main class="app-main">
  4. <!-- 左侧菜单栏 -->
  5. <app-menu class="app-menu"></app-menu>
  6. <!-- 作品预览区域。无论切换至哪个菜单页面,始终存在。-->
  7. <app-play />
  8. <!-- 其余 -->
  9. <div class="app-view">
  10. <keep-alive>
  11. <router-view />
  12. </keep-alive>
  13. </div>
  14. </main>
  15. </template>
  16. <script>
  17. import AppMenu from "./MenuPC";
  18. import AppPlay from "./play/index.vue";
  19. export default {
  20. name: "editor-main",
  21. components: {
  22. AppMenu,
  23. AppPlay
  24. },
  25. created() {},
  26. async mounted() {},
  27. computed: {}
  28. };
  29. </script>
  30. <style lang="less">
  31. .app-main {
  32. display: flex;
  33. flex: 1 1 auto;
  34. height: 1px;
  35. width: 100%;
  36. position: relative;
  37. > .app-menu {
  38. flex: 0 0 auto;
  39. }
  40. > .app-view {
  41. position: relative;
  42. flex: 1 0 auto;
  43. height: 100%;
  44. }
  45. }
  46. </style>