diff --git a/package-lock.json b/package-lock.json
index e63f00e..06f59b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3372,7 +3372,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/call-bind/download/call-bind-1.0.0.tgz",
       "integrity": "sha1-JBJwVLs/m9y0sfuCQYGGBy93uM4=",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.0"
@@ -4714,7 +4713,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/deep-equal/download/deep-equal-1.1.1.tgz?cache=0&sync_timestamp=1601612809126&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdeep-equal%2Fdownload%2Fdeep-equal-1.1.1.tgz",
       "integrity": "sha1-tcmMlCzv+vfLBR4k4UNKJaLmB2o=",
-      "dev": true,
       "requires": {
         "is-arguments": "^1.0.4",
         "is-date-object": "^1.0.1",
@@ -4864,7 +4862,6 @@
       "version": "1.1.3",
       "resolved": "https://registry.npm.taobao.org/define-properties/download/define-properties-1.1.3.tgz",
       "integrity": "sha1-z4jabL7ib+bbcJT2HYcMvYTO6fE=",
-      "dev": true,
       "requires": {
         "object-keys": "^1.0.12"
       }
@@ -5355,7 +5352,6 @@
       "version": "1.17.7",
       "resolved": "https://registry.npm.taobao.org/es-abstract/download/es-abstract-1.17.7.tgz",
       "integrity": "sha1-pN5hsvZpifx0IWdsHLl4dXOs5Uw=",
-      "dev": true,
       "requires": {
         "es-to-primitive": "^1.2.1",
         "function-bind": "^1.1.1",
@@ -5374,7 +5370,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npm.taobao.org/es-to-primitive/download/es-to-primitive-1.2.1.tgz",
       "integrity": "sha1-5VzUyc3BiLzvsDs2bHNjI/xciYo=",
-      "dev": true,
       "requires": {
         "is-callable": "^1.1.4",
         "is-date-object": "^1.0.1",
@@ -5812,8 +5807,7 @@
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npm.taobao.org/extend/download/extend-3.0.2.tgz",
-      "integrity": "sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo=",
-      "dev": true
+      "integrity": "sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo="
     },
     "extend-shallow": {
       "version": "3.0.2",
@@ -6252,8 +6246,7 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/function-bind/download/function-bind-1.1.1.tgz",
-      "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=",
-      "dev": true
+      "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0="
     },
     "functional-red-black-tree": {
       "version": "1.0.1",
@@ -6277,7 +6270,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/get-intrinsic/download/get-intrinsic-1.0.1.tgz?cache=0&sync_timestamp=1604120579288&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fget-intrinsic%2Fdownload%2Fget-intrinsic-1.0.1.tgz",
       "integrity": "sha1-lKl2j8vdBZWhySc6rPTInQdWMb4=",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -6412,7 +6404,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npm.taobao.org/has/download/has-1.0.3.tgz",
       "integrity": "sha1-ci18v8H2qoJB8W3YFOAR4fQeh5Y=",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -6443,8 +6434,7 @@
     "has-symbols": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/has-symbols/download/has-symbols-1.0.1.tgz",
-      "integrity": "sha1-n1IUdYpEGWxAbZvXbOv4HsLdMeg=",
-      "dev": true
+      "integrity": "sha1-n1IUdYpEGWxAbZvXbOv4HsLdMeg="
     },
     "has-value": {
       "version": "1.0.0",
@@ -7105,8 +7095,7 @@
     "is-arguments": {
       "version": "1.0.4",
       "resolved": "https://registry.npm.taobao.org/is-arguments/download/is-arguments-1.0.4.tgz",
-      "integrity": "sha1-P6+WbHy6D/Q3+zH2JQCC/PBEjPM=",
-      "dev": true
+      "integrity": "sha1-P6+WbHy6D/Q3+zH2JQCC/PBEjPM="
     },
     "is-arrayish": {
       "version": "0.2.1",
@@ -7132,8 +7121,7 @@
     "is-callable": {
       "version": "1.2.2",
       "resolved": "https://registry.npm.taobao.org/is-callable/download/is-callable-1.2.2.tgz?cache=0&sync_timestamp=1600719446314&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-callable%2Fdownload%2Fis-callable-1.2.2.tgz",
-      "integrity": "sha1-x8ZxXNItTdtI0+GZcCI6zquwgNk=",
-      "dev": true
+      "integrity": "sha1-x8ZxXNItTdtI0+GZcCI6zquwgNk="
     },
     "is-ci": {
       "version": "1.2.1",
@@ -7190,8 +7178,7 @@
     "is-date-object": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/is-date-object/download/is-date-object-1.0.2.tgz?cache=0&sync_timestamp=1576729165697&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-date-object%2Fdownload%2Fis-date-object-1.0.2.tgz",
-      "integrity": "sha1-vac28s2P0G0yhE53Q7+nSUw7/X4=",
-      "dev": true
+      "integrity": "sha1-vac28s2P0G0yhE53Q7+nSUw7/X4="
     },
     "is-descriptor": {
       "version": "0.1.6",
@@ -7330,7 +7317,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/is-regex/download/is-regex-1.1.1.tgz?cache=0&sync_timestamp=1596555607285&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-regex%2Fdownload%2Fis-regex-1.1.1.tgz",
       "integrity": "sha1-xvmKrMVG9s7FRooHt7FTq1ZKV7k=",
-      "dev": true,
       "requires": {
         "has-symbols": "^1.0.1"
       }
@@ -7366,7 +7352,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npm.taobao.org/is-symbol/download/is-symbol-1.0.3.tgz?cache=0&sync_timestamp=1574296307739&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-symbol%2Fdownload%2Fis-symbol-1.0.3.tgz",
       "integrity": "sha1-OOEBS55jKb4N6dJKQU/XRB7GGTc=",
-      "dev": true,
       "requires": {
         "has-symbols": "^1.0.1"
       }
@@ -8705,14 +8690,12 @@
     "object-inspect": {
       "version": "1.8.0",
       "resolved": "https://registry.npm.taobao.org/object-inspect/download/object-inspect-1.8.0.tgz?cache=0&sync_timestamp=1592545177285&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fobject-inspect%2Fdownload%2Fobject-inspect-1.8.0.tgz",
-      "integrity": "sha1-34B+Xs9TpgnMa/6T6sPMe+WzqdA=",
-      "dev": true
+      "integrity": "sha1-34B+Xs9TpgnMa/6T6sPMe+WzqdA="
     },
     "object-is": {
       "version": "1.1.3",
       "resolved": "https://registry.npm.taobao.org/object-is/download/object-is-1.1.3.tgz",
       "integrity": "sha1-LjueZVYBN0Ve471irsTZCi6hzIE=",
-      "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
         "es-abstract": "^1.18.0-next.1"
@@ -8722,7 +8705,6 @@
           "version": "1.18.0-next.1",
           "resolved": "https://registry.npm.taobao.org/es-abstract/download/es-abstract-1.18.0-next.1.tgz",
           "integrity": "sha1-bjoKS9pxflAjqzuOkL7DYQjSLGg=",
-          "dev": true,
           "requires": {
             "es-to-primitive": "^1.2.1",
             "function-bind": "^1.1.1",
@@ -8743,8 +8725,7 @@
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/object-keys/download/object-keys-1.1.1.tgz",
-      "integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4=",
-      "dev": true
+      "integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4="
     },
     "object-visit": {
       "version": "1.0.1",
@@ -8759,7 +8740,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npm.taobao.org/object.assign/download/object.assign-4.1.2.tgz?cache=0&sync_timestamp=1604115131746&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fobject.assign%2Fdownload%2Fobject.assign-4.1.2.tgz",
       "integrity": "sha1-DtVKNC7Os3s4/3brgxoOeIy2OUA=",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.0",
         "define-properties": "^1.1.3",
@@ -9000,6 +8980,11 @@
         "no-case": "^2.2.0"
       }
     },
+    "parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npm.taobao.org/parchment/download/parchment-1.1.4.tgz?cache=0&sync_timestamp=1586512365974&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparchment%2Fdownload%2Fparchment-1.1.4.tgz",
+      "integrity": "sha1-rt7Xq5OP6SHUw0vDOc4RaLwv/eU="
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/parent-module/download/parent-module-1.0.1.tgz",
@@ -10074,6 +10059,48 @@
       "integrity": "sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=",
       "dev": true
     },
+    "quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npm.taobao.org/quill/download/quill-1.3.7.tgz",
+      "integrity": "sha1-2lsvOixHDpMjQM2/NmjJ8h+Shug=",
+      "requires": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+        },
+        "eventemitter3": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-2.0.3.tgz?cache=0&sync_timestamp=1598517790184&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feventemitter3%2Fdownload%2Feventemitter3-2.0.3.tgz",
+          "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
+        }
+      }
+    },
+    "quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npm.taobao.org/quill-delta/download/quill-delta-3.6.3.tgz",
+      "integrity": "sha1-sZ/SuJQSMBxg4f8hPY2GDqwPEDI=",
+      "requires": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "dependencies": {
+        "fast-diff": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npm.taobao.org/fast-diff/download/fast-diff-1.1.2.tgz",
+          "integrity": "sha1-S2LEK44D3j+EhGC2OQeZIGldAVQ="
+        }
+      }
+    },
     "raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npm.taobao.org/raf/download/raf-3.4.1.tgz?cache=0&sync_timestamp=1586264003311&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fraf%2Fdownload%2Fraf-3.4.1.tgz",
