From ea5813bea78e16bc19fca4e41db86e35f6b2a085 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=8F?= <1978476055@qq.com>
Date: Fri, 9 Aug 2024 15:06:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/views/qa/problem.vue | 231 +++++++++++++---------
 admin/src/views/qa/qa.vue      | 340 ++++++++++++++++++---------------
 2 files changed, 329 insertions(+), 242 deletions(-)

diff --git a/admin/src/views/qa/problem.vue b/admin/src/views/qa/problem.vue
index 583b57d6..e065fd3e 100644
--- a/admin/src/views/qa/problem.vue
+++ b/admin/src/views/qa/problem.vue
@@ -3,9 +3,19 @@
     <el-row>
       <el-col :span="24">
         <div class="problem_form">
-          <el-form :inline="true" ref="form" :model="dataForm" label-width="60px">
+          <el-form
+            :inline="true"
+            ref="form"
+            :model="dataForm"
+            label-width="60px"
+          >
             <el-form-item label="关键字:">
-              <el-input v-model="dataForm.keyword" placeholder="请输入搜索关键字" style="width: 400px;" class="filter-item" />
+              <el-input
+                v-model="dataForm.keyword"
+                placeholder="请输入搜索关键字"
+                style="width: 400px"
+                class="filter-item"
+              />
             </el-form-item>
             <el-form-item>
               <el-button type="success" @click="onSubmit">查询</el-button>
@@ -15,26 +25,58 @@
       </el-col>
     </el-row>
     <div class="problem_container">
-      <div class="problem_left" v-infinite-scroll="load" :infinite-scroll-immediate="false" style="overflow:auto;padding: 10px;">
-        <div @click="handleQacityl(item.city_id)" class="btn" v-for="item in getQaCityList">{{ item.city_name }}</div>
+      <div
+        class="problem_left"
+        v-infinite-scroll="load"
+        :infinite-scroll-immediate="false"
+        style="overflow: auto; padding: 10px"
+      >
+        <div
+          @click="handleQacityl(item.city_id)"
+          class="btn"
+          v-for="item in getQaCityList"
+        >
+          {{ item.city_name }}
+        </div>
       </div>
       <div class="problem_right">
-        <ul class="infinite-list" v-infinite-scroll="load" :infinite-scroll-immediate="false" style="overflow:auto">
+        <ul
+          class="infinite-list"
+          v-infinite-scroll="load"
+          :infinite-scroll-immediate="false"
+          style="overflow: auto"
+        >
           <li class="problem_right_container" v-for="item in getQaLists">
             <div class="title">
               <span v-html="handleprant(item.title)"></span>
               <!-- <el-button @click="handleZip(item.img_zip)" type="primary">下载图片</el-button>
               <el-button @click="handleZip(item.trip_zip)" type="primary">下载行程</el-button> -->
-              <el-button @click="showImgDialog(item.img_zip)" type="primary">下载图片</el-button>
-              <el-button @click="showFileList(item.trip_zip)" type="primary" style="margin-left: 10px;">下载行程</el-button>
+              <el-button @click="showImgDialog(item.img_zip)" type="primary"
+                >下载图片</el-button
+              >
+              <el-button
+                @click="showFileList(item.trip_zip)"
+                type="primary"
+                style="margin-left: 10px"
+                >下载行程</el-button
+              >
             </div>
             <div class="desc_container" v-for="list in item.qaQuestions">
-              <span style="font-weight: 700;color: #46a6ff;" class="desc" v-html="handleprant(list.title)">
+              <span
+                style="font-weight: 700; color: #46a6ff"
+                class="desc"
+                v-html="handleprant(list.title)"
+              >
               </span>
-              <el-button @click="copyToClipboard(list.content)" type="primary" size="mini" style="margin-left: 10px;">复制</el-button>
+              <el-button
+                @click="copyToClipboard(list.content)"
+                type="primary"
+                size="mini"
+                style="margin-left: 10px"
+                >复制</el-button
+              >
 
