diff --git a/linkwe-ui/.npmrc b/linkwe-ui/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..21ac9cc1058011bee15d135886e2db9db483957a
--- /dev/null
+++ b/linkwe-ui/.npmrc
@@ -0,0 +1,2 @@
+tag-version-prefix=""
+registry=https://registry.npm.taobao.org
\ No newline at end of file
diff --git a/linkwe-ui/package.json b/linkwe-ui/package.json
index be54d50c081ec15571440ce84fd77f338eab7310..7238fc5b6e187b6e6478a76398ca09b6a777c7ea 100644
--- a/linkwe-ui/package.json
+++ b/linkwe-ui/package.json
@@ -44,6 +44,7 @@
     "core-js": "3.6.5",
     "echarts": "4.2.1",
     "element-ui": "2.13.2",
+    "fabric": "^3.5.1",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
     "js-beautify": "1.10.2",
@@ -56,6 +57,8 @@
     "promise.prototype.finally": "^3.1.2",
     "screenfull": "4.2.0",
     "sortablejs": "1.8.4",
+    "tui-color-picker": "^2.2.6",
+    "tui-image-editor": "^3.11.0",
     "video.js": "^7.10.2",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
diff --git a/linkwe-ui/src/api/material/poster.js b/linkwe-ui/src/api/material/poster.js
index d1e776adc325e89cd3c7ec129ff0d62c9590545f..722bc9aba1c2d161ef7bf64d0924294acf81916b 100644
--- a/linkwe-ui/src/api/material/poster.js
+++ b/linkwe-ui/src/api/material/poster.js
@@ -10,6 +10,14 @@ export function getList(params) {
   return request({ url: service + '/list', params })
 }
 
+/**
+ * 更新海报
+ * @param {*} params
+ */
+export function updatePoster(data) {
+ return request({ url: serviceCategory + '/update', method: 'put', data })
+}
+
 /**
  * 添加海报
  * @param {*} data
@@ -22,8 +30,8 @@ export function addPoster(data) {
  * 查询海报详情
  * @param {*} data
  */
