From ea5e45b584b921b4d5eded5c6f785d74f3cf5638 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=8F?= <1978476055@qq.com>
Date: Wed, 31 Jul 2024 09:31:25 +0800
Subject: [PATCH] 1

---
 admin/src/views/qa/qa.vue | 577 +++++++++++++++++++++++++++-----------
 1 file changed, 406 insertions(+), 171 deletions(-)

diff --git a/admin/src/views/qa/qa.vue b/admin/src/views/qa/qa.vue
index 6465ccba..55056c59 100644
--- a/admin/src/views/qa/qa.vue
+++ b/admin/src/views/qa/qa.vue
@@ -1,47 +1,112 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="listQuery.title" placeholder="标题" style="width: 200px;" class="filter-item" />
-      <el-select v-model="listQuery.status" filterable placeholder="状态" class="filter-item" style="width: 120px;">
+      <el-input
+        v-model="listQuery.title"
+        placeholder="标题"
+        style="width: 200px"
+        class="filter-item"
+      />
+      <el-select
+        v-model="listQuery.status"
+        filterable
+        placeholder="状态"
+        class="filter-item"
+        style="width: 120px"
+      >
         <el-option key="" label="请选择" value="" />
         <el-option v-for="(v, k) in statusArr" :key="k" :label="v" :value="k" />
       </el-select>
-      <el-button class="filter-item search" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
-      <el-button class="filter-item" type="primary" icon="el-icon-circle-plus" @click="onAdd">添加</el-button>
+      <el-button
+        class="filter-item search"
+        type="primary"
+        icon="el-icon-search"
+        @click="getList"
+        >搜索</el-button
+      >
+      <el-button
+        class="filter-item"
+        type="primary"
+        icon="el-icon-circle-plus"
+        @click="onAdd"
+        >添加</el-button
+      >
     </div>
 
-    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%; padding-bottom: 60px !important">
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%; padding-bottom: 60px !important"
+    >
       <el-table-column align="center" label="ID" width="80" prop="id" />
-      <el-table-column align="center" label="城市" width="80" prop="qaCitys.city_name" />
-      <el-table-column align="center" label="标题" width="280" style="overflow: hidden;">
+      <el-table-column
+        align="center"
+        label="城市"
+        width="80"
+        prop="qaCitys.city_name"
+      />
+      <el-table-column
+        align="center"
+        label="标题"
+        width="280"
+        style="overflow: hidden"
+      >
         <template slot-scope="scope">
           <div class="ellipsis-text">{{ scope.row.title }}</div>
         </template>
       </el-table-column>
       <el-table-column align="center" label="状态" width="100">
         <template #default="scope">
-          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="updateStatus(scope.row)" />
+          <el-switch
+            v-model="scope.row.status"
+            :active-value="1"
+            :inactive-value="0"
+            @change="updateStatus(scope.row)"
+          />
         </template>
       </el-table-column>
       <el-table-column align="center" width="220" label="操作">
         <template #default="scope">
-          <el-button type="primary" size="small" icon="el-icon-edit" @click="onEdit(scope.row)">编辑</el-button>
-          <el-button type="danger" size="small" icon="el-icon-delete" @click="onDel(scope.row)">删除</el-button>
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-edit"
+            @click="onEdit(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            type="danger"
+            size="small"
+            icon="el-icon-delete"
+            @click="onDel(scope.row)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.limit"
+      @pagination="getList"
+    />
 
     <el-dialog title="添加QA" :visible.sync="dialogCreate">
       <el-form label-width="120px" :model="anchors">
         <el-form-item label="城市">
           <el-select v-model="anchors.city_id" placeholder="请选择">
-            <el-form-item style="display: inline-flex;text-align: left;width: 770px;">
+            <el-form-item
+              style="display: inline-flex; text-align: left; width: 770px"
+            >
               <el-option
                 v-for="item in getQaCitys"
                 :key="item.city_id"
-                style="display: inline-flex;word-break: break-all;"
+                style="display: inline-flex; word-break: break-all"
                 :label="item.city_name"
                 :value="item.city_id"
               />
@@ -49,23 +114,41 @@
           </el-select>
         </el-form-item>
         <el-form-item label="旅游路线">
