From e906d9adc5a479991d6de2c7083abb74067ab529 Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Wed, 21 Sep 2022 22:46:48 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E8=83=BD?=
 =?UTF-8?q?=E5=8A=9B=E4=B8=8B=E6=9E=B6=E4=B8=8D=E9=80=89=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E6=8A=A5=E9=94=99bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../personalCenter/components/MyPublish.vue   | 1148 ++++++++---------
 1 file changed, 542 insertions(+), 606 deletions(-)

diff --git a/front/src/views/personalCenter/components/MyPublish.vue b/front/src/views/personalCenter/components/MyPublish.vue
index bedb603d..b6c8b406 100644
--- a/front/src/views/personalCenter/components/MyPublish.vue
+++ b/front/src/views/personalCenter/components/MyPublish.vue
@@ -2,58 +2,32 @@
   <div class="on-the-right-side-of-the-list">
     <div class="title">我的发布</div>
     <div class="sousuokuang">
-      <a-input-search
-        v-model:value="name"
-        placeholder="请输入关键词"
-        enter-button="搜索"
-        size="large"
-        @change="onSearch"
-        @search="getApplyList(tabname)"
-      />
-      <a-button
-        type="primary"
-        style="width: 0.9rem; height: 0.36rem; margin-left: 0.1rem"
-        @click="showModal2"
-      >
+      <a-input-search v-model:value="name" placeholder="请输入关键词" enter-button="搜索" size="large" @change="onSearch"
+        @search="getApplyList(tabname)" />
+      <a-button type="primary" style="width: 0.9rem; height: 0.36rem; margin-left: 0.1rem" @click="showModal2">
         能力上架
       </a-button>
-      <a-button
-        type="primary"
-        style="width: 0.9rem; height: 0.36rem; margin-left: 0.1rem"
-        @click="replacement"
-      >
+      <a-button type="primary" style="width: 0.9rem; height: 0.36rem; margin-left: 0.1rem" @click="replacement">
         重置
       </a-button>
     </div>
     <div class="tab">
       <span>能力类型</span>
-      <div
-        :class="tabIndex == index ? 'tabclass' : ' '"
-        @click="tabqiehuan(item, index)"
-        v-for="(item, index) in tabList"
-        :key="index"
-      >
+      <div :class="tabIndex == index ? 'tabclass' : ' '" @click="tabqiehuan(item, index)"
+        v-for="(item, index) in tabList" :key="index">
         {{ item }}
       </div>
     </div>
     <div class="tab" style="margin-top: 0.1rem">
       <span>能力状态</span>
-      <div
-        :class="tabIndex2 == index ? 'tabclass' : ' '"
-        @click="tabqiehuan2(item, index)"
-        v-for="(item, index) in tabList2"
-        :key="index"
-      >
+      <div :class="tabIndex2 == index ? 'tabclass' : ' '" @click="tabqiehuan2(item, index)"
+        v-for="(item, index) in tabList2" :key="index">
         {{ item }}
       </div>
     </div>
     <div v-if="dataList.data.length > 0">
       <div class="content">
-        <div
-          class="content-body"
-          v-for="item in dataList.data"
-          :key="item.index"
-        >
+        <div class="content-body" v-for="item in dataList.data" :key="item.index">
           <div class="content-body-title" v-if="item.currentTaskList">
             <!-- {{ item.currentTaskList[0].taskName }} -->
           </div>
@@ -71,57 +45,27 @@
             <!-- <div></div> -->
           </div>
           <div class="button">
-            <div
-              @click="showModal(item)"
-              v-if="item.delFlag != 2"
-              :class="item.delFlag != 0 ? 'del' : ''"
-            >
+            <div @click="showModal(item)" v-if="item.delFlag != 2" :class="item.delFlag != 0 ? 'del' : ''">
               能力下架
             </div>
-            <div
-              @click="showDetail(item)"
-              v-if="item.delFlag != 2"
-              :class="item.delFlag != 0 ? 'del' : ''"
-            >
+            <div @click="showDetail(item)" v-if="item.delFlag != 2" :class="item.delFlag != 0 ? 'del' : ''">
               查看详情
             </div>
-            <svg
-              t="1652233950228"
-              class="icon"
-              viewBox="0 0 1024 1024"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              p-id="5970"
-              data-spm-anchor-id="a313x.7781069.0.i8"
-              width="80"
-              height="80"
-              v-if="item.delFlag == 4 || item.delFlag == 5"
-              style="position: absolute; top: 0.2rem; left: 0.1rem"
-            >
+            <svg t="1652233950228" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+              p-id="5970" data-spm-anchor-id="a313x.7781069.0.i8" width="80" height="80"
+              v-if="item.delFlag == 4 || item.delFlag == 5" style="position: absolute; top: 0.2rem; left: 0.1rem">
               <path
                 d="M955.22053 256C813.82053 11.2 500.72053-72.6 255.92053 68.8S-72.67947 523.2 68.72053 768 523.22053 1096.6 768.02053 955.2c244.7-141.2 328.6-454.1 187.4-698.8 0-0.1-0.1-0.3-0.2-0.4zM762.02053 944.7c-239 138.1-544.8 56.2-682.9-182.8S22.92053 217.1 261.92053 79.1s544.8-56.2 682.9 182.8c137.9 239 56.1 544.6-182.8 682.8z"
