EditorMain.vue 1017 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  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. min-height: 100%;
  44. overflow-y: scroll;
  45. display: flex;
  46. &::-webkit-scrollbar {
  47. width: 1px;
  48. }
  49. > div {
  50. flex: 1;
  51. }
  52. }
  53. }
  54. </style>