@@ -10197,7 +10224,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npm.taobao.org/regexp.prototype.flags/download/regexp.prototype.flags-1.3.0.tgz?cache=0&sync_timestamp=1576388236739&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregexp.prototype.flags%2Fdownload%2Fregexp.prototype.flags-1.3.0.tgz",
       "integrity": "sha1-erqJs8E6ZFCdq888qNn7ub31y3U=",
-      "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
         "es-abstract": "^1.17.0-next.1"
@@ -11294,7 +11320,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/string.prototype.trimend/download/string.prototype.trimend-1.0.2.tgz?cache=0&sync_timestamp=1603220012319&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstring.prototype.trimend%2Fdownload%2Fstring.prototype.trimend-1.0.2.tgz",
       "integrity": "sha1-bd2ah5a8cUtImjriIkaiCPN7+kY=",
-      "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
         "es-abstract": "^1.18.0-next.1"
@@ -11304,7 +11329,6 @@
           "version": "1.18.0-next.1",
           "resolved": "https://registry.npm.taobao.org/es-abstract/download/es-abstract-1.18.0-next.1.tgz",
           "integrity": "sha1-bjoKS9pxflAjqzuOkL7DYQjSLGg=",
-          "dev": true,
           "requires": {
             "es-to-primitive": "^1.2.1",
             "function-bind": "^1.1.1",
@@ -11326,7 +11350,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/string.prototype.trimstart/download/string.prototype.trimstart-1.0.2.tgz?cache=0&sync_timestamp=1603220012476&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstring.prototype.trimstart%2Fdownload%2Fstring.prototype.trimstart-1.0.2.tgz",
       "integrity": "sha1-ItRdqBAVMJzQzdeXh+iRn8XGE+c=",
-      "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
         "es-abstract": "^1.18.0-next.1"
@@ -11336,7 +11359,6 @@
           "version": "1.18.0-next.1",
           "resolved": "https://registry.npm.taobao.org/es-abstract/download/es-abstract-1.18.0-next.1.tgz",
           "integrity": "sha1-bjoKS9pxflAjqzuOkL7DYQjSLGg=",
-          "dev": true,
           "requires": {
             "es-to-primitive": "^1.2.1",
             "function-bind": "^1.1.1",
@@ -12655,6 +12677,15 @@
         }
       }
     },