-                fill="#515151"
-                opacity=".5"
-                p-id="5971"
-              ></path>
+                fill="#515151" opacity=".5" p-id="5971"></path>
               <path
                 d="M898.12053 289.2C775.02053 76 502.42053 2.9 289.22053 126 76.02053 249.1 3.02053 521.6 126.02053 734.8 249.12053 948 521.62053 1021.1 734.82053 898 947.92053 774.9 1021.02053 502.4 898.12053 289.2zM731.62053 892.8C521.32053 1014.3 252.42053 942.2 131.02053 731.9 9.52053 521.6 81.62053 252.7 291.92053 131.3 502.12053 9.9 771.02053 81.8 892.42053 292c121.5 210.3 49.5 479.3-160.8 600.8z"
-                fill="#515151"
-                opacity=".5"
-                p-id="5972"
-              ></path>
+                fill="#515151" opacity=".5" p-id="5972"></path>
               <path
                 d="M323.62053 176.8c3.6-2 6 0.8 8.8 2.8 6 4.4 12.4 8.8 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 13.6-5.6 20.8 4.8 6 10 11.6 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.4 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.4-1.9-3.9-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.7-0.8-0.3-1.6 0.6-2zM200.72053 289.2c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 13.6-5.6 20.8 4.8 6 10 11.6 14.8 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.4-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5c-8.4-2-16.8-4.4-25.2-6.4-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 3.6-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.4-1.2 0-1.6 0.8-2.4l0.2 0.4z m276.6-159.6c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 14-5.6 20.8 4.8 6 10 12 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.8-1.2-0.4-1.6 0.4-2.4l0.2 0.4z m141.9 29.6c3.6-2 6 0.8 8.8 2.8l18.8 12.8c7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 14-5.6 20.8 4.8 6 10 12 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4-7.7 0.4-15.2 0.8-22.4 0.8-4.4 6.8-8.4 13.2-12.8 20-1.6 2.4-4 5.1-7.2 4-2.4-1.9-3.9-4.7-4.4-7.7l-7.2-20.5c-8.4-2-16.8-4.4-25.2-6.4-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.5-1.2 0.2-1.6 0.6-2zM150.02053 430c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-4 14-5.6 20.8 4.8 6 10 11.6 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 3.6-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.7-0.8-0.3-1.5 0.6-2z m558.9 414.4c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.1 4.4-0.7 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.5-1.1 0.8-1.1 1.6-1.1h0.1z m-158.8 50c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.1-3.7-5.6-3.6-7.7-4-6.8-1.6-14-3.6-20.8-5.6l-7.7-22c-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2-1 4.2-1.7 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.4-0.8 0.8-0.8 1.7-0.7z m276.5-159.6c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8s-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.2 4.4-0.7 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0-0.8 0.8-1.2 1.6-1.2l0.1 0.1z m45.6-137.6c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-1.6-14-3.6-20.8-5.6l-7.7-22c-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.2-0.7 0.6-0.7 1.4-0.7h0.3zM402.72053 868c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.5-0.8 1-1.1 1.7-1.1z"
-                fill="#515151"
-                opacity=".5"
-                p-id="5973"
-              ></path>
+                fill="#515151" opacity=".5" p-id="5973"></path>
               <path
                 d="M386.42053 590.4l-43.8-75.9L207.02053 592.7l10.2 17.7L334.02053 543l23.4 40.4-90.5 52.2-13.5-23.4-18.7 10.8 53.1 92c9.1 15.8 21.2 19.5 36.4 10.7l98.8-57c6.2-3.6 11-9.3 13.4-16.1-1.4-15.9-6.2-31.2-14.2-45l-21.4 4.8c6.7 10.3 11 21.9 12.8 34-1 3.3-3.2 6-6.1 7.8l-88.3 51c-6.2 3.6-11.1 2.1-14.8-4.3l-27.3-47.4 109.3-63.1z m2.9-103.2l10.4 18.1 65.6-37.9 79.9 138.4 18.6-10.8-55.9-96.9c18.8-0.9 43.2-0.6 73 0.7l1.5-23.1c-29.8-0.3-58.4 0.4-86 2.6l-12.5-21.6 74.9-43.2-10.4-18.1-159.1 91.8zM669.52053 329l38.2 66.2 61.4-35.4-38.1-66.1-61.5 35.3z m72.4 24.2l-26.3 15.2-19-33 26.3-15.2 19 33zM599.02053 356.7l7.9 13.7-23.3 13.5 9.8 17 21.8-12.6c7.5 18.7 6.6 39.6-2.5 57.6l20.7 4.4c10.3-23.1 10.3-49.4 0-72.5l18.8-10.9c6 9.2 10.7 19.2 14.2 29.7 0.3 5-2.6 9.7-7.2 11.7-2.9 1.2-6.4 2.8-10.9 4.9l14.1 14.1c3.7-1.3 7.3-2.9 10.7-4.8 8.6-3.9 14.4-12.2 15.2-21.6-5.4-22.1-14.6-43-27.4-61.8l-36.1 20.8-7.9-13.7-17.9 10.5z m29.9 108.1l10 17.4 53.2-30.7c-7.8 23.7-20.6 45.4-37.5 63.6l20.6 11.1c18.6-24.2 30-53.1 33-83.4l29.8 51.5 18.4-10.7-29.8-51.5c27.4 11.5 57.2 16.3 86.9 14.1l3.5-23.5c-24.7 5.1-50.1 5-74.8-0.1l53.5-30.9-10-17.3-69.3 40-7.3-12.6-18.4 10.7L698.02053 425l-69.1 39.8z"
