医学标签添加多媒体文件和富文本

src/views/modules/course/medicalLabel.vue

@@ -14,138 +14,240 @@
     <div
       v-if="isFresh"
       v-loading="!isFresh"
-      style="width: calc(100% - 360px); height: 100%; float: right;  border: 1px solid #bababa; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 10px;position: relative;"
+      style="width: calc(100% - 360px); height: 100%; float: right; border: 1px solid #bababa; border-top:none;  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 10px;position: relative;"
     >
-      <div class="border_box info_box">
+      <el-tabs type="card">
-        <div class="title_box">
+        <el-tab-pane label="基本标签信息">
-          <div class="title"><span class="line"></span>基本标签信息</div>
+          <div class="border_box info_box">
-        </div>
+            <div class="title_box">
-
+              <div class="title"><span class="line"></span>基本标签信息</div>
-        <div class="addFormBox">
+            </div>
-          <el-form :model="addForm" ref="addForm" label-width="80px">
+            <div class="addFormBox">
-            <el-form-item label="标签名称" prop="title" class="form_item">
+              <el-form :model="addForm" ref="addForm" label-width="80px">
-              <el-input
+                <el-form-item label="标签名称" prop="title" class="form_item">
-                placeholder="请输入标签名称"
+                  <el-input
-                style="width: 100%"
+                    placeholder="请输入标签名称"
-                v-model="addForm.title"
+                    style="width: 100%"
-                clearable
+                    v-model="addForm.title"
-              >
+                    clearable
-              </el-input>
-            </el-form-item>
-            
-            <el-form-item label="排序" prop="sort" class="form_item">
-              <el-input-number
-                placeholder="请输入标签排序"
-                style="width: 100%"
-                v-model="addForm.sort"
-                :min="0"
-                clearable
-                @keyup.native="UpNumber"
-                @keydown.native="UpNumber"
-              >
-              </el-input-number>
-            </el-form-item>
-            <el-form-item
-              label="封面图"
-              prop="icon"
-              label-width="120px"
-              class="form_item"
-            >
-              <div style="display:flex; align-items:center">
-                <div>
-                  <el-upload
-                    class="avatar-uploader"
-                    :action="baseUrl + '/oss/fileoss'"
-                    :show-file-list="false"
-                    :on-success="handlePicSuccess"
                   >
-                    <!-- <img v-if="!refreshImg" :src="addForm.images" class="avatar"> -->
+                  </el-input>
-                    <img v-if="fimages" :src="fimages" class="avatar" />
+                </el-form-item>
-                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+
-                  </el-upload>
+                <el-form-item label="排序" prop="sort" class="form_item">
-                </div>
+                  <el-input-number
-                <div>
+                    placeholder="请输入标签排序"
-                  <div v-if="fimages != ''">
+                    style="width: 100%"
-                    <el-tag class="delImgBtn" @click="delImg()" type="danger"
+                    v-model="addForm.sort"
-                      >清空图片</el-tag
+                    :min="0"
-                    >
+                    clearable
+                    @keyup.native="UpNumber"
+                    @keydown.native="UpNumber"
+                  >
+                  </el-input-number>
+                </el-form-item>
+                <el-form-item
+                  label="是否为最终级"
+                  prop="isLast"
+                  label-width="120px"
+                  class="form_item"
+                >
+                  <el-switch
+                    v-model="addForm.isLast"
+                    active-color="#13ce66"
+                    :active-value="1"
+                    :inactive-value="0"
+                    active-text="是"
+                    inactive-text="否"
+                    @change="handleChangeIsLast"
+                  >
+                  </el-switch>
+                </el-form-item>
+                <div
+                  class="flexBox"
+                  style="width:100%;justify-content: space-between;"
+                >
+                  <div class="subBox" style="display:flex">
+                    
+                      <div style="display:flex; align-items:center; width:100%;justify-content:center">
+                        <div style="margin-right:15px">封面图</div>
+                        <div>
+                          <el-upload
+                            class="avatar-uploader"
+                            :action="baseUrl + '/oss/fileoss'"
+                            :show-file-list="false"
+                            :on-success="handlePicSuccess"                          
+                          >
+                            <img v-if="fimages" :src="fimages" class="avatar" />
+                            <i
+                              v-else
+                              class="el-icon-plus avatar-uploader-icon"
+                            ></i>
+                          </el-upload>                          
+                        </div>
+                        <div>
+                          <div v-if="fimages != ''">
+                            <el-tag
+                              class="delImgBtn"
+                              @click="delImg()"
+                              type="danger"
+                              >清空图片</el-tag
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </el-form-item>
+                  </div>
+                  <div class="subBox">
+                   
+                      <div style="">
+                        <div class="dataType flexBox" >
+                          <el-radio v-model="addForm.dataType" :label="1"
+                            >加密视频</el-radio
+                          >
+                          <el-radio v-model="addForm.dataType" :label="2"
+                            >上传音频</el-radio
+                          >
+                        </div>
+                        <div>
+                          <div v-if="addForm.dataType == 2" style="margin:20px auto; margin-top:20px ; width: 50%; ">
+                            <el-upload
+                              class="upload-demo audioUpload"
+                              :action="baseUrl + '/oss/fileoss'"
+                              :on-remove="audioHandleRemove"
+                              :on-success="audioUploadSuccess"
+                              accept=".mp3"
+                              :limit="1"                             
+                              :file-list="audioFileList"
+                            >
+                              <el-button size="small" type="primary"
+                                >点击上传</el-button
+                              >
+                              <div slot="tip" class="el-upload__tip" style="float:right">
+                                只能上传.mp3文件
+                              </div>
+                            </el-upload>
+                          </div>
+                          <el-form-item style="margin-top:20px" v-else label="加密视频id">
+                            <el-input v-model="addForm.media"></el-input>
+                          </el-form-item>
+                        </div>
+                      </div>
+                   
                   </div>
                 </div>
