v2.5

src/App.vue

@@ -9,5 +9,6 @@
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  height: 100%;
 }
 </style>

src/api/XfSysBussiness.js

@@ -137,6 +137,14 @@ export default {
             tokenName
         })
     },
+    //会员ID
+    XfSysBussinessGetMemberModel(data) {
+        return request({
+            url: '/api/XfSysBussiness/GetMemberModel/' + data,
+            method: 'get',
+            tokenName
+        })
+    },
     //入会申请审核列表
     XfSysBussinessGetMemberProcessList(data) {
         return request({

src/assets/css/index.scss

@@ -36,15 +36,15 @@ textarea {
   *line-height: 1.5;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: 100%;
-  font-weight: normal;
-}
+// h1,
+// h2,
+// h3,
+// h4,
+// h5,
+// h6 {
+//   font-size: 100%;
+//   font-weight: normal;
+// }
 
 address,
 cite,
@@ -215,3 +215,36 @@ input[type="number"]::-webkit-outer-spin-button {
     border-top: 1px solid #d3d3d3aa;
   }
 }
+
+
+.ql-picker.ql-lineheight {
+  width: 70px;
+}
+
+.ql-editor .ql-lineheight-1 {
+  line-height: 1;
+}
+
+.ql-editor .ql-lineheight-1-5 {
+  line-height: 1.5;
+}
+
+.ql-editor .ql-lineheight-1-75 {
+  line-height: 1.75;
+}
+
+.ql-editor .ql-lineheight-2 {
+  line-height: 2;
+}
+
+.ql-editor .ql-lineheight-3 {
+  line-height: 3;
+}
+
+.ql-editor .ql-lineheight-4 {
+  line-height: 4;
+}
+
+.ql-editor .ql-lineheight-5 {
+  line-height: 5;
+}

src/components/Editor/index.vue

@@ -2,13 +2,15 @@
   <div>
     <el-upload
       :action="uploadUrl"
+      :before-upload="handleBeforeUpload"
+      :on-success="handleUploadSuccess"
       :on-error="handleUploadError"
       name="file"
       :show-file-list="false"
       :headers="headers"
       style="display: none"
       ref="upload"
-      :http-request="imageChange"
+      v-if="this.type == 'url'"
     >
     </el-upload>
     <div class="editor" ref="editor" :style="styles"></div>
@@ -20,10 +22,8 @@ import Quill from "quill";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
-// import { getToken } from "@/utils/auth";
+import { BASE_URL, BASE_IMG_URL } from "@/utils/request.js";
 import ImageResize from "quill-image-resize-module";
-import { BASE_URL } from "@/utils/request.js";
-
 export default {
   name: "Editor",
   props: {
@@ -42,20 +42,25 @@ export default {
       type: Number,
       default: null,
     },
-    /* 最大高度 */
-    maxHeight: {
-      type: Number,
-      default: null,
-    },
     /* 只读 */
     readOnly: {
       type: Boolean,
       default: false,
     },
+    // 上传文件大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
+    },
+    /* 类型（base64格式、url格式） */
+    type: {
+      type: String,
+      default: "url",
+    },
   },
   data() {
     return {
-      uploadUrl: BASE_URL,
+      uploadUrl: BASE_URL + "api/XfSysBussiness/UploadFile", // 上传的图片服务器地址
       headers: {
         token: this.$store.state.backstageToken,
       },
@@ -66,10 +71,6 @@ export default {
         bounds: document.body,
         debug: "warn",
         modules: {
-          clipboard: {
-            // 粘贴版，处理粘贴时候带图片
-            matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
-          },
           // 工具栏配置
           toolbar: [
             ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
@@ -77,11 +78,12 @@ export default {
             [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
             [{ indent: "-1" }, { indent: "+1" }], // 缩进
             [{ size: ["small", false, "large", "huge"] }], // 字体大小
+            [{ lineheight: ["", "1", "1-5", "1-75", "2", "3", "4", "5"] }], //行高
             [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
             [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
             [{ align: [] }], // 对齐方式
             ["clean"], // 清除文本格式
-            ["link", "image"], // 链接、图片
+            ["link", "image", "video"], // 链接、图片、视频
           ],
           imageResize: {
             displayStyles: {
@@ -103,9 +105,6 @@ export default {
       if (this.minHeight) {
         style.minHeight = `${this.minHeight}px`;
       }
-      if (this.maxHeight) {
-        style.maxHeight = `${this.maxHeight}px`;
-      }
       if (this.height) {
         style.height = `${this.height}px`;
       }
@@ -127,94 +126,46 @@ export default {
   },
   mounted() {
     Quill.register("modules/imageResize", ImageResize);
+    const Parchment = Quill.import("parchment");
+
+    class lineHeightAttributor extends Parchment.Attributor.Class {}
+
+    const lineHeightStyle = new lineHeightAttributor(
+      "lineheight",
+
+      "ql-lineheight",
+
+      {
+        scope: Parchment.Scope.INLINE,
+
+        whitelist: ["", "1", "1-5", "1-75", "2", "3", "4", "5"],
+      }
+    );
+
+    Quill.register({ "formats/lineHeight": lineHeightStyle }, true);
     this.init();
+    this.paste();
   },
   beforeDestroy() {
     this.Quill = null;
   },
   methods: {
-    handleCustomMatcher(node, Delta) {
-      let ops = [];
-      Delta.ops.forEach((op) => {
-        if (op.insert && typeof op.insert === "string") {
-          // 如果粘贴了图片，这里会是一个对象，所以可以这样处理
-          ops.push({
-            insert: op.insert,
-          });
-        } else {
-          if (op.insert.image.includes("data:image")) {
-            /**
-             * 粘贴图片
-             */
-            let arr = op.insert.image.split(",");
-            let mime = arr[0].match(/:(.*?);/)[1];
-            let bytes = atob(arr[1]);
-            let n = bytes.length;
-            let ia = new Uint8Array(n);
-            while (n--) {
-              ia[n] = bytes.charCodeAt(n);
-            }
-            let arry = new File([ia], "随机名称", { type: mime });
-            this.imageChange({
-              file: arry,
-            });
-          } else {
-            ops.push({
-              insert: op.insert,
-            });
-          }
-        }
-      });
-      Delta.ops = ops;
-      return Delta;
-    },
-    base64ToFile(base64, fileName) {
-      return new Promise((resolve, reject) => {
-        let arr = base64.split(",");
-        let mime = arr[0].match(/:(.*?);/)[1];
-        let bytes = atob(arr[1]);
-        let n = bytes.length;
-        let ia = new Uint8Array(n);
-        while (n--) {
-          ia[n] = bytes.charCodeAt(n);
-        }
-        let arry = new File([ia], fileName, { type: mime });
-        this.$api.XfSysBussinessUploadFile(arry, 2).then((res) => {
-          resolve(this.$methods.splitImgHost(res.Data));
-        });
-      });
-    },
     init() {
       const editor = this.$refs.editor;
       this.Quill = new Quill(editor, this.options);
       // 如果设置了上传地址则自定义图片上传事件
-      if (this.uploadUrl) {
+      if (this.type == "url") {
         let toolbar = this.Quill.getModule("toolbar");
         toolbar.addHandler("image", (value) => {
           this.uploadType = "image";
           if (value) {
-            // document.querySelector(".avatar-uploader input").click();
             this.$refs.upload.$children[0].$refs.input.click();
           } else {
             this.quill.format("image", false);
           }
         });
-        toolbar.addHandler("video", (value) => {
-          this.uploadType = "video";
-          if (value) {
-            this.$refs.upload.$children[0].$refs.input.click();
-          } else {
-            this.quill.format("video", false);
-          }
-        });
       }
-
-      this.Quill.enable(false);
       this.Quill.pasteHTML(this.currentValue);
-      // this.$nextTick(function() {
-      //   this.Quill.blur();
-      //   this.Quill.enable(true);
-      // });
       this.Quill.on("text-change", (delta, oldDelta, source) => {
         const html = this.$refs.editor.children[0].innerHTML;
         const text = this.Quill.getText();
@@ -222,6 +173,8 @@ export default {
         this.currentValue = html;
         this.$emit("input", html);
         this.$emit("on-change", { html, text, quill });
+      });
+      this.Quill.on("text-change", (delta, oldDelta, source) => {
         this.$emit("on-text-change", delta, oldDelta, source);
       });
       this.Quill.on("selection-change", (range, oldRange, source) => {
@@ -230,37 +183,62 @@ export default {
       this.Quill.on("editor-change", (eventName, ...args) => {
         this.$emit("on-editor-change", eventName, ...args);
       });
-
-      editor.onclick = () => {
-        this.Quill.enable(true);
-        this.Quill.focus();
-      };
     },
-    imageChange(param, type) {
-      let formData = new FormData();
-      formData.append("file", param.file);
-      this.$api
-        .XfSysBussinessUploadFile(formData)
-        .then((res) => {
-          let quill = this.Quill;
-          // 获取光标所在位置
-          let length = quill.getSelection().index;
-          // 插入图片  res.url为服务器返回的图片地址
-          quill.insertEmbed(
-            length,
-            "image",
-            this.$methods.splitImgHost(res.Data)
-          );
-          // 调整光标到最后
-          quill.setSelection(length + 1);
-        })
-        .catch((err) => {
-          console.log(err);
-        });
+    // 上传前校检格式和大小
+    handleBeforeUpload(file) {
+      // 校检文件大小
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
+          return false;
+        }
+      }
+      return true;
+    },
+    handleUploadSuccess(res, file) {
+      // 获取富文本组件实例
+      let quill = this.Quill;
+      // 如果上传成功
+      if (res.Code == 200) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片  res.url为服务器返回的图片地址
+        quill.insertEmbed(length, "image", BASE_IMG_URL + res.Data);
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      } else {
+        this.$message.error("图片插入失败");
+      }
     },
     handleUploadError() {
       this.$message.error("图片插入失败");
     },
+    paste() {
+      window.addEventListener(
+        "paste",
+        (evt) => {
+          if (
+            evt.clipboardData &&
+            evt.clipboardData.files &&
+            evt.clipboardData.files.length
+          ) {
+            evt.preventDefault();
+            [].forEach.call(evt.clipboardData.files, (file) => {
+              if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
+                return;
+              }
+              let formDatas = new FormData();
+              formDatas.append("file", file);
+              this.$api.XfSysBussinessUploadFile(formDatas).then((res) => {
+                this.handleUploadSuccess(res);
+              });
+            });
+          }
+        },
+        false
+      );
+    },
   },
 };
 </script>
@@ -271,15 +249,6 @@ export default {
   white-space: pre-wrap !important;
   line-height: normal !important;
 }
-.ql-toolbar.ql-snow {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
-.ql-container {
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-  overflow: auto;
-}
 .quill-img {
   display: none;
 }
@@ -354,7 +323,76 @@ export default {
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
   content: "等宽字体";
 }
-.ql-toolbar {
-  background-color: #eee !important;
+
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before,
+.ql-snow .ql-picker.ql-lineheight .ql-picker-item::before {
+  content: "行高";
+}
+
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1"]::before {
+  content: "1";
+}
+
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1-5"]::before,
+.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1-5"]::before {
+  content: "1.5";
+}
+
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1-75"]::before,
+.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1-75"]::before {
+  content: "1.75";
+}
+
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2"]::before {
+  content: "2";
+}
+
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="3"]::before {
+  content: "3";
+}
+
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="4"]::before {
+  content: "4";
+}
+
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="5"]::before {
+  content: "5";
+}
+
+.ql-snow .ql-picker.ql-lineheight {
+  width: 70px;
+}
+
+.ql-snow .ql-editor .ql-lineheight-1 {
+  line-height: 1;
+}
+
+.ql-snow .ql-editor .ql-lineheight-1-5 {
+  line-height: 1.5;
+}
+
+.ql-snow .ql-editor .ql-lineheight-1-75 {
+  line-height: 1.75;
+}
+
+.ql-snow .ql-editor .ql-lineheight-2 {
+  line-height: 2;
+}
+
+.ql-snow .ql-editor .ql-lineheight-3 {
+  line-height: 3;
+}
+
+.ql-snow .ql-editor .ql-lineheight-4 {
+  line-height: 4;
+}
+
+.ql-snow .ql-editor .ql-lineheight-5 {
+  line-height: 5;
 }
 </style>

src/components/Editor/indexCopy.vue

@@ -0,0 +1,360 @@
+<template>
+  <div>
+    <el-upload
+      :action="uploadUrl"
+      :on-error="handleUploadError"
+      name="file"
+      :show-file-list="false"
+      :headers="headers"
+      style="display: none"
+      ref="upload"
+      :http-request="imageChange"
+    >
+    </el-upload>
+    <div class="editor" ref="editor" :style="styles"></div>
+  </div>
+</template>
+
+<script>
+import Quill from "quill";
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+// import { getToken } from "@/utils/auth";
+import ImageResize from "quill-image-resize-module";
+import { BASE_URL } from "@/utils/request.js";
+
+export default {
+  name: "Editor",
+  props: {
+    /* 编辑器的内容 */
+    value: {
+      type: String,
+      default: "",
+    },
+    /* 高度 */
+    height: {
+      type: Number,
+      default: null,
+    },
+    /* 最小高度 */
+    minHeight: {
+      type: Number,
+      default: null,
+    },
+    /* 最大高度 */
+    maxHeight: {
+      type: Number,
+      default: null,
+    },
+    /* 只读 */
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      uploadUrl: BASE_URL,
+      headers: {
+        token: this.$store.state.backstageToken,
+      },
+      Quill: null,
+      currentValue: "",
+      options: {
+        theme: "snow",
+        bounds: document.body,
+        debug: "warn",
+        modules: {
+          clipboard: {
+            // 粘贴版，处理粘贴时候带图片
+            matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
+          },
+          // 工具栏配置
+          toolbar: [
+            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
+            ["blockquote", "code-block"], // 引用  代码块
+            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
+            [{ indent: "-1" }, { indent: "+1" }], // 缩进
+            [{ size: ["small", false, "large", "huge"] }], // 字体大小
+            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+            [{ align: [] }], // 对齐方式
+            ["clean"], // 清除文本格式
+            ["link", "image"], // 链接、图片
+          ],
+          imageResize: {
+            displayStyles: {
+              backgroundColor: "black",
+              border: "none",
+              color: "white",
+            },
+            modules: ["Resize", "DisplaySize", "Toolbar"],
+          },
+        },
+        placeholder: "请输入内容",
+        readOnly: this.readOnly,
+      },
+    };
+  },
+  computed: {
+    styles() {
+      let style = {};
+      if (this.minHeight) {
+        style.minHeight = `${this.minHeight}px`;
+      }
+      if (this.maxHeight) {
+        style.maxHeight = `${this.maxHeight}px`;
+      }
+      if (this.height) {
+        style.height = `${this.height}px`;
+      }
+      return style;
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val !== this.currentValue) {
+          this.currentValue = val === null ? "" : val;
+          if (this.Quill) {
+            this.Quill.pasteHTML(this.currentValue);
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    Quill.register("modules/imageResize", ImageResize);
+    this.init();
+  },
+  beforeDestroy() {
+    this.Quill = null;
+  },
+  methods: {
+    handleCustomMatcher(node, Delta) {
+      let ops = [];
+      Delta.ops.forEach((op) => {
+        if (op.insert && typeof op.insert === "string") {
+          // 如果粘贴了图片，这里会是一个对象，所以可以这样处理
+          ops.push({
+            insert: op.insert,
+          });
+        } else {
+          if (op.insert.image.includes("data:image")) {
+            /**
+             * 粘贴图片
+             */
+            let arr = op.insert.image.split(",");
+            let mime = arr[0].match(/:(.*?);/)[1];
+            let bytes = atob(arr[1]);
+            let n = bytes.length;
+            let ia = new Uint8Array(n);
+            while (n--) {
+              ia[n] = bytes.charCodeAt(n);
+            }
+            let arry = new File([ia], "随机名称", { type: mime });
+            this.imageChange({
+              file: arry,
+            });
+          } else {
+            ops.push({
+              insert: op.insert,
+            });
+          }
+        }
+      });
+      Delta.ops = ops;
+      return Delta;
+    },
+    base64ToFile(base64, fileName) {
+      return new Promise((resolve, reject) => {
+        let arr = base64.split(",");
+        let mime = arr[0].match(/:(.*?);/)[1];
+        let bytes = atob(arr[1]);
+        let n = bytes.length;
+        let ia = new Uint8Array(n);
+        while (n--) {
+          ia[n] = bytes.charCodeAt(n);
+        }
+        let arry = new File([ia], fileName, { type: mime });
+        this.$api.XfSysBussinessUploadFile(arry, 2).then((res) => {
+          resolve(this.$methods.splitImgHost(res.Data));
+        });
+      });
+    },
+    init() {
+      const editor = this.$refs.editor;
+      this.Quill = new Quill(editor, this.options);
+      // 如果设置了上传地址则自定义图片上传事件
+      if (this.uploadUrl) {
+        let toolbar = this.Quill.getModule("toolbar");
+        toolbar.addHandler("image", (value) => {
+          this.uploadType = "image";
+          if (value) {
+            // document.querySelector(".avatar-uploader input").click();
+            this.$refs.upload.$children[0].$refs.input.click();
+          } else {
+            this.quill.format("image", false);
+          }
+        });
+        toolbar.addHandler("video", (value) => {
+          this.uploadType = "video";
+          if (value) {
+            this.$refs.upload.$children[0].$refs.input.click();
+          } else {
+            this.quill.format("video", false);
+          }
+        });
+      }
+
+      this.Quill.enable(false);
+      this.Quill.pasteHTML(this.currentValue);
+      // this.$nextTick(function() {
+      //   this.Quill.blur();
+      //   this.Quill.enable(true);
+      // });
+      this.Quill.on("text-change", (delta, oldDelta, source) => {
+        const html = this.$refs.editor.children[0].innerHTML;
+        const text = this.Quill.getText();
+        const quill = this.Quill;
+        this.currentValue = html;
+        this.$emit("input", html);
+        this.$emit("on-change", { html, text, quill });
+        this.$emit("on-text-change", delta, oldDelta, source);
+      });
+      this.Quill.on("selection-change", (range, oldRange, source) => {
+        this.$emit("on-selection-change", range, oldRange, source);
+      });
+      this.Quill.on("editor-change", (eventName, ...args) => {
+        this.$emit("on-editor-change", eventName, ...args);
+      });
+
+      editor.onclick = () => {
+        this.Quill.enable(true);
+        this.Quill.focus();
+      };
+    },
+    imageChange(param, type) {
+      let formData = new FormData();
+      formData.append("file", param.file);
+      this.$api
+        .XfSysBussinessUploadFile(formData)
+        .then((res) => {
+          let quill = this.Quill;
+          // 获取光标所在位置
+          let length = quill.getSelection().index;
+          // 插入图片  res.url为服务器返回的图片地址
+          quill.insertEmbed(
+            length,
+            "image",
+            this.$methods.splitImgHost(res.Data)
+          );
+          // 调整光标到最后
+          quill.setSelection(length + 1);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    handleUploadError() {
+      this.$message.error("图片插入失败");
+    },
+  },
+};
+</script>
+
+<style>
+  .editor,
+  .ql-toolbar {
+    white-space: pre-wrap !important;
+    line-height: normal !important;
+  }
+  .ql-toolbar.ql-snow {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+  .ql-container {
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    overflow: auto;
+  }
+  .quill-img {
+    display: none;
+  }
+  .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.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: "等宽字体";
+  }
+  .ql-toolbar {
+    background-color: #eee !important;
+  }
+</style>

src/components/Scroller/index.vue

@@ -1,15 +1,23 @@
 <template>
-  <div class="wrap center_1200">
-    <ul class="ul_style">
-      <li
-        v-for="(item, index) in lists"
-        :key="index"
-        class="li_style"
-        @click="jumpWL(item)"
-      >
-        {{ item.Title }}
-      </li>
-    </ul>
+  <div class="wrap">
+    <div
+      class="center_1200"
+      :style="{
+        '--maxWidth': themeColor + 'px',
+        '--minWidth': '-' + themeColor + 'px',
+      }"
+    >
+      <ul class="ul_style">
+        <li
+          v-for="(item, index) in lists"
+          :key="index"
+          class="li_style"
+          @click="jumpWL(item)"
+        >
+          {{ item.Title }}
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 <script>
@@ -24,9 +32,16 @@ export default {
     },
   }, // 父组件传入数据， 数组形式 [{}]
   data() {
-    return {};
+    return {
+      themeColor: 0,
+    };
+  },
+  updated() {
+    if (!this.themeColor) {
+      this.themeColor =
+        document.getElementsByClassName("ul_style")[0].scrollWidth;
+    }
   },
-  mounted() {},
   methods: {
     jumpWL(e) {
       window.open(e.Friendlinks, "_blank");
@@ -36,33 +51,32 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.ul_style {
-  display: flex;
-  align-items: center;
-  word-break: keep-all;
-  animation: ulAnimation 60s linear infinite;
-  .li_style {
-    font-size: 14px;
-    margin-right: 36px;
-    cursor: pointer;
-    user-select: none;
+.center_1200 {
+  .ul_style {
+    display: flex;
+    align-items: center;
+    word-break: keep-all;
+    animation: ulAnimation 40s linear infinite;
+    .li_style {
+      font-size: 14px;
+      margin-right: 36px;
+      cursor: pointer;
+      user-select: none;
+      &:hover {
+        color: red;
+      }
+    }
     &:hover {
-      color: red;
+      animation-play-state: paused;
     }
   }
-  &:hover {
-    animation-play-state: paused;
-  }
-}
-@keyframes ulAnimation {
-  0% {
-    transform: translateX(-50vw);
-  }
-  50% {
-    transform: translateX(100vw);
-  }
-  100% {
-    transform: translateX(-50vw);
+  @keyframes ulAnimation {
+    0% {
+      transform: translateX(var(--minWidth));
+    }
+    100% {
+      transform: translateX(var(--maxWidth));
+    }
   }
 }
 </style>

src/components/footer/index.vue

@@ -31,6 +31,8 @@ export default {
   text-align: center;
   padding-bottom: 20px;
   padding-top: 20px;
+  height: 96px;
+  flex-shrink: 0;
 }
 .footer p {
   color: #aaa;

src/components/membership/index.vue

@@ -279,9 +279,13 @@ export default {
   methods: {
     showInit(e, name) {
       if (e) {
-        this.ruleForm = e;
-        if (name === "backTai") {
+        if(name === "backTai"){
+        this.$api.XfSysBussinessGetMemberModel(e).then(res => {
+          this.ruleForm = res.Data
           this.backTai = true;
+        })
+        }else{
+          this.ruleForm = e
         }
       } else {
         this.ruleForm = { CompanyTypeName: "", MemberLevel: "" };

src/components/nav-tab/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 60px" ref="pronbit">
+  <div style="height: 60px; flex-shrink: 0" ref="pronbit">
     <div class="navbar" :class="fix ? 'navbar_fix' : ''">
       <!--导航栏-->
       <div class="nav_box center_1200">
@@ -158,13 +158,13 @@ export default {
 // ::v-deep .el-submenu__title {
 //   font-size: 20px;
 // }
-::v-deep .el-menu-item *{
+::v-deep .el-menu-item * {
   vertical-align: unset;
 }
-::v-deep .el-submenu > .el-submenu__title{
+::v-deep .el-submenu > .el-submenu__title {
   font-size: 20px;
 }
-.el-menu--horizontal > .el-menu-item{
+.el-menu--horizontal > .el-menu-item {
   font-size: 20px;
 }
 ::v-deep .el-menu.el-menu--horizontal {
@@ -197,10 +197,10 @@ export default {
   color: #fff;
 }
 .navbar {
+  height: 60px;
   font-size: 20px;
   background-color: #3975c6;
   & > .nav_box {
-    height: 60px;
     display: flex;
     align-items: center;
     justify-content: space-between;

src/components/table/index.vue

@@ -34,13 +34,18 @@
                 }}</span>
               </template>
             </div>
-            <el-image
-              v-else-if="item.scope === 'image'"
-              style="width: 100px"
-              :src="$methods.splitImgHost(scope.row[item.prop])"
-              :preview-src-list="[$methods.splitImgHost(scope.row[item.prop])]"
-            >
-            </el-image>
+            <div v-else-if="item.scope === 'image'">
+              <el-image
+                v-if="scope.row[item.prop]"
+                style="width: 100px"
+                :src="$methods.splitImgHost(scope.row[item.prop])"
+                :preview-src-list="[
+                  $methods.splitImgHost(scope.row[item.prop]),
+                ]"
+              >
+              </el-image>
+              <span></span>
+            </div>
             <el-input-number
               v-else-if="item.scope === 'input'"
               style="width: 100%"

src/components/top-header/index.vue

@@ -129,6 +129,7 @@ export default {
   height: 180px;
   background: url("../../assets/images/BG_db@2x.png") no-repeat center center;
   background-size: cover;
+  flex-shrink: 0;
 }
 .main-cen {
   max-width: 1200px;

src/layout/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div class="layoutBox">
     <Top-header></Top-header>
     <Nav-tab> </Nav-tab>
-    <router-view />
+    <router-view style="flex: 1" />
     <Footer></Footer>
   </div>
 </template>
@@ -20,4 +20,10 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.layoutBox {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>

src/views/System/contentSet/article/index.vue

@@ -102,6 +102,10 @@ export default {
             },
           ],
         },
+        {
+          label: "标题：",
+          prop: "Title",
+        },
       ],
       formData: { pageindex: 1, pagesize: 10 },
       tableData: [],

src/views/System/contentSet/article/operation.vue

@@ -43,7 +43,11 @@
                 :preview-src-list="[$methods.splitImgHost(ruleForm.ImageUrl)]"
               >
               </el-image>
-              <label for="uploads"><span class="btn">上传图片</span></label>
+              <label for="uploads" style="vertical-align: text-bottom"
+                ><span class="btn">{{
+                  ruleForm.ImageUrl ? "更换图片" : "上传图片"
+                }}</span></label
+              >
               <input
                 type="file"
                 id="uploads"
@@ -132,9 +136,9 @@ export default {
       },
       rules: {
         Title: [{ required: true, message: "请输入标题", trigger: "blur" }],
-        ImageUrl: [
-          { required: true, message: "请上传图片", trigger: "change" },
-        ],
+        // ImageUrl: [
+        //   { required: true, message: "请上传图片", trigger: "change" },
+        // ],
         MenuId: [
           {
             required: true,
@@ -169,8 +173,8 @@ export default {
       if (file === undefined) {
         return;
       }
-      if (file.size > 0.6 * 1024 * 1024) {
-        self.$message.error("图片不得大于600kb");
+      if (file.size > 0.9 * 1024 * 1024) {
+        self.$message.error("图片不得大于900kb");
         return;
       }
       var type = e.target.value.toLowerCase().split(".").splice(-1);
@@ -185,7 +189,7 @@ export default {
         .XfSysBussinessUploadFile(formDatas)
         .then((res) => {
           this.$set(this.ruleForm, "ImageUrl", res.Data);
-          this.$refs["ruleForm"].validateField("ImageUrl");
+          // this.$refs["ruleForm"].validateField("ImageUrl");
         })
         .finally(() => {
           e.target.value = "";
@@ -213,4 +217,29 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.btn {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  border: 1px solid #dcdfe6;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: none;
+  margin: 0;
+  margin-left: 14px;
+  transition: 0.1s;
+  font-weight: 500;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  padding: 8px 16px;
+  font-size: 14px;
+  border-radius: 4px;
+  color: #fff;
+  background-color: #409eff;
+  border-color: #409eff;
+}
+</style>

src/views/System/contentSet/homeSet/index.vue

@@ -188,7 +188,7 @@ export default {
     del(item, k) {
       this.$api
         .XfSysBussinessEditNewPositionStatus({
-          ids: item.NewPositionId,
+          idarr: [item.NewPositionId],
           type: k,
         })
         .then((res) => {

src/views/System/vip/audit/index.vue

@@ -20,7 +20,7 @@
       <template #right="scope">
         <el-button
           v-permission="'vip:list:edit'"
-          v-if="formData.Status != 3"
+          v-if="formData.Status != 3 && scope.row.ShowShenHe === 1"
           @click="edit(scope.row)"
           type="text"
           size="small"
@@ -256,7 +256,7 @@ export default {
 
     edit(item) {
       this.$refs.membership.showInit(
-        JSON.parse(JSON.stringify(item)),
+        item.MemberId,
         "backTai"
       );
     },

src/views/System/vip/list/index.vue

@@ -230,10 +230,7 @@ export default {
         });
     },
     edit(item) {
-      this.$refs.membership.showInit(
-        JSON.parse(JSON.stringify(item)),
-        "backTai"
-      );
+      this.$refs.membership.showInit(item.MemberId, "backTai");
     },
     editStatus(item) {
       this.$api

src/views/System/vip/notice/operation.vue

@@ -31,17 +31,19 @@
           </el-col>
           <el-col :span="24">
             <Search
+              v-if="!disClick"
               ref="search"
               :formList="formList"
               :formData="formData"
               @onSubmit="search"
             ></Search>
             <Table
+              v-if="dialogVisible"
               :loading="loading"
               :tableData="tableData"
-              :tableList="tableList"
+              :tableList="tableList(disClick)"
               :rowKey="'MemberId'"
-              :check="true"
+              :check="disClick ? false : true"
               ref="tables"
               :rightStatus="false"
               @selectionChange="selectionChange"
@@ -49,6 +51,7 @@
               <template #right="scope"> </template>
             </Table>
             <Pagination
+              v-if="!disClick"
               :pageindex="formData.pageindex"
               :pagesize="formData.pagesize"
               :total="total"
@@ -107,72 +110,98 @@ export default {
         },
       ],
       tableData: [],
-      // 表单
-      tableList: [
-        {
-          label: "单位归类",
-          prop: "CompanyTypeName",
-        },
-        {
-          label: "账号",
-          prop: "Account",
-        },
-        {
-          label: "单位名称",
-          prop: "MemberName",
-        },
-        {
-          label: "负责人电话",
-          prop: "Mobile",
-        },
-        {
-          label: "会员级别",
-          prop: "MemberLevelName",
-        },
-        {
-          label: "企业负责人",
-          prop: "LegalPerson",
-        },
-        {
-          label: "经办人",
-          prop: "Operator",
-        },
-        {
-          label: "入会代表是否法人",
-          prop: "OperIsLegal",
-          scope: "options",
-          options: [
-            { label: "是", value: true },
-            { label: "否", value: false },
-          ],
-        },
-        {
-          label: "联系人电话",
-          prop: "OperatorPhone",
-        },
-        {
-          label: "日常工作联络人",
-          prop: "DailyOperator",
-        },
-        {
-          label: "电子邮箱",
-          prop: "Email",
-        },
-        {
-          label: "状态",
-          prop: "Status",
-          scope: "options",
-          options: [
-            { label: "启用", value: 1 },
-            { label: "停用", value: 0 },
-            { label: "待审核", value: 2 },
-          ],
-        },
-      ],
       total: 0,
       disClick: false,
     };
   },
+  computed: {
+    tableList: function () {
+      return function (bols) {
+        var a = [
+          {
+            label: "单位归类",
+            prop: "CompanyTypeName",
+          },
+          {
+            label: "账号",
+            prop: "Account",
+          },
+          {
+            label: "单位名称",
+            prop: "MemberName",
+          },
+          {
+            label: "负责人电话",
+            prop: "Mobile",
+          },
+          {
+            label: "会员级别",
+            prop: "MemberLevelName",
+          },
+          {
+            label: "企业负责人",
+            prop: "LegalPerson",
+          },
+          {
+            label: "经办人",
+            prop: "Operator",
+          },
+          {
+            label: "入会代表是否法人",
+            prop: "OperIsLegal",
+            scope: "options",
+            options: [
+              { label: "是", value: true },
+              { label: "否", value: false },
+            ],
+          },
+          {
+            label: "联系人电话",
+            prop: "OperatorPhone",
+          },
+          {
+            label: "日常工作联络人",
+            prop: "DailyOperator",
+          },
+          {
+            label: "电子邮箱",
+            prop: "Email",
+          },
+          {
+            label: "状态",
+            prop: "Status",
+            scope: "options",
+            options: [
+              { label: "启用", value: 1 },
+              { label: "停用", value: 0 },
+              { label: "待审核", value: 2 },
+            ],
+          },
+        ];
+        var b = [
+          {
+            label: "发送状态",
+            prop: "MsgStatusName",
+          },
+          {
+            label: "结果说明",
+            prop: "ReturnMsg",
+            width: "200",
+          },
+          {
+            label: "发送时间",
+            prop: "SendDate",
+            scope: "time",
+            width: "120",
+          },
+        ];
+        if (bols) {
+          var c = b.concat(a);
+        }
+        return bols ? c : a;
+      };
+    },
+  },
   methods: {
     selectionChange(e) {
       this.ruleForm.ItemList = e;
@@ -182,9 +211,7 @@ export default {
         this.disClick = true;
         this.$api.XfSysBussinessGetActivity(e).then((res) => {
           this.ruleForm = res.Data;
-          res.Data.ItemList.forEach((item) => {
-            this.$refs.tables.$refs.table.toggleRowSelection(item);
-          });
+          this.tableData = res.Data.ItemList;
         });
       } else {
         this.disClick = false;
@@ -195,7 +222,9 @@ export default {
         };
       }
       this.formData = { pageindex: 1, pagesize: 10 };
-      this.search();
+      if (!this.disClick) {
+        this.search();
+      }
       this.dialogVisible = true;
     },
     clearCheck() {

src/views/home/index.vue

@@ -1,13 +1,17 @@
 <template>
   <div id="home">
     <div
-      style="width: 1200px; background-color: #fff; padding: 28px 28px 58px"
+      style="width: 1200px; background-color: #fff; padding: 28px"
       class="center_1200"
     >
       <div class="newClass">
         <div class="logo"></div>
         <ul class="uls">
-          <li class="lis" v-for="(item, index) in tableData">
+          <li
+            class="lis"
+            v-for="(item, index) in tableData"
+            @click="jumpInfo(item)"
+          >
             <div class="top">
               {{ item.Title }}
             </div>
@@ -15,7 +19,7 @@
               <div class="left">
                 {{ $methods.onlyFormaHao(item.CreateTime, false) }}
               </div>
-              <div class="right" @click="jumpInfo(item)">【详细】</div>
+              <div class="right">【详细】</div>
             </div>
           </li>
         </ul>
@@ -35,8 +39,13 @@
           </el-carousel-item>
         </el-carousel>
         <el-tabs type="border-card" style="width: 560px; height: 350px">
-          <el-tab-pane label="通知通告" class="tabBox">
+          <el-tab-pane label="通知公告" class="tabBox">
             <ul>
+              <el-empty
+                :image-size="100"
+                description="暂无数据"
+                v-if="notList.length === 0"
+              ></el-empty>
               <li
                 class="li_list"
                 v-for="(item, index) in notList"
@@ -50,7 +59,7 @@
                 </div>
               </li>
             </ul>
-            <div style="text-align: center">
+            <div style="text-align: center" v-if="notList.length > 0">
               <el-pagination
                 class="paginations"
                 @current-change="handleCurrentChange"
@@ -62,6 +71,102 @@
               </el-pagination>
             </div>
           </el-tab-pane>
+          <el-tab-pane label="协会动态" class="tabBox">
+            <ul>
+              <el-empty
+                :image-size="100"
+                description="暂无数据"
+                v-if="list1.length === 0"
+              ></el-empty>
+              <li
+                class="li_list"
+                v-for="(item, index) in list1"
+                :key="index"
+                @click="jumpInfo(item)"
+              >
+                <i>●</i>
+                <div class="title_li">{{ item.Title }}</div>
+                <div class="time_li">
+                  {{ $methods.onlyFormaHao(item.NewsCreateTime, false) }}
+                </div>
+              </li>
+            </ul>
+            <div style="text-align: center" v-if="list1.length > 0">
+              <el-pagination
+                class="paginations"
+                @current-change="handleCurrentChange1"
+                :current-page.sync="formData1.pageindex"
+                :page-size="formData1.pagesize"
+                layout="total, prev, pager, next"
+                :total="total1"
+              >
+              </el-pagination>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="行业新闻" class="tabBox">
+            <ul>
+              <el-empty
+                :image-size="100"
+                description="暂无数据"
+                v-if="list2.length === 0"
+              ></el-empty>
+              <li
+                class="li_list"
+                v-for="(item, index) in list2"
+                :key="index"
+                @click="jumpInfo(item)"
+              >
+                <i>●</i>
+                <div class="title_li">{{ item.Title }}</div>
+                <div class="time_li">
+                  {{ $methods.onlyFormaHao(item.NewsCreateTime, false) }}
+                </div>
+              </li>
+            </ul>
+            <div style="text-align: center" v-if="list2.length > 0">
+              <el-pagination
+                class="paginations"
+                @current-change="handleCurrentChange2"
+                :current-page.sync="formData2.pageindex"
+                :page-size="formData2.pagesize"
+                layout="total, prev, pager, next"
+                :total="total2"
+              >
+              </el-pagination>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="政策法规" class="tabBox">
+            <ul>
+              <el-empty
+                :image-size="100"
+                description="暂无数据"
+                v-if="list3.length === 0"
+              ></el-empty>
+              <li
+                class="li_list"
+                v-for="(item, index) in list3"
+                :key="index"
+                @click="jumpInfo(item)"
+              >
+                <i>●</i>
+                <div class="title_li">{{ item.Title }}</div>
+                <div class="time_li">
+                  {{ $methods.onlyFormaHao(item.NewsCreateTime, false) }}
+                </div>
+              </li>
+            </ul>
+            <div style="text-align: center" v-if="list3.length > 0">
+              <el-pagination
+                class="paginations"
+                @current-change="handleCurrentChange3"
+                :current-page.sync="formData3.pageindex"
+                :page-size="formData3.pagesize"
+                layout="total, prev, pager, next"
+                :total="total3"
+              >
+              </el-pagination>
+            </div>
+          </el-tab-pane>
         </el-tabs>
       </div>
       <div class="margin_28">
@@ -75,116 +180,6 @@
           <span>{{ item.label }}</span>
         </div>
       </div>
-      <div class="dis_flex_px">
-        <div class="li_px">
-          <div class="header_px">
-            <span class="left">协会动态</span>
-          </div>
-          <ul class="ul_px">
-            <el-empty
-              :image-size="100"
-              description="暂无数据"
-              v-if="list1.length === 0"
-            ></el-empty>
-            <li
-              class="li_list"
-              v-for="(item, index) in list1"
-              :key="index"
-              @click="jumpInfo(item)"
-            >
-              <i>●</i>
-              <div class="title_li">{{ item.Title }}</div>
-              <div class="time_li">
-                {{ $methods.onlyFormaHao(item.NewsCreateTime, false) }}
-              </div>
-            </li>
-          </ul>
-          <div class="paginationBox">
-            <el-pagination
-              v-if="list1.length !== 0"
-              class="paginations"
-              @current-change="handleCurrentChange1"
-              :current-page.sync="formData1.pageindex"
-              :page-size="formData1.pagesize"
-              layout="total, prev, pager, next"
-              :total="total1"
-            >
-            </el-pagination>
-          </div>
-        </div>
-        <div class="li_px">
-          <div class="header_px">
-            <span class="left">行业新闻</span>
-          </div>
-          <ul class="ul_px">
-            <el-empty
-              :image-size="100"
-              description="暂无数据"
-              v-if="list2.length === 0"
-            ></el-empty>
-            <li
-              class="li_list"
-              v-for="(item, index) in list2"
-              :key="index"
-              @click="jumpInfo(item)"
-            >
-              <i>●</i>
-              <div class="title_li">{{ item.Title }}</div>
-              <div class="time_li">
-                {{ $methods.onlyFormaHao(item.NewsCreateTime, false) }}
-              </div>
-            </li>
-          </ul>
-          <div class="paginationBox">
-            <el-pagination
-              v-if="list2.length !== 0"
-              class="paginations"
-              @current-change="handleCurrentChange2"
-              :current-page.sync="formData2.pageindex"
-              :page-size="formData2.pagesize"
-              layout="total, prev, pager, next"
-              :total="total2"
-            >
-            </el-pagination>
-          </div>
-        </div>
-        <div class="li_px">
-          <div class="header_px">
-            <span class="left">政策法规</span>
-          </div>
-          <ul class="ul_px">
-            <el-empty
-              :image-size="100"
-              description="暂无数据"
-              v-if="list3.length === 0"
-            ></el-empty>
-            <li
-              class="li_list"
-              v-for="(item, index) in list3"
-              :key="index"
-              @click="jumpInfo(item)"
-            >
-              <i>●</i>
-              <div class="title_li">{{ item.Title }}</div>
-              <div class="time_li">
-                {{ $methods.onlyFormaHao(item.NewsCreateTime, false) }}
-              </div>
-            </li>
-          </ul>
-          <div class="paginationBox">
-            <el-pagination
-              v-if="list3.length !== 0"
-              class="paginations"
-              @current-change="handleCurrentChange3"
-              :current-page.sync="formData3.pageindex"
-              :page-size="formData3.pagesize"
-              layout="total, prev, pager, next"
-              :total="total3"
-            >
-            </el-pagination>
-          </div>
-        </div>
-      </div>
       <div class="vipBox">
         <div class="top">
           <span class="left">会员天地</span
@@ -210,11 +205,20 @@
             v-bind:options="swiperOptions"
           >
             <swiper-slide v-for="(item, index) in list4" :key="index">
-              <img
-                style="width: 100%; height: 170px"
-                :src="$methods.splitImgHost(item.NewsImg)"
-                alt=""
-              />
+              <div
+                style="
+                  width: 100%;
+                  height: 170px;
+                  display: flex;
+                  align-items: center;
+                "
+              >
+                <img
+                  style="width: 100%; max-height: 170px"
+                  :src="$methods.splitImgHost(item.NewsImg)"
+                  alt=""
+                />
+              </div>
               <p class="p_text">
                 {{ item.Title }}
               </p>
@@ -229,13 +233,15 @@
       </div>
     </div>
     <div class="infoBox">
-      <div class="center_1200 dis_ffx">
-        <img :src="$methods.splitImgHost(list5.NewsImg)" alt="" />
-        <div class="text_r">
-          <h2>{{ list5.Title }}</h2>
-          <p v-html="list5.NewContent"></p>
-        </div>
+      <div class="top_s">
+        <!-- <h2>{{ list5.Title }}</h2> -->
+        <div
+          class="ql-editor"
+          style="white-space: pre-wrap"
+          v-html="list5.NewContent"
+        ></div>
       </div>
+      <div class="imgs"></div>
     </div>
     <div style="padding: 15px 0px; overflow: hidden">
       <h2 class="link_s">友情链接</h2>
@@ -245,6 +251,7 @@
 </template>
 
 <script>
+import "quill/dist/quill.core.css";
 import { Swiper, SwiperSlide } from "vue-awesome-swiper";
 import "swiper/css/swiper.css";
 import Scroller from "@/components/Scroller/index.vue";
@@ -266,7 +273,7 @@ export default {
       swiperOptions: {
         slidesPerView: 4,
         spaceBetween: 20,
-        loop: false,
+        loop: true,
         autoplay: {
           delay: 3000,
           disableOnInteraction: false,
@@ -305,7 +312,7 @@ export default {
         pageindex: 1, //当前第几页
       },
       formData4: {
-        pagesize: 5, //每页内容条数
+        pagesize: 99, //每页内容条数
         pageindex: 1, //当前第几页
       },
       formData5: {
@@ -424,11 +431,17 @@ export default {
           this.total4 = res.Data.TotalCount;
         });
     },
-    //会员天地
+    //简介
     getList5() {
       this.$api
         .XfWebApiGetNewPositionList({ seat: 7, ...this.formData5 })
         .then((res) => {
+          if (res.Data && res.Data.List[0]) {
+            res.Data.List[0].NewContent = res.Data.List[0].NewContent.replace(
+              /<img/gi,
+              '<img style="max-width:100%;"'
+            );
+          }
           this.list5 = res.Data.List[0] || {};
         });
     },
@@ -483,44 +496,40 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-tabs--border-card > .el-tabs__header {
-  background-color: rgba(223, 225, 227, 0.659);
-}
 ::v-deep .carousel .el-carousel__indicators--horizontal {
   display: none;
 }
 .infoBox {
-  padding: 60px 0px 80px;
+  // padding: 0px 0px 0px;
   margin-top: 40px;
-  background: url("../../assets/images/BG-1@2x.png") no-repeat center center;
+  background: url("../../assets/images/BG_bg-01.png") repeat center center;
   background-size: cover;
-  & > .dis_ffx {
-    display: flex;
-    & > img {
-      width: 381px;
-      height: 370px;
-      flex-shrink: 0;
-      margin-right: 80px;
-    }
-    & > .text_r {
-      flex: 1;
-      & > h2 {
-        margin-bottom: 17px;
-        font-size: 36px;
-        font-weight: 800;
-        color: #333333;
-      }
-      & > p {
-        font-size: 16px;
-        font-weight: 500;
-        color: #828282;
-      }
+  position: relative;
+  & > .top_s {
+    width: 1200px;
+    margin: 0 auto;
+    & > h2 {
+      text-align: center;
+      // margin-bottom: 17px;
+      font-size: 36px;
+      font-weight: 800;
+      padding: 0px 15px;
+      color: #333333;
     }
   }
+  & > .imgs {
+    height: 214px;
+    background: url("../../assets/images/BG_bg-02.png") no-repeat center center;
+    background-size: 100% 214px;
+    opacity: 0.1;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
 }
 #home {
-  background: url("../../assets/images/BG_01@2x.png") repeat center center;
-  background-size: contain;
+  background: url("../../assets/images/BG_01@2x.png") no-repeat top center;
+  background-size: 100% 1426px;
 }
 .p_text {
   word-break: break-all;
@@ -529,6 +538,7 @@ export default {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+  text-align: center;
 }
 .newClass {
   margin-bottom: 28px;
@@ -549,9 +559,11 @@ export default {
     align-items: center;
     .lis {
       margin-left: 45px;
+      user-select: none;
+      cursor: pointer;
       flex: 1;
       .top {
-        height: 36px;
+        height: 38px;
         color: #333333;
         margin-bottom: 14px;
         word-break: break-all;
@@ -588,8 +600,8 @@ export default {
     user-select: none;
     cursor: pointer;
     width: 269px;
-    height: 98px;
-    background-color: #ebebeb;
+    height: 67.5px;
+    background-color: rgba(181, 181, 182, 0.659);
     padding: 11px 24px;
     box-sizing: border-box;
     border: 1px solid #3975c6;
@@ -601,8 +613,8 @@ export default {
       box-shadow: 0px 0px 8px 4px rgba($color: #3975c6, $alpha: 0.5);
     }
     img {
-      width: 88px;
-      height: 79px;
+      width: 70.4px;
+      height: 63.2px;
       margin-right: 19px;
     }
     span {
@@ -612,54 +624,8 @@ export default {
     }
   }
 }
-.dis_flex_px {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  & > .li_px {
-    width: 368px;
-    height: 314px;
-    border: 1px solid #e0e0e0;
-    display: flex;
-    flex-direction: column;
-    & > .header_px {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: 45px;
-      border-bottom: 1px solid #e0e0e0;
-      background: rgb(234, 235, 237);
-      & > .left {
-        width: 120px;
-        height: 45px;
-        line-height: 46px;
-        text-align: center;
-        font-weight: bold;
-        font-size: 20px;
-        color: #fff;
-        background-color: #3975c6;
-      }
-      & > .right {
-        user-select: none;
-        cursor: pointer;
-        font-size: 15px;
-        color: #3975c6;
-        margin-right: 20px;
-      }
-    }
-    & > .ul_px {
-      flex: 1;
-      height: 1px;
-      padding: 10px 20px 4px;
-    }
-    & > .paginationBox {
-      height: 34px;
-      text-align: center;
-    }
-  }
-}
 .vipBox {
-  margin-top: 48px;
+  margin-top: 32px;
   border: 1px solid #e0e0e0;
   .top {
     display: flex;
@@ -667,7 +633,7 @@ export default {
     justify-content: space-between;
     padding: 0px 24px;
     height: 46px;
-    background-color: #f0f0f0;
+    background-color: rgba(181, 181, 182, 0.659);
     & > .left {
       font-weight: bold;
       font-size: 20px;
@@ -889,9 +855,21 @@ export default {
 .el-carousel__item:nth-child(2n + 1) {
   background-color: #d3dce6;
 }
+::v-deep .el-tabs--border-card > .el-tabs__header {
+  background-color: rgb(247, 247, 247);
+  border-bottom: none;
+}
+::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
+  // color: #3975c6;
+  // font-weight: bold;
+  // background-color: #fff;
+  border: 1px solid transparent;
+  border-top: 3px solid transparent;
+}
 ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
   color: #3975c6;
   font-weight: bold;
   border-top: 3px solid #3975c6;
+  background-color: rgb(247, 247, 247);
 }
 </style>

src/views/info/index.vue

@@ -13,7 +13,11 @@
             <share :config="config">分享</share>
           </div>
         </div>
-        <div class="content" v-html="infoData.NewContent"></div>
+        <div
+          class="ql-editor"
+          style="white-space: pre-wrap;height:auto"
+          v-html="infoData.NewContent"
+        ></div>
       </div>
       <div class="right">
         <div class="dis_btw">
@@ -39,6 +43,7 @@
 </template>
 
 <script>
+import "quill/dist/quill.core.css";
 import Share from "vue-social-share";
 import "@/assets/css/client.css";
 export default {
@@ -108,6 +113,10 @@ export default {
       this.$api
         .XfWebApiGetNewsDetail({ newsid: this.routerData.NewsId })
         .then((res) => {
+          res.Data.NewContent = res.Data.NewContent.replace(
+            /<img/gi,
+            '<img style="max-width:100%;"'
+          );
           this.infoData = res.Data;
           console.log("res.Data", res.Data);
         });
@@ -152,7 +161,7 @@ export default {
 <style lang="scss" scoped>
 .big_img {
   width: 100%;
-  height: 500px;
+  height: 250px;
   img {
     width: 100%;
     height: 100%;

src/views/menuList/index.vue

@@ -6,7 +6,7 @@
     <div class="mer_top center_1200">
       <div class="ins-nav">
         <div class="top_s">
-          <h1>{{ routerNs[0].Name }}</h1>
+          <h1 style="font-size: 100%">{{ routerNs[0].Name }}</h1>
           <span></span>
           <p>introduce</p>
         </div>
@@ -37,7 +37,12 @@
           </el-breadcrumb>
         </div>
         <el-main v-loading="loading" v-if="ShowType == 1">
-          <div v-if="listData.length > 0" v-html="listData[0].NewContent"></div>
+          <div
+            v-if="listData.length > 0"
+            class="ql-editor"
+            style="white-space: pre-wrap"
+            v-html="listData[0].NewContent"
+          ></div>
           <el-empty v-else :image-size="200"></el-empty>
         </el-main>
         <el-main v-loading="loading" v-else>
@@ -49,8 +54,8 @@
               :key="index"
               @click="jumpInfo(item)"
             >
-              {{ item.Title
-              }}<span style="color: #aaa; font-size: 14px; word-spacing: 0px">{{
+              <span class="title_">{{ item.Title }}</span
+              ><span class="time">{{
                 $methods.onlyFormaHao(item.CreateTime)
               }}</span>
             </li>
@@ -71,6 +76,7 @@
 </template>
 
 <script>
+import "quill/dist/quill.core.css";
 export default {
   data() {
     return {
@@ -109,6 +115,9 @@ export default {
         } else {
           if (data[i].ChildList && data[i].ChildList.length > 0) {
             array = this.getCl(data[i].ChildList, pid);
+            if (array.length > 0) {
+              break;
+            }
           }
         }
       }
@@ -134,6 +143,7 @@ export default {
         this.$store.state.asyncRouter,
         this.$route.query.ParentId
       );
+      console.log(this.routerNs, "routerNs");
       // this.routerNs = this.$store.state.asyncRouter.filter(
       //   (item) => item.MenuId == this.$route.query.ParentId
       // );
@@ -145,6 +155,12 @@ export default {
         .XfWebApiGetNewsList(this.formData)
         .then((res) => {
           this.listData = res.Data.List || [];
+          if (this.ShowType == 1 && this.listData.length > 0) {
+            this.listData[0].NewContent = this.listData[0].NewContent.replace(
+              /<img/gi,
+              '<img style="max-width:100%;"'
+            );
+          }
           this.total = res.Data.TotalCount;
         })
         .finally(() => {
@@ -200,7 +216,7 @@ export default {
 }
 .big_img {
   width: 100%;
-  height: 500px;
+  height: 250px;
   img {
     width: 100%;
     height: 100%;
@@ -279,11 +295,22 @@ export default {
   color: #666;
   cursor: pointer;
   transition: all 0.3s;
+  display: flex;
+  align-items: center;
   &:hover {
     color: #c9001f;
   }
-  & > span {
-    float: right;
+  & > .title_ {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  & > .time {
+    width: 140px;
+    color: #aaa;
+    font-size: 14px;
+    word-spacing: 0px;
   }
 }
 </style>

src/views/searchKey/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="">
-    <div class="center_1200">
-      <el-main v-loading="loading">
+    <div class="center_1200" style="height: 100%">
+      <el-main v-loading="loading" class="main_style">
         <ul style="width: 918px; margin: 0 auto" v-if="notList.length > 0">
           <li
             class="li_list"
@@ -88,6 +88,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.main_style {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  & > ul {
+    flex: 1;
+  }
+}
 .li_list {
   display: flex;
   align-items: center;
@@ -114,5 +122,7 @@ export default {
 .paginations {
   text-align: center;
   margin: 20px;
+  height: 32px;
+  flex-shrink: 0;
 }
 </style>