fix

src/components/editor.js

@@ -6,8 +6,8 @@ export default {
   //skin:'oxide-dark',
   language: 'zh_CN',
   language_url: './styles/tinymce/langs/zh_CN.js',
-  plugins: 'print powerpaste preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template advcode codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize formatpainter paragraphspacing',
+  plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize formatpainter paragraphspacing',
-  toolbar: 'code undo redo restoredraft | cut copy powerpaste pastetext | forecolor backcolor headings fontsize lineHeight bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify | \
+  toolbar: 'code undo redo restoredraft | cut copy pastetext | forecolor backcolor headings fontsize lineHeight bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify | \
     styleselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
     table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | indent2em formatpainter | paragraphspacing',
   style_formats: [
@@ -212,7 +212,8 @@ export default {
   },
   //为内容模板插件提供预置模板
   templates: [
-      { title: '中文文章模板1', description: '图片文字流', content: `
+    {
+      title: '中文文章模板1', description: '图片文字流', content: `
         <div class="tiny-wrap">
           <div class="block">
             <div class="fl">
@@ -237,7 +238,8 @@ export default {
         </div>
         `
     },
-      { title: '英文文章模板1', description: '图片文字流', content: `
+    {
+      title: '英文文章模板1', description: '图片文字流', content: `
         <div class="tiny-wrap">
           <div class="block en-block">
             <div class="fr">
@@ -256,7 +258,8 @@ export default {
         </div>
         `
     },
-      { title: '新闻模板', description: '', content: `
+    {
+      title: '新闻模板', description: '', content: `
         <div class="tiny-wrap">
           <div class="block" style="margin-bottom: 70px;">
             <div class="fr">
@@ -286,7 +289,8 @@ export default {
         </div>
         `
     },
-      { title: '图片描述', description: '', content: `
+    {
+      title: '图片描述', description: '', content: `
         <div class="tiny-wrap">
           <div class="block">
             <div class="img-wrap">

src/components/img-upload/Cropper.vue

@@ -3,31 +3,18 @@
     <div class="cropper-content">
       <!-- 剪裁框 -->
       <div class="cropper">
-        <vueCropper ref="cropper"
+        <vueCropper ref="cropper" :img="option.img" :output-size="option.size" :output-type="option.outputType"
-                    :img="option.img"
+          :info="true" :full="option.full" :can-move="option.canMove" :can-move-box="option.canMoveBox"
-                    :output-size="option.size"
+          :original="option.original" :auto-crop="option.autoCrop" :auto-crop-width="autoCropWidth"
-                    :output-type="option.outputType"
+          :auto-crop-height="autoCropHeight" :fixed-box="option.fixedBox" :fixed="fixed" :fixed-number="fixedNumber"
-                    :info="true"
-                    :full="option.full"
-                    :can-move="option.canMove"
-                    :can-move-box="option.canMoveBox"
-                    :original="option.original"
-                    :auto-crop="option.autoCrop"
-                    :auto-crop-width="autoCropWidth"
-                    :auto-crop-height="autoCropHeight"
-                    :fixed-box="option.fixedBox"
-                    :fixed="fixed"
-                    :fixed-number="fixedNumber"
           @realTime="realTime" />
         <!-- <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType"></vueCropper> -->
       </div>
       <!-- 预览框 -->
       <div class="show-preview"
         :style="{ 'width': '500px', 'height': '400px', 'overflow': 'hidden', 'margin': '0 25px', 'display': 'flex', 'align-items': 'center' }">
-        <div :style="previews.div"
+        <div :style="previews.div" class="preview">
-             class="preview">
+          <img :src="previews.url" :style="previews.img" />
-          <img :src="previews.url"
-               :style="previews.img" />
         </div>
       </div>
     </div>
@@ -41,10 +28,7 @@
       </div>-->
       <!-- 确认上传按钮 -->
       <div class="upload-btn">
-        <el-button type="primary"
+        <el-button type="primary" :loading="isUpload" :disabled="isDisabled" @click.prevent="uploadImg('blob')">
-                   :loading="isUpload"
-                   :disabled="isDisabled"
-                   @click.prevent="uploadImg('blob')">
           上传
         </el-button>
       </div>
@@ -95,7 +79,11 @@ export default {
     autoCropHeight: {
       type: Number,
       default: 124
-    }
+    },
+    dataType: {
+      type: String,
+      default: 'form'
+    },
   },
   data () {
     return {
@@ -114,6 +102,7 @@ export default {
         fixedNumber: [1, 0.26], // 截图框比例  (默认:[1:1])
         enlarge: 1
       },
+      imgType: this.dataType === 'form' ? 'image/png' : 'image/jpeg',
       isDisabled: false
     }
   },
@@ -147,9 +136,13 @@ export default {
       const that = this
       if (type === 'blob') {
         this.$refs.cropper.getCropBlob(data => {
-          // compress(data, 1).then(res => {
+          compress(data, {
-          that.$emit('upload', data)
+            size: 100,
-          // })
+            quality: 0.9,
+            type: this.imgType
+          }).then(res => {
+            that.$emit('upload', res)
+          })
         })
       } else {
         this.$refs.cropper.getCropData(data => {

src/components/modules/content.vue

@@ -1,117 +1,64 @@
 <template>
   <!-- 内容 -->
   <div>
-    <el-dialog title="编辑内容"
+    <el-dialog title="编辑内容" :visible.sync="visible" width="700px" custom-class="module" :close-on-click-modal="false"
-               :visible.sync="visible"
-               width="700px"
-               custom-class="module"
-               :close-on-click-modal="false"
       :before-close="close">
-      <el-form ref="form"
+      <el-form ref="form" :model="data.form" :rules="rules" :label-width="data.labelWidth">
-               :model="data.form"
+        <el-form-item v-for="(item, i) in data.forms" :key="i" :prop="item.prop" :label="item.label">
-               :rules="rules"
+          <el-input v-if="item.type === 'input'" v-model="data.form[item.prop]" placeholder="请输入"
-               :label-width="data.labelWidth">
-        <el-form-item v-for="(item, i) in data.forms"
-                      :key="i"
-                      :prop="item.prop"
-                      :label="item.label">
-          <el-input v-if="item.type === 'input'"
-                    v-model="data.form[item.prop]"
-                    placeholder="请输入"
             maxlength="100"></el-input>
-          <el-input v-if="item.type === 'textarea'"
+          <el-input v-if="item.type === 'textarea'" v-model="data.form[item.prop]" type="textarea" placeholder="请输入"
-                    v-model="data.form[item.prop]"
-                    type="textarea"
-                    placeholder="请输入"
             maxlength="300"></el-input>
-          <Editor v-if="item.type === 'editor'"
+          <Editor v-if="item.type === 'editor'" api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda'
-                  api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda'
+            v-model="data.form[item.prop]" :init="editorConfig" />
-                  v-model="data.form[item.prop]"
+          <el-upload v-if="item.type === 'upload' && item.width" class="uploader" accept=".jpg,.png,.jpeg,.gif"
-                  :init="editorConfig" />
+            :on-change="res => changeFile(res, data.form)" :show-file-list="false" :action="api.upload"
-          <el-upload v-if="item.type === 'upload' && item.width"
-                     class="uploader"
-                     accept=".jpg,.png,.jpeg,.gif"
-                     :on-change="res => changeFile(res, data.form)"
-                     :show-file-list="false"
-                     :action="api.upload"
             :auto-upload="false">
-            <img v-if="data.form[item.prop]"
+            <img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar">
-                 :src="data.form[item.prop]"
+            <div class="uploader-default" v-else>
-                 class="avatar">
-            <div class="uploader-default"
-                 v-else>
               <i class="el-icon-plus"></i>
               <p>上传图片</p>
             </div>
-            <div slot="tip"
+            <div slot="tip" class="el-upload__tip">
-                 class="el-upload__tip">
               <p>只支持.jpg,.png格式</p>
             </div>
           </el-upload>
-          <el-upload v-if="item.type === 'upload' && !item.width"
+          <el-upload v-if="item.type === 'upload' && !item.width" class="uploader" accept=".jpg,.png,.jpeg"
-                     class="uploader"
+            :on-success="res => uploadSuccess(res, data.form)" :show-file-list="false" :headers="headers"
-                     accept=".jpg,.png,.jpeg"
-                     :on-success="res => uploadSuccess(res, data.form)"
-                     :show-file-list="false"
-                     :headers="headers"
             :action="api.upload">
-            <img v-if="data.form[item.prop]"
+            <img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar">
-                 :src="data.form[item.prop]"
+            <div class="uploader-default" v-else>
-                 class="avatar">
-            <div class="uploader-default"
-                 v-else>
               <i class="el-icon-plus"></i>
               <p>上传图片</p>
             </div>
-            <div slot="tip"
+            <div slot="tip" class="el-upload__tip">
-                 class="el-upload__tip">
               <p>只支持.jpg,.png格式</p>
             </div>
           </el-upload>
           <template v-if="item.type === 'pic'">
-            <img v-if="data.form[item.prop]"
+            <img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar">
-                 :src="data.form[item.prop]"
+            <div class="uploader-default" v-else>
-                 class="avatar">
-            <div class="uploader-default"
-                 v-else>
               <i class="el-icon-picture-outline"></i>
             </div>
           </template>
-          <div v-if="item.type === 'link'"
+          <div v-if="item.type === 'link'" class="flex">
-               class="flex">
+            <el-input class="m-r-10" v-model="data.form.link.linkName"></el-input>
-            <el-input class="m-r-10"
-                      v-model="data.form.link.linkName"></el-input>
             <el-button @click="toLink(data.form)">设置链接</el-button>
           </div>
         </el-form-item>
       </el-form>
-      <span slot="footer"
+      <span slot="footer" class="dialog-footer">
-            class="dialog-footer">
         <el-button @click="$emit('update:visible', false)">取消</el-button>
-        <el-button type="primary"
+        <el-button type="primary" @click="contentSubmit">确定</el-button>
-                   @click="contentSubmit">确定</el-button>
       </span>
     </el-dialog>
 
-    <Link ref="link"
+    <Link ref="link" :visible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" />
-          :visible.sync="linkVisible"
-          :data.sync="linkForm"
-          @linkSubmit="linkSubmit" />
 
     <!-- 剪裁组件弹窗 -->
-    <el-dialog title="图片裁剪"
+    <el-dialog title="图片裁剪" append-to-body :visible.sync="cropperModel" width="1100px" :close-on-click-modal="false">
-               append-to-body
+      <Cropper ref="cropper" :img-file.sync="file" :is-upload="isUpload" :fixed="fixed" :fixedNumber.sync="fixedNumber"
-               :visible.sync="cropperModel"
+        :autoCropWidth="autoCropWidth" :autoCropHeight="autoCropHeight" :dataType="data.type" @upload="customUpload" />
-               width="1100px"
-               :close-on-click-modal="false">
-      <Cropper ref="cropper"
-               :img-file.sync="file"
-               :is-upload="isUpload"
-               :fixed="fixed"
-               :fixedNumber.sync="fixedNumber"
-               :autoCropWidth="autoCropWidth"
-               :autoCropHeight="autoCropHeight"
-               @upload="customUpload" />
     </el-dialog>
   </div>
 </template>
@@ -294,6 +241,7 @@ export default {
 .radio-wrap {
   display: flex;
   align-items: center;
+
   .el-input {
     width: 200px;
     margin-left: -40px;

src/components/modules/module.vue

@@ -3,40 +3,22 @@
     <!-- 
       模块type: introduce | form | forms | column | columns | history
      -->
-    <el-dialog title="模块管理"
+    <el-dialog title="模块管理" :visible.sync="visible" :width="dialogWidth" custom-class="module"
-               :visible.sync="visible"
+      :close-on-click-modal="false" :before-close="close">
-               :width="dialogWidth"
-               custom-class="module"
-               :close-on-click-modal="false"
-               :before-close="close">
       <template v-if="data.type === 'introduce'">
-        <el-table class="module-table"
+        <el-table class="module-table" :data="data.list" header-align="center" row-key="id">
-                  :data="data.list"
+          <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
-                  header-align="center"
-                  row-key="id">
-          <el-table-column type="index"
-                           width="60"
-                           label="序号"
-                           align="center"></el-table-column>
 
-          <el-table-column v-for="(item, i) in data.forms"
+          <el-table-column v-for="(item, i) in data.forms" :key="i" :prop="item.prop" :label="item.label"
-                           :key="i"
+            min-width="130" align="center">
-                           :prop="item.prop"
-                           :label="item.label"
-                           min-width="130"
-                           align="center">
             <template slot-scope="scope">
-              <div v-if="item.type === 'link' && scope.row.link"
+              <div v-if="item.type === 'link' && scope.row.link" class="link-wrap">
-                   class="link-wrap">
                 <span>{{ scope.row.link.linkName }}</span>
               </div>
 
               <template v-else-if="item.type === 'upload'">
-                <img v-if="scope.row.pic"
+                <img v-if="scope.row.pic" :src="scope.row.pic" class="upload-pic">
-                     :src="scope.row.pic"
+                <div class="upload-none" v-else>
-                     class="upload-pic">
-                <div class="upload-none"
-                     v-else>
                   <i class="el-icon-picture-outline"></i>
                 </div>
               </template>
@@ -45,241 +27,137 @@
             </template>
           </el-table-column>
 
-          <el-table-column label="操作"
+          <el-table-column label="操作" :width="data.sort ? 150 : 100" align="center">
-                           :width="data.sort ? 150 : 100"
-                           align="center">
             <template slot-scope="scope">
               <div class="flex a-center">
-                <el-switch v-model="scope.row.isEnable"
+                <el-switch v-model="scope.row.isEnable" :active-value="1" :inactive-value="0">
-                           :active-value="1"
-                           :inactive-value="0">
                 </el-switch>
-                <i class="el-icon-edit-outline del"
+                <i class="el-icon-edit-outline del" @click="editIntro(scope.row, scope.$index)"></i>
-                   @click="editIntro(scope.row, scope.$index)"></i>
                 <template v-if="data.sort">
-                  <i v-if="scope.$index != data.list.length - 1"
+                  <i v-if="scope.$index != data.list.length - 1" class="el-icon-bottom del"
-                     class="el-icon-bottom del"
                     @click="sort(1, scope.$index)"></i>
-                  <i v-if="scope.$index"
+                  <i v-if="scope.$index" class="el-icon-top del" @click="sort(0, scope.$index)"></i>
-                     class="el-icon-top del"
-                     @click="sort(0, scope.$index)"></i>
                 </template>
-                <i class="el-icon-delete del"
+                <i class="el-icon-delete del" @click="delRow(data.list, scope.$index)"></i>
-                   @click="delRow(data.list, scope.$index)"></i>
               </div>
             </template>
           </el-table-column>
         </el-table>
         <div class="plus">
-          <i class="el-icon-circle-plus-outline"
+          <i class="el-icon-circle-plus-outline" @click="addRow"></i>
-             @click="addRow"></i>
         </div>
       </template>
-      <el-form v-else-if="data.type === 'form' || data.type === 'forms'"
+      <el-form v-else-if="data.type === 'form' || data.type === 'forms'" ref="form" :model="data.form" :rules="rules"
-               ref="form"
-               :model="data.form"
-               :rules="rules"
         :label-width="data.labelWidth">
-        <el-form-item v-for="(item, i) in data.forms"
+        <el-form-item v-for="(item, i) in data.forms" :key="i" :prop="item.prop" :label="item.label">
-                      :key="i"
+          <el-input v-if="item.type === 'input'" v-model="data.form[item.prop]" placeholder="请输入"
-                      :prop="item.prop"
-                      :label="item.label">
-          <el-input v-if="item.type === 'input'"
-                    v-model="data.form[item.prop]"
-                    placeholder="请输入"
             maxlength="100"></el-input>
-          <el-input v-if="item.type === 'textarea'"
+          <el-input v-if="item.type === 'textarea'" v-model="data.form[item.prop]" type="textarea" placeholder="请输入"
-                    v-model="data.form[item.prop]"
-                    type="textarea"
-                    placeholder="请输入"
             maxlength="300"></el-input>
-          <div v-if="item.type === 'upload' || item.type === 'video' || item.type === 'media'"
+          <div v-if="item.type === 'upload' || item.type === 'video' || item.type === 'media'" class="uploader-wrap">
-               class="uploader-wrap">
+            <el-upload v-if="item.type === 'upload'" class="uploader" accept=".jpg,.png,.jpeg,.gif"
-            <el-upload v-if="item.type === 'upload'"
+              :on-change="res => changeFile(res, data.form)" :show-file-list="false" :headers="headers"
-                       class="uploader"
-                       accept=".jpg,.png,.jpeg,.gif"
-                       :on-change="res => changeFile(res, data.form)"
-                       :show-file-list="false"
-                       :headers="headers"
               :action="api.upload">
-              <img v-if="data.form.pic && !isVideo(data.form.mediaType)"
+              <img v-if="data.form.pic && !isVideo(data.form.mediaType)" :src="data.form.pic" class="avatar">
-                   :src="data.form.pic"
+              <div class="uploader-default" v-else>
-                   class="avatar">
-              <div class="uploader-default"
-                   v-else>
                 <i class="el-icon-plus"></i>
                 <p>上传图片</p>
               </div>
-              <div slot="tip"
+              <div slot="tip" class="el-upload__tip">
-                   class="el-upload__tip">
                 <p>只支持.jpg,.png格式</p>
               </div>
             </el-upload>
-            <el-upload v-if="item.type === 'video'"
+            <el-upload v-if="item.type === 'video'" accept=".mp4,.mov,.avi"
-                       accept=".mp4,.mov,.avi"
+              :on-success="res => uploadSuccess(res, data.form, item)" :before-remove="beforeRemove"
-                       :on-success="res => uploadSuccess(res, data.form, item)"
+              :on-remove="(file, fileList) => handleRemove(file, fileList, data.form, item.prop)" :file-list="fileList"
-                       :before-remove="beforeRemove"
+              :headers="headers" :action="api.upload">
-                       :on-remove="(file, fileList) => handleRemove(file, fileList, data.form, item.prop)"
-                       :file-list="fileList"
-                       :headers="headers"
-                       :action="api.upload">
 
               <el-button>上传视频</el-button>
-              <div slot="tip"
+              <div slot="tip" class="el-upload__tip">
-                   class="el-upload__tip">
                 <p>请上传大小1G以内的视频</p>
               </div>
             </el-upload>
             <!-- 图片视频都可上传 -->
-            <el-upload v-if="item.type === 'media'"
+            <el-upload v-if="item.type === 'media'" :on-success="res => uploadSuccess(res, data.form, item)"
-                       :on-success="res => uploadSuccess(res, data.form, item)"
               :before-remove="beforeRemove"
-                       :on-remove="(file, fileList) => handleRemove(file, fileList, data.form, item.prop)"
+              :on-remove="(file, fileList) => handleRemove(file, fileList, data.form, item.prop)" :file-list="fileList"
-                       :file-list="fileList"
+              :headers="headers" :action="api.upload">
-                       :headers="headers"
-                       :action="api.upload">
               <el-button>上传资源</el-button>
             </el-upload>
-            <i v-if="!item.required"
+            <i v-if="!item.required" class="el-icon-delete del" @click="data.form[item.prop] = ''"></i>
-               class="el-icon-delete del"
-               @click="data.form[item.prop] = ''"></i>
           </div>
-          <div v-if="item.type === 'link'"
+          <div v-if="item.type === 'link'" class="flex">
-               class="flex">
+            <el-input class="m-r-10" v-model="data.form.link.linkName"></el-input>
-            <el-input class="m-r-10"
-                      v-model="data.form.link.linkName"></el-input>
             <el-button @click="toLink(data.form)">设置链接</el-button>
           </div>
-          <Editor v-if="item.type === 'editor'"
+          <Editor v-if="item.type === 'editor'" api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda'
-                  api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda'
+            v-model="data.form[item.prop]" :init="editorConfig" />
-                  v-model="data.form[item.prop]"
-                  :init="editorConfig" />
         </el-form-item>
       </el-form>
-      <el-form v-else-if="data.type === 'column' || data.type === 'columns'"
+      <el-form v-else-if="data.type === 'column' || data.type === 'columns'" ref="form" :model="data.form"
-               ref="form"
+        :rules="columnRules" label-width="100px">
-               :model="data.form"
+        <el-form-item prop="site" label="站点选择">
-               :rules="columnRules"
+          <el-select v-model="data.form.site" @change="siteChange">
-               label-width="100px">
+            <el-option v-for="item in $refs.link.sites" :key="item.id" :label="item.siteName" :value="item.id">
-        <el-form-item prop="site"
-                      label="站点选择">
-          <el-select v-model="data.form.site"
-                     @change="siteChange">
-            <el-option v-for="item in $refs.link.sites"
-                       :key="item.id"
-                       :label="item.siteName"
-                       :value="item.id">
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item prop="column"
+        <el-form-item prop="column" label="关联栏目">
-                      label="关联栏目">
+          <el-cascader ref="links" v-model="data.form.column" :options="columns" :props="columnProps" clearable
-          <el-cascader ref="links"
-                       v-model="data.form.column"
-                       :options="columns"
-                       :props="columnProps"
-                       clearable
             @change="columnChange"></el-cascader>
         </el-form-item>
         <el-form-item label="文章展示数量">
           <el-select v-model="data.form.articleNum">
-            <el-option v-for="item in articleNums"
+            <el-option v-for="item in articleNums" :key="item.id" :label="item.name" :value="item.id">
-                       :key="item.id"
-                       :label="item.name"
-                       :value="item.id">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="栏目标题">
-          <el-radio v-model="data.form.columnTitle"
+          <el-radio v-model="data.form.columnTitle" :label="1" @change="columnTitleChange">默认读取关联栏目</el-radio>
-                    :label="1"
-                    @change="columnTitleChange">默认读取关联栏目</el-radio>
           <div class="radio-wrap">
-            <el-radio v-model="data.form.columnTitle"
+            <el-radio v-model="data.form.columnTitle" :label="2" @change="columnTitleChange"></el-radio>
-                      :label="2"
+            <el-input v-model="data.form.columnTitleCustom" :disabled="data.form.columnTitle == 1" size="small"
-                      @change="columnTitleChange"></el-radio>
-            <el-input v-model="data.form.columnTitleCustom"
-                      :disabled="data.form.columnTitle == 1"
-                      size="small"
               maxlength="100"></el-input>
           </div>
         </el-form-item>
       </el-form>
       <template v-else-if="data.type === 'history'">
-        <el-table class="module-table"
+        <el-table class="module-table" :data="data.list" header-align="center" row-key="id">
-                  :data="data.list"
+          <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
-                  header-align="center"
+          <el-table-column prop="title" label="标题" min-width="140" align="center">
-                  row-key="id">
-          <el-table-column type="index"
-                           width="60"
-                           label="序号"
-                           align="center"></el-table-column>
-          <el-table-column prop="title"
-                           label="标题"
-                           min-width="140"
-                           align="center">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.title"
+              <el-input v-model="scope.row.title" placeholder="请输入" maxlength="100"></el-input>
-                        placeholder="请输入"
-                        maxlength="100"></el-input>
             </template>
           </el-table-column>
-          <el-table-column label="操作"
+          <el-table-column label="操作" width="100" align="center">
-                           width="100"
-                           align="center">
             <template slot-scope="scope">
               <div class="flex a-center">
-                <el-switch v-model="scope.row.isEnable"
+                <el-switch v-model="scope.row.isEnable" :active-value="1" :inactive-value="0">
-                           :active-value="1"
-                           :inactive-value="0">
                 </el-switch>
-                <i class="el-icon-edit-outline del"
+                <i class="el-icon-edit-outline del" @click="editHistory(scope.row, scope.$index)"></i>
-                   @click="editHistory(scope.row, scope.$index)"></i>
+                <i class="el-icon-delete del" @click="delRow(data.list, scope.$index)"></i>
-                <i class="el-icon-delete del"
-                   @click="delRow(data.list, scope.$index)"></i>
               </div>
             </template>
           </el-table-column>
         </el-table>
         <div class="plus">
-          <i class="el-icon-circle-plus-outline"
+          <i class="el-icon-circle-plus-outline" @click="addRow"></i>
-             @click="addRow"></i>
         </div>
       </template>
-      <span slot="footer"
+      <span slot="footer" class="dialog-footer">
-            class="dialog-footer">
         <el-button @click="$emit('update:visible', false)">取消</el-button>
-        <el-button type="primary"
+        <el-button type="primary" @click="moduleSubmit">确定</el-button>
-                   @click="moduleSubmit">确定</el-button>
       </span>
     </el-dialog>
-    <Link ref="link"
+    <Link ref="link" :data.sync="linkForm" :visible.sync="linkVisible" @linkSubmit="linkSubmit" />
-          :data.sync="linkForm"
+    <Content :data.sync="data" :visible.sync="contentVisible" @contentSubmit="contentSubmit" />
-          :visible.sync="linkVisible"
+    <History :data.sync="data" :list.sync="historyData" :form.sync="data.form" :visible.sync="historyVisible"
-          @linkSubmit="linkSubmit" />
-    <Content :data.sync="data"
-             :visible.sync="contentVisible"
-             @contentSubmit="contentSubmit" />
-    <History :data.sync="data"
-             :list.sync="historyData"
-             :form.sync="data.form"
-             :visible.sync="historyVisible"
       @historySubmit="historySubmit" />
 
     <!-- 剪裁组件弹窗 -->
-    <el-dialog title="图片裁剪"
+    <el-dialog title="图片裁剪" append-to-body :visible.sync="cropperModel" width="1100px" :close-on-click-modal="false">
-               append-to-body
+      <Cropper ref="cropper" :img-file.sync="file" :is-upload="isUpload" :fixed="fixed" :fixedNumber.sync="fixedNumber"
-               :visible.sync="cropperModel"
+        :autoCropWidth="autoCropWidth" :autoCropHeight="autoCropHeight" :dataType="data.type" @upload="customUpload" />
-               width="1100px"
-               :close-on-click-modal="false">
-      <Cropper ref="cropper"
-               :img-file.sync="file"
-               :is-upload="isUpload"
-               :fixed="fixed"
-               :fixedNumber.sync="fixedNumber"
-               :autoCropWidth="autoCropWidth"
-               :autoCropHeight="autoCropHeight"
-               @upload="customUpload" />
     </el-dialog>
   </div>
 </template>
@@ -432,7 +310,7 @@ export default {
         this.articleNums = nums
       }
       form && form.site && this.siteChange(form.site)
-      this.dialogWidth = dialogWidth || '800px'
+      this.dialogWidth = dialogWidth || '1000px'
     },
     // 站点切换回调
     siteChange (siteId) {
@@ -653,6 +531,7 @@ export default {
 .radio-wrap {
   display: flex;
   align-items: center;
+
   .el-input {
     width: 200px;
     margin-left: -40px;

src/const/modules.js

@@ -3565,6 +3565,12 @@ export default {
     {
       type: 'form',
       forms: [
+        {
+          type: 'upload',
+          prop: 'pic',
+          label: '图片',
+          required: true
+        },
         {
           type: 'input',
           prop: 'title',
@@ -3584,6 +3590,7 @@ export default {
         }
       ],
       form: {
+        pic: 'https://huorantech.com/images/home/4.png',
         title: 'ABOUT',
         link: {
           linkName: '无',

src/pages/article/add/editor.js

@@ -6,8 +6,8 @@ export default {
   //skin:'oxide-dark',
   language: 'zh_CN',
   language_url: './styles/tinymce/langs/zh_CN.js',
-  plugins: 'print powerpaste preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template advcode codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize formatpainter',
+  plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize formatpainter',
-  toolbar: 'code undo redo restoredraft | cut copy powerpaste pastetext | forecolor backcolor headings fontsize lineHeight bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify | \
+  toolbar: 'code undo redo restoredraft | cut copy pastetext | forecolor backcolor headings fontsize lineHeight bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify | \
     styleselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
     table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | indent2em formatpainter',
   style_formats: [
@@ -214,7 +214,8 @@ export default {
   },
   //为内容模板插件提供预置模板
   templates: [
-      { title: '中文文章模板1', description: '图片文字流', content: `
+    {
+      title: '中文文章模板1', description: '图片文字流', content: `
         <div class="tiny-wrap">
           <div class="block">
             <div class="fl">
@@ -239,7 +240,8 @@ export default {
         </div>
         `
     },
-      { title: '英文文章模板1', description: '图片文字流', content: `
+    {
+      title: '英文文章模板1', description: '图片文字流', content: `
         <div class="tiny-wrap">
           <div class="block en-block">
             <div class="fr">
@@ -258,7 +260,8 @@ export default {
         </div>
         `
     },
-      { title: '新闻模板', description: '', content: `
+    {
+      title: '新闻模板', description: '', content: `
         <div class="tiny-wrap">
           <div class="block" style="margin-bottom: 70px;">
             <div class="fr">
@@ -288,7 +291,8 @@ export default {
         </div>
         `
     },
-      { title: '图片描述', description: '', content: `
+    {
+      title: '图片描述', description: '', content: `
         <div class="tiny-wrap">
           <div class="block">
             <div class="img-wrap">
@@ -299,7 +303,8 @@ export default {
         </div>
         `
     },
-      { title: '人物详情', description: '', content: `
+    {
+      title: '人物详情', description: '', content: `
         <div class="tiny-wrap">
           <div class="people">
 						<img class="pic" src="http://139.159.254.212/images/team/5.png"/>

src/pages/column/list/index.vue

@@ -2,185 +2,107 @@
   <div class="page">
     <div class="tool">
       <div class="search-wrap">
-        <el-input placeholder="请输入栏目名称"
+        <el-input placeholder="请输入栏目名称" v-model.trim="keyword" clearable></el-input>
-                  v-model.trim="keyword"
-                  clearable></el-input>
       </div>
       <div class="actions">
-        <el-dropdown class="setting"
+        <el-dropdown class="setting" trigger="click" :hide-on-click="false">
-                     trigger="click"
+          <img class="icon" src="@/assets/images/setting.png" alt="">
-                     :hide-on-click="false">
-          <img class="icon"
-               src="@/assets/images/setting.png"
-               alt="">
           <el-dropdown-menu>
             <el-dropdown-item>
-              <el-button @click="resetColumns"
+              <el-button @click="resetColumns" type="text">列重置</el-button>
-                         type="text">列重置</el-button>
             </el-dropdown-item>
-            <el-dropdown-item v-for="(column, i) in settings"
+            <el-dropdown-item v-for="(column, i) in settings" :key="i" :divided="i === 0">
-                              :key="i"
-                              :divided="i === 0">
               <el-checkbox v-model="column.show">{{ column.name }}</el-checkbox>
             </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
-        <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:新增'"
+        <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:新增'" type="primary" @click="add">新增</el-button>
-                   type="primary"
+        <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'" @click="batchDel">删除</el-button>
-                   @click="add">新增</el-button>
+        <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:更改排序'" class="lg" @click="sort">更改排序</el-button>
-        <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'"
+        <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:导航样式设置'" class="lg"
-                   @click="batchDel">删除</el-button>
-        <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:更改排序'"
-                   class="lg"
-                   @click="sort">更改排序</el-button>
-        <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:导航样式设置'"
-                   class="lg"
           @click="styleSet">导航样式设置</el-button>
       </div>
     </div>
 
-    <el-table v-loading="listLoading"
+    <el-table v-loading="listLoading" ref="table" :data="list" default-expand-all class="table" header-align="center"
-              ref="table"
+      @selection-change="handleSelectionChange" @select-all="selectAll" row-key="id">
-              :data="list"
+      <el-table-column v-if="settings[0].show" type="selection" width="50" align="center"
-              default-expand-all
-              class="table"
-              header-align="center"
-              @selection-change="handleSelectionChange"
-              @select-all="selectAll"
-              row-key="id">
-      <el-table-column v-if="settings[0].show"
-                       type="selection"
-                       width="50"
-                       align="center"
         :reserve-selection="true"></el-table-column>
-      <el-table-column prop="columnName"
+      <el-table-column prop="columnName" show-overflow-tooltip label="名称" min-width="140"></el-table-column>
-                       show-overflow-tooltip
+      <el-table-column v-if="settings[1].show" prop="typeId" label="栏目类型" min-width="100">
-                       label="名称"
-                       min-width="140"></el-table-column>
-      <el-table-column v-if="settings[1].show"
-                       prop="typeId"
-                       label="栏目类型"
-                       min-width="100">
         <template slot-scope="scope">
           {{ types.find(e => e.id == scope.row.typeId) && types.find(e => e.id == scope.row.typeId).name }}
         </template>
       </el-table-column>
-      <el-table-column v-if="settings[2].show"
+      <el-table-column v-if="settings[2].show" prop="templateName" label="栏目模板" min-width="100">
-                       prop="templateName"
-                       label="栏目模板"
-                       min-width="100">
         <template slot-scope="scope">
           {{ scope.row.typeId === 2 ? '--' : scope.row.templateName }}
         </template>
       </el-table-column>
-      <el-table-column v-if="settings[3].show"
+      <el-table-column v-if="settings[3].show" prop="listStyle" label="列表/长页样式" min-width="100">
-                       prop="listStyle"
-                       label="列表/长页样式"
-                       min-width="100">
         <template slot-scope="scope">
           {{ scope.row.typeId === 2 ? '--' : scope.row.listStyle }}
         </template>
       </el-table-column>
-      <el-table-column v-if="settings[4].show"
+      <el-table-column v-if="settings[4].show" prop="detailStyle" label="详情样式" min-width="100">
-                       prop="detailStyle"
-                       label="详情样式"
-                       min-width="100">
         <template slot-scope="scope">
           {{ (scope.row.typeId === 1 || scope.row.typeId === 4) ? scope.row.detailStyle : '--' }}
         </template>
       </el-table-column>
-      <el-table-column v-if="settings[5].show"
+      <el-table-column v-if="settings[5].show" prop="menuVisible" label="导航菜单" min-width="100">
-                       prop="menuVisible"
-                       label="导航菜单"
-                       min-width="100">
         <template slot-scope="scope">
-          <el-switch v-model="scope.row.menuVisible"
+          <el-switch v-model="scope.row.menuVisible" :active-value="0" :inactive-value="1"
-                     :active-value="0"
-                     :inactive-value="1"
             @change="switchOff($event, scope.row, scope.$index)">
           </el-switch>
         </template>
       </el-table-column>
-      <el-table-column v-if="settings[6].show"
+      <el-table-column v-if="settings[6].show" prop="id" label="ID" min-width="80"></el-table-column>
-                       prop="id"
+      <el-table-column v-if="settings[7].show" label="操作" width="270">
-                       label="ID"
-                       min-width="80"></el-table-column>
-      <el-table-column v-if="settings[7].show"
-                       label="操作"
-                       width="270">
         <template slot-scope="scope">
-          <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:新增下级'"
+          <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:新增下级'" type="text"
-                     type="text"
             @click="edit(scope.row, 'add')">新增下级</el-button>
-          <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:编辑'"
+          <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:编辑'" type="text"
-                     type="text"
             @click="edit(scope.row, 'edit')">编辑</el-button>
-          <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'"
+          <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'" type="text"
-                     type="text"
             @click="del(scope.row)">删除</el-button>
-          <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:预览'"
+          <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:预览'" v-if="scope.row.typeId != 2" type="text"
-                     v-if="scope.row.typeId != 2"
-                     type="text"
             @click="preview(scope.row)">预览</el-button>
-          <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:页面管理'"
+          <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:页面管理'" v-if="scope.row.typeId == 3" class="page-set"
-                     v-if="scope.row.typeId == 3"
+            type="primary" size="mini" @click="page(scope.row)">页面设置</el-button>
-                     class="page-set"
-                     type="primary"
-                     size="mini"
-                     @click="page(scope.row)">页面设置</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <el-dialog title="编辑栏目排序"
+    <el-dialog title="编辑栏目排序" :visible.sync="sortVisible" width="750px" :close-on-click-modal="false">
-               :visible.sync="sortVisible"
-               width="750px"
-               :close-on-click-modal="false">
       <div class="sort-wrap">
         <ul class="thead">
           <li style="width: 395px;padding-left: 30px">栏目</li>
           <li style="width: 205px">栏目类型</li>
           <li>前台可见</li>
         </ul>
-        <el-tree class="sort"
+        <el-tree class="sort" :data="sortColumns" node-key="id" default-expand-all draggable>
-                 :data="sortColumns"
+          <ul class="sort-line" slot-scope="{ node, data }">
-                 node-key="id"
-                 default-expand-all
-                 draggable>
-          <ul class="sort-line"
-              slot-scope="{ node, data }">
             <li>{{ data.columnName }}</li>
             <li>{{ types.find(e => e.id == data.typeId) && types.find(e => e.id == data.typeId).name }}</li>
             <li>
-              <el-switch v-model="data.menuVisible"
+              <el-switch v-model="data.menuVisible" :active-value="0" :inactive-value="1"
-                         :active-value="0"
-                         :inactive-value="1"
                 @change="switchOff($event, data)">
               </el-switch>
             </li>
           </ul>
         </el-tree>
       </div>
-      <span slot="footer"
+      <span slot="footer" class="dialog-footer">
-            class="dialog-footer">
         <el-button @click="sortVisible = false">取 消</el-button>
-        <el-button type="primary"
+        <el-button type="primary" @click="sortSubmit">确 定</el-button>
-                   @click="sortSubmit">确 定</el-button>
       </span>
     </el-dialog>
 
-    <el-dialog title="导航样式设置"
+    <el-dialog title="导航样式设置" :visible.sync="styleVisible" width="850px" :close-on-click-modal="false">
-               :visible.sync="styleVisible"
+      <el-form class="input-form" label-width="100px">
-               width="850px"
-               :close-on-click-modal="false">
-      <el-form class="input-form"
-               label-width="100px">
         <el-form-item label="导航样式">
           <el-select v-model="form.navigationStyle">
-            <el-option v-for="item in styleTypes"
+            <el-option v-for="item in styleTypes" :key="item.id" :label="item.name" :value="item.id">
-                       :key="item.id"
-                       :label="item.name"
-                       :value="item.id">
             </el-option>
           </el-select>
         </el-form-item>
@@ -188,11 +110,9 @@
           <ul class="styles">
             <li>
               <div class="review">
-                <img src="@/assets/images/style1.png"
+                <img src="@/assets/images/style1.png" alt="">
-                     alt="">
               </div>
-              <el-radio v-model="form.styleTemplate"
+              <el-radio v-model="form.styleTemplate" :label="1">竖行导航</el-radio>
-                        :label="1">竖行导航</el-radio>
             </li>
             <!-- <li>
               <div class="review">
@@ -203,11 +123,9 @@
           </ul>
         </el-form-item>
       </el-form>
-      <span slot="footer"
+      <span slot="footer" class="dialog-footer">
-            class="dialog-footer">
         <el-button @click="styleVisible = false">取 消</el-button>
-        <el-button type="primary"
+        <el-button type="primary" @click="styleSubmit">确 定</el-button>
-                   @click="styleSubmit">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -364,7 +282,7 @@ export default {
     // 预览
     preview (row) {
       // 常规/子级优先栏目，则跳转到column；长页则跳转到对应的长页模板
-      window.open((Setting.isDev ? `http://${location.hostname}:8097` : this.$store.state.content.site.domainName) + `#/${row.typeId === 3 ? row.path : 'column'}?id=${row.id}&siteId=${row.siteId}`)
+      window.open((Setting.isDev ? `http://${location.hostname}:8097` : this.$store.state.content.site.domainName) + `#/${row.typeId === 3 ? row.path : 'column'}?id=${row.id}&siteId=${row.siteId}&listPreview=1`)
     },
     // 页面管理
     page (row) {
@@ -483,10 +401,12 @@ export default {
   max-height: 400px;
   overflow: auto;
 }
+
 .thead {
   display: flex;
   line-height: 44px;
   background-color: #f7f7f7;
+
   li {
     padding: 0 10px;
     font-size: 12px;
@@ -495,42 +415,53 @@ export default {
     color: #323232;
   }
 }
+
 /deep/.sort {
   .el-tree-node__content {
     height: auto;
     border-bottom: 1px solid #ebedf0;
   }
+
   // .el-tree-node__expand-icon {
   //   display: none;
   // }
 }
+
 .sort-line {
   display: flex;
   width: 100%;
+
   li {
     padding: 12px 0;
+
     &:first-child {
       width: 230px;
     }
+
     &:nth-child(2) {
       position: absolute;
       left: 400px;
     }
+
     &:last-child {
       position: absolute;
       right: 50px;
     }
   }
 }
+
 .styles {
   display: inline-flex;
+
   li {
     margin-right: 20px;
     text-align: center;
+
     &:hover .review {
       border-color: #2962ff;
     }
   }
+
   .review {
     padding: 18px;
     margin-bottom: 10px;
@@ -538,6 +469,7 @@ export default {
     border-radius: 2px;
   }
 }
+
 .page-set {
   padding: 6px;
 }

src/pages/column/page/home.vue

@@ -3,11 +3,9 @@
     <div class="actions">
       <p class="page-name">页面设置/HOME</p>
       <div>
-        <el-button type="primary"
+        <el-button type="primary" @click="preview">预览</el-button>
-                   @click="preview">预览</el-button>
         <el-button @click="save(0)">保存为草稿</el-button>
-        <el-button type="primary"
+        <el-button type="primary" @click="save(1)">发布</el-button>
-                   @click="save(1)">发布</el-button>
         <el-button @click="back">放弃编辑</el-button>
       </div>
     </div>
@@ -17,17 +15,12 @@
         <el-carousel height="500px"
           :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
           <template v-for="(item, i) in modules[0].list">
-            <el-carousel-item v-if="item.pic && item.isEnable"
+            <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
-                              :key="i">
+              <img width="100%" height="100%" :src="item.pic" alt="">
-              <img width="100%"
-                   height="100%"
-                   :src="item.pic"
-                   alt="">
             </el-carousel-item>
           </template>
         </el-carousel>
-        <div class="cover"
+        <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
-             @click="toSet(0)">点击更换banner与链接</div>
       </div>
 
       <div class="block">
@@ -35,37 +28,26 @@
           <div class="c-wrap">
             <h2 class="b-title">{{ modules[1].form.title }}</h2>
             <p class="intro">{{ modules[1].form.des }}</p>
-            <div class="cover"
+            <div class="cover" @click="toSet(1)">点击更换标题与描述</div>
-                 @click="toSet(1)">点击更换标题与描述</div>
           </div>
           <ul class="card">
             <li>
-              <img width="100%"
+              <img width="100%" :src="modules[2].form.pic" alt="">
-                   :src="modules[2].form.pic"
-                   alt="">
               <div class="texts">
                 <h6>{{ modules[2].form.title }}</h6>
                 <p class="des">{{ modules[2].form.des }}</p>
-                <img class="arrow"
+                <img class="arrow" src="@/assets/images/arrow.png" alt="">
-                     src="@/assets/images/arrow.png"
-                     alt="">
               </div>
-              <div class="cover"
+              <div class="cover" @click="toSet(2)">点击更改图片、标题概述与链接</div>
-                   @click="toSet(2)">点击更改图片、标题概述与链接</div>
             </li>
             <li>
-              <img width="100%"
+              <img width="100%" :src="modules[3].form.pic" alt="">
-                   :src="modules[3].form.pic"
-                   alt="">
               <div class="texts">
                 <h6>{{ modules[3].form.title }}</h6>
                 <p class="des">{{ modules[3].form.des }}</p>
-                <img class="arrow"
+                <img class="arrow" src="@/assets/images/arrow.png" alt="">
-                     src="@/assets/images/arrow.png"
-                     alt="">
               </div>
-              <div class="cover"
+              <div class="cover" @click="toSet(3)">点击更改图片、标题概述与链接</div>
-                   @click="toSet(3)">点击更改图片、标题概述与链接</div>
             </li>
           </ul>
         </div>
@@ -76,66 +58,70 @@
           <div class="c-wrap">
             <h2 class="b-title">{{ modules[4].form.title }}</h2>
             <p class="intro">{{ modules[4].form.des }}</p>
-            <div class="cover"
+            <div class="cover" @click="toSet(4)">点击更换标题与描述</div>
-                 @click="toSet(4)">点击更换标题与描述</div>
           </div>
           <ul class="news">
             <li>
-              <img src="https://huorantech.com/images/home/3.png"
+              <img src="https://huorantech.com/images/home/3.png" alt="">
-                   alt="">
               <div class="texts">
                 <h6>2022 New Year Message from President Sun Dongbai</h6>
-                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities,
+                  Shenzhen
+                  (IASF)…</p>
                 <span class="meta">2022.08.12</span>
               </div>
             </li>
             <li>
-              <img src="https://huorantech.com/images/home/3.png"
+              <img src="https://huorantech.com/images/home/3.png" alt="">
-                   alt="">
               <div class="texts">
                 <h6>2022 New Year Message from President Sun Dongbai</h6>
-                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities,
+                  Shenzhen
+                  (IASF)…</p>
                 <span class="meta">2022.08.12</span>
               </div>
             </li>
             <li>
-              <img src="https://huorantech.com/images/home/3.png"
+              <img src="https://huorantech.com/images/home/3.png" alt="">
-                   alt="">
               <div class="texts">
                 <h6>2022 New Year Message from President Sun Dongbai</h6>
-                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities,
+                  Shenzhen
+                  (IASF)…</p>
                 <span class="meta">2022.08.12</span>
               </div>
             </li>
             <li>
-              <img src="https://huorantech.com/images/home/3.png"
+              <img src="https://huorantech.com/images/home/3.png" alt="">
-                   alt="">
               <div class="texts">
                 <h6>2022 New Year Message from President Sun Dongbai</h6>
-                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities,
+                  Shenzhen
+                  (IASF)…</p>
                 <span class="meta">2022.08.12</span>
               </div>
             </li>
             <li>
-              <img src="https://huorantech.com/images/home/3.png"
+              <img src="https://huorantech.com/images/home/3.png" alt="">
-                   alt="">
               <div class="texts">
                 <h6>2022 New Year Message from President Sun Dongbai</h6>
-                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities,
+                  Shenzhen
+                  (IASF)…</p>
                 <span class="meta">2022.08.12</span>
               </div>
             </li>
             <li>
-              <img src="https://huorantech.com/images/home/3.png"
+              <img src="https://huorantech.com/images/home/3.png" alt="">
-                   alt="">
               <div class="texts">
                 <h6>2022 New Year Message from President Sun Dongbai</h6>
-                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities,
+                  Shenzhen
+                  (IASF)…</p>
                 <span class="meta">2022.08.12</span>
               </div>
             </li>
-            <div class="cover"
+            <div class="cover" @click="toSet(5)">点击更换标题与描述</div>
-                 @click="toSet(5)">点击更换标题与描述</div>
           </ul>
         </div>
       </div>
@@ -145,98 +131,77 @@
           <div class="c-wrap">
             <h2 class="b-title">{{ modules[6].form.title }}</h2>
             <p class="intro">{{ modules[6].form.des }}</p>
-            <div class="cover"
+            <div class="cover" @click="toSet(6)">点击更换标题与描述</div>
-                 @click="toSet(6)">点击更换标题与描述</div>
           </div>
           <ul class="people">
             <template v-for="(item, i) in modules[7].list">
-              <li v-if="item.isEnable"
+              <li v-if="item.isEnable" :key="i">
-                  :key="i">
+                <img class="pic" :src="item.pic" alt="">
-                <img class="pic"
-                     :src="item.pic"
-                     alt="">
                 <div class="texts">
                   <h6>{{ item.title }}</h6>
                   <p class="des">{{ item.des }}</p>
-                  <img class="arrow"
+                  <img class="arrow" src="@/assets/images/arrow.png" alt="">
-                       src="@/assets/images/arrow.png"
-                       alt="">
                 </div>
               </li>
             </template>
-            <div class="cover"
+            <div class="cover" @click="toSet(7)">点击更改图片、标题概述与链接</div>
-                 @click="toSet(7)">点击更改图片、标题概述与链接</div>
           </ul>
         </div>
       </div>
 
-      <div class="about">
+      <div class="about" :style="{ backgroundImage: 'url(' + modules[8].form.pic + ')' }">
         <div class="inner">
-          <img src="@/assets/images/about.png"
+          <img src="@/assets/images/about.png" alt="">
-               alt="">
           <div class="line"></div>
           <div class="text">{{ modules[8].form.title }}</div>
-          <div class="des"
+          <div class="des" v-html="modules[8].form.des"></div>
-               v-html="modules[8].form.des"></div>
         </div>
-        <div class="cover"
+        <div class="cover" @click="toSet(8)">点击更换标题与描述</div>
-             @click="toSet(8)">点击更换标题与描述</div>
       </div>
 
-      <div class="block"
+      <div class="block" style="padding-bottom: 0">
-           style="padding-bottom: 0">
         <div class="inner">
           <div class="c-wrap">
             <h2 class="glance">{{ modules[9].form.title }}</h2>
-            <div class="cover"
+            <div class="cover" @click="toSet(9)">点击更换标题与描述</div>
-                 @click="toSet(9)">点击更换标题与描述</div>
           </div>
           <ul class="stat">
             <li>
               <p class="num">{{ modules[10].form.title }}</p>
               <p class="text">{{ modules[10].form.des }}</p>
-              <div class="cover"
+              <div class="cover" @click="toSet(10)">点击更换标题与描述</div>
-                   @click="toSet(10)">点击更换标题与描述</div>
             </li>
             <li>
               <p class="num">{{ modules[11].form.title }}</p>
               <p class="text">{{ modules[11].form.des }}</p>
-              <div class="cover"
+              <div class="cover" @click="toSet(11)">点击更换标题与描述</div>
-                   @click="toSet(11)">点击更换标题与描述</div>
             </li>
             <li>
               <p class="num">{{ modules[12].form.title }}</p>
               <p class="text">{{ modules[12].form.des }}</p>
-              <div class="cover"
+              <div class="cover" @click="toSet(12)">点击更换标题与描述</div>
-                   @click="toSet(12)">点击更换标题与描述</div>
             </li>
             <li>
               <p class="num">{{ modules[13].form.title }}</p>
               <p class="text">{{ modules[13].form.des }}</p>
-              <div class="cover"
+              <div class="cover" @click="toSet(13)">点击更换标题与描述</div>
-                   @click="toSet(13)">点击更换标题与描述</div>
             </li>
             <li>
               <p class="num">{{ modules[14].form.title }}</p>
               <p class="text">{{ modules[14].form.des }}</p>
-              <div class="cover"
+              <div class="cover" @click="toSet(14)">点击更换标题与描述</div>
-                   @click="toSet(14)">点击更换标题与描述</div>
             </li>
             <li>
               <p class="num">{{ modules[15].form.title }}</p>
               <p class="text">{{ modules[15].form.des }}</p>
-              <div class="cover"
+              <div class="cover" @click="toSet(15)">点击更换标题与描述</div>
-                   @click="toSet(15)">点击更换标题与描述</div>
             </li>
           </ul>
         </div>
       </div>
     </div>
 
-    <Module ref="module"
+    <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
-            :data.sync="curData"
-            :visible.sync="diaVisible"
-            @moduleSubmit="moduleSubmit" />
   </div>
 </template>
 
@@ -277,29 +242,35 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../../styles/page/page.scss';
+
 .block {
   .card {
     display: flex;
     justify-content: space-between;
+
     li {
       position: relative;
       width: 660px;
     }
+
     .texts {
       padding-left: 22px;
       margin-top: 60px;
       border-left: 2px solid #dfe4e9;
     }
+
     h6 {
       margin-bottom: 25px;
       font-size: 24px;
       color: #333;
     }
+
     .des {
       font-size: 18px;
       color: #222;
       line-height: 30px;
     }
+
     .arrow {
       cursor: pointer;
     }
@@ -308,37 +279,45 @@ export default {
   &.news-block {
     background: url(../../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
   }
+
   .news {
     position: relative;
     display: flex;
     flex-wrap: wrap;
+
     li {
       display: inline-flex;
       width: 686px;
       padding: 34px;
       margin-bottom: 28px;
       background-color: #fff;
+
       &:nth-child(odd) {
         margin-right: 28px;
       }
     }
+
     img {
       width: 237px;
       height: 167px;
     }
+
     .texts {
       margin-left: 34px;
     }
+
     h6 {
       font-size: 18px;
       color: #0648a8;
     }
+
     .des {
       margin: 14px 0;
       font-size: 16px;
       color: #333;
       line-height: 22px;
     }
+
     .meta {
       font-size: 16px;
       color: #999;
@@ -347,25 +326,31 @@ export default {
 
   .people {
     position: relative;
+
     li {
       display: flex;
       justify-content: space-between;
       margin-bottom: 126px;
+
       &:nth-child(even) {
         flex-direction: row-reverse;
       }
     }
+
     .pic {
       width: 660px;
       height: 465px;
     }
+
     .texts {
       width: 680px;
       padding-top: 150px;
     }
+
     h6 {
       font-size: 40px;
     }
+
     .des {
       font-size: 18px;
       color: #020202;
@@ -381,16 +366,19 @@ export default {
     text-align: center;
     border-bottom: 1px solid #dedede;
   }
+
   .stat {
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
     margin-top: 60px;
+
     li {
       position: relative;
       width: 30%;
       margin-bottom: 50px;
     }
+
     .num {
       margin-bottom: 10px;
       font-size: 60px;
@@ -398,15 +386,18 @@ export default {
       color: #035ce1;
       line-height: 49px;
     }
+
     .text {
       font-size: 24px;
     }
   }
 }
+
 .about {
   position: relative;
   padding: 77px 0 198px;
   background: url(../../../assets/images/about-bg.png) 0 0/100% 100% no-repeat;
+
   .line {
     display: flex;
     align-items: center;
@@ -414,16 +405,19 @@ export default {
     width: 88px;
     height: 6px;
     background-color: #fff;
+
     &:after {
       content: '';
       width: 6px;
       height: 6px;
     }
   }
+
   .text {
     font-size: 30px;
     color: #fff;
   }
+
   .des {
     padding: 38px 60px;
     margin-top: 84px;

src/pages/seo/index.vue

@@ -1,40 +1,23 @@
 <template>
   <div class="page">
     <p class="page-name mb">SEO管理</p>
-    <el-form ref="form"
+    <el-form ref="form" :model="form" :rules="rules" class="input-form" label-width="140px">
-             :model="form"
+      <el-form-item prop="title" label="SEO标题">
-             :rules="rules"
+        <el-input placeholder="SEO标题" v-model="form.title" clearable maxlength="100"></el-input>
-             class="input-form"
-             label-width="140px">
-      <el-form-item prop="title"
-                    label="SEO标题">
-        <el-input placeholder="SEO标题"
-                  v-model="form.title"
-                  clearable
-                  maxlength="100"></el-input>
       </el-form-item>
-      <el-form-item prop="keyword"
+      <el-form-item prop="keyword" label="SEO关键词">
-                    label="SEO关键词">
+        <el-input placeholder="SEO关键词" v-model="form.keyword" clearable></el-input>
-        <el-input placeholder="SEO关键词"
-                  v-model="form.keyword"
-                  clearable></el-input>
       </el-form-item>
-      <el-form-item prop="description"
+      <el-form-item prop="description" label="SEO描述">
-                    label="SEO描述">
+        <el-input type="textarea" placeholder="SEO标题" v-model="form.description" clearable :rows="7"></el-input>
-        <el-input type="textarea"
-                  placeholder="SEO标题"
-                  v-model="form.description"
-                  clearable></el-input>
       </el-form-item>
     </el-form>
     <div class="text-center">
-      <el-button type="primary"
+      <el-button type="primary" @click="submit">保存</el-button>
-                 @click="submit">保存</el-button>
     </div>
   </div>
 </template>
 <script>
-import Setting from '@/setting'
 import Util from '@/libs/util'
 export default {
   data () {
@@ -104,6 +87,7 @@ export default {
 
 <style lang="scss" scoped>
 .input-form {
+
   .el-input,
   .el-textarea {
     width: 940px;