-              </div>
+                <div style="width:100%">
-            </el-form-item>
+                  <div style="margin:10px 0"><span class="line"></span> 标签介绍</div>
-            <el-form-item
+                  <el-form-item prop="productDetails" label-width="0">
-              label="是否为最终级"
+                    <el-upload
-              prop="isLast"
+                      style="display:none"
-              label-width="120px"
+                      class="avatar-uploader11"
-              class="form_item"
+                      :action="baseUrl + '/oss/fileoss'"
-            >
+                      accept=".jpeg,.jpg,.gif,.png"
-              <el-switch
+                      :show-file-list="false"
-                v-model="addForm.isLast"
+                      :before-upload="
-                active-color="#13ce66"
+                        res => {
-                :active-value="1"
+                          return beforeImgUpload(res, 'f2');
-                :inactive-value="0"
+                        }
-                active-text="是"
+                      "
-                inactive-text="否"
+                      :on-success="contentUploadSuccess"
-                @change="handleChangeIsLast"
+                    >
-              >
+                    </el-upload>
-              </el-switch>
+                    <quill-editor 
-            </el-form-item>
+                      v-model="addForm.content"
-            
+                      ref="myQuillEditor"
-          </el-form>
+                      :options="editorOption"
-        </div>
+                      @blur="onEditorBlur($event)"
-        <div
+                      @focus="onEditorFocus($event)"
-          style="  border: 1px dashed #bababa;"
+                      @ready="onEditorReady($event)"
-          v-if="currentNode && currentNode.data.isLast == 1"
+                      class="shangpin_editor ql-container"
-        ></div>
+                    >
-      </div>
+                    </quill-editor>
-      <div
+                  </el-form-item>
-        class="border_box tree_content_box"
+                </div>
-        v-if="currentNode && currentNode.data.isLast == 1"
+              </el-form>
-      >
+            </div>
-        <div class="title_box" style="margin-bottom: 10px; height: 40px">
+            <!-- <div
-          <div class="title">
+              style="  border: 1px dashed #bababa;"
-            <span class="line"></span>已关联课程列表
+              v-if="currentNode && currentNode.data.isLast == 1"
+            ></div> -->
+          </div>
+          <div class="submitButton submitButtonBox">
             <el-button
-              plain
               type="primary"
