headerEdit调整

src/components/HeaderEdit.vue

@@ -1,22 +1,24 @@
 <template>
   <header class="header">
     <button class="reset-btn" @click="goback"><i class="el-icon-arrow-left"></i>返回作品</button>
-    <div class="next_return">
-      <div class="return" title="撤销" @click="revocation" :style="`opacity:${operationList.length>1?'1':'.3'}`">
-        <img class="retutn_icon" src="../assets/images/button_return.png" alt="">
-        <span>撤销</span>
-      </div>
-      <div class="return" title="恢复" @click="recover" :style="`opacity:${nextList.length>0?'1':'.3'}`">
-        <img class="retutn_icon" src="../assets/images/button_next.png" alt="">
-        <span>恢复</span>
-      </div>
-      <div class="return" title="分享设置" @click="shareSetting">
-        <img class="retutn_icon" src="../assets/images/share_setting_edit_nor.png" alt="">
-        <span>分享设置</span>
-      </div>
-      <div class="return" title="保存" @click="save">
-        <img class="retutn_icon" src="../assets/images/save_edit_nor.png" alt="">
-        <span>保存</span>
+    <div class="tools">
+      <div class="next_return">
+        <div class="return" title="撤销" @click="revocation" :style="`opacity:${operationList.length>1?'1':'.3'}`">
+          <img class="retutn_icon" src="../assets/images/button_return.png" alt="">
+          <span>撤销</span>
+        </div>
+        <div class="return" title="恢复" @click="recover" :style="`opacity:${nextList.length>0?'1':'.3'}`">
+          <img class="retutn_icon" src="../assets/images/button_next.png" alt="">
+          <span>恢复</span>
+        </div>
+        <div class="return" title="分享设置" @click="shareSetting">
+          <img class="retutn_icon" src="../assets/images/share_setting_edit_nor.png" alt="">
+          <span>分享设置</span>
+        </div>
+        <div class="return" title="保存" @click="save">
+          <img class="retutn_icon" src="../assets/images/save_edit_nor.png" alt="">
+          <span>保存</span>
+        </div>
       </div>
     </div>
     <!-- <div class="next_return">
@@ -248,7 +250,9 @@ export default {
         that.$store.state.editor.editorTheme.canvasWidth = res["canvasWidth"];
         that.$store.state.editor.editorPage.elements = res["pages"][0].elements;
       });
-    }
+    },
+    shareSetting() {},
+    save() {}
   }
 };
 </script>
@@ -277,29 +281,31 @@ export default {
     padding-right: 15px;
     flex-direction: row-reverse;
   }
-  .next_return {
+  .tools {
     position: absolute;
-    top: 0px;
-    left: 38%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
+    display: inline-block;
+    margin-left: 33%;
     width: 300px;
     height: 60px;
-    z-index: 3;
-    .return {
+    .next_return {
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
       align-items: center;
-      padding-left: 16px;
-      padding-right: 16px;
-      font-size: 16px;
-      color: rgba(100, 107, 129, 1);
-      .retutn_icon {
-        width: 24px;
-        height: 21px;
-        margin-bottom: 5px;
+      height: 100%;
+      .return {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding-left: 16px;
+        padding-right: 16px;
+        font-size: 16px;
+        color: rgba(100, 107, 129, 1);
+        .retutn_icon {
+          width: 24px;
+          height: 21px;
+          margin-bottom: 5px;
+        }
       }
     }
   }