-              <div class="desc" v-html="handleprantHtml(list.content)">
-              </div>
+              <div class="desc" v-html="handleprantHtml(list.content)"></div>
             </div>
           </li>
         </ul>
@@ -50,10 +92,18 @@
           class="image-card"
           :body-style="{ padding: '10px' }"
         >
-          <img :src="image.url" class="image-preview" />
+          <div style="text-align: center">{{ image.desc }}</div>
+          <img :src="image.file" class="image-preview" />
           <div class="image-footer">
-            <el-button @click="handlePreview(image.url)" size="mini">查看</el-button>
-            <el-button @click="handleDownload(image.url)" type="success" size="mini">下载</el-button>
+            <el-button @click="handlePreview(image.file)" size="mini"
+              >查看</el-button
+            >
+            <el-button
+              @click="handleDownload(image.file)"
+              type="success"
+              size="mini"
+              >下载</el-button
+            >
           </div>
         </el-card>
       </div>
@@ -74,12 +124,17 @@
         >
           <div class="file-info">
             <el-icon class="file-icon">
-              <i :class="getFileIcon(file.url)"></i>
+              <i :class="getFileIcon(file.file)"></i>
             </el-icon>
-            <span class="file-name">{{ file.name }}</span>
+            <span class="file-name">{{ file.desc }}</span>
           </div>
           <div class="file-footer">
-            <el-button @click="handleDownload(file.url)" type="success" size="mini">下载</el-button>
+            <el-button
+              @click="handleDownload(file.file)"
+              type="success"
+              size="mini"
+              >下载</el-button
+            >
           </div>
         </el-card>
       </div>
@@ -99,7 +154,7 @@
 </template>
 
 <script>