-          <el-input v-model="anchors.title" type="text" placeholder="请输入旅游路线" />
+          <el-input
+            v-model="anchors.title"
+            type="text"
+            placeholder="请输入旅游路线"
+          />
         </el-form-item>
         <el-form-item label="QA内容">
-          <div class="mistake-content" v-for="(item, index) in anchors.qaQuestions">
+          <div
+            class="mistake-content"
+            v-for="(item, index) in anchors.qaQuestions"
+          >
             <div class="mistake-left">
               <div>副标题</div>
               <div class="qa-desc">
-                <el-input style="width: 100px;margin-right: 10px;" v-model="item.sort" type="text" placeholder="序号" />
-                <el-input v-model="item.title" type="text" placeholder="请输入副标题" />
+                <el-input
+                  style="width: 100px; margin-right: 10px"
+                  v-model="item.sort"
+                  type="text"
+                  placeholder="序号"
+                />
+                <el-input
+                  v-model="item.title"
+                  type="text"
+                  placeholder="请输入副标题"
+                />
               </div>
               <div>内容</div>
-              <div style="border: 1px solid #ccc;">
+              <div style="border: 1px solid #ccc">
                 <myEditor v-model="item.content" />
               </div>
             </div>
             <div class="mistake-right">
-              <el-button @click="handleDel(index)" type="danger">删除</el-button>
+              <el-button @click="handleDel(index)" type="danger"
+                >删除</el-button
+              >
             </div>
           </div>
           <div class="mistake-btn">
@@ -73,7 +156,13 @@
           </div>
         </el-form-item>
         <el-form-item label="状态">
-          <el-switch v-model="anchors.status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" />
+          <el-switch
+            v-model="anchors.status"
+            :active-value="1"
+            :inactive-value="0"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+          />
         </el-form-item>
         <el-form-item label="上传图片">
           <el-upload
@@ -82,12 +171,26 @@
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
           >
-          <div v-if="anchors.img_zip" class="img-box">
-            <i @click.stop="handleClose('img_zip')" class="close el-icon-close" />
-            <i v-if="!checkIfUrlContainsImage(anchors.img_zip)" class="el-icon-folder" />
-            <img v-else style="width: 100px;height: 100px;" :src="anchors.img_zip" class="avatar" alt="">
-          </div>
-            <i v-else class="el-icon-plus avatar-uploader-icon"/>
+            <div v-if="anchors.img_zip">
+              <div v-for="(item, index) in anchors.img_zip" class="img-box">
+                <i
+                  @click.stop="handleClose('img_zip', index)"
+                  class="close el-icon-close"
+                />
+                <i
+                  v-if="!checkIfUrlContainsImage(anchors.img_zip)"
+                  class="el-icon-folder"
+                />
+                <img
+                  v-else
+                  style="width: 100px; height: 100px"
+                  :src="item"
+                  class="avatar"
+                  alt=""
+                />
+              </div>
+            </div>
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
           </el-upload>
           <span>{{ anchors.img_zip }}</span>
           <div style="color: red">(请上传zip格式的文件图片)</div>
@@ -99,19 +202,53 @@
             :show-file-list="false"
             :on-success="handleSuccess"
           >
-            <div v-if="anchors.trip_zip" class="img-box">
-              <i @click.stop="handleClose('trip_zip')" class="close el-icon-close" />
-              <i v-if="!checkIfUrlContainsImage(anchors.trip_zip)" class="el-icon-folder" />
-              <img v-else style="width: 100px;height: 100px;" :src="anchors.trip_zip" class="avatar" alt="">
+            <!-- <div v-if="anchors.trip_zip" class="img-box">
+              <i
+                @click.stop="handleClose('trip_zip')"
+                class="close el-icon-close"
+              />
+              <i
+                v-if="!checkIfUrlContainsImage(anchors.trip_zip)"
+                class="el-icon-folder"
+              />
+              <img
+                v-else
+                style="width: 100px; height: 100px"
+                :src="anchors.trip_zip"
+                class="avatar"
+                alt=""
+              />
             </div>