+    "vue-quill-editor": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npm.taobao.org/vue-quill-editor/download/vue-quill-editor-3.0.6.tgz",
+      "integrity": "sha1-H4VkYhHWijGoCnLLf0W7LxGbyPs=",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "quill": "^1.3.4"
+      }
+    },
     "vue-ref": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-ref/download/vue-ref-2.0.0.tgz",
diff --git a/package.json b/package.json
index 570b1fe..f17c0ea 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "stylus": "^0.54.8",
     "vue": "^2.6.11",
     "vue-dompurify-html": "^2.3.0",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },
diff --git a/src/App.vue b/src/App.vue
index a66f651..96e357b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@
   <a-config-provider :locale="zh_CN">
     <div class="d-flex flex-row flex-nowrap" id="app">
       <btn-con />
-      <router-view class="d-flex"></router-view>
+      <router-view class="flex-1 bg"></router-view>
     </div>
   </a-config-provider>
 </template>
diff --git a/src/components/QuillEditor/QuillEditor.vue b/src/components/QuillEditor/QuillEditor.vue
new file mode 100644
index 0000000..166a00a
--- /dev/null
+++ b/src/components/QuillEditor/QuillEditor.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="ql-snow">
+    <quill-editor :options="editorOption" ref="myTextEditor" v-model="content"></quill-editor>
+  </div>
+</template>
+
+<script>
+// 工具栏配置
+const toolbarOptions = [
+  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
+  ['blockquote', 'code-block'], // 引用  代码块
+  [{ header: 1 }, { header: 2 }], // 1、2 级标题
+  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
+  [{ script: 'sub' }, { script: 'super' }], // 上标/下标
+  [{ indent: '-1' }, { indent: '+1' }], // 缩进
+  [{ direction: 'rtl' }], // 文本方向
+  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
+  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+  [{ font: [] }], // 字体种类
+  [{ align: [] }], // 对齐方式
+  ['clean'], // 清除文本格式
+  ['link', 'image'], // 链接、图片、'video'视频
+];
+
+import { quillEditor } from 'vue-quill-editor';
+import 'quill/dist/quill.core.css';
+import 'quill/dist/quill.snow.css';
+import 'quill/dist/quill.bubble.css';
+
+export default {
+  name: 'QuillEditor',
+  props: {
+    /*编辑器的内容*/
+    value: {
+      type: String,
+    },
+    /*图片大小*/
+    maxSize: {
+      type: Number,
+      default: 4000, //kb
+    },
+    /* 默认提示 */
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  },
+
+  components: {
+    quillEditor,
+  },
+
+  data() {
+    return {
+      content: this.value,
+      quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
+      editorOption: {
+        theme: 'snow', // or 'bubble'
+        placeholder: this.placeholder,
+        modules: {
+          toolbar: {
+            container: toolbarOptions,
+          },
+        },
+      },
+      serverUrl: '/v1/blog/imgUpload', // 这里写你要上传的图片服务器地址
+      header: {
+        // token: sessionStorage.token
+      }, // 有的图片服务器要求请求头需要有token
+    };
+  },
+
+  methods: {
+    onEditorBlur() {
+      //失去焦点事件
+    },
+    onEditorFocus() {
+      //获得焦点事件
+    },
+    onEditorChange() {
+      //内容改变事件
+      this.$emit('input', this.content);
+    },
+
+    // 富文本图片上传前
+    beforeUpload() {
+      // 显示loading动画
+      this.quillUpdateImg = true;
+    },
+
+    uploadSuccess(res, file) {
+      // res为图片服务器返回的数据
+      // 获取富文本组件实例
+      let quill = this.$refs.myQuillEditor.quill;
+      // 如果上传成功
+      if (res.code == 200) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片  res.url为服务器返回的图片地址
+        quill.insertEmbed(length, 'image', res.url);
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      } else {
+        this.$message.error('图片插入失败');
+      }
+      // loading动画消失
+      this.quillUpdateImg = false;
+    },
+    // 富文本图片上传失败
+    uploadError() {
+      // loading动画消失
+      this.quillUpdateImg = false;
+      this.$message.error('图片插入失败');
+    },
+  },
+};
+</script>
+
+<style>
+.ql-container {
+  overflow: auto;
+  max-height: 200px;
+}
+.ql-toolbar.ql-snow {
+  background: #f5f5f5;
+}
+.ql-snow .ql-tooltip[data-mode='link']::before {
+  content: '请输入链接地址:';
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+  border-right: 0px;
+  content: '保存';
+  padding-right: 0px;
+}
+
+.ql-snow .ql-tooltip[data-mode='video']::before {
+  content: '请输入视频地址:';
+}
+
+.ql-snow .ql-picker {
+  line-height: 20px;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: '14px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
+  content: '10px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
+  content: '18px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
+  content: '32px';
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+  content: '文本';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
+  content: '标题1';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
+  content: '标题2';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
+  content: '标题3';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
+  content: '标题4';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
+  content: '标题5';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
+  content: '标题6';
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+  content: '标准字体';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
+  content: '衬线字体';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
+  content: '等宽字体';
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 321c40d..a13818b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@ import 'common/portrait.styl';
 import echarts from 'echarts';
 import 'echarts-gl';
 import 'echarts/map/js/province/shanxi.js'; //对应的省份
+import './plugins/vue-quill-editor.js';
 // Vue.use(echarts);
 Vue.prototype.$echarts = echarts;
 // import './assets/icon/iconfont.css';
diff --git a/src/plugins/vue-quill-editor.js b/src/plugins/vue-quill-editor.js
new file mode 100644
index 0000000..07a69e3
--- /dev/null
+++ b/src/plugins/vue-quill-editor.js
@@ -0,0 +1,3 @@
+import 'quill/dist/quill.core.css';
+import 'quill/dist/quill.snow.css';
+import 'quill/dist/quill.bubble.css';
diff --git a/src/router/index.js b/src/router/index.js
index f873bba..22afc9e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -22,7 +22,7 @@ const routes = [
   {
     path: '/Meeting',
     name: 'Meeting',
-    component: () => import('@/views/Meeting/Index.vue'),
+    component: () => import('@/views/Meeting/Meeting.vue'),
   },
 ];
 
diff --git a/src/views/Meeting/Index.vue b/src/views/Meeting/Index.vue
deleted file mode 100644
index 67cd993..0000000
--- a/src/views/Meeting/Index.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div>会议纪要界面</div>
-</template>
-
-<script>
-export default {
-  name: 'Meeting',
-  data() {
-    return {
-      str: '',
-      showVideo: false,
-    };
-  },
-
-  methods: {},
-};
-</script>
-
-<style lang="stylus" scoped></style>
diff --git a/src/views/Meeting/Meeting.vue b/src/views/Meeting/Meeting.vue
new file mode 100644
index 0000000..d822110
--- /dev/null
+++ b/src/views/Meeting/Meeting.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <div class="white metting">
+      <h2 class="mb-4">会议记录</h2>
+      <a-form :form="form" @submit="handleSubmit">
+        <!-- 会议时间 -->
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="会议时间"
+        >
+          <a-range-picker
+            :placeholder="['开始时间', '结束时间']"
+            @change="onChangeTime"
+            format="YYYY-MM-DD HH:mm"
+            show-time
+            style="width: 100%"
+            v-decorator="['time', rangeConfig]"
+          />
+        </a-form-item>
+        <!-- 会议地点 -->
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="会议地点"
+        >
+          <a-input
+            placeholder="会议地点"
+            v-decorator="[
+                      'place',
+                      {
+                        rules: [
+                          { required: true, message: '会议地点不能为空' },
+                          { whitespace: true, message: '会议地点不能为空' },
+                          { max: 140, massage: '会议地点最多140个字符' },
+                        ],
+                      },
+                    ]"
+          />
+        </a-form-item>
+        <!-- 主持人 -->
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="主持人"
+        >
+          <a-input
+            placeholder="主持人"
+            v-decorator="[
+                      'host',
+                      {
+                        rules: [
+                          { required: true, message: '主持人不能为空' },
+                          { whitespace: true, message: '主持人不能为空' },
+                          { max: 140, massage: '主持人最多140个字符' },
+                        ],
+                      },
+                    ]"
+          />
+        </a-form-item>
+        <!-- 参会人员 -->
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="参会人员"
+        >
+          <quill-editor :maxSize="maxSize" :placeholder="placeholderParticipants" />
+        </a-form-item>
+        <!-- 研讨内容 -->
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="研讨内容"
+        >
+          <quill-editor :maxSize="maxSize" :placeholder="placeholderContent" />
+        </a-form-item>
+        <!-- 会议纪要 -->
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="会议纪要"
+        >
+          <quill-editor :maxSize="maxSize" :placeholder="placeholderMeeting" />
+        </a-form-item>
+
+        <a-form-item class="d-flex flex-row-reverse">
+          <a-button class="white--text px-10" html-type="submit" type="primary">提交</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import QuillEditor from 'components/QuillEditor/QuillEditor.vue';
+import moment from 'moment';
+
+// 工具栏配置
+const toolbarOptions = [
+  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
+  ['blockquote', 'code-block'], // 引用  代码块
+  [{ header: 1 }, { header: 2 }], // 1、2 级标题
+  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
+  [{ script: 'sub' }, { script: 'super' }], // 上标/下标
+  [{ indent: '-1' }, { indent: '+1' }], // 缩进
+  [{ direction: 'rtl' }], // 文本方向
+  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
+  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+  // [{ font: [] }], // 字体种类
+  [{ align: [] }], // 对齐方式
+  ['clean'], // 清除文本格式
+  ['link', 'image', 'video'], // 链接、图片、视频
+];
+
+const formItemLayout = {
+  labelCol: { span: 4 },
+  wrapperCol: { span: 18 },
+};
+const tailItemLayout = { wrapperCol: { span: 18, offset: 4 } };
+export default {
+  name: 'Meeting',
+  components: {
+    QuillEditor, // 富文本编辑器
+  },
+  data() {
+    return {
+      showVideo: false,
+      formItemLayout,
+      tailItemLayout,
+      form: this.$form.createForm(this, { name: 'page-add' }),
+      rangeConfig: { rules: [{ type: 'array', required: true, message: '会议时间不能为空' }] },
+      place: '', // 会议地点
+      host: '', // 主持人
+      participants: '', // 参会人员
+      content: '', // 研讨内容
+      meetingMinutes: '', // 会议纪要
+      placeholderParticipants: '请在此输入参会人员...',
+      maxSize: 2048,
+      placeholderContent: '请在此输入研讨内容...',
+      placeholderMeeting: '请在此输入会议纪要...',
+    };
+  },
+
+  methods: {
+    moment,
+    onChangeTime(dates, dateStrings) {
+      console.log('From: ', dates[0], ', to: ', dates[1]);
+      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
+    },
+
+    // 提交表单
+    handleSubmit(e) {
+      e.preventDefault();
+      this.form.validateFieldsAndScroll(async (err, values) => {
+        if (!err) {
+          try {
+            // const param = values;
+            // const params = { param };
+            // console.log('params: ', params);
+            // const res = await addPage(params);
+            // const { data, msg, code } = res.data;
+            // this.$emit('closeModal');
+            // if (code === 200) {
+            //   this.$message.success('添加成功');
+            // } else {
+            //   throw msg;
+            // }
+          } catch (error) {
+            // this.$message.error(error || '添加失败');
+          }
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.metting {
+  width: 70%;
+  margin: 30px 15%;
+  padding: 28px;
+  border-radius: 4px;
+  box-shadow: 3px 3px 10px #eee;
+}
+</style>