-                fill="#515151"
-                opacity=".5"
-                p-id="5974"
-              ></path>
+                fill="#515151" opacity=".5" p-id="5974"></path>
             </svg>
             <!-- <div v-if="item.delFlag == 0" class="button-son">审核通过</div>
             <div v-if="item.delFlag != 0">未审核</div> -->
@@ -132,56 +76,24 @@
         </div>
       </div>
       <div class="bottom">
-        <a-pagination
-          size="small"
-          :total="total"
-          show-size-changer
-          show-quick-jumper
-          @change="handleCurrentChange"
-          @showSizeChange="handlePageSizeChange"
-        />
+        <a-pagination size="small" :total="total" show-size-changer show-quick-jumper @change="handleCurrentChange"
+          @showSizeChange="handlePageSizeChange" />
       </div>
     </div>
     <a-empty v-else />
-    <a-modal
-      v-model:visible="detailsVisible"
-      :title="tabname"
-      style="width: 9rem"
-      :footer="null"
-      destroyOnClose="true"
-      :maskClosable="false"
-    >
-      <publish-details
-        :businessKey="businessKey"
-        :processInstanceId="processInstanceId"
-      ></publish-details>
+    <a-modal v-model:visible="detailsVisible" :title="tabname" style="width: 9rem" :footer="null" destroyOnClose="true"
+      :maskClosable="false">
+      <publish-details :businessKey="businessKey" :processInstanceId="processInstanceId"></publish-details>
     </a-modal>
-    <a-modal
-      v-model:visible="increasedVisible"
-      :title="tabname"
-      style="width: 9rem"
-      :footer="null"
-      destroyOnClose="true"
-      :maskClosable="false"
-    >
+    <a-modal v-model:visible="increasedVisible" :title="tabname" style="width: 9rem" :footer="null"
+      destroyOnClose="true" :maskClosable="false">
       <the-new-release></the-new-release>
     </a-modal>
-    <a-modal
-      v-model:visible="visible"
-      width="12.1rem"
-      @ok="del()"
-      @cancel="reason = ''"
-      footer=""
-    >
+    <a-modal v-model:visible="visible" width="12.1rem" @ok="del()" @cancel="reason = ''" footer="">
       <TheShelvesAbility v-if="visible" :delObj="delObj"></TheShelvesAbility>
       <!-- <a-input v-model:value="reason" placeholder="请输入下架原因" /> -->
     </a-modal>
-    <a-modal
-      v-model:visible="visible2"
-      @ok="handleOk"
-      class="shangjia-class"
-      @cancel="handlecancel"
-    >
+    <a-modal v-model:visible="visible2" @ok="handleOk" class="shangjia-class" @cancel="handlecancel">
       <div class="ant-modal-title" id="vcDialogTitle1">
         <div class="showBg"></div>
         能力上架申请
@@ -189,22 +101,14 @@
       <div class="ability-to-type">
         <div class="title">能力类型选择</div>
         <div class="content">
-          <div
-            v-for="item in abilityToType"
-            :key="item"
-            @click="abilityToTypeFunction(item)"
-            :class="
-              abilityToTypeFunctionData == item ? 'ability-to-type-down' : ''
-            "
-          >
+          <div v-for="item in abilityToType" :key="item" @click="abilityToTypeFunction(item)" :class="
+            abilityToTypeFunctionData == item ? 'ability-to-type-down' : ''
+          ">
             {{ item }}
           </div>
         </div>
       </div>
-      <div
-        class="component-type"
-        v-if="abilityToTypeFunctionData == '组件服务'"
-      >
+      <div class="component-type" v-if="abilityToTypeFunctionData == '组件服务'">
         <div class="title">组件类型选择</div>
         <div class="content">
           <!-- <a-checkbox-group
@@ -213,12 +117,7 @@
                 :options="componentType"
               /> -->
           <a-radio-group v-model:value="componentTypeValue">
-            <a-radio
-              @click="componentTypeValueFunction(item)"
-              v-for="item in componentType"
-              :key="item"
-              :value="item"
-            >
+            <a-radio @click="componentTypeValueFunction(item)" v-for="item in componentType" :key="item" :value="item">
               {{ item }}
             </a-radio>
           </a-radio-group>
@@ -229,515 +128,552 @@
 </template>
 
 <script setup>