-              <i v-else class="el-icon-plus avatar-uploader-icon"/>
+            <i v-else class="el-icon-plus avatar-uploader-icon" /> -->
+            <div v-if="anchors.trip_zip">
+              <div v-for="(item, index) in anchors.trip_zip" class="img-box">
+                <i
+                  @click.stop="handleClose('trip_zip', index)"
+                  class="close el-icon-close"
+                />
+                <i
+                  v-if="!checkIfUrlContainsImage(item)"
+                  class="el-icon-folder"
+                />
+                <img
+                  v-else
+                  style="width: 100px; height: 100px"
+                  :src="item"
+                  class="avatar"
+                  alt=""
+                />
+              </div>
+            </div>
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
           </el-upload>
           <span>{{ anchors.trip_zip }}</span>
           <span style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</span>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button v-loading="loading" type="primary" @click="onSave">保 存</el-button>
+        <el-button v-loading="loading" type="primary" @click="onSave"
+          >保 存</el-button
+        >
       </div>
     </el-dialog>
 
@@ -119,11 +256,17 @@
       <el-form label-width="120px" :model="anchors">
         <el-form-item label="城市">
           <el-select v-model="anchors.city_id" placeholder="请选择">
-            <el-form-item style="display: inline-flex;text-align: left;width: 770px;">
+            <el-form-item
+              style="display: inline-flex; text-align: left; width: 770px"
+            >
               <el-option
                 v-for="item in getQaCitys"
                 :key="item.city_id"
-                style="width: 250px;display: inline-flex;word-break: break-all;"
+                style="
+                  width: 250px;
+                  display: inline-flex;
+                  word-break: break-all;
+                "
                 :label="item.city_name"
                 :value="item.city_id"
               />
@@ -131,23 +274,41 @@
           </el-select>
         </el-form-item>
         <el-form-item label="旅游路线">
-          <el-input v-model="anchors.title" type="text" placeholder="请输入旅游路线" />
+          <el-input
+            v-model="anchors.title"
+            type="text"
+            placeholder="请输入旅游路线"
+          />
         </el-form-item>
         <el-form-item label="QA内容">
-          <div class="mistake-content" v-for="(item,index) in anchors.qaQuestions">
+          <div
+            class="mistake-content"
+            v-for="(item, index) in anchors.qaQuestions"
+          >
             <div class="mistake-left">
               <div>副标题</div>
               <div class="qa-desc">
-                <el-input style="width: 100px;margin-right: 10px;" v-model="item.sort" type="text" placeholder="序号" />
-                <el-input v-model="item.title" type="text" placeholder="请输入副标题" />
+                <el-input
+                  style="width: 100px; margin-right: 10px"
+                  v-model="item.sort"
+                  type="text"
+                  placeholder="序号"
+                />
+                <el-input
+                  v-model="item.title"
+                  type="text"
+                  placeholder="请输入副标题"
+                />
               </div>
               <div>内容</div>
-              <div style="border: 1px solid #ccc;">
-                <myEditor v-model="item.content"/>
+              <div style="border: 1px solid #ccc">
+                <myEditor v-model="item.content" />
               </div>
             </div>
             <div class="mistake-right">
-              <el-button @click="handleDel(index)" type="danger">删除</el-button>
+              <el-button @click="handleDel(index)" type="danger"
+                >删除</el-button
+              >
             </div>
           </div>
           <div class="mistake-btn">
@@ -155,7 +316,13 @@
           </div>
         </el-form-item>
         <el-form-item label="状态">
-          <el-switch v-model="anchors.status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" />
+          <el-switch
+            v-model="anchors.status"
+            :active-value="1"
+            :inactive-value="0"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+          />
         </el-form-item>
         <el-form-item label="上传图片">
           <el-upload
@@ -164,12 +331,24 @@
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
           >
