修改编辑笔记弹窗样式

src/views/read/wpsReader/component/addOrUpdateNoteDialog.vue

@@ -9,7 +9,7 @@
     :append-to-body="true"
     v-loading="loading"
   >
-    <el-form :model="form" label-width="50px" :rules="rules" ref="form">
+    <el-form :model="form" label-width="50px" :rules="rules" ref="form" size="mini">
       <el-form-item label="原文">
         <el-input
           type="textarea"
@@ -49,10 +49,23 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button size="mini" @click="handleCancelSubmit">取消</el-button>
-        <el-button type="primary" size="mini" @click="handleSubmitAddNote"
-          >提交</el-button
-        >
+        <div class="buttons">
+          <el-button
+            style="width: 100%"
+            type="primary"
+            size="mini"
+            icon="el-icon-check"
+            @click="handleSubmitAddNote"
+            >提交</el-button
+          >
+          <el-button
+            style="width: 100%"
+            size="mini"
+            type="text"
+            @click="handleCancelSubmit"
+            >取消</el-button
+          >
+        </div>
       </el-form-item>
     </el-form>
   </el-dialog>
@@ -67,7 +80,7 @@ export default {
     formData: {
       type: Object,
       default: () => ({
-        id:"",//笔记id
+        id: "", //笔记id
         docId: "", //文档Id
         bookmarkContent: "", //笔记内容
         noteContent: "", //标签，提交给后台的时候使用多个用逗号分割
@@ -79,7 +92,7 @@ export default {
     return {
       dialogVisible: false, //新建笔记窗口可见性
       form: {
-        id:'',
+        id: "",
         docId: "",
         docSType: "doc", //文档类型
         bookmarkContent: "", //原文
@@ -168,4 +181,15 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 16px;
+  .el-button + .el-button {
+    margin-left: 0;
+      margin-top: 10px;
+  }
+}
+</style>