-  import { onMounted, reactive, ref, onBeforeUnmount } from 'vue'
-  import { useRouter } from 'vue-router'
-  import { message } from 'ant-design-vue'
-  import mybus from '@/myplugins/mybus'
-  // , reactive
-  import { wodepage, undercarriage } from '@/api/personalCenter'
-  import { getUserInfo } from '@/api/user'
-  // TheNewRelease
-  import TheNewRelease from '@/views/personalCenter/components/TheNewRelease'
-  import PublishDetails from '@/views/personalCenter/components/PublishDetails'
-  import TheShelvesAbility from '@/views/personalCenter/components/TheShelvesAbility' //能力下架申请
-  const router = useRouter()
-  let tabList = ref([
-    // '全部',
-    // ' 基础建设',
-    // ' 数据资源',
-    '组件服务',
-    '应用资源',
-    // '知识库',
-  ])
-  let tabList2 = ref(['已上架', '已下架'])
-  // const contentList = reactive({
-  //   data: [
-  //     {
-  //       currentTaskList: [
-  //         {
-  //           taskName: '111',
-  //           createTime: '222222222222',
-  //           assigneeName: '333333333',
-  //         },
-  //       ],
-  //       name: '111111',
-  //     },
-  //   ],
-  // })
-  // const contentListClone = reactive({ data: [] })
-  // let contentListLength = contentList.length
-  let name = ref('')
-  let tabIndex = ref(0)
-  let tabIndex2 = ref(-1)
-  const visible2 = ref(false)
-  const showModal2 = () => {
-    visible2.value = true
-  }
-  let componentTypeValue = ref('')
-  let abilityToTypeFunctionData = ref('组件服务')
-  function handlecancel() {
-    abilityToTypeFunctionData.value = '组件服务'
-    componentTypeValue.value = ''
-  }
-  function abilityToTypeFunction(item) {
-    abilityToTypeFunctionData.value = item
-  }
-  const handleOk = (e) => {
-    let snum = ref({})
-    if (abilityToTypeFunctionData.value == '组件服务') {
-      if (!componentTypeValue.value || componentTypeValue.value == '') {
-        message.error('请选择组件类型！')
-        return
-      } else if (
-        componentTypeValue.value === '智能算法' ||
-        componentTypeValue.value === '开发组件' ||
-        componentTypeValue.value === '业务组件' ||
-        componentTypeValue.value === '图层服务'
-      ) {
-        snum.value = {
-          abilityToType: abilityToTypeFunctionData.value,
-          componentTypeValue: componentTypeValue.value,
-        }
-      } else {
-        message.error('功能开发中！')
-        return
-      }
-    } else {
+import { onMounted, reactive, ref, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
+import { message } from 'ant-design-vue'
+import mybus from '@/myplugins/mybus'
+// , reactive
+import { wodepage, undercarriage } from '@/api/personalCenter'
+import { getUserInfo } from '@/api/user'
+// TheNewRelease
+import TheNewRelease from '@/views/personalCenter/components/TheNewRelease'
+import PublishDetails from '@/views/personalCenter/components/PublishDetails'
+import TheShelvesAbility from '@/views/personalCenter/components/TheShelvesAbility' //能力下架申请
+const router = useRouter()
+let tabList = ref([
+  // '全部',
+  // ' 基础建设',
+  // ' 数据资源',
+  '组件服务',
+  '应用资源',
+  // '知识库',
+])
+let tabList2 = ref(['已上架', '已下架'])
+// const contentList = reactive({
+//   data: [
+//     {
+//       currentTaskList: [
+//         {
+//           taskName: '111',
+//           createTime: '222222222222',
+//           assigneeName: '333333333',
+//         },
+//       ],
+//       name: '111111',
+//     },
+//   ],
+// })
+// const contentListClone = reactive({ data: [] })
+// let contentListLength = contentList.length
+let name = ref('')
+let tabIndex = ref(0)
+let tabIndex2 = ref(-1)
+const visible2 = ref(false)
+const showModal2 = () => {
+  visible2.value = true
+}
+let componentTypeValue = ref('')
+let abilityToTypeFunctionData = ref('组件服务')
+function handlecancel() {
+  abilityToTypeFunctionData.value = '组件服务'
+  componentTypeValue.value = ''
+}
+function abilityToTypeFunction(item) {
+  abilityToTypeFunctionData.value = item
+}
+const handleOk = (e) => {
+  let snum = ref({})
+  if (abilityToTypeFunctionData.value == '组件服务') {
+    if (!componentTypeValue.value || componentTypeValue.value == '') {
+      message.error('请选择组件类型！')
+      return
+    } else if (
+      componentTypeValue.value === '智能算法' ||
+      componentTypeValue.value === '开发组件' ||
+      componentTypeValue.value === '业务组件' ||
+      componentTypeValue.value === '图层服务'
+    ) {
       snum.value = {
         abilityToType: abilityToTypeFunctionData.value,
+        componentTypeValue: componentTypeValue.value,
       }
-    }
-    const applypage = router.resolve({
-      path: '/nenglishangjia', // 跳转的页面路由
-      query: snum.value,
-    })
-    window.open(applypage.href, '_blank')
-    visible.value = false
-    abilityToTypeFunctionData.value = '组件服务'
-    componentTypeValue.value = ''
-    console.log(e)
-  }
-  let abilityToType = ref(['组件服务', '应用资源'])
-  let componentType = ref([
-    '智能算法',
-    '图层服务',
-    '开发组件',
-    // '办公组件',
-    '业务组件',
-    // '其他',
-  ])
-  let tabname = ref('组件服务')
-  function tabqiehuan(item, index) {
-    tabIndex.value = index
-    switch (item) {
-      case '组件服务':
-        page.value = 1
-        ended.value = false
-        tabname.value = '组件服务'
-        getApplyList(tabname.value)
-        break
-      case '应用资源':
-        page.value = 1
-        ended.value = true
-        tabname.value = '应用资源'
-        getApplyList(tabname.value)
-        break
-      // case '全部':
-      //   page.value = 1
-      //   ended.value = ''
-      //   getApplyList()
-      //   break
-    }
-  }
-  function tabqiehuan2(item, index) {
-    if (index == tabIndex2.value) {
-      tabIndex2.value = -1
-      delFlag = ''
     } else {
-      tabIndex2.value = index
-      switch (item) {
-        case '已上架':
-          delFlag = 0
-          break
-        case '已下架':
-          delFlag = 5
-          break
-      }
+      message.error('功能开发中！')
+      return
     }
-    page.value = 1
-    getApplyList(tabname.value)
-  }
-  //搜索
-  function onSearch(value) {
-    console.log('搜索框', value)
-    // getApplyList(tabname.value, value)
-  }
-  //重置
-  function replacement() {
-    name.value = ''
-    tabIndex.value = 0
-    tabname.value = '组件服务'
-    getApplyList(tabname.value)
-  }
-  const detailsVisible = ref(false)
-  const increasedVisible = ref(false)
-  const businessKey = ref('')
-  const processInstanceId = ref('')
-  // const showIncreased = () => {
-  //   increasedVisible.value = true
-  // }
-  const showDetail = (item) => {
-    console.log('showDetail', item, item.id)
-    if (item.delFlag == 0) {
-      router.push({
-        path: '/details',
-        query: {
-          id: item.id,
-        },
-      })
-      newpage
+  } else {
+    snum.value = {
+      abilityToType: abilityToTypeFunctionData.value,
     }
-    // getProcDefBizRoute(item.processDefinitionId)
-    // detailsVisible.value = true
-    // businessKey.value = item.businessKey
-    // processInstanceId.value = item.processInstanceId
   }
-
-  const total = ref('')
-  const page = ref('1')
-  const ended = ref('')
-  let delFlag = ''
-  let dataList = reactive({ data: [] })
-  const limt = ref('10')
-  //初始化查询
-  const getApplyList = (item) => {
-    console.log(delFlag)
-    getUserInfo().then((res) => {
-      let ids = ref('')
-      ids.value = res.data.data.id
-      const params = {
-        page: page.value,
-        limit: limt.value,
-        selectType: 0,
-        delFlag: delFlag,
-        // ended: ended.value,
-        type: item,
-        name: name.value,
-        creator: ids.value,
-      }
-      wodepage(params).then((res) => {
-        // contentList.data = res.data.data.list
-        dataList.data = res.data.data.list
-        total.value = res.data.data.total
-        console.log('dataLi0st', dataList.data[0])
-      })
-      console.log('用户信息', ids.value)
-    })
-  }
-  const handleCurrentChange = (val, size) => {
-    page.value = val
-    limt.value = size
-    getApplyList(tabname.value)
-  }
-  const newpage = router.resolve({
+  const applypage = router.resolve({
     path: '/nenglishangjia', // 跳转的页面路由
+    query: snum.value,
   })
-  // const nenglishangjia = () => {
-  //   window.open(newpage.href, '_blank')
-  //   // router.resolve('/nenglishangjia')
-  // }
-  const handlePageSizeChange = (current, size) => {
-    page.value = current
-    limt.value = size
-    console.log('val', current, size)
-    getApplyList(tabname.value)
-  }
-
-  // 下架能力
-  const del = () => {
-    console.log('下架================》', delObj.value)
-    undercarriage({
-      reason: delObj2.value.reason,
-      title: delObj2.value.title,
-      phone: delObj2.value.phone,
-      enclosure: delObj2.value.fileList[0].response.data,
-      enclosureName: delObj2.value.fileList[0].name,
-      resource: [
-        { resourceId: delObj.value.id, resourceName: delObj.value.name },
-      ],
-    }).then((res) => {
-      console.log('下架结果', res)
-      if (res.data.data == '该资源已发起下架') {
-        message.error('该资源已发起下架,请耐心等待审批!')
-      } else {
-        message.success(`${delObj.value.name} 发起下架成功，请等待审批`)
-      }
-      reason.value = ''
-      visible.value = false
+  window.open(applypage.href, '_blank')
+  visible.value = false
+  abilityToTypeFunctionData.value = '组件服务'
+  componentTypeValue.value = ''
+  console.log(e)
+}
+let abilityToType = ref(['组件服务', '应用资源'])
+let componentType = ref([
+  '智能算法',
+  '图层服务',
+  '开发组件',
+  // '办公组件',
+  '业务组件',
+  // '其他',
+])
+let tabname = ref('组件服务')
+function tabqiehuan(item, index) {
+  tabIndex.value = index
+  switch (item) {
+    case '组件服务':
+      page.value = 1
+      ended.value = false
+      tabname.value = '组件服务'
       getApplyList(tabname.value)
-    })
+      break
+    case '应用资源':
+      page.value = 1
+      ended.value = true
+      tabname.value = '应用资源'
+      getApplyList(tabname.value)
+      break
+    // case '全部':
+    //   page.value = 1
+    //   ended.value = ''
+    //   getApplyList()
+    //   break
   }
-  //退出申请按钮
-  mybus.on('Cancellation', (val) => {
-    visible.value = val
-  })
-  //提交申请按钮
-  mybus.on('Determine', (val) => {
-    console.log('下架==============》', val)
-    delObj2.value = val
-    del()
-  })
-  onBeforeUnmount(() => {
-    mybus.off('Cancellation')
-    mybus.off('Determine')
-  })
-  const reason = ref('')
-  const visible = ref(false)
-  const delObj = ref({})
-  const delObj2 = ref({})
-  const showModal = (item) => {
-    if (item.delFlag == 0) {
-      delObj.value = item
-      visible.value = true
+}
+function tabqiehuan2(item, index) {
+  if (index == tabIndex2.value) {
+    tabIndex2.value = -1
+    delFlag = ''
+  } else {
+    tabIndex2.value = index
+    switch (item) {
+      case '已上架':
+        delFlag = 0
+        break
+      case '已下架':
+        delFlag = 5
+        break
     }
   }
-  onMounted(() => {
+  page.value = 1
+  getApplyList(tabname.value)
+}
+//搜索
+function onSearch(value) {
+  console.log('搜索框', value)
+  // getApplyList(tabname.value, value)
+}
+//重置
+function replacement() {
+  name.value = ''
+  tabIndex.value = 0
+  tabname.value = '组件服务'
+  getApplyList(tabname.value)
+}
+const detailsVisible = ref(false)
+const increasedVisible = ref(false)
+const businessKey = ref('')
+const processInstanceId = ref('')
+// const showIncreased = () => {
+//   increasedVisible.value = true
+// }
+const showDetail = (item) => {
+  console.log('showDetail', item, item.id)
+  if (item.delFlag == 0) {
+    router.push({
+      path: '/details',
+      query: {
+        id: item.id,
+      },
+    })
+    newpage
+  }
+  // getProcDefBizRoute(item.processDefinitionId)
+  // detailsVisible.value = true
+  // businessKey.value = item.businessKey
+  // processInstanceId.value = item.processInstanceId
+}
+
+const total = ref('')
+const page = ref('1')
+const ended = ref('')
+let delFlag = ''
+let dataList = reactive({ data: [] })
+const limt = ref('10')
+//初始化查询
+const getApplyList = (item) => {
+  console.log(delFlag)
+  getUserInfo().then((res) => {
+    let ids = ref('')
+    ids.value = res.data.data.id
+    const params = {
+      page: page.value,
+      limit: limt.value,
+      selectType: 0,
+      delFlag: delFlag,
+      // ended: ended.value,
+      type: item,
+      name: name.value,
+      creator: ids.value,
+    }
+    wodepage(params).then((res) => {
+      // contentList.data = res.data.data.list
+      dataList.data = res.data.data.list
+      total.value = res.data.data.total
+      console.log('dataLi0st', dataList.data[0])
+    })
+    console.log('用户信息', ids.value)
+  })
+}
+const handleCurrentChange = (val, size) => {
+  page.value = val
+  limt.value = size
+  getApplyList(tabname.value)
+}
+const newpage = router.resolve({
+  path: '/nenglishangjia', // 跳转的页面路由
+})
+// const nenglishangjia = () => {
+//   window.open(newpage.href, '_blank')
+//   // router.resolve('/nenglishangjia')
+// }
+const handlePageSizeChange = (current, size) => {
+  page.value = current
+  limt.value = size
+  console.log('val', current, size)
+  getApplyList(tabname.value)
+}
+
+// 下架能力
+const del = () => {
+  console.log('下架================》', delObj.value)
+  let fileObj = delObj2.value.fileList && delObj2.value.fileList[0] || {}
+  undercarriage({
+    reason: delObj2.value.reason,
+    title: delObj2.value.title,
+    phone: delObj2.value.phone,
+    enclosure: fileObj.response && fileObj.response.data,
+    enclosureName: fileObj.name,
+    resource: [
+      { resourceId: delObj.value.id, resourceName: delObj.value.name },
+    ],
+  }).then((res) => {
+    console.log('下架结果', res)
+    if (res.data.data == '该资源已发起下架') {
+      message.error('该资源已发起下架,请耐心等待审批!')
+    } else {
+      message.success(`${delObj.value.name} 发起下架成功，请等待审批`)
+    }
+    reason.value = ''
+    visible.value = false
     getApplyList(tabname.value)
   })
+}
+//退出申请按钮
+mybus.on('Cancellation', (val) => {
+  visible.value = val
+})
+//提交申请按钮
+mybus.on('Determine', (val) => {
+  console.log('下架==============》', val)
+  delObj2.value = val
+  del()
+})
+onBeforeUnmount(() => {
+  mybus.off('Cancellation')
+  mybus.off('Determine')
+})
+const reason = ref('')
+const visible = ref(false)
+const delObj = ref({})
+const delObj2 = ref({})
+const showModal = (item) => {
+  if (item.delFlag == 0) {
+    delObj.value = item
+    visible.value = true
+  }
+}
+onMounted(() => {
+  getApplyList(tabname.value)
+})
 </script>
 
 <style scoped lang="less">
-  .on-the-right-side-of-the-list {
-    background: #ffffff;
-    padding: 0.2rem 0rem 0.3rem 0.2rem;
-    position: absolute;
-    width: 10.87rem;
-    height: 8.1rem;
-    top: 0rem;
-    display: flex;
-    margin-top: 0.2rem;
-    flex-direction: column;
-    font-size: 0.16rem;
-    justify-content: left;
-    .title {
-      font-size: 0.2rem;
-      color: #000000;
-      font-family: 'Alibaba PuHuiTi';
-      font-weight: 500;
-    }
-    .sousuokuang {
-      margin: 0.2rem 0rem 0.21rem 0rem;
-      .ant-input-search {
-        max-width: 4.9rem;
-      }
-      :deep(.ant-input) {
-        width: 4rem;
-        height: 0.36rem;
-        font-size: 0.14rem;
-        color: #b2b2b2;
-        background: #f5f5f5;
-      }
-      :deep(.ant-input-group-addon) {
-        display: inline-block;
-        margin-left: 0.1rem;
-        .ant-input-search-button {
-          width: 0.8rem;
-          height: 0.36rem;
-          border-radius: 0.04rem;
-          font-size: 0.14rem;
-        }
-      }
-    }
-    .tab {
-      display: flex;
-      font-size: 0.14rem;
-      color: #999999;
-      div {
-        width: 0.7rem;
-        height: 0.24rem;
-        border: 0.01rem solid #cccccc;
-        border-radius: 0.12rem;
-        margin-left: 0.1rem;
-        text-align: center;
-        color: #666666;
-        cursor: pointer;
-      }
-      .tabclass {
-        border: 0.01rem solid #0087ff;
-        color: #0087ff;
-      }
-    }
-    .content {
-      padding-right: 0.1rem;
-      height: 5.1rem;
-      overflow: auto;
-      .content-body {
-        padding-bottom: 0.2rem;
-        padding-top: 0.2rem;
-        margin-right: 0.1rem;
-        // height: 1.20rem;
-        border-bottom: #cccccc 0.01rem solid;
-        position: relative;
-        .content-body-title {
-          font-size: 0.14rem;
-          color: #333333;
-          font-family: 'Alibaba PuHuiTi';
-          font-weight: 500;
-        }
-        .content-body-content {
-          margin-top: 0.1rem;
-          margin-bottom: 0.1rem;
-          width: 7.2rem;
-          .content-body-content-son {
-            line-height: 0.16rem;
-            font-size: 0.12rem;
-            width: 100%;
-            text-overflow: -o-ellipsis-lastline;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 3;
-            -webkit-box-orient: vertical;
-            word-break: break-all;
-            color: #999999;
-          }
-        }
-        .content-body-bottom {
-          display: flex;
-          color: #cccccc;
-          font-size: 0.12rem;
-          div:first-child {
-            margin-right: 0.3rem;
-          }
-        }
-      }
-    }
-    .bottom {
-      position: absolute;
-      bottom: 0.3rem;
-      right: 0.2rem;
+.on-the-right-side-of-the-list {
+  background: #ffffff;
+  padding: 0.2rem 0rem 0.3rem 0.2rem;
+  position: absolute;
+  width: 10.87rem;
+  height: 8.1rem;
+  top: 0rem;
+  display: flex;
+  margin-top: 0.2rem;
+  flex-direction: column;
+  font-size: 0.16rem;
+  justify-content: left;
+
+  .title {
+    font-size: 0.2rem;
+    color: #000000;
+    font-family: 'Alibaba PuHuiTi';
+    font-weight: 500;
+  }
+
+  .sousuokuang {
+    margin: 0.2rem 0rem 0.21rem 0rem;
+
+    .ant-input-search {
+      max-width: 4.9rem;
     }
 
-    .button {
-      position: absolute;
-      right: 0.2rem;
-      top: 0rem;
-      width: 0.96rem;
-      // background: #0087ff;
-      cursor: pointer;
-      div {
-        margin-top: 0.2rem;
-        height: 0.3rem;
-        background: #0087ff;
-        font-size: 0.14rem;
-        color: #fff;
+    :deep(.ant-input) {
+      width: 4rem;
+      height: 0.36rem;
+      font-size: 0.14rem;
+      color: #b2b2b2;
+      background: #f5f5f5;
+    }
+
+    :deep(.ant-input-group-addon) {
+      display: inline-block;
+      margin-left: 0.1rem;
+
+      .ant-input-search-button {
+        width: 0.8rem;
+        height: 0.36rem;
         border-radius: 0.04rem;
-        text-align: center;
-        line-height: 0.3rem;
+        font-size: 0.14rem;
       }
-      .del {
-        background: #ccc;
-      }
-      .button-son {
-        background: #49c988;
-      }
-    }
-    .button-state {
-      top: 0.6rem;
-    }
-    .buttonAgree {
-      background-color: #49c988;
     }
   }
+
+  .tab {
+    display: flex;
+    font-size: 0.14rem;
+    color: #999999;
+
+    div {
+      width: 0.7rem;
+      height: 0.24rem;
+      border: 0.01rem solid #cccccc;
+      border-radius: 0.12rem;
+      margin-left: 0.1rem;
+      text-align: center;
+      color: #666666;
+      cursor: pointer;
+    }
+
+    .tabclass {
+      border: 0.01rem solid #0087ff;
+      color: #0087ff;
+    }
+  }
+
+  .content {
+    padding-right: 0.1rem;
+    height: 5.1rem;
+    overflow: auto;
+
+    .content-body {
+      padding-bottom: 0.2rem;
+      padding-top: 0.2rem;
+      margin-right: 0.1rem;
+      // height: 1.20rem;
+      border-bottom: #cccccc 0.01rem solid;
+      position: relative;
+
+      .content-body-title {
+        font-size: 0.14rem;
+        color: #333333;
+        font-family: 'Alibaba PuHuiTi';
+        font-weight: 500;
+      }
+
+      .content-body-content {
+        margin-top: 0.1rem;
+        margin-bottom: 0.1rem;
+        width: 7.2rem;
+
+        .content-body-content-son {
+          line-height: 0.16rem;
+          font-size: 0.12rem;
+          width: 100%;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
+          color: #999999;
+        }
+      }
+
+      .content-body-bottom {
+        display: flex;
+        color: #cccccc;
+        font-size: 0.12rem;
+
+        div:first-child {
+          margin-right: 0.3rem;
+        }
+      }
+    }
+  }
+
+  .bottom {
+    position: absolute;
+    bottom: 0.3rem;
+    right: 0.2rem;
+  }
+
+  .button {
+    position: absolute;
+    right: 0.2rem;
+    top: 0rem;
+    width: 0.96rem;
+    // background: #0087ff;
+    cursor: pointer;
+
+    div {
+      margin-top: 0.2rem;
+      height: 0.3rem;
+      background: #0087ff;
+      font-size: 0.14rem;
+      color: #fff;
+      border-radius: 0.04rem;
+      text-align: center;
+      line-height: 0.3rem;
+    }
+
+    .del {
+      background: #ccc;
+    }
+
+    .button-son {
+      background: #49c988;
+    }
+  }
+
+  .button-state {
+    top: 0.6rem;
+  }
+
+  .buttonAgree {
+    background-color: #49c988;
+  }
+}
 </style>
 
 <style lang="less">
-  .shangjia-class {
-    position: fixed;
-    left: 50%;
-    top: 50%;
-    margin-left: -2.6rem;
-    margin-top: -1.44rem;
-    font-size: 0.14rem;
-    font-weight: 500;
-    .ant-radio-inner {
-      height: 0.16rem;
-      width: 0.16rem;
-    }
-    .ant-radio-inner::after {
-      background-color: unset;
-      background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
-      background-size: cover;
-      background-position: center;
-    }
-    .ant-modal-content {
-      border-radius: 0.1rem;
-      .ability-to-type,
-      .component-type {
+.shangjia-class {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  margin-left: -2.6rem;
+  margin-top: -1.44rem;
+  font-size: 0.14rem;
+  font-weight: 500;
+
+  .ant-radio-inner {
+    height: 0.16rem;
+    width: 0.16rem;
+  }
+
+  .ant-radio-inner::after {
+    background-color: unset;
+    background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
+    background-size: cover;
+    background-position: center;
+  }
+
+  .ant-modal-content {
+    border-radius: 0.1rem;
+
+    .ability-to-type,
+    .component-type {
+      display: flex;
+      margin-top: 0.2rem;
+
+      .title {
+        white-space: nowrap;
+        margin-right: 0.2rem;
         display: flex;
-        margin-top: 0.2rem;
-        .title {
-          white-space: nowrap;
-          margin-right: 0.2rem;
-          display: flex;
-          align-items: center;
-          height: 0.26rem;
-        }
-        .content {
-          width: 100%;
-          .ant-radio-group {
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
-            grid-gap: 0.15rem;
-          }
-        }
+        align-items: center;
+        height: 0.26rem;
       }
-      .ability-to-type {
-        .content {
+
+      .content {
+        width: 100%;
+
+        .ant-radio-group {
           display: grid;
           grid-template-columns: 1fr 1fr 1fr;
-          div {
-            margin-right: 0.15rem;
-            cursor: pointer;
-            font-size: 0.14rem;
-            width: 0.9rem;
-            height: 0.26rem;
-            border-radius: 0.13rem;
-            color: #333333;
-            background: #f5f5f5;
-            border: 0.01rem #cccccc solid;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-weight: 500;
-          }
-          .ability-to-type-down {
-            background: #0087ff;
-            color: #fff;
-          }
+          grid-gap: 0.15rem;
         }
       }
     }
-    .ant-modal-title {
-      display: flex;
-      align-items: center;
-    }
-    .ant-modal-footer {
-      border: 0;
-      text-align: center;
-      padding-bottom: 0.2rem;
-      button {
-        margin-right: 0.2rem;
-        border-radius: 0.08rem;
+
+    .ability-to-type {
+      .content {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+
+        div {
+          margin-right: 0.15rem;
+          cursor: pointer;
+          font-size: 0.14rem;
+          width: 0.9rem;
+          height: 0.26rem;
+          border-radius: 0.13rem;
+          color: #333333;
+          background: #f5f5f5;
+          border: 0.01rem #cccccc solid;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-weight: 500;
+        }
+
+        .ability-to-type-down {
+          background: #0087ff;
+          color: #fff;
+        }
       }
     }
-    .showBg {
-      height: 0.24rem;
-      width: 0.24rem;
-      background: url('~@/assets/home/shenqing.png') no-repeat;
-      background-size: cover;
-      background-position: center;
-      margin-right: 0.1rem;
+  }
+
+  .ant-modal-title {
+    display: flex;
+    align-items: center;
+  }
+
+  .ant-modal-footer {
+    border: 0;
+    text-align: center;
+    padding-bottom: 0.2rem;
+
+    button {
+      margin-right: 0.2rem;
+      border-radius: 0.08rem;
     }
   }
+
+  .showBg {
+    height: 0.24rem;
+    width: 0.24rem;
+    background: url('~@/assets/home/shenqing.png') no-repeat;
+    background-size: cover;
+    background-position: center;
+    margin-right: 0.1rem;
+  }
+}
 </style>