-          <div v-if="anchors.img_zip" class="img-box">
-            <i @click.stop="handleClose('img_zip')" class="close el-icon-close" />
-            <i v-if="!checkIfUrlContainsImage(anchors.img_zip)" class="el-icon-folder" />
-            <img v-else style="width: 100px;height: 100px;" :src="anchors.img_zip" class="avatar" alt="">
-          </div>
-            <i v-else class="el-icon-plus avatar-uploader-icon"/>
+            <div v-if="anchors.img_zip" class="img-box">
+              <i
+                @click.stop="handleClose('img_zip')"
+                class="close el-icon-close"
+              />
+              <i
+                v-if="!checkIfUrlContainsImage(anchors.img_zip)"
+                class="el-icon-folder"
+              />
+              <img
+                v-else
+                style="width: 100px; height: 100px"
+                :src="anchors.img_zip"
+                class="avatar"
+                alt=""
+              />
+            </div>
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
           </el-upload>
           <span>{{ anchors.img_zip }}</span>
           <div style="color: red">(请上传zip格式的文件图片)</div>
@@ -182,33 +361,47 @@
             :on-success="handleSuccess"
           >
             <div v-if="anchors.trip_zip" class="img-box">
-              <i @click.stop="handleClose('trip_zip')" class="close el-icon-close" />
-              <i v-if="!checkIfUrlContainsImage(anchors.trip_zip)" class="el-icon-folder" />
-              <img v-else style="width: 100px;height: 100px;" :src="anchors.trip_zip" class="avatar" alt="">
+              <i
+                @click.stop="handleClose('trip_zip')"
+                class="close el-icon-close"
+              />
+              <i
+                v-if="!checkIfUrlContainsImage(anchors.trip_zip)"
+                class="el-icon-folder"
+              />
+              <img
+                v-else
+                style="width: 100px; height: 100px"
+                :src="anchors.trip_zip"
+                class="avatar"
+                alt=""
+              />
             </div>
-              <i v-else class="el-icon-plus avatar-uploader-icon"/>
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
           </el-upload>
           <span>{{ anchors.trip_zip }}</span>
           <div style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</div>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button v-loading="loading" type="primary" @click="onSave">保 存</el-button>