-              style="margin-left: 20px"
+              @click="dataFormSubmit('addForm')"
-              @click="openTable('addForm')"
+              size="small"
-              size="mini"
+              >确定</el-button
-              >新增</el-button
             >
-
-            <!-- <div style="" class="button_box"> -->
-            <!-- <el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button> -->
-
             <!-- </div> -->
           </div>
-        </div>
+          <!-- <div
-        <!-- :isNoSearch="true" -->
+            class="submitButton submitButtonBox"
-        <commonShop
+            style="position: absolute;bottom: 13px;right: 15px;"
-          :isNoSearch="true"
+            v-if="!isEdit"
-          :otherInfo="{
+          >
-            httpType: 'raw',
+         
-            httpDataValueName: 'courseList'
+            <el-button
-          }"
+              type="primary"
-          :defaultForm="{
+              @click="dataFormSubmit('addForm')"
-            id: addForm.id
+              size="small"
-          }"
+              >确定</el-button
-          axiosType="raw"
+            >
-          getAssociatedGoodsListKey="id"
+          
-          :isNoPaging="true"
+          </div> -->
-          getAssociatedGoodsListValue="result"
+        </el-tab-pane>
-          :tableColumnList="tableColumnList"
+        <el-tab-pane
-          :currentId="addForm.id ? addForm.id : ''"
+          label="已关联课程列表"
-          currentType="bookMarketId"
+          v-if="currentNode && currentNode.data.isLast == 1"
-          :dataList="associatedGoodsList"
-          :urlList="urlList"
-          @delete="dataFormDelete"
-          :isEdit="isEdit"
-          ref="commonShop"
-          :style="`height: calc(100% - 50px); `"
         >
-          <template slot="searchFormItem" slot-scope="slotProps">
+          <div
-            <!-- <el-form-item
+            class="border_box tree_content_box"
+            v-if="currentNode && currentNode.data.isLast == 1"
+          >
+            <div class="title_box" style="margin-bottom: 10px; height: 40px">
+              <div class="title">
+                <span class="line"></span>已关联课程列表
+                <el-button
+                  plain
+                  type="primary"
+                  style="margin-left: 20px"
+                  @click="openTable('addForm')"
+                  size="mini"
+                  >新增</el-button
+                >
+
+                <!-- <div style="" class="button_box"> -->
+                <!-- <el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button> -->
+
+                <!-- </div> -->
+              </div>
+            </div>
+            <!-- :isNoSearch="true" -->
+            <commonShop
+              :isNoSearch="true"
+              :otherInfo="{
+                httpType: 'raw',
+                httpDataValueName: 'courseList'
+              }"
+              :defaultForm="{
+                id: addForm.id
+              }"
+              axiosType="raw"
+              getAssociatedGoodsListKey="id"
+              :isNoPaging="true"
+              getAssociatedGoodsListValue="result"
+              :tableColumnList="tableColumnList"
+              :currentId="addForm.id ? addForm.id : ''"
+              currentType="bookMarketId"
+              :dataList="associatedGoodsList"
+              :urlList="urlList"
+              @delete="dataFormDelete"
+              :isEdit="isEdit"
+              ref="commonShop"
+              :style="`height: calc(100vh - 310px); `"
+            >
+              <template slot="searchFormItem" slot-scope="slotProps">
+                <!-- <el-form-item
               label="课程名称"
               prop="title"
               class="form_item"
@@ -160,7 +262,7 @@
               >
               </el-input>
             </el-form-item> -->
-            <!-- <el-form-item label="商品类型" prop="goodsType" class="form_item">
+                <!-- <el-form-item label="商品类型" prop="goodsType" class="form_item">
             <el-select
               size="small"
               v-model="slotProps.dataForm.goodsType"
@@ -178,100 +280,76 @@
               </el-option>
             </el-select>
           </el-form-item> -->