-import { getQaCityList, getQaList } from '@/api/qa'
+import { getQaCityList, getQaList } from "@/api/qa";
 
 export default {
   data() {
@@ -107,110 +162,115 @@ export default {
       getQaCityList: [],
       getQaLists: [],
       dataForm: {
-        keyword: '',
-        city_id: ''
+        keyword: "",
+        city_id: "",
       },
       dialogImage: false, // 控制图片列表对话框的显示
       previewVisible: false, // 控制图片预览对话框的显示
-      previewImageUrl: '', // 预览图片的 URL
-      previewTitle: '', // 预览图片的标题
-      imageList: [ // 示例图片列表
+      previewImageUrl: "", // 预览图片的 URL
+      previewTitle: "", // 预览图片的标题
+      imageList: [
+        // 示例图片列表
       ],
-      fileList: [ // 示例图片列表
+      fileList: [
+        // 示例图片列表
       ],
       dialogFile: false,
-    }
+    };
   },
   created() {
-    getQaCityList().then(res => {
-      this.getQaCityList = res.data
-    })
+    getQaCityList().then((res) => {
+      this.getQaCityList = res.data;
+    });
   },
   watch: {
-    'dataForm.keyword': function (newVal) {
+    "dataForm.keyword": function (newVal) {
       if (newVal) {
         this.onSubmit();
       }
-    }
+    },
   },
   methods: {
     // 显示文件列表对话框
     showFileList(fileUrl) {
-      this.fileList = [];
-      if (fileUrl) {
-        this.fileList = fileUrl.split(',').map(url => ({ url, name: url.split('/').pop() }));
+      if (fileUrl.length) {
+        this.fileList = fileUrl;
       }
       this.dialogFile = true;
     },
     // 根据文件 URL 获取文件图标
     getFileIcon(url) {
-      const ext = url.split('.').pop().toLowerCase();
+      const ext = url.split(".").pop().toLowerCase();
+      console.log(ext);
       switch (ext) {
-        case 'pdf':
-          return 'el-icon-file-pdf';
-        case 'docx':
-          return 'el-icon-file-word';
-        case 'pptx':
-          return 'el-icon-file-ppt';
-        case 'xlsx':
-          return 'el-icon-file-excel';
+        case "pdf":
+          return "el-icon-file-pdf";
+        case "docx":
+          return "el-icon-file-word";
+        case "pptx":
+          return "el-icon-file-ppt";
+        case "xlsx":
+          return "el-icon-file-excel";
         default:
-          return 'el-icon-file';
+          return "el-icon-file";
       }
     },
     handleQacityl(val) {
-      getQaList({ city_id: val }).then(res => {
-        this.getQaLists = res.data.data
-      })
+      getQaList({ city_id: val }).then((res) => {
+        this.getQaLists = res.data.data;
+      });
     },
     handleZip(url) {
       if (url) {
         // window.open(url)
         fetch(url)
-          .then(response => response.blob())
-          .then(blob => {
-            const link = document.createElement('a');
+          .then((response) => response.blob())
+          .then((blob) => {
+            const link = document.createElement("a");
             const objectUrl = URL.createObjectURL(blob);
             link.href = objectUrl;
-            link.download = url.split('/').pop(); // Extract filename from URL
+            link.download = url.split("/").pop(); // Extract filename from URL
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
             URL.revokeObjectURL(objectUrl);
           })
-          .catch(error => {
+          .catch((error) => {
             this.$message({
               showClose: true,
-              message: '下载失败',
-              type: 'error'
+              message: "下载失败",
+              type: "error",
             });
-            console.error('Download error:', error);
+            console.error("Download error:", error);
           });
       } else {
         this.$message({
           showClose: true,
-          message: '暂无下载链接',
-          type: 'warning'
+          message: "暂无下载链接",
+          type: "warning",
         });
       }
     },
     load() {
-      console.log('load')
+      console.log("load");
     },
     handleprant(val) {
-      if (!val) return ''; // 处理空值情况，避免返回 undefined 或其他非字符串值
+      if (!val) return ""; // 处理空值情况，避免返回 undefined 或其他非字符串值
 
       let replaceReg = new RegExp(this.dataForm.keyword, "ig");
       let replaceString = `<span style="color: #fff;background-color: #FC0421FF;">${this.dataForm.keyword}</span>`;
       return val.replace(replaceReg, replaceString);
     },
     handleprantHtml(val) {
-      if (!val) return '';
+      if (!val) return "";
 
       let p = this.dataForm.keyword;
       let regexp = new RegExp(p, "g");
       let replacedHtml = val.replace(/(?<=>)[^>]+(?=<[/]?\w+.*>)/g, (v) => {
-        return v.replace(regexp, `<span style='color: #fff;background-color: #FC0421FF;'>${p}</span>`);
+        return v.replace(
+          regexp,
+          `<span style='color: #fff;background-color: #FC0421FF;'>${p}</span>`
+        );
       });
       // 检查是否有替换发生
       if (replacedHtml === val) {
@@ -220,32 +280,31 @@ export default {
       return replacedHtml;
     },
     onSubmit() {
-      getQaList(this.dataForm).then(res => {
-        this.getQaLists = res.data.data
-      })
+      getQaList(this.dataForm).then((res) => {
+        this.getQaLists = res.data.data;
+      });
     },
     copyToClipboard(html) {
       const text = this.stripHtml(html);
-      const input = document.createElement('textarea');
+      const input = document.createElement("textarea");
       input.value = text;
       document.body.appendChild(input);
       input.select();
-      document.execCommand('copy');
+      document.execCommand("copy");
       document.body.removeChild(input);
       this.$message({
         showClose: true,
-        message: '内容已复制'
+        message: "内容已复制",
       });
     },
     stripHtml(html) {
-      const div = document.createElement('div');
+      const div = document.createElement("div");
       div.innerHTML = html;
-      return div.textContent || div.innerText || '';
+      return div.textContent || div.innerText || "";
     },
     showImgDialog(imagesUrls) {
-      this.imageList = []
-      if (imagesUrls) {
-        this.imageList = imagesUrls.split(',').map(url => ({ url }));
+      if (imagesUrls.length) {
+        this.imageList = imagesUrls;
       }
 
       this.dialogImage = true;
@@ -253,7 +312,7 @@ export default {
     // 处理图片预览
     handlePreview(url) {
       this.previewImageUrl = url;
-      this.previewTitle = '图片预览';
+      this.previewTitle = "图片预览";
       this.previewVisible = true;
     },
     // 处理图片删除
@@ -265,35 +324,35 @@ export default {
       if (url) {
         // window.open(url)
         fetch(url)
-          .then(response => response.blob())
-          .then(blob => {
-            const link = document.createElement('a');
+          .then((response) => response.blob())
+          .then((blob) => {
+            const link = document.createElement("a");
             const objectUrl = URL.createObjectURL(blob);
             link.href = objectUrl;
-            link.download = url.split('/').pop(); // Extract filename from URL
+            link.download = url.split("/").pop(); // Extract filename from URL
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
             URL.revokeObjectURL(objectUrl);
           })
-          .catch(error => {
+          .catch((error) => {
             this.$message({
               showClose: true,
-              message: '下载失败',
-              type: 'error'
+              message: "下载失败",
+              type: "error",
             });
-            console.error('Download error:', error);
+            console.error("Download error:", error);
           });
       } else {
         this.$message({
           showClose: true,
-          message: '暂无下载链接',
-          type: 'warning'
+          message: "暂无下载链接",
+          type: "warning",
         });
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -365,7 +424,7 @@ body {
           font-weight: 600;
           margin-bottom: 10px;
           color: #46a6ff;
-          &>:nth-child(1) {
+          & > :nth-child(1) {
             margin-right: 40px;
           }
         }
diff --git a/admin/src/views/qa/qa.vue b/admin/src/views/qa/qa.vue
index 85c39919..1345833d 100644
--- a/admin/src/views/qa/qa.vue
+++ b/admin/src/views/qa/qa.vue
@@ -96,169 +96,185 @@
       @pagination="getList"
     />
 
-    <el-dialog :title="title" :visible.sync="dialogCreate">
-      <el-button
-        class="filter-items"
-        v-loading="loading"
-        type="primary"
-        @click="onSave"
-        >保 存</el-button
+    <el-dialog
+      v-if="dialogCreate"
+      ref="dialog"
+      :title="title"
+      :visible.sync="dialogCreate"
+    >
+      <div
+        style="display: flex; justify-content: flex-end; margin-bottom: 10px"
       >
-      <el-form ref="addForm" label-width="120px" :model="anchors">
-        <el-form-item label="城市" prop="city_id">
-          <el-select v-model="anchors.city_id" placeholder="请选择">
-            <el-form-item
-              style="display: inline-flex; text-align: left; width: 770px"
+        <el-button v-loading="loading" type="primary" @click="onSave"
+          >保 存</el-button
+        >
+      </div>
+      <el-scrollbar ref="scrollbar" class="scrollable-container">
+        <el-form ref="addForm" label-width="120px" :model="anchors">
+          <el-form-item label="城市" prop="city_id">
+            <el-select v-model="anchors.city_id" placeholder="请选择">
+              <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"
+                  :label="item.city_name"
+                  :value="item.city_id"
+                />
+              </el-form-item>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="旅游路线" prop="title">
+            <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"
             >
-              <el-option
-                v-for="item in getQaCitys"
-                :key="item.city_id"
-                style="display: inline-flex; word-break: break-all"
-                :label="item.city_name"
-                :value="item.city_id"
-              />
-            </el-form-item>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="旅游路线" prop="title">
-          <el-input
-            v-model="anchors.title"
-            type="text"
-            placeholder="请输入旅游路线"
-          />
-        </el-form-item>
-        <el-form-item label="QA内容">
+              <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="请输入副标题"
+                  />
+                </div>
+                <div>内容</div>
+                <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
+                >
+              </div>
+            </div>
+            <div class="mistake-btn">
+              <el-button type="primary" @click="handleAdd">添加</el-button>
+            </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-form-item>
           <div
-            class="mistake-content"
-            v-for="(item, index) in anchors.qaQuestions"
+            style="
+              display: flex;
+              justify-content: flex-end;
+              margin-bottom: 10px;
+            "
           >
-            <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-button type="primary" @click="onAddImg()">添加图片</el-button>
+          </div>
+          <el-form-item label="上传图片">
+            <div class="upload-list">
+              <div class="wu-yu" v-for="(item, index) in anchors.img_zip">
+                <i
+                  @click.stop="handleClose('img_zip', index)"
+                  class="close el-icon-close"
                 />
-                <el-input
-                  v-model="item.title"
-                  type="text"
-                  placeholder="请输入副标题"
-                />
-              </div>
-              <div>内容</div>
-              <div style="border: 1px solid #ccc">
-                <myEditor v-model="item.content" />
+                <el-upload
+                  class="avatar-uploader"
+                  action=""
+                  :show-file-list="false"
+                  :http-request="handlesAvatarSuccess"
+                  :on-success="
+                    (response, file, fileList) =>
+                      handleAvatarSuccess(response, file, fileList, index)
+                  "
+                >
+                  <div v-if="!!item.file" class="img-box">
+                    <i
+                      v-if="!checkIfUrlContainsImage(item.file)"
+                      class="el-icon-folder"
+                    />
+                    <img
+                      v-else
+                      style="width: 100px; height: 100px"
+                      :src="item.file"
+                      class="avatar"
+                      alt=""
+                    />
+                    <div class="desc">{{ handleRegex(item.file) }}</div>
+                  </div>
+                  <i v-else class="el-icon-plus avatar-uploader-icon" />
+                </el-upload>
+                <el-input v-model="item.desc" placeholder="图片说明"></el-input>
               </div>
             </div>
-            <div class="mistake-right">
-              <el-button @click="handleDel(index)" type="danger"
-                >删除</el-button
-              >
+            <div style="color: red">(请上传.jpg, png的图片)</div>
+          </el-form-item>
+          <div
+            style="
+              display: flex;
+              justify-content: flex-end;
+              margin-bottom: 10px;
+            "
+          >
+            <el-button type="primary" @click="onAddtrip()">添加行程</el-button>
+          </div>
+          <el-form-item label="上传行程">
+            <div class="upload-list">
+              <div class="wu-yu" v-for="(item, index) in anchors.trip_zip">
+                <i
+                  @click.stop="handleClose('trip_zip', index)"
+                  class="close el-icon-close"
+                />
+                <el-upload
+                  class="avatar-uploader"
+                  action=""
+                  :http-request="handlesAvatarSuccess"
+                  :show-file-list="false"
+                  :on-success="
+                    (response, file, fileList) =>
+                      handleSuccess(response, file, fileList, index)
+                  "
+                >
+                  <div v-if="!!item.file" class="img-box">
+                    <i
+                      v-if="!checkIfUrlContainsImage(item.file)"
+                      class="el-icon-folder"
+                    />
+                    <img
+                      v-else
+                      style="width: 100px; height: 100px"
+                      :src="item.file"
+                      class="avatar"
+                      alt=""
+                    />
+                    <div class="desc">{{ handleRegex(item.file) }}</div>
+                  </div>
+                  <i v-else class="el-icon-plus avatar-uploader-icon" />
+                </el-upload>
+                <el-input v-model="item.desc" placeholder="行程说明"></el-input>
+              </div>
             </div>
-          </div>
-          <div class="mistake-btn">
-            <el-button type="primary" @click="handleAdd">添加</el-button>
-          </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-form-item>
-        <div
-          style="display: flex; justify-content: flex-end; margin-bottom: 10px"
-        >
-          <el-button type="primary" @click="onAddImg()">添加图片</el-button>
-        </div>
-        <el-form-item label="上传图片">
-          <div class="upload-list">
-            <div class="wu-yu" v-for="(item, index) in anchors.img_zip">
-              <i
-                @click.stop="handleClose('img_zip', index)"
-                class="close el-icon-close"
-              />
-              <el-input v-model="item.desc" placeholder="图片说明"></el-input>
-              <el-upload
-                class="avatar-uploader"
-                action=""
-                :show-file-list="false"
-                :http-request="handlesAvatarSuccess"
-                :on-success="
-                  (response, file, fileList) =>
-                    handleAvatarSuccess(response, file, fileList, index)
-                "
-              >
-                <div v-if="!!item.file" class="img-box">
-                  <i
-                    v-if="!checkIfUrlContainsImage(item.file)"
-                    class="el-icon-folder"
-                  />
-                  <img
-                    v-else
-                    style="width: 100px; height: 100px"
-                    :src="item.file"
-                    class="avatar"
-                    alt=""
-                  />
-                  <div class="desc">{{ handleRegex(item.file) }}</div>
-                </div>
-                <i v-else class="el-icon-plus avatar-uploader-icon" />
-              </el-upload>
-            </div>
-          </div>
-          <div style="color: red">(请上传.jpg, png的图片)</div>
-        </el-form-item>
-        <div
-          style="display: flex; justify-content: flex-end; margin-bottom: 10px"
-        >
-          <el-button type="primary" @click="onAddtrip()">添加行程</el-button>
-        </div>
-        <el-form-item label="上传行程">
-          <div class="upload-list">
-            <div class="wu-yu" v-for="(item, index) in anchors.trip_zip">
-              <i
-                @click.stop="handleClose('trip_zip', index)"
-                class="close el-icon-close"
-              />
-              <el-input v-model="item.desc" placeholder="行程说明"></el-input>
-              <el-upload
-                class="avatar-uploader"
-                action=""
-                :http-request="handlesAvatarSuccess"
-                :show-file-list="false"
-                :on-success="
-                  (response, file, fileList) =>
-                    handleSuccess(response, file, fileList, index)
-                "
-              >
-                <div v-if="!!item.file" class="img-box">
-                  <i
-                    v-if="!checkIfUrlContainsImage(item.file)"
-                    class="el-icon-folder"
-                  />
-                  <img
-                    v-else
-                    style="width: 100px; height: 100px"
-                    :src="item.file"
-                    class="avatar"
-                    alt=""
-                  />
-                  <div class="desc">{{ handleRegex(item.file) }}</div>
-                </div>
-                <i v-else class="el-icon-plus avatar-uploader-icon" />
-              </el-upload>
-            </div>
-          </div>
-          <span style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</span>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer"></div>
+            <span style="color: red"
+              >(本行程请上传,ppt,word,pdf格式的文件)</span
+            >
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
     </el-dialog>
   </div>
 </template>
@@ -524,18 +540,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.scrollable-container {
+  // position: relative;
+  height: 500px; /* 可以根据实际情况调整高度 */
+  // overflow-y: auto;
+}
+::v-deep.el-scrollbar .el-scrollbar__wrap {
+  overflow-x: hidden;
+}
 .upload-list {
   display: flex;
   flex-wrap: wrap;
   .wu-yu {
     margin-bottom: 10px;
     position: relative;
+    display: flex;
+    width: 110px;
+    flex-wrap: wrap;
+    align-content: space-between;
     & + .wu-yu {
       margin-left: 5px;
     }
     ::v-deep.el-input {
       width: 100px;
-      margin: 0 0 10px 10px;
+      margin: 10px 0 10px 10px;
     }
   }
 }