-export function getPosterInfo(data) {
-  return request({ url: serviceCategory + '/entity', method: 'get', data })
+export function getPosterInfo(id) {
+  return request({ url: serviceCategory + '/entity/' + id })
 }
 
 /**
diff --git a/linkwe-ui/src/assets/poster/img/bg.png b/linkwe-ui/src/assets/poster/img/bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..55e234d40f21b09a44e5a74d3a1322f1f79fd0fa
Binary files /dev/null and b/linkwe-ui/src/assets/poster/img/bg.png differ
diff --git a/linkwe-ui/src/assets/poster/img/qrCodeImage.png b/linkwe-ui/src/assets/poster/img/qrCodeImage.png
new file mode 100644
index 0000000000000000000000000000000000000000..b76e1d78533e0a54019822651f899cc57972e751
Binary files /dev/null and b/linkwe-ui/src/assets/poster/img/qrCodeImage.png differ
diff --git a/linkwe-ui/src/components/SelectMaterial/index.vue b/linkwe-ui/src/components/SelectMaterial/index.vue
index acf1862505654ebeed77f251e28c4f7363f6bd50..9a28e8ad8b25265874b06462b8e97bf6336b8229 100644
--- a/linkwe-ui/src/components/SelectMaterial/index.vue
+++ b/linkwe-ui/src/components/SelectMaterial/index.vue
@@ -69,7 +69,7 @@ export default {
 </script>
 
 <template>
-  <el-dialog title="选择素材" :visible.sync="Pvisible" width="650px">
+  <el-dialog title="选择素材" :visible.sync="Pvisible" width="650px" append-to-body>
     <div>
       <el-tabs v-model="Ptype">
         <el-tab-pane name="0" v-if="showArr.includes(0)">
diff --git a/linkwe-ui/src/views/material/components/MaPage.vue b/linkwe-ui/src/views/material/components/MaPage.vue
index ac6083f993a2507793e17270b1bb4a095ae17004..28a10bb16f399b0658b7d22a8aac33d9579f71ec 100644
--- a/linkwe-ui/src/views/material/components/MaPage.vue
+++ b/linkwe-ui/src/views/material/components/MaPage.vue
@@ -98,11 +98,19 @@ export default {
     // 获取类目树
     getTree() {
       getTree(this.type).then(({ data }) => {
-        this.treeData = data
+        this.treeData = [{
+          id: "",
+          name: "全部",
+          parentId: "0",
+          hasParent: false,
+          hasChildren: true,
+          children: data || []
+        }]
       })
     },
     // 获取素材列表
     getList(page) {
+      console.log('getList', page, JSON.stringify(this.query))
       page && (this.query.pageNum = page)
       this.loading = true
       getList(this.query)
@@ -161,14 +169,22 @@ export default {
     },
     // 素材添加/编辑
     edit(data, type) {
-      this.form = Object.assign(
-        {},
-        data || { categoryId: this.query.categoryId }
-      )
-      this.dialogVisible = true
-      this.$nextTick(() => {
-        this.$refs['form'].clearValidate()
-      })
+      switch (type) {
+        case 5:
+          this.$parent.posterEdit.step = 0
+          this.$parent.dialog.edit = true
+        break
+        default:
+          this.form = Object.assign(
+            {},
+            data || { categoryId: this.query.categoryId }
+          )
+          this.dialogVisible = true
+          this.$nextTick(() => {
+            this.$refs['form'].clearValidate()
+          })
+        break;
+      }
       // type || !data ? (this.disabled = false) : (this.disabled = true)
     },
     // 素材提交
@@ -246,7 +262,7 @@ export default {
           >
             <div class="custom-tree-node" slot-scope="{ node, data }">
               <span>{{ node.label }}</span>
-              <span class="fr">
+              <span class="fr" v-if="data.id">
                 <i
                   v-hasPermi="['material:editType']"
                   class="el-icon-edit"
@@ -298,7 +314,7 @@ export default {
             <div style="position: relative; margin: 10px 0;">
               <el-cascader
                 v-model="group"
-                :options="treeData"
+                :options="treeData[0].children"
                 :props="groupProps"
               ></el-cascader>
             </div>
@@ -323,7 +339,7 @@ export default {
             <el-button
               v-hasPermi="['material:add']"
               type="primary"
-              @click="edit(1)"
+              @click="edit(1, ~~type)"
               >添加{{ typeTitle[type] }}</el-button
             >
           </div>
@@ -380,7 +396,7 @@ export default {
         <el-form-item label="分类" prop="categoryId">
           <el-cascader
             v-model="form.categoryId"
-            :options="treeData"
+            :options="treeData[0].children"
             :props="groupProps"
           ></el-cascader>
         </el-form-item>
diff --git a/linkwe-ui/src/views/material/components/PosterPage.vue b/linkwe-ui/src/views/material/components/PosterPage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d0f947f7b24a2a1a6acd52ecd436e56a0f1bff3b
--- /dev/null
+++ b/linkwe-ui/src/views/material/components/PosterPage.vue
@@ -0,0 +1,543 @@
+<template>
+    <div>
+        <div ref="tuiImageEditor" style="width: 100%;height: 100%;"></div>
+        <select-material ref="selectMaterial" type="1" :showArr="[1]" :visible.sync="visible" @success="getMaterial" />
+    </div>
+</template>
+<script>
+import ImageEditor from 'tui-image-editor';
+import selectMaterial from '@/components/SelectMaterial'
+import { setTimeout } from 'timers';
+import colorPicker from 'tui-color-picker';
+import qrCodeImage from "@/assets/poster/img/qrCodeImage.png";
+
+const includeUIOptions = {
+    includeUI: {
+        initMenu: 'filter',
+    }
+};
+const editorDefaultOptions = {
+    cssMaxWidth: 640,
+    cssMaxHeight: 1136
+};
+export default {
+    name: 'PosterPage',
+    components: {
+        selectMaterial
+    },
+    props: {
+        btnContainer: null, // 自带按钮容器
+        includeUi: {
+            type: Boolean,
+            default: true
+        },
+        options: {
+            type: Object,
+            default() {
+                return editorDefaultOptions;
+            }
+        }
+    },
+    data() {
+        return {
+            visible: false
+        }
+    },
+    mounted() {
+        let options = editorDefaultOptions;
+        if (this.includeUi) {
+            options = Object.assign(includeUIOptions, this.options);
+        }
+        this.editorInstance = new ImageEditor(this.$refs.tuiImageEditor, options);
+        document.getElementsByClassName('tui-image-editor-header')[0].innerHTML = '';
+       
+        if(window.localStorage.getItem('record')){
+            let list = JSON.parse(window.localStorage.getItem('record'));
+            list.forEach(element => {
+                setTimeout(()=>{
+                    this.editorInstance.addIcon(element.type, element).then(objectProps=>{
+                        console.log(objectProps)
+                    }).catch((res)=>{console.log(res)})
+                },500)
+            });
+        }
+        this.editorInstance.loadImageFromURL('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2980445260,41238050&fm=26&gp=0.jpg', 'imagePoster').then(async result => {
+            console.log('old : ' + result.oldWidth + ', ' + result.oldHeight);
+            console.log('new : ' + result.newWidth + ', ' + result.newHeight);
+            // await this.addImage('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2980445260,41238050&fm=26&gp=0.jpg')
+            // await this.addText('aloha');
+        });
+
+        // hack UI
+        this.editorInstance.events.addText = []
+        this.editorInstance._handlers.addText = null;
+        this.editorInstance.ui._actions.text.modeChange = function () {}
+        document.getElementsByClassName('tui-image-editor-submenu')[0].style.display = 'none';
+        document.getElementsByClassName('tie-btn-text')[0].style.display = 'none';
+
+        this.initBtn();
+        this.addEventListener();
+    },
+    destroyed() {
+        // Object.keys(this.$listeners).forEach(eventName => {
+        //     this.editorInstance.off(eventName);
+        // });
+        this.editorInstance.destroy();
+        this.editorInstance = null;
+    },
+    methods: {
+        initBtn () {
+
+            this.activeObjectId = null;
+
+            // btns leftBtn
+            this.btn_deleteAll = document.getElementsByClassName('tie-btn-deleteAll')[0];
+            this.btn_deleteAll.name = 'deleteAll';
+            this.btn_delete = document.getElementsByClassName('tie-btn-delete')[0];
+            this.btn_delete.name = 'delete';
+            this.btn_reset = document.getElementsByClassName('tie-btn-reset')[0];
+            this.btn_reset.style.display = 'none'
+            this.btn_redo = document.getElementsByClassName('tie-btn-redo')[0];
+            this.btn_redo.name = 'redo';
+            this.btn_undo = document.getElementsByClassName('tie-btn-undo')[0];
+            this.btn_undo.name = 'undo';
+
+            // btns rightBtn
+            this.btnText = document.getElementById('btn-text');
+            this.btnText.name = 'btnText';
+            this.btnImage = document.getElementById('btn-image');
+            this.btnImage.name = 'btnImage';
+            this.btnQrCode = document.getElementById('btn-qrCode');
+            this.btnQrCode.name = 'btnQrCode';
+
+            // Sub menus
+            this.displayingSubMenu = null;
+            this.textSubMenu = document.getElementById('text-sub-menu');
+
+            // input
+            this.btnTextStyle = document.getElementsByClassName('btn-text-style');
+            this.btnClose = document.getElementsByClassName('close')[0];
+            this.btnClose.name = 'btnClose'
+
+            // input etc
+            this.inputFontSizeRange = document.getElementById('input-font-size-range');
+            this.inputStrokeWidthRange = document.getElementById('input-stroke-width-range');
+            this.inputCheckTransparent = document.getElementById('input-check-transparent');
+            this.inputCheckGrayscale = document.getElementById('input-check-grayscale');
+            this.inputCheckInvert = document.getElementById('input-check-invert');
+            this.inputCheckSepia = document.getElementById('input-check-sepia');
+            this.inputCheckSepia2 = document.getElementById('input-check-sepia2');
+            this.inputCheckSharpen = document.getElementById('input-check-sharpen');
+            this.inputCheckEmboss = document.getElementById('input-check-emboss');
+            this.inputCheckRemoveWhite = document.getElementById('input-check-remove-white');
+            this.inputRangeRemoveWhiteThreshold = document.getElementById('input-range-remove-white-threshold');
+            this.inputRangeRemoveWhiteDistance = document.getElementById('input-range-remove-white-distance');
+
+            // Color picker
+            this.textColorpicker = colorPicker.create({
+                container: document.getElementById('tui-text-color-picker'),
+                color: '#000000'
+            });
+            this.textColorpicker.on('selectColor', function (event) {
+                if (this.activeObjectId) {
+                    this.editorInstance.changeTextStyle(this.activeObjectId, {
+                        fill: event.color,
+                    });
+                    let vo = this.records[this.activeObjectId];
+                    if (vo) {
+                        vo.fill = event.color;
+                        this.records[this.activeObjectId] = vo;
+                    }
+                }
+            }.bind(this));
+        },
+        addEventListener() {
+            this.btn_deleteAll.addEventListener('click', this.mouseClickHandler.bind(this));
+            this.btn_delete.addEventListener('click', this.mouseClickHandler.bind(this));
+            this.btn_redo.addEventListener('click', this.mouseClickHandler.bind(this));
+            this.btn_undo.addEventListener('click', this.mouseClickHandler.bind(this));
+
+            this.btnText.addEventListener('click', this.mouseClickHandler.bind(this));
+            this.btnImage.addEventListener('click', this.mouseClickHandler.bind(this));
+            this.btnQrCode.addEventListener('click', this.mouseClickHandler.bind(this));
+
+            // text
+            this.btnClose.addEventListener('click', this.mouseClickHandler.bind(this));
+            let i = 0,len = this.btnTextStyle.length;
+            while (i < len) {
+                this.btnTextStyle[i].name = 'textStyle';
+                this.btnTextStyle[i].addEventListener('click', this.mouseClickHandler.bind(this));
+                i++;
+            }
+            this.editorInstance.on({
+                objectAdded: function (objectProps) {
+                    console.info(objectProps);
+                },
+                undoStackChanged: this.onUndoStackChanged.bind(this),
+                redoStackChanged: this.onRedoStackChanged.bind(this),
+                objectScaled: this.onObjectScaled.bind(this),
+                addText: this.onAddText.bind(this),
+                objectActivated: this.objectActivated.bind(this),
+                objectMoved: this.onObjectMoved.bind(this)
+            });
+            this.btn_deleteAll.addEventListener('click', this.mouseClickHandler.bind(this))
+            this.btn_delete.addEventListener('click', this.mouseClickHandler.bind(this))
+            this.btn_reset.addEventListener('click', this.mouseClickHandler.bind(this))
+            this.btn_redo.addEventListener('click', this.mouseClickHandler.bind(this))
+            this.btn_undo.addEventListener('click', this.mouseClickHandler.bind(this))
+
+            this.btnText.addEventListener('click', this.mouseClickHandler.bind(this))
+            this.btnImage.addEventListener('click', this.mouseClickHandler.bind(this))
+
+            // text
+            this.btnClose.addEventListener('click', this.mouseClickHandler.bind(this))
+            // this.inputBrushWidthRange.addEventListener('onchange', this.mouseClickHandler.bind(this))
+            i = 0;
+            len = this.btnTextStyle.length;
+            while (i < len) {
+                this.btnTextStyle[i].name = 'textStyle'
+                this.btnTextStyle[i].addEventListener('click', this.mouseClickHandler.bind(this))
+                i++
+            }
+        },
+        redoHandler () {
+            this.displayingSubMenu && (this.displayingSubMenu.style.display = 'none');
+            if (!this.btn_redo.matches(".disabled")) {
+                this.editorInstance.redo();
+            }
+        },
+        undoHandler () {
+            this.displayingSubMenu && (this.displayingSubMenu.style.display = 'none');
+            if (!this.btn_undo.matches(".disabled")) {
+                this.editorInstance.undo();
+            }
+        },
+        onAddText(pos) {
+            this.editorInstance
+            .addText('请输入文字', {
+                position: pos.originPosition,
+            })
+            .then(function (objectProps) {
+                console.log(objectProps);
+                this.records(objectProps)
+                let id = this.GenNonDuplicateID() + '_' + objectProps.id;
+                let target = this.$parent.records[objectProps.id];
+                target && (target.randomId = id);
+            }.bind(this));
+        },
+        //移动
+        onObjectMoved(obj) {
+            console.log('onObjectMoved');
+            this.getRecord(obj);
+        },
+        //新增/选中
+        objectActivated(obj) {
+            console.log('objectActivated');
+            this.activeObjectId = obj.id;
+            this.getRecord(obj);
+            if (obj.type === 'text' || obj.type === 'i-text') {
+                this.showSubMenu('text');
+                this.setTextToolbar(obj);
+                this.activateTextMode();
+            } else {
+                // 目前就一个TEXT SUB
+                this.displayingSubMenu && (this.displayingSubMenu.style.display = 'none');
+            }
+        },
+        //缩放
+        onObjectScaled(obj) {
+            console.log('onObjectScaled')
+            this.getRecord(obj);
+            if (obj.type === 'text' || obj.type === 'i-text') {
+                this.inputFontSizeRange.setAttribute('value',obj.fontSize);        
+            }
+        },
+        onRedoStackChanged(length) {
+            if (length) {
+                this.btn_redo.classList.remove('disabled');
+            } else {
+                this.btn_redo.classList.add('disabled');
+            }
+            this.resizeEditor();
+        },
+        onUndoStackChanged(length) {
+            if (length) {
+                this.btn_undo.classList.remove('disabled')
+            } else {
+                this.btn_undo.classList.add('disabled')
+            }
+            this.resizeEditor();
+        },
+        mouseClickHandler (event) {
+            let name = event.currentTarget.name;
+            console.log(name);
+            switch (name) {
+                case 'btnText':
+                    this.showSubMenu('text');
+                    this.activateTextMode();
+                break;
+                case 'btnImage':
+                    this.getImages();
+                break;
+                case 'deleteAll':
+                    this.clearObjects();
+                break;
+                case 'delete':
+                    this.clearActivtyObject();
+                break;
+                case 'redo':
+                    this.redoHandler();
+                break;
+                case 'undo':
+                    this.undoHandler();
+                break;
+                case 'textStyle':
+                    this.checkTextStyle(event.currentTarget);
+                break;
+                case 'btnClose':
+                    this.closeHandler();            
+                break;
+                case 'btnQrCode':
+                    this.qrCodeHandler();
+                break;  
+            }
+        },
+        qrCodeHandler () {
+            // let codeUrl = 'https://images.gitee.com/uploads/images/2020/1231/234016_20fdd151_1480777.png';
+            this.activateImageMode();
+            this.addImage(qrCodeImage, 3);
+        },
+        clearObjects () {
+            this.displayingSubMenu && (this.displayingSubMenu.style.display = 'none');
+            this.editorInstance.clearObjects();
+        },
+        clearActivtyObject () {
+            this.displayingSubMenu && (this.displayingSubMenu.style.display = 'none');
+            this.activeObjectId && this.editorInstance.removeObject(this.activeObjectId);
+        },
+        closeHandler () {
+            this.editorInstance.stopDrawingMode();
+            this.displayingSubMenu && (this.displayingSubMenu.style.display = 'none');
+        },
+        checkTextStyle (target) {
+            if (!target) throw Error('textStyle is null')
+            if (this.activeObjectId) {
+                let styleType = target.getAttribute('data-style-type');
+                let styleObj;
+                switch (styleType) {
+                    case 'b':
+                        styleObj = { fontWeight: 'bold' };
+                        this.records[this.activeObjectId] && (this.records[this.activeObjectId].bold = true)
+                    break;
+                    case 'i':
+                        styleObj = { fontStyle: 'italic' };
+                        this.records[this.activeObjectId] && (this.records[this.activeObjectId].italic = true)
+                    break;
+                    case 'u':
+                        styleObj = { underline: true };     // 后端暂时不支持 
+                    break;
+                    case 'l':
+                        styleObj = { textAlign: 'left' }; 
+                        this.records[this.activeObjectId] && (this.records[this.activeObjectId].textAlign = 'left')
+                    break;
+                    case 'c':
+                        styleObj = { textAlign: 'center' };
+                        this.records[this.activeObjectId] && (this.records[this.activeObjectId].textAlign = 'center')
+                    break;
+                    case 'r':
+                        styleObj = { textAlign: 'right' };
+                        this.records[this.activeObjectId] && (this.records[this.activeObjectId].textAlign = 'right')
+                    break;
+                    default:
+                        styleObj = {};
+                }
+                
+                this.editorInstance.changeTextStyle(this.activeObjectId, styleObj);
+            }
+        },
+        setTextToolbar (obj) {
+            let fontSize = obj.fontSize;
+            let fontColor = obj.fill;
+
+            this.inputFontSizeRange.setAttribute('value', fontSize);
+            this.textColorpicker.setColor(fontColor);
+        },
+        showSubMenu (type) {
+            let submenu = null;
+            switch (type) {
+                case 'text':
+                    submenu = this.textSubMenu;
+                break;
+                default:
+                    submenu = 0;
+            }
+
+            this.displayingSubMenu && (this.displayingSubMenu.style.display = 'none');
+            submenu.style.display = 'block';
+            this.displayingSubMenu = submenu;
+        },
+        inputFontSizeRangeChange () {
+            let value = this.inputFontSizeRange.getAttribute('value');
+            if (this.activeObjectId) {
+                let size = parseInt(value, 10);
+                this.editorInstance.changeTextStyle(this.activeObjectId, {
+                    fontSize: size
+                });
+                this.records[this.activeObjectId] && (this.records[this.activeObjectId].fontSize = size);
+            }
+        },
+        activateTextMode() {
+            if (this.editorInstance.getDrawingMode() !== 'TEXT') {
+                this.editorInstance.stopDrawingMode();
+                this.editorInstance.startDrawingMode('TEXT');
+            }
+        },
+        getRootElement() {
+            return this.$refs.tuiImageEditor;
+        },
+        invoke(methodName, ...args) {
+            console.log('invoke', methodName)
+            console.log('invoke', ...args)
+            let result = null;
+            if (this.editorInstance[methodName]) {
+                result = this.editorInstance[methodName](...args);
+            } else if (methodName.indexOf('.') > -1) {
+                const func = this.getMethod(this.editorInstance, methodName);
+
+                if (typeof func === 'function') {
+                    result = func(...args);
+                }
+            }
+            return result;
+        },
+        getMethod(instance, methodName) {
+            const {first, rest} = this.parseDotMethodName(methodName);
+            const isInstance = (instance.constructor.name !== 'Object');
+            const type = typeof instance[first];
+            let obj;
+
+            if (isInstance && type === 'function') {
+                obj = instance[first].bind(instance);
+            } else {
+                obj = instance[first];
+            }
+
+            if (rest.length > 0) {
+                return this.getMethod(obj, rest);
+            }
+            return obj;
+        },
+        parseDotMethodName(methodName) {
+            console.log('parseDotMethodName', methodName)
+            const firstDotIdx = methodName.indexOf('.');
+            let firstMethodName = methodName;
+            let restMethodName = '';
+
+            if (firstDotIdx > -1) {
+                firstMethodName = methodName.substring(0, firstDotIdx);
+                restMethodName = methodName.substring(firstDotIdx + 1, methodName.length);
+            }
+
+            return {
+                first: firstMethodName,
+                rest: restMethodName
+            };
+        },
+        getImages () {
+            this.visible = true; // 显示图片列表dialog
+            // this.activateImageMode();   
+            // this.addImage('https://images.gitee.com/uploads/images/2020/1231/234016_20fdd151_1480777.png',2);
+        },
+        // 提交选择的图片
+        getMaterial(text, image, file) {
+            // console.log(image.materialUrl)
+            this.activateImageMode();
+            this.addImage(image.materialUrl, 2);
+            this.visible = false;
+        },
+        addImage (imgPath, type) {
+            if (!imgPath || !imgPath.length){
+                throw Error("imgPath can't null")
+            }
+            this.editorInstance.addImageObject(imgPath).then(objectProps => {
+                let id = this.GenNonDuplicateID() + '_' + objectProps.id;
+                // this.$parent.imgList[id] = imgPath;  // FIXME
+                // console.log(objectProps)
+                // console.log(this.$parent.records)
+                // let target = this.$parent.records[objectProps.id];
+                
+                let target = {}
+                // if (target) {
+                    target.url = imgPath;
+                    target.randomId = objectProps.id;
+                    target.objType = type;
+                // }
+                this.$emit('getImageData', target); // 将图片数据传给父组件保存
+            });
+        },
+        addText (text, style = null, position = null) {
+            // return new Promise(function(resolve, reject) {
+                // !style && (style = {
+                //     fill: '#000',
+                //     fontSize: 20,
+                //     fontWeight: 'bold'
+                // })
+                // !position && (position = {
+                //     x: 10,
+                //     y: 10
+                // })
+                // this.activateTextMode();
+                // this.editorInstance.addText( text, {
+                //     style: style,
+                //     position: position
+                // }).then(objectProps => {
+                //     console.log(objectProps.id);
+                //     resolve(objectProps);
+                // });
+            // }.bind(this));
+            this.editorInstance
+            .addText(text || '双击输入文字', {
+                position: position,
+            })
+            .then(function (objectProps) {
+                console.log(objectProps);
+                let id = this.GenNonDuplicateID() + '_' + objectProps.id;
+                let target = this.$parent.records[objectProps.id];
+                target && (target.randomId = id);
+            });
+        },
+        activateImageMode () {
+            let imageEditor = this.editorInstance;
+            imageEditor.stopDrawingMode();
+        },
+        resizeEditor () {
+            let editor = document.getElementsByClassName('tui-image-editor')[0];
+            let container = document.getElementsByClassName('tui-image-editor-canvas-container')[0];
+            
+            editor.style.height = window.getComputedStyle(container).maxHeight;
+        },
+        getRecord(obj){
+            if (!this.records) this.records = {};
+            let vo = this.records[obj.id];
+            if (vo) {
+                vo.left = obj.left;
+                vo.top = obj.top;
+                vo.width = obj.width;
+                vo.height = obj.height;
+                vo.angle = obj.angle;
+                if (obj.type === 'text' || obj.type === 'i-text') {
+                   vo.text = obj.text;
+                   vo.fontSize = obj.fontSize;
+                }
+                this.records[obj.id] = vo;
+            } else {
+                this.records[obj.id] = obj;
+            }
+            
+        },
+        GenNonDuplicateID(randomLength){
+            return parseFloat(Math.random().toString().substr(3,randomLength) + Date.now()).toString(36)
+        }   
+    }
+};
+</script>
diff --git a/linkwe-ui/src/views/material/poster.vue b/linkwe-ui/src/views/material/poster.vue
index 44462bca200db53ed5861057b78087d1e24d9822..f8f9be79499f8d2ab94162265dfd10bd6ef1cd3e 100644
--- a/linkwe-ui/src/views/material/poster.vue
+++ b/linkwe-ui/src/views/material/poster.vue
@@ -1,12 +1,37 @@
 <script>
-import VueUeditorWrap from 'vue-ueditor-wrap'
+import {
+  getList,
+  getPosterInfo,
+  addPoster,
+  updatePoster,
+  removePoster,
+} from '@/api/material/poster.js'
 import MaPage from '@/views/material/components/MaPage'
 
+// Load Style Code
+import "tui-image-editor/dist/tui-image-editor.css";
+import "tui-color-picker/dist/tui-color-picker.css";
+
+import PosterPage from "./components/PosterPage.vue";
+import bgpng from "@/assets/poster/img/bg.png";
+
+var locale_ru_RU = {
+  "DeleteAll": "全部清空",
+  "Delete": "删除元素",
+  "Undo": "后退",
+  "Redo": "前进"
+};
+
 export default {
   name: 'Poster',
-  components: { MaPage, VueUeditorWrap },
+  components: { 
+    MaPage,
+    "tui-image-editor": PosterPage
+  },
   data () {
     return {
+      imgList: {},
+      imgData: [],
       dialog: {
         preview: false, // 预览弹出显示隐藏
         edit: false // 编辑弹出显示隐藏
@@ -15,40 +40,417 @@ export default {
         step: 0
       },
       posterForm: {
-        name: '', // 海报名称
-        classifyFirst: '', // 所属分类
-        classifySecond: '', // 所属二级分类
-        type: '', // 海报类型
-        content: '', // 内容
-        count: '', // 虚拟次数
-        sort: '', // 海报排序
-        jump: [], // 跳转页面
-        switch: '0' // 是否启用
+        title: '', // 海报名称
+        categoryId: '', // 所属分类
+        type: '1', // 海报类型
+        // content: '', // 内容
+        // count: '', // 虚拟次数
+        // sort: '', // 海报排序
+        // jump: [], // 跳转页面
+        delFlag: 0 // 是否启用
+      },
+      rules: {
+        title: {
+          required: true,
+          message: '请输入海报名称',
+          trigger: 'blur'
+        },
+        categoryId: {
+          required: true,
+          message: '请选择分类'
+        },
+        type: {
+          required: true,
+          message: '请选择海报类型'
+        },
+        delFlag: {
+          required: true,
+          message: '请选择是否启用'
+        }
       },
       srcList: [],
       ids: [], // 选中数组
       previewImg: '', // 预览图片地址
+      useDefaultUI: true,
+      options: {
+        includeUI: {
+          // initMenu: "text",
+          locale: locale_ru_RU,
+          // loadImage: {
+          //   path: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.gtimg.com%2Fsports%2Fpics%2Fhv1%2F171%2F106%2F1472%2F95744001.jpg&refer=http%3A%2F%2Fimg1.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612444990&t=6589254fe9669cc6a45fd3688f269612',
+          //   name: "posterImage"
+          // },
+          usageStatistics: false,
+          menuBarPosition: "right",
+          menu: ['text'],  // FIXME 因为借用了CANVAS的UI  所以需要使用TEXT，需要额外注释,后面创建自己的UI在去掉
+          theme: {
+            "common.bi.image": "",
+            "common.bisize.width": "251px",
+            "common.bisize.height": "21px",
+            "common.backgroundImage": bgpng,
+            "common.backgroundColor": "#fff",
+            "common.border": "1px solid #c1c1c1",
+
+            // header
+            'header.backgroundImage': 'none',
+            'header.backgroundColor': 'transparent',
+            'header.border': '0px',
+
+            // load button
+            'loadButton.backgroundColor': '#fff',
+            'loadButton.border': '1px solid #ddd',
+            'loadButton.color': '#222',
+            'loadButton.fontFamily': "'Noto Sans', sans-serif",
+            'loadButton.fontSize': '12px',
+
+            // download button
+            'downloadButton.backgroundColor': '#fdba3b',
+            'downloadButton.border': '1px solid #fdba3b',
+            'downloadButton.color': '#fff',
+            'downloadButton.fontFamily': "'Noto Sans', sans-serif",
+            'downloadButton.fontSize': '12px',
+
+            // main icons
+            'menu.normalIcon.color': '#8a8a8a',
+            'menu.activeIcon.color': '#555555',
+            'menu.disabledIcon.color': '#434343',
+            'menu.hoverIcon.color': '#e9e9e9',
+            'menu.iconSize.width': '24px',
+            'menu.iconSize.height': '24px',
+
+            // colorpicker style
+            'colorpicker.button.border': '1px solid #1e1e1e',
+            'colorpicker.title.color': '#fff',
+          }
+          // {
+          //   "common.bi.image": "",
+          //   "common.bisize.width": "251px",
+          //   "common.bisize.height": "21px",
+          //   "common.backgroundImage": bgpng,
+          //   "common.backgroundColor": "#fff",
+          //   "common.border": "1px solid #c1c1c1",
+
+          //   // header
+          //   "header.backgroundImage": "none",
+          //   "header.backgroundColor": "transparent",
+          //   "header.border": "0px",
+
+          //   // main icons
+          //   "menu.iconSize.width": "34px",
+          //   "menu.iconSize.height": "34px",
+          // }
+        }
+      }
     }
   },
   watch: {},
-  created () { },
+  created () {
+    console.log('created')
+  },
   methods: {
     listChange (data) {
       console.log('listChange', JSON.stringify(data))
       this.srcList = data.map((item) => item.materialUrl)
     },
     preview (url) {
+      console.log(url)
       console.log('preview', url)
       this.previewImg = url || ''
       this.dialog.preview = true
     },
-    edit (item) {
-      console.log('edit', JSON.stringify(item))
-      this.posterEdit.step = 0
-      this.dialog.edit = true
+    async edit (item) {
+      try {
+        const res = await getPosterInfo(item.id)
+        const data = res.data || {}
+        console.log('getPosterInfo',data)
+        this.posterForm = {
+          id: data.id,
+          title: data.title,
+          categoryId: data.categoryId,
+          type: data.type,
+          delFlag: data.delFlag
+        }
+        this.posterEdit.step = 0
+        this.dialog.edit = true
+      } catch (error) {
+        console.log(error)
+      }
     },
     ready () {
       console.log('ready')
+    },
+    onAddText(pos) {
+      this.$refs.tuiImageEditor.editorInstance
+      .addText('双击输入文字', {
+        position: pos.originPosition,
+      })
+      .then(function (objectProps) {
+        console.log(objectProps);
+      });
+    },
+    //移动
+    onObjectMoved(res) {
+      console.log('onObjectMoved')
+      this.getRecord(res)
+    },
+    //新增/选中
+    objectActivated(obj) {
+      console.log('objectActivated')
+      var imageEditor = this.$refs.tuiImageEditor;
+      imageEditor.activeObjectId = obj.id;
+      if (obj.type === 'text') {
+        imageEditor.showSubMenu('text');
+        imageEditor.setTextToolbar(obj);
+        imageEditor.activateTextMode();
+      }
+    },
+    //缩放
+    onObjectScaled(obj) {
+      console.log('onObjectScaled')
+      // this.getRecord(res);
+      // this.checkState();
+      if (obj.type === 'text') {
+        this.$refs.tuiImageEditor.inputFontSizeRange.setAttribute('value',obj.fontSize);        
+      }
+    },
+    //重做
+    onRedoStackChanged(length) {
+      if (length) {
+        this.$refs.tuiImageEditor.btn_redo.remove('disabled');
+      } else {
+        this.$refs.tuiImageEditor.btn_redo.add('disabled');
+      }
+      this.$refs.tuiImageEditor.resizeEditor();
+    },
+    onUndoStackChanged(length) {
+      if (length) {
+        this.$refs.tuiImageEditor.btn_undo.classList.remove('disabled')
+      } else {
+        this.$refs.tuiImageEditor.btn_undo.classList.add('disabled')
+      }
+      this.$refs.tuiImageEditor.resizeEditor();
+    },
+    showSubMenu (type) {
+      switch (type) {
+        case 'text':
+          document.getElementsByClassName('tui-image-editor-submenu')[0].display = 'block';
+          break;
+        default:
+          document.getElementsByClassName('tui-image-editor-submenu')[0].display = 'none';
+      }
+    },
+    activateTextMode () {
+      let imageEditor = this.$refs.tuiImageEditor.editorInstance;
+      if (imageEditor.getDrawingMode() !== 'TEXT') {
+        imageEditor.stopDrawingMode();
+        imageEditor.startDrawingMode('TEXT');
+      }
+    },
+    checkState (obj) {
+      switch (obj.type) {
+        case 'text':
+          this.showSubMenu('text');
+          this.activateTextMode();
+        break;
+        default:
+          this.activateImageMode();
+        break;
+      }
+    },
+    activateImageMode () {
+      let imageEditor = this.$refs.tuiImageEditor.editorInstance;
+      imageEditor.stopDrawingMode();
+    },
+    toNextStep () {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.posterEdit.step = 1
+        } else {
+          return false;
+        }
+      })
+    },
+    toPrevStep () {
+      this.posterEdit.step = 0
+    },
+    beforeCloseDialog () {
+      this.$refs.form.resetFields()
+      this.posterForm.id = undefined
+      this.dialog.edit = false
+    },
+    remove (id) {
+      this.$confirm('是否确认删除吗?', '警告', {
+        type: 'warning',
+      })
+        .then(function() {
+          return removePoster(id)
+        })
+        .then(() => {
+          this.$refs.page.getList(1)
+          this.msgSuccess('删除成功')
+        })
+    },
+    inputFontSizeRangeChange (e) {
+      this.$refs.tuiImageEditor.inputFontSizeRangeChange(e);
+    },
+    getRecord(res){
+      var flag = false;
+      if (this.records && this.records.length) {
+        for (let index = 0; index < this.records.length; index++) {
+          const element ={
+            fill: this.records[index].fill,
+            height: this.records[index].height,
+            id: this.records[index].id,
+            left: this.records[index].left,
+            opacity: this.records[index].opacity,
+            stroke: this.records[index].stroke,
+            strokeWidth: this.records[index].strokeWidth,
+            top: this.records[index].top,
+            type: this.records[index].type,
+            width: this.records[index].width,
+          };
+          if(element.id == res.id){
+            // console.log(element)
+            this.records[index] = res;
+            flag = true;
+          }
+        }
+      } else {
+        this.records = [];
+      }
+      if(!flag){
+        this.records.push(res)
+      }
+    },
+    // FIXME 没写完
+    async reShow (list) {
+      list = JSON.parse('[{"id":2,"type":"i-text","left":55.26947693665858,"top":180.32266601562497,"width":200,"height":45.199999999999996,"fill":"#000000","stroke":null,"strokeWidth":1,"opacity":1,"angle":0,"text":"请输入文字","fontFamily":"Times New Roman","fontSize":40,"fontStyle":"normal","textAlign":"left","fontWeight":"normal"},{"id":3,"type":"image","left":195.71660545226203,"top":506.3232314730081,"width":500,"height":500,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"opacity":1,"angle":0},{"id":4,"type":"image","left":373.102002853498,"top":190.44302690999768,"width":792,"height":792,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"opacity":1,"angle":0}]');
+      let i = 0, len = list && list.length || 0
+      for ( ; i<len; i++) {
+        await this.loadRes(list[i]);
+      }
+    },
+    async loadRes (obj) {
+      return new Promise((resolve) => {
+        let imageEditor = this.$refs.tuiImageEditor.editorInstance;
+        switch (obj.type) {
+          case 'i-text':
+          case 'text':
+            imageEditor.
+            addText(obj.text, {
+                position: {
+                  x: obj.left,
+                  y: obj.right
+                },
+            })
+            .then(function (objectProps) {
+                console.log(objectProps);
+            });
+          break;
+          case 'image':
+            this.editorInstance.addImageObject(imgPath).then(objectProps => {
+                console.log(objectProps.id);
+            }).then(function (objectProps) {
+                console.log(objectProps);
+            });
+          break;
+        }
+      });
+    },
+    // 获取子组件传来的数据
+    getImgData(data) {
+      this.imgList.id = data.imgUrl
+      // console.log(data)
+      this.imgData.push(data)
+      // console.log(this.imgData)
+    },
+    //
+    async save() {
+      let list =[];
+      try {
+        let imageEditor = this.$refs.tuiImageEditor;
+        
+        let deleteId = [];
+        imageEditor.editorInstance._invoker._undoStack.forEach(element => {
+          if(element.name == "removeObject"){
+              deleteId.push(element.args[1])
+          }
+        })
+        Object.values(imageEditor.records).forEach(item => {
+          if(deleteId.indexOf((item.id).toString())>=0){
+              console.log(" ")
+          }else{
+            list.push(item)
+          }
+        });
+      
+        // const image = this.$refs.tuiImageEditor.editorInstance.toDataURL();
+        // res.url = image;
+      } catch (error) {
+        console.log(error)
+      }
+      
+      // TODO 塞新建海报的数据 
+      let posterSubList = [];
+      let i = 0, len = list.length;
+      while (i < len) {
+        let vo = list[i];
+        vo.objType = this.imgData[i].objType;
+        vo.url = this.imgData[i].url;
+        vo.randomId = this.imgData[i].randomId;
+        // console.log(vo)
+        let type = list[i].type;
+        let align = vo.textAlign && 
+                    (vo.textAlign === 'left' ? 1 : vo.textAlign === 'center' ? 2 : 3) 
+                    || null; 
+        let isText = type === 'i-text' || type === 'text';
+        let posData = {
+          id: vo.randomId || i,
+          content: vo.text || '',   // 文本内容 
+          delFlag: 0,   // 1 启动  0 删除      FIXME 暂时写死
+          fontColor: vo.fill || '#000000', // 
+          fontId: isText ? i : null,   // 字体ID   与imgPath互斥
+          fontSize: vo.fontSize,
+          fontTextAlign: align, // 1 2 3  left center right
+          left: vo.left,
+          top: vo.top,
+          width: vo.width,
+          height: vo.height,
+          imgPath: vo.url || '',
+          posterId: null,
+          type: isText ? 1 : vo.objType,  //  1 固定文本 2 固定图片 3 二维码图片
+          // alpha: vo.opacity, // 页面没有设置透明度，可不传
+          fontStyle: (vo.italic && vo.bold) ? 3 : vo.italic ? 2 : vo.bold ? 1 : 0, // 0 通常 1 粗体 2 斜体 3 粗 + 斜
+          rotate: vo.angle,
+          order: i,  // 层级
+          // categoryId: 0, // 分类ID (不需要传了)
+          verticalType: 2 // 居中方式 写死2
+        };
+        posterSubList.push(posData);
+        i++;
+      }
+
+      const posterForm = this.posterForm
+      console.log('save', posterForm.id)
+      let res = {}
+      if (posterForm.id) {
+        // 编辑海报
+        res = await updatePoster(Object.assign({}, {
+          backgroundImgPath: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2980445260,41238050&fm=26&gp=0.jpg',
+          posterSubassemblyList: []
+        }, this.posterForm))
+      } else {
+        // 新建海报
+        res = await addPoster(Object.assign({}, {
+          backgroundImgPath: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2980445260,41238050&fm=26&gp=0.jpg',
+          posterSubassemblyList: posterSubList
+        }, this.posterForm))
+      }
+      if (res.code === 200) {
+        this.msgSuccess(res.msg)
+        this.$refs.page.getList(1)
+        this.beforeCloseDialog()
+      }
     }
   },
 }
@@ -98,7 +500,7 @@ export default {
                 type="success"
                 size="mini"
                 effect="dark"
-                @click="$refs.page.remove(item.id)"
+                @click="remove(item.id)"
                 >删除</el-tag
               >
             </div>
@@ -113,34 +515,39 @@ export default {
     </el-row>
 
     <el-dialog title="海报预览" width="30%" :visible.sync="dialog.preview">
-      <el-image class="preview-img" :src="previewImg" fit="contain"></el-image>
+       <img class="preview-img" :src="previewImg" />
     </el-dialog>
-    <el-dialog title="海报编辑" width="80%" :visible.sync="dialog.edit">
+    <el-dialog title="海报编辑" width="80%" :visible.sync="dialog.edit" :before-close="beforeCloseDialog">
       <div class="poster-edit-dialog">
         <el-steps :active="posterEdit.step" simple finish-status="success">
           <el-step title="基本信息编辑"></el-step>
           <el-step title="界面元素及内容编辑"></el-step>
         </el-steps>
         <br />
-        <div v-if="posterEdit.step === 0">
-          <el-form ref="form" :model="posterForm" label-width="120px">
-            <el-form-item label="海报名称">
+        <div v-show="posterEdit.step === 0">
+          <el-form ref="form" :rules="rules" :model="posterForm" label-width="120px">
+            <el-form-item label="海报名称" prop="title">
               <el-input
-                v-model="posterForm.name"
+                v-model="posterForm.title"
                 maxlength="10"
                 show-word-limit
               ></el-input>
             </el-form-item>
-            <el-form-item label="所属分类">
-              <el-select
-                v-model="posterForm.classifyFirst"
+            <el-form-item label="所属分类" prop="categoryId">
+              <el-cascader
+                v-model="posterForm.categoryId"
+                :options="$refs.page.treeData[0].children"
+                :props="$refs.page.groupProps"
+              ></el-cascader>
+              <!-- <el-select
+                v-model="posterForm.categoryId"
                 placeholder="请选择分类"
               >
-                <el-option label="海报一" value="poster1"></el-option>
-                <el-option label="海报二" value="poster2"></el-option>
-              </el-select>
+                <el-option label="海报一" value="1"></el-option>
+                <el-option label="海报二" value="2"></el-option>
+              </el-select> -->
             </el-form-item>
-            <el-form-item label="所属二级分类">
+            <!-- <el-form-item label="所属二级分类">
               <el-select
                 v-model="posterForm.classifySecond"
                 placeholder="请选择分类"
@@ -148,23 +555,23 @@ export default {
                 <el-option label="海报一" value="poster1"></el-option>
                 <el-option label="海报二" value="poster2"></el-option>
               </el-select>
-            </el-form-item>
-            <el-form-item label="海报类型">
+            </el-form-item> -->
+            <el-form-item label="海报类型" prop="type">
               <el-radio-group v-model="posterForm.type">
+                <el-radio label="1">通用海报</el-radio>
                 <!-- <el-radio label="1">名片海报</el-radio>
                 <el-radio label="2">专属海报</el-radio> -->
-                <el-radio label="3">通用海报</el-radio>
                 <!-- <el-radio label="4">案例海报</el-radio>
                 <el-radio label="5">产品海报</el-radio> -->
               </el-radio-group>
             </el-form-item>
-            <el-form-item
+            <!-- <el-form-item
               :label="`${posterForm.type === '4' ? '案例' : '产品'}内容`"
               v-if="posterForm.type === '4' || posterForm.type === '5'"
             >
               <el-input v-model="posterForm.content"></el-input>
-            </el-form-item>
-            <el-form-item label="虚拟次数">
+            </el-form-item> -->
+            <!-- <el-form-item label="虚拟次数">
               <el-input v-model="posterForm.count" type="number"></el-input>
             </el-form-item>
             <el-form-item label="海报排序">
@@ -175,22 +582,66 @@ export default {
                 <el-checkbox label="首页" value="1"></el-checkbox>
                 <el-checkbox label="名片" value="2"></el-checkbox>
               </el-checkbox-group>
-            </el-form-item>
-            <el-form-item label="是否启用">
-              <el-radio-group v-model="posterForm.switch">
-                <el-radio label="名片海报" value="1">是</el-radio>
-                <el-radio label="专属海报" value="0">否</el-radio>
+            </el-form-item> -->
+            <el-form-item label="是否启用" prop="delFlag">
+              <el-radio-group v-model="posterForm.delFlag">
+                <el-radio :label="1">是</el-radio>
+                <el-radio :label="0">否</el-radio>
               </el-radio-group>
             </el-form-item>
             <el-form-item>
-              <el-button type="success" @click="posterEdit.step = 1"
+              <el-button type="success" @click="toNextStep"
                 >前往设计海报</el-button
               >
-              <el-button>返回</el-button>
             </el-form-item>
           </el-form>
         </div>
-        <div v-else></div>
+        <div v-show="posterEdit.step === 1">
+          <div class="imageEditorApp">
+            <tui-image-editor
+              ref="tuiImageEditor"
+              :include-ui="useDefaultUI"
+              :options="options"
+              @getImageData="getImgData"
+            ></tui-image-editor>
+          </div>
+          <div id="tbody-containerui-image-editor-controls">
+            <ul class="menu">
+              <li class="menu-item" id="btn-text">添加自定义文本</li>
+              <li class="menu-item" id="btn-image">添加图片</li>
+              <li class="menu-item" id="btn-qrCode">添加二维码</li>
+              <!-- <li class="menu-item" id="btn-nickName">添加客户昵称</li> -->
+            </ul>
+            <div class="sub-menu-container" id="text-sub-menu">
+              <ul class="menu">
+                <li class="menu-item">
+                  <div>
+                    <button class="btn-text-style" data-style-type="b">Bold</button>
+                    <button class="btn-text-style" data-style-type="i">Italic</button>
+                    <button class="btn-text-style" data-style-type="u">Underline</button>
+                  </div>
+                  <div>
+                    <button class="btn-text-style" data-style-type="l">Left</button>
+                    <button class="btn-text-style" data-style-type="c">Center</button>
+                    <button class="btn-text-style" data-style-type="r">Right</button>
+                  </div>
+                </li>
+                <li class="menu-item">
+                  <label class="no-pointer">
+                    <input id="input-font-size-range" @change="inputFontSizeRangeChange($event)" type="range" min="10" max="100" value="10" />
+                  </label>
+                </li>
+                <li class="menu-item">
+                  <div id="tui-text-color-picker">Text color</div>
+                </li>
+                <li class="menu-item close">Close</li>
+              </ul>
+            </div>
+          </div>
+          <el-button type="success" @click="save"
+            >保存</el-button>
+          <el-button @click="toPrevStep">返回上一步</el-button>
+        </div>
       </div>
     </el-dialog>
   </MaPage>
@@ -236,4 +687,137 @@ export default {
 .preview-img {
   width: 100%;
 }
+.imageEditorApp {
+  width: 50%;
+  height: 700px;
+  // float: left;
+  position: relative;
+}
+#tbody-containerui-image-editor-controls {
+  float: right;
+  width: 50%;
+  position: relative;
+  margin-top: -700px;
+}
+.tui-image-editor-header-logo {
+  display: none !important;
+  border: 1px solid red;
+}
+.tui-image-editor-download-btn {
+  display: none !important;
+}
+
+.border {
+  border: 1px solid black;
+}
+.body-container {
+  width: 1000px;
+}
+.tui-image-editor-controls {
+  min-height: 250px;
+}
+.menu {
+  padding: 0;
+  margin-bottom: 5px;
+  text-align: center;
+  color: #544b61;
+  font-weight: 400;
+  list-style-type: none;
+  user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+.menu-item {
+  padding: 10px;
+  display: inline-block;
+  cursor: pointer;
+  vertical-align: middle;
+}
+.menu-item a {
+  text-decoration: none;
+}
+.menu-item.no-pointer {
+  cursor: default;
+}
+.menu-item.active,
+.menu-item:hover {
+  background-color: #f3f3f3;
+}
+.menu-item.disabled {
+  cursor: default;
+  color: #bfbebe;
+}
+.align-left-top {
+  text-align: left;
+  vertical-align: top;
+}
+.range-narrow {
+  width: 80px;
+}
+.sub-menu-container {
+  font-size: 14px;
+  margin-bottom: 1em;
+  display: none;
+}
+/* .tui-image-editor {
+  height: 500px;
+}
+.tui-image-editor-canvas-container {
+  margin: 0 auto;
+  top: 50%;
+  transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+  border: 1px dashed black;
+  overflow: hidden;
+}
+.tui-colorpicker-container {
+  margin: 5px auto 0;
+}
+.tui-colorpicker-palette-toggle-slider {
+  display: none;
+} */
+.input-wrapper {
+  position: relative;
+}
+.input-wrapper input {
+  cursor: pointer;
+  position: absolute;
+  font-size: 999px;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.btn-text-style {
+  padding: 5px;
+  margin: 3px 1px;
+  border: 1px dashed #bfbebe;
+  outline: 0;
+  background-color: #eee;
+  cursor: pointer;
+}
+.icon-text {
+  font-size: 20px;
+}
+.select-line-type {
+  outline: 0;
+  vertical-align: middle;
+}
+#tui-color-picker {
+  display: inline-block;
+  vertical-align: middle;
+}
+#tui-text-palette {
+  display: none;
+  position: absolute;
+  padding: 10px;
+  border: 1px solid #bfbebe;
+  background-color: #fff;
+  z-index: 9999;
+}
 </style>