planEditer.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <div class="plan-editer">
  3. <div class="top-bar">
  4. <topToolBar></topToolBar>
  5. </div>
  6. <div class="contents">
  7. <div class="left-bar">
  8. <leftToolBar></leftToolBar>
  9. </div>
  10. <div class="base-plan-editer">
  11. <basePlanEditer></basePlanEditer>
  12. </div>
  13. <div class="right-bar">
  14. <rightPropertyBar></rightPropertyBar>
  15. </div>
  16. </div>
  17. <div class="bottom-bar">
  18. <bottomToolBar />
  19. </div>
  20. </div>
  21. </template>
  22. <script>
  23. import leftToolBar from "./leftToolBar";
  24. import rightPropertyBar from "./rightPropertyBar";
  25. import basePlanEditer from "./basePlanEditer";
  26. import topToolBar from "./topToolBar";
  27. import bottomToolBar from "./bottomToolBar";
  28. export default {
  29. components: { leftToolBar, rightPropertyBar, topToolBar, basePlanEditer, bottomToolBar },
  30. data() {
  31. return {};
  32. },
  33. methods: {},
  34. };
  35. </script>
  36. <style lang="less">
  37. .plan-editer {
  38. width: 100%;
  39. height: 100%;
  40. position: relative;
  41. .top-bar {
  42. width: 100%;
  43. z-index: 99;
  44. }
  45. .contents {
  46. width: 100%;
  47. height: calc(~"100% - 48px");
  48. display: flex;
  49. justify-content: flex-start;
  50. .right-bar {
  51. // TODO: right-bar
  52. width: 240px;
  53. height: 100%;
  54. }
  55. .base-plan-editer {
  56. flex: 1;
  57. height: 100%;
  58. }
  59. }
  60. .bottom-bar {
  61. position: absolute;
  62. // width: 100%;
  63. // right: 0;
  64. bottom: 20px;
  65. right: 250px;
  66. }
  67. }
  68. </style>