1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- <template>
- <div class="wandaEditer">
- <!-- 顶部工具栏 -->
- <div class="top_toolbar">
- <topToolbar></topToolbar>
- </div>
- <div class="content">
- <!-- 左侧工具栏 -->
- <div class="left_toolbar">
- <leftToolbar @toolActionClick="toolActionClick"></leftToolbar>
- </div>
- <!-- 绘制界面 -->
- <div class="baseEdit">
- <baseEditer ref="graphy"></baseEditer>
- </div>
- <!-- 右侧工具栏 -->
- <div class="right_toolbar">
- <rightToolbar></rightToolbar>
- </div>
- </div>
- </div>
- </template>
- <script>
- import baseEditer from "@/components/baseEditer.vue";
- import leftToolbar from "@/components/edit/left_toolbar.vue";
- import topToolbar from "@/components/edit/top_toolbar.vue";
- import rightToolbar from "@/components/edit/right_toolbar.vue";
- export default {
- name: "wandaEditer",
- components: {
- baseEditer,
- leftToolbar,
- topToolbar,
- <<<<<<< HEAD
- rightToolbar,
- =======
- rightToolbar
- },
- methods: {
- // 左侧工具栏 点击事件
- toolActionClick(name) {
- this.$refs.graphy.changeStatus(name)
- }
- >>>>>>> 9e08c5696c383758a7d672fa45f61fa79ac19708
- }
- };
- </script>
- <style lang="less" scoped>
- .wandaEditer {
- width: 100%;
- height: 100%;
- .top_toolbar {
- width: 100%;
- height: 60px;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
- }
- .content {
- width: 100%;
- height: calc(100% - 60px);
- display: flex;
- position: relative;
- .baseEdit {
- flex: 1;
- // position: relative;
- }
- .right_toolbar {
- height: 100%;
- background: #fff;
- }
- .left_toolbar {
- position: absolute;
- left: 12px;
- top: 12px;
- }
- }
- }
- </style>
|