-          </template>
+              </template>
-          <template slot="tableItem" slot-scope="slotProps">
+              <template slot="tableItem" slot-scope="slotProps">
-            <el-table-column label="课程ID" width="70" align="center" prop="id">
+                <el-table-column
-              <!-- <template slot-scope="scope">
+                  label="课程ID"
+                  width="70"
+                  align="center"
+                  prop="id"
+                >
+                  <!-- <template slot-scope="scope">
             {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
           </template> -->
-            </el-table-column>
+                </el-table-column>
-            <el-table-column
+                <el-table-column
-              prop="title"
+                  prop="title"
-              header-align="center"
+                  header-align="center"
-              align="center"
+                  align="center"
-              label="课程名称"
+                  label="课程名称"
-            >
+                >
-            </el-table-column>
+                </el-table-column>
 
-            <el-table-column
+                <el-table-column
-              header-align="center"
+                  header-align="center"
-              align="center"
+                  align="center"
-              label="课程图"
+                  label="课程图"
-              width="140"
+                  width="140"
-            >
+                >
-              <template slot-scope="scope">
+                  <template slot-scope="scope">
-                <img
+                    <img
-                  v-if="scope.row.image != ''"
+                      v-if="scope.row.image != ''"
-                  :src="scope.row.image"
+                      :src="scope.row.image"
-                  width="25"
+                      width="25"
-                  height="35"
+                      height="35"
-                  class="tableImg"
+                      class="tableImg"
-                />
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="toSociologySort"
+                  header-align="center"
+                  align="center"
+                  label="排序"
+                >
+                </el-table-column>
+                <el-table-column
+                  header-align="center"
+                  align="center"
+                  label="课程等级"
+                >
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.level == 0">不显示</span>
+                    <span v-if="scope.row.level == 1">初级</span>
+                    <span v-if="scope.row.level == 2">高级</span>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  header-align="center"
+                  align="center"
+                  label="课程属性"
+                >
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.selective == 0">不显示</span>
+                    <span v-if="scope.row.selective == 1">必修</span>
+                    <span v-if="scope.row.selective == 2">选修</span>
+                  </template>
+                </el-table-column>
               </template>
-            </el-table-column>
+            </commonShop>
-            <el-table-column
+          </div>
-              prop="toSociologySort"
+        </el-tab-pane>
-              header-align="center"
+      </el-tabs>
-              align="center"
-              label="排序"
-            >
-            </el-table-column>
-            <el-table-column
-             
-              header-align="center"
-              align="center"
-              label="课程等级"
-            >
-            <template slot-scope="scope">
-                <span v-if="scope.row.level == 0">不显示</span>
-                <span v-if="scope.row.level == 1">初级</span>
-                <span v-if="scope.row.level == 2">高级</span>                
-            </template>
-            </el-table-column>
-            <el-table-column
-              
-              header-align="center"
-              align="center"
-              label="课程属性"
-            >
-            <template slot-scope="scope">
-                <span v-if="scope.row.selective == 0">不显示</span>
-                <span v-if="scope.row.selective == 1">必修</span>
-                <span v-if="scope.row.selective == 2">选修</span>                
-            </template>
-            </el-table-column>
-          </template>
-        </commonShop>
-
-        <div class="submitButton submitButtonBox">
-          <!-- <el-button size="small" @click.stop="dataFormEdit()">
-            取消
-          </el-button> -->
-          <el-button
-            type="primary"
-            @click="dataFormSubmit('addForm')"
-            size="small"
-            >确定</el-button
-          >
-          <!-- </div> -->
-        </div>
-      </div>
-      <div
-        class="submitButton submitButtonBox"
-        style="position: absolute;bottom: 13px;right: 15px;"
-        v-if="!isEdit"
-      >
-        <!-- <el-button size="small" @click.stop="dataFormEdit()">
-            取消
-          </el-button> -->
-        <el-button
-          type="primary"
-          @click="dataFormSubmit('addForm')"
-          size="small"
-          >确定</el-button
-        >
-        <!-- </div> -->
-      </div>
     </div>
 
     <!-- <el-form
@@ -362,12 +440,44 @@
 </template>
 
 <script>
+import { quillEditor } from "vue-quill-editor";
 import global from "../../common/common.vue"; //引入共用组间
 import debounce from "lodash/debounce"; //导入lodash中的debounce
 import AddOrUpdate from "@/views/components/commonBookTags/bookTagsForm.vue";
 import commonShop from "@/views/components/commonBookTags/shopproduct.vue";
 import commonShopTable from "@/views/components/commonBookTags/shopproductTable.vue";
 import commonTree from "@/views/components/commonBookTags/tags.vue";
+
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+const toolbarOptions = [
+  ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
+  ["blockquote", "code-block"], //引用，代码块
+  [{ header: 1 }, { header: 2 }], // 几级标题
+  [{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
+  [{ script: "sub" }, { script: "super" }], // 下角标，上角标
+  [{ indent: "-1" }, { indent: "+1" }], // 缩进
+  [{ direction: "rtl" }], // 文字输入方向
+  [{ size: ["small", false, "large", "huge"] }], // 字体大小
+  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+  [{ color: [] }, { background: [] }], // 颜色选择
+  [
+    {
+      font: [
+        "SimSun",
+        "SimHei",
+        "Microsoft-YaHei",
+        "KaiTi",
+        "FangSong",
+        "Arial"
+      ]
+    }
+  ], // 字体
+  [{ align: [] }], // 居中
+  ["clean"], // 清除样式,
+  ["link", "image"] // 上传图片、上传视频
+];
 // import dialogComponent from './seckillprodrelation'
 export default {
   data() {
@@ -385,10 +495,10 @@ export default {
         edit: "/master/courseMedical/editCourseMedical",
         hasBindProductList: "/master/courseMedical/getCourseListForMedical",
         CanBindProductList: "/master/courseMedical/getCourseListCanMedical",
-        editCourse:'/master/courseMedical/updateCourseToMedicalSort'
+        editCourse: "/master/courseMedical/updateCourseToMedicalSort"
       },
       addForm: {},
-      
+      audioFileList: [],
       isFresh: false,
       dataRule: {
         name: [
@@ -399,7 +509,7 @@ export default {
           }
         ]
       },
-      fimages:'',
+      fimages: "",
       currentNode: {},
       treeDataList: [],
       associatedGoodsList: [], //已关联商品列表
@@ -461,14 +571,39 @@ export default {
           headerAlign: "center",
           slot: "productImages"
         }
-      ]
+      ],
+      // 富文本编辑器配置
+      editorOption: {
+        modules: {
+          history: {
+            delay: 1000,
+            maxStack: 50,
+            userOnly: false
+          },
+          toolbar: {
+            container: toolbarOptions,
+            handlers: {
+              image: function(value) {
+                // if (value) {
+                // 调用element的图片上传组件
+                document.querySelector(".avatar-uploader11 input").click();
+                // } else {
+                //   this.quill.format("image", false);
+                // }
+              }
+            }
+          }
+        },
+        placeholder: "请输入简介说明"
+      }
     };
   },
   components: {
     AddOrUpdate,
     commonShop,
     commonTree,
-    commonShopTable
+    commonShopTable,
+    quillEditor
   },
   watch: {
     filterText(val) {
@@ -480,6 +615,47 @@ export default {
     this.getDataList();
   },
   methods: {
+    audioHandleRemove(file, fileList) {
+      console.log(file, fileList);
+      this.audioFileList = []
+    },
+    audioUploadSuccess(res, file) {
+      this.audioFileList.push(file)
+      console.log(this.audioFileList,res, "上传成功");
+      this.addForm.media = res.url
+     
+    },
+    // 失去焦点事件
+    onEditorBlur(quill) {
+      //  console.log('editor blur!', quill)
+    },
+    // 获得焦点事件
+    onEditorFocus(quill) {
+      //console.log('editor focus!', quill)
+    },
+    // 准备富文本编辑器
+    onEditorReady(quill) {
+      // console.log('editor ready!', quill)
+    },
+    contentUploadSuccess888(res, file) {
+      console.log(res);
+    },
+    contentUploadSuccess(res, file) {
+      // console.log(res)
+      let quill = this.$refs.myQuillEditor.quill;
+      // 如果上传成功
+      if (res) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片，res为服务器返回的图片链接地址
+        quill.insertEmbed(length, "image", res.url);
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      } else {
+        // 提示信息，需引入Message
+        this.$message.error("图片插入失败！");
+      }
+    },
     UpNumber(e) {
       e.target.value = e.target.value.replace(/[^\d]/g, "");
     },
@@ -554,8 +730,8 @@ export default {
       this.isFresh = true;
       console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id);
       this.currentNode = { data: { ...form } };
-      this.addForm = form;      
+      this.addForm = form;
-      this.fimages = this.addForm.icon
+      this.fimages = this.addForm.icon;
 
       await this.getDataList();
       // this.$refs.commonTree.setCurrentNodeShow();
@@ -576,14 +752,18 @@ export default {
     delImg() {
       this.fimages = "";
       this.addForm.icon = "";
-    },
+    },    
     handlePicSuccess(res, file) {
-      // console.log(res,'res')
-      // if (res.msg == "success") {
       this.fimages = res.url;
       this.addForm.icon = res.url;
       this.$message.success("上传成功");
-      console.log(this.fimages, this.addForm.icon, "上传");      
+      //  console.log(res, "上传");
+    },
+    handlePicSuccess11() {
+      console.log("上传音频---");
+    },
+    handlePicSuccess111() {
+      console.log("上传音频");
     },
     //新增修改
     dataFormSubmit: debounce(async function(formName) {
@@ -593,7 +773,7 @@ export default {
         return false;
       }
       console.log(this.addForm, "this.addForm-----------");
-   
+
       await this.$refs[formName].validate(async valid => {
         if (valid) {
           await this.$http({
@@ -608,12 +788,8 @@ export default {
             if (data && data.code === 0) {
               // var status = await this.correlationShop(data.result.id);
               await this.getDataList();
-
               this.$nextTick(async () => {
                 this.$refs.commonTree.setCurrentNodeShow(data.Medical.id);
-                this.fimages = data.market.icon
-                this.addForm = data.market;
-                this.currentNode = { data: { ...data.Medical } };
                 this.$message({
                   message: "操作成功",
                   type: "success",
@@ -622,6 +798,12 @@ export default {
                     this.visible = false;
                   }
                 });
+                // this.$refs.commonShopTable.getAssociatedGoodsList();
+                if (data.Medical.icon && data.Medical.icon != "") {
+                  this.fimages = data.Medical.icon;
+                }
+                this.addForm = data.Medical;
+                ///    this.currentNode = { data: { ...data.Medical } };
               });
             } else {
               this.$message.error(data.msg);
@@ -1100,9 +1282,18 @@ export default {
   box-sizing: border-box;
   // background: #fafafa;
 }
-
+.flexBox {
+  display: flex;
+}
+.subBox {
+  border: 1px solid #d6d6d6;
+  border-radius: 10px;
+  overflow: hidden;
+  width: 49%;
+  padding: 10px;
+}
 .border_box {
-  height: 100px;
+  // height: 100px;
   margin-bottom: 10px;
 
   .title_box {
@@ -1139,7 +1330,7 @@ export default {
 
 .border_box {
   width: 100%;
-  float: right;
+  // float: right;
   background: #fffefe;
 
   border-radius: 10px;
@@ -1172,6 +1363,10 @@ export default {
   }
 }
 
+.dataType{
+  margin: 20px 0;
+ justify-content: center;
+}
 .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
   background-color: #eaebed;
   color: #4796ec;
@@ -1207,14 +1402,16 @@ p {
 }
 
 .submitButtonBox {
-  margin-top: 20px;
+  // margin-top: 20px;
-  display: flex;
+  // display: flex;
-  align-items: center;
+  // align-items: center;
-  justify-content: space-between;
+  // justify-content: space-between;
 }
 
 .submitButton {
-  float: right;
+  // float: right;
+  text-align: center;
+  margin: 15px auto;
 }
 
 // .el-tree-node__content .el-button {
@@ -1236,7 +1433,7 @@ p {
   overflow: hidden;
 
   .form_item {
-    width: 25%;
+    width: 33%;
     float: left;
   }
 }
@@ -1266,4 +1463,9 @@ p {
 .shopFormBox {
   min-width: auto !important;
 }
+.ql-container {
+    height: 300px; overflow-y: scroll;
+  }
+
+/deep/ .quill-editor{min-height: 200px !important;}
 </style>