editer.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <div class="wandaEditer">
  3. <!-- 顶部工具栏 -->
  4. <div class="top_toolbar">
  5. <topToolbar></topToolbar>
  6. </div>
  7. <div class="content">
  8. <!-- 左侧工具栏 -->
  9. <div class="left_toolbar">
  10. <leftToolbar @toolActionClick="toolActionClick"></leftToolbar>
  11. </div>
  12. <!-- 绘制界面 -->
  13. <div class="baseEdit">
  14. <baseEditer ref="graphy"></baseEditer>
  15. </div>
  16. <!-- 右侧工具栏 -->
  17. <div class="right_toolbar">
  18. <rightToolbar></rightToolbar>
  19. </div>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. import baseEditer from "@/components/baseEditer.vue";
  25. import leftToolbar from "@/components/edit/left_toolbar.vue";
  26. import topToolbar from "@/components/edit/top_toolbar.vue";
  27. import rightToolbar from "@/components/edit/right_toolbar.vue";
  28. export default {
  29. name: "wandaEditer",
  30. components: {
  31. baseEditer,
  32. leftToolbar,
  33. topToolbar,
  34. <<<<<<< HEAD
  35. rightToolbar,
  36. =======
  37. rightToolbar
  38. },
  39. methods: {
  40. // 左侧工具栏 点击事件
  41. toolActionClick(name) {
  42. this.$refs.graphy.changeStatus(name)
  43. }
  44. >>>>>>> 9e08c5696c383758a7d672fa45f61fa79ac19708
  45. }
  46. };
  47. </script>
  48. <style lang="less" scoped>
  49. .wandaEditer {
  50. width: 100%;
  51. height: 100%;
  52. .top_toolbar {
  53. width: 100%;
  54. height: 60px;
  55. background: rgba(255, 255, 255, 1);
  56. box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
  57. }
  58. .content {
  59. width: 100%;
  60. height: calc(100% - 60px);
  61. display: flex;
  62. position: relative;
  63. .baseEdit {
  64. flex: 1;
  65. // position: relative;
  66. }
  67. .right_toolbar {
  68. height: 100%;
  69. background: #fff;
  70. }
  71. .left_toolbar {
  72. position: absolute;
  73. left: 12px;
  74. top: 12px;
  75. }
  76. }
  77. }
  78. </style>