+        <el-button v-loading="loading" type="primary" @click="onSave"
+          >保 存</el-button
+        >
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import Pagination from '@/components/PaginationFixed'
-import myEditor from '@/components/Wangeditor/index.vue'
+import Pagination from "@/components/PaginationFixed";
+import myEditor from "@/components/Wangeditor/index.vue";
 
 export default {
-  name: 'getQa',
-  components: { Pagination, myEditor},
+  name: "getQa",
+  components: { Pagination, myEditor },
   data() {
     return {
-      statusArr: { 0: '禁用', 1: '启用' },
+      statusArr: { 0: "禁用", 1: "启用" },
       list: [],
       total: 0,
       loading: false,
@@ -217,182 +410,224 @@ export default {
         page: 1,
         limit: 10,
         status: null,
-        city_name: '',
-        title: '',
-        content: '',
-        img_zip:'',
-        trip_zip:''
+        city_name: "",
+        title: "",
+        content: "",
+        img_zip: [],
+        trip_zip: [],
       },
       dialogCreate: false,
       dialogEdit: false,
       item: {},
       anchors: {
-        qaQuestions:[],
-        img_zip:'',
-        trip_zip:''
+        qaQuestions: [],
+        img_zip: [],
+        trip_zip: [],
       },
-      getQaCitys: {}
-    }
+      getQaCitys: {},
+    };
   },
   created() {
-    this.listQuery.status = this.$route.query.status || null
-    this.listQuery.content = this.$route.query.content || null
-    this.getList()
-    this.getQaCity()
+    this.listQuery.status = this.$route.query.status || null;
+    this.listQuery.content = this.$route.query.content || null;
+    this.getList();
+    this.getQaCity();
     // this.onChange()
   },
   methods: {
     checkIfUrlContainsImage(url) {
-      const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg', '.webp'];
-      console.log('========fffff====' + imageExtensions.some(extension => url.toLowerCase().endsWith(extension)))
-      return imageExtensions.some(extension => url.toLowerCase().endsWith(extension));
+      const imageExtensions = [
+        ".jpg",
+        ".jpeg",
+        ".png",
+        ".gif",
+        ".bmp",
+        ".svg",
+        ".webp",
+      ];
+      console.log(
+        "========fffff====" +
+          imageExtensions.some((extension) =>
+            url.toLowerCase().endsWith(extension)
+          )
+      );
+      return imageExtensions.some((extension) =>
+        url.toLowerCase().endsWith(extension)
+      );
     },
-    handleClose(val){
-      this.anchors[val] = ''
+    handleClose(val) {
+      this.anchors[val] = "";
     },
-    handleAdd(){
+    handleAdd() {
       this.anchors.qaQuestions.push({
-        sort:this.anchors.qaQuestions[this.anchors.qaQuestions.length-1].sort+1,
-        title: '',
-        content: ''
-      })
+        sort:
+          this.anchors.qaQuestions[this.anchors.qaQuestions.length - 1].sort +
+          1,
+        title: "",
+        content: "",
+      });
     },
-    handleDel(id){
-      if(this.anchors.qaQuestions.length==1){
+    handleDel(id) {
+      if (this.anchors.qaQuestions.length == 1) {
         this.$message({
-          message: '至少保留一条',
-          type: 'warning'
+          message: "至少保留一条",
+          type: "warning",
         });
-        return
+        return;
       }
-      this.anchors.qaQuestions = this.anchors.qaQuestions.filter((item,i)=>i!==id)
+      this.anchors.qaQuestions = this.anchors.qaQuestions.filter(
+        (item, i) => i !== id
+      );
     },
     getList() {
-      this.listLoading = true
-      this.$axios.get('/admin/qa/getQa', { params: this.listQuery }).then(response => {
-        this.list = response.data.data
-        this.total = response.data.total
-        this.listLoading = false
-      }).catch(() => {
-        this.listLoading = false
-      })
+      this.listLoading = true;
+      this.$axios
+        .get("/admin/qa/getQa", { params: this.listQuery })
+        .then((response) => {
+          this.list = response.data.data;
+          this.total = response.data.total;
+          this.listLoading = false;
+        })
+        .catch(() => {
+          this.listLoading = false;
+        });
     },
     handleAvatarSuccess(res, file) {
-      console.log('====1111===' + res)
-      this.anchors.img_zip = `${window.location.protocol}//${window.location.host}${res.data}`
-      console.log('====111122222===' + this.anchors.img_zip)
+      console.log("====1111===" + res);
+      this.anchors.img_zip.push(
+        `${window.location.protocol}//${window.location.host}${res.data}`
+      );
+      console.log("====111122222===" + this.anchors.img_zip);
     },
     handleSuccess(res, file) {
-      console.log('====222222===' + res)
-      this.anchors.trip_zip = `${window.location.protocol}//${window.location.host}${res.data}`
-      console.log('====111122222===' + this.anchors.trip_zip)
+      console.log("====222222===" + res);
+      this.anchors.trip_zip.push(
+        `${window.location.protocol}//${window.location.host}${res.data}`
+      );
+      console.log("====111122222===" + this.anchors.trip_zip);
     },
     onAdd() {
-      this.anchors.qaQuestions=[{
-          sort:1,
-          title: '',
-          content: ''
-        }]
-       // 初始化时默认排序值为0
-      this.anchors.img_zip = ''
-      this.anchors.trip_zip = ''
-      this.dialogCreate = true
+      this.anchors.qaQuestions = [
+        {
+          sort: 1,
+          title: "",
+          content: "",
+        },
+      ];
+      // 初始化时默认排序值为0
+      this.anchors.img_zip = [];
+      this.anchors.trip_zip = [];
+      this.dialogCreate = true;
     },
     onEdit(item) {
-      if(!item.qaQuestions.length){
+      if (!item.qaQuestions.length) {
         this.anchors = {
           ...item,
-          qaQuestions:[{
-            sort:1,
-            title: '',
-            content: ''
-          }]
-        }
-      }else{
-        this.anchors = { ...item}
+          qaQuestions: [
+            {
+              sort: 1,
+              title: "",
+              content: "",
+            },
+          ],
+        };
+      } else {
+        this.anchors = { ...item };
       }
-      this.anchors.img_zip = item.img_zip
-      this.anchors.trip_zip = item.trip_zip
-      this.dialogEdit = true
+      this.anchors.img_zip = item.img_zip;
+      this.anchors.trip_zip = item.trip_zip;
+      this.dialogEdit = true;
     },
     onSave() {
-      if (this.loading) return
-      this.loading = true
-      const api = this.dialogCreate ? '/admin/qa/addQa' : '/admin/qa/editQa'
-      this.$axios.post(api, this.anchors).then(() => {
-        this.dialogCreate = false
-        this.dialogEdit = false
-        this.loading = false
-        this.getList()
-      }).catch(() => {
-        this.loading = false
-      })
+      if (this.loading) return;
+      this.loading = true;
+      const api = this.dialogCreate ? "/admin/qa/addQa" : "/admin/qa/editQa";
+      this.$axios
+        .post(api, this.anchors)
+        .then(() => {
+          this.dialogCreate = false;
+          this.dialogEdit = false;
+          this.loading = false;
+          this.getList();
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
     onDel(item) {
-      this.$axios.post('/admin/qa/delQa', { id: item.id }).then(() => {
-        this.getList()
-      }).catch(() => {
-      })
+      this.$axios
+        .post("/admin/qa/delQa", { id: item.id })
+        .then(() => {
+          this.getList();
+        })
+        .catch(() => {});
     },
-    getQaCity(){
-      this.$axios.post('/admin/qacity/getQaCity').then(response => {
-        this.getQaCitys = response.data
-        this.getList()
-      }).catch(() => {
-      })
+    getQaCity() {
+      this.$axios
+        .post("/admin/qacity/getQaCity")
+        .then((response) => {
+          this.getQaCitys = response.data;
+          this.getList();
+        })
+        .catch(() => {});
     },
     updateSort(item) {
-      this.$axios.post('/admin/qa/editQa', { id: item.id, sort: item.sort }).then(() => {
-        this.getList()
-      }).catch(() => {
-      })
+      this.$axios
+        .post("/admin/qa/editQa", { id: item.id, sort: item.sort })
+        .then(() => {
+          this.getList();
+        })
+        .catch(() => {});
     },
     updateStatus(item) {
-      this.$axios.post('/admin/qa/editQa', { id: item.id, status: item.status }).then(() => {
-        this.getList()
-      }).catch(() => {
-      })
-    }
+      this.$axios
+        .post("/admin/qa/editQa", { id: item.id, status: item.status })
+        .then(() => {
+          this.getList();
+        })
+        .catch(() => {});
+    },
   },
   mounted() {
     // 模拟 ajax 请求，异步渲染编辑器
     setTimeout(() => {
-      this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
-    }, 1500)
+      this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
+    }, 1500);
   },
   beforeDestroy() {
-    const editor = this.editor
-    if (editor == null) return
-    editor.destroy() // 组件销毁时，及时销毁编辑器
-  }
-}
+    const editor = this.editor;
+    if (editor == null) return;
+    editor.destroy(); // 组件销毁时，及时销毁编辑器
+  },
+};
 </script>
 
 <style scoped>
-.img-box{
+.img-box {
   position: relative;
+  display: inline-block;
 }
-.el-icon-folder{
-  color: #409EFF !important;
+.el-icon-folder {
+  color: #409eff !important;
   font-size: 100px;
 }
-.close{
+.close {
   position: absolute;
   top: -10px;
   right: -8px;
   font-size: 18px;
-  color: #409EFF;
+  color: #409eff;
 }
-.qa-desc{
+.qa-desc {
   display: flex;
 }
-.mistake-content{
+.mistake-content {
   display: flex;
 }
-.mistake-left{
+.mistake-left {
   width: 90%;
 }
-.mistake-right{
+.mistake-right {
   padding-left: 20px;
   height: auto;
   display: flex;
@@ -409,7 +644,7 @@ export default {
 .el-table {
   padding-bottom: 52px; /* 分页条的高度，以避免内容重叠 */
 }
-.mistake-btn{
+.mistake-btn {
   display: flex;
   flex-direction: row-reverse;
   margin-top: 10px;
@@ -425,7 +660,7 @@ export default {
   overflow: hidden;
 }
 .avatar-uploader .el-upload:hover {
-  border-color: #409EFF;
+  border-color: #409eff;
 }
 .avatar-uploader-icon {
   border: 1px solid #979797;