diff --git a/front/public/index.html b/front/public/index.html
index 04ec2b7b..040ff813 100644
--- a/front/public/index.html
+++ b/front/public/index.html
@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-03-29 16:45:25
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-14 09:34:08
+ * @LastEditTime: 2022-07-14 10:58:46
  * @Description: 告诉大家这是什么
 -->
 <!DOCTYPE html>
@@ -49,7 +49,7 @@
     window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
     window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796/';
     window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
-    window.SITE_CONFIG['apiURL'] = 'http://15.2.21.239:8888/renren-admin';
+    window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
     window.SITE_CONFIG['POI_URL'] = 'http://15.2.21.238:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
     // 穿透版本
     // window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';
diff --git a/front/src/api/personalCenter.js b/front/src/api/personalCenter.js
index b58168f4..86d0f684 100644
--- a/front/src/api/personalCenter.js
+++ b/front/src/api/personalCenter.js
@@ -197,6 +197,13 @@ export function getMyComment(params) {
     params,
   })
 }
+export function demandComment(params) {
+  return request({
+    url: '/demandComment/'+ params,
+    method: 'get',
+    params,
+  })
+}
 // 能力上架属性名查询
 export function getCategoryTree(params) {
   return request({
diff --git a/front/src/views/home/components/searchResultList.vue b/front/src/views/home/components/searchResultList.vue
index 47d0dd5f..03d81ba4 100644
--- a/front/src/views/home/components/searchResultList.vue
+++ b/front/src/views/home/components/searchResultList.vue
@@ -10,10 +10,17 @@
         }}
       </div>
       <div class="condition" :key="showKey">
-       <ul v-if="selectCardsname === '融合服务'">
-          <li v-for="(item, i) in orderList" :key="item.value" @click="changeOrder(i, item.value, item.orderType)">
+        <ul v-if="selectCardsname === '融合服务'">
+          <li
+            v-for="(item, i) in orderList"
+            :key="item.value"
+            @click="changeOrder(i, item.value, item.orderType)"
+          >
             {{ item.name }}
-            <span class="arrow" :class="item.orderType == 'ASC' ? 'down' : ''"></span>
+            <span
+              class="arrow"
+              :class="item.orderType == 'ASC' ? 'down' : ''"
+            ></span>
           </li>
         </ul>
         <ul v-else>
@@ -21,7 +28,12 @@
             v-for="item in selList"
             :key="item.value"
             @click="changeCondition(item.value)"
-            v-show="item.show"
+            v-show="
+              item.show &&
+              !(item.name === '申请量' && selectCardsname == '应用资源') &&
+              item.name !== '评分' &&
+              selectCardsname !== '数据资源'
+            "
           >
             {{ item.name }}
             <span
@@ -30,7 +42,6 @@
             ></span>
           </li>
         </ul>
-       
       </div>
     </div>
     <div
@@ -67,7 +78,9 @@
               ? 'ywzj'
               : ''
           "
-          v-if="selectCardsname !== '基础设施' && selectCardsname !== '融合服务'"
+          v-if="
+            selectCardsname !== '基础设施' && selectCardsname !== '融合服务'
+          "
         ></div>
         <div class="left jcss" v-else-if="selectCardsname === '基础设施'"></div>
         <div class="left rhfw" v-else-if="selectCardsname === '融合服务'"></div>
@@ -84,7 +97,7 @@
                 p-id="3062"
                 width="40"
                 height="40"
-                v-if="item.applyState == '通过'"
+                v-if="item.applyState == '通过' && item.type !== '应用资源'"
                 style="margin-left: 10px"
               >
                 <path
@@ -125,7 +138,9 @@
           <div class="dec">
             <div
               v-if="
-                selectCardsname !== '基础设施' && selectCardsname !== '数据资源' && selectCardsname !== '融合服务'
+                selectCardsname !== '基础设施' &&
+                selectCardsname !== '数据资源' &&
+                selectCardsname !== '融合服务'
               "
             >
               <span>{{ item.shareType || '--' }}</span>
@@ -142,13 +157,28 @@
           </div>
           <div class="bottom" v-if="selectCardsname !== '基础设施'">
             <div>
-              <div v-if="selectCardsname !== '数据资源' && selectCardsname !== '融合服务'">
+              <div
+                v-if="
+                  selectCardsname !== '数据资源' &&
+                  selectCardsname !== '融合服务'
+                "
+              >
                 浏览量：{{ item.visits || 0 }}次
               </div>
-              <div v-if="selectCardsname !== '应用资源' && selectCardsname !== '融合服务'">
+              <div
+                v-if="
+                  selectCardsname !== '应用资源' &&
+                  selectCardsname !== '融合服务'
+                "
+              >
                 申请量：{{ item.applyCount || 0 }}次
               </div>
-              <div v-if="selectCardsname === '数据资源' && selectCardsname !== '融合服务'">
+              <div
+                v-if="
+                  selectCardsname === '数据资源' &&
+                  selectCardsname !== '融合服务'
+                "
+              >
                 数据量：{{ item.sjlCount || 0 }}
               </div>
               <div v-if="selectCardsname !== '数据资源'">
@@ -208,8 +238,11 @@
               >
                 查看详情
               </a-button>
-               <a-button style="margin-left: 10px" v-show="selectCardsname === '融合服务'"
-                @click="handleAKeyApplication(item)">
+              <a-button
+                style="margin-left: 10px"
+                v-show="selectCardsname === '融合服务'"
+                @click="handleAKeyApplication(item)"
+              >
                 一键申请
               </a-button>
               <!-- <a-button
@@ -367,23 +400,23 @@
       // eslint-disable-next-line no-undef
       const whoShow1 = whoShow
       const showKey = ref(0)
-      let shoppingKey = ref(1)    
+      let shoppingKey = ref(1)
       // 融合服务排序
       const orderList = ref([
         {
           value: 'collectCount',
           name: '收藏量',
-          orderType: 'DESC'
+          orderType: 'DESC',
         },
         {
           value: 'create_date',
           name: '发布时间',
-          orderType: 'DESC'
+          orderType: 'DESC',
         },
         {
           value: 'update_date',
           name: '更新时间',
-          orderType: 'DESC'
+          orderType: 'DESC',
         },
       ])
       // 购物车id列表
@@ -461,16 +494,14 @@
           } else {
             window.open('http://10.134.135.24:30090/#/home')
           }
-        } 
-        else if (props.selectCardsname === '融合服务') {
+        } else if (props.selectCardsname === '融合服务') {
           router.push({
             path: '/integrationServicesDetails',
             query: {
               id: item.id,
             },
           })
-        }
-        else {
+        } else {
           if (type === 'apply') {
             console.log('一键申请===================>', item)
             localStorage.setItem(
@@ -577,72 +608,67 @@
       }
 
       // 融合服务--排序
-    const changeOrder = (i, val, type) => {
-      let newType = type === 'DESC' ? 'ASC' : 'DESC'
-      orderList.value[i].orderType = newType
-      mybus.emit('changeCondition', {
-        orderField: val,
-        orderType: newType,
-      })
-    }
+      const changeOrder = (i, val, type) => {
+        let newType = type === 'DESC' ? 'ASC' : 'DESC'
+        orderList.value[i].orderType = newType
+        mybus.emit('changeCondition', {
+          orderField: val,
+          orderType: newType,
+        })
+      }
 
-    // 融合服务--一键申请
-    const handleAKeyApplication = (item) => {
-      let _applyList = [];
-      (item.fuseResourceList || []).map(v => {
-        let resource = v.resource || {}
-        let obj = {
-          arr: [
-            {
-              delFlag: resource.delFlag,
-              description: resource.description,
-              resourceId: resource.id,
-              resourceName: resource.name,
-              time: resource.createDate,
-              type: resource.type,
-            },
-          ],
-          deptId: resource.deptId,
-          deptName: resource.deptName,
-        }
-        _applyList.push(obj)
-      })
+      // 融合服务--一键申请
+      const handleAKeyApplication = (item) => {
+        let _applyList = []
+        ;(item.fuseResourceList || []).map((v) => {
+          let resource = v.resource || {}
+          let obj = {
+            arr: [
+              {
+                delFlag: resource.delFlag,
+                description: resource.description,
+                resourceId: resource.id,
+                resourceName: resource.name,
+                time: resource.createDate,
+                type: resource.type,
+              },
+            ],
+            deptId: resource.deptId,
+            deptName: resource.deptName,
+          }
+          _applyList.push(obj)
+        })
 
-      localStorage.setItem(
-        'applyList',
-        JSON.stringify(_applyList)
-      )
-      router.push({
-        path: '/apply',
-      })
-    }
+        localStorage.setItem('applyList', JSON.stringify(_applyList))
+        router.push({
+          path: '/apply',
+        })
+      }
 
       mybus.on('chongzhi', (typeObj) => {
-        console.log('typeObj------------>', typeObj);
-        if(!typeObj) {
-          selData.value = 'total';
+        console.log('typeObj------------>', typeObj)
+        if (!typeObj) {
+          selData.value = 'total'
         }
-        if(typeObj && typeObj.type === '融合服务') {
+        if (typeObj && typeObj.type === '融合服务') {
           orderList.value = [
             {
               value: 'collectCount',
               name: '收藏量',
-              orderType: 'DESC'
+              orderType: 'DESC',
             },
             {
               value: 'create_date',
               name: '发布时间',
-              orderType: 'DESC'
+              orderType: 'DESC',
             },
             {
               value: 'update_date',
               name: '更新时间',
-              orderType: 'DESC'
+              orderType: 'DESC',
             },
           ]
         }
-        
-        
       })
       let videoUrl = ref('')
       const options = reactive({
diff --git a/front/src/views/personalCenter/components/ApplyDetails.vue b/front/src/views/personalCenter/components/ApplyDetails.vue
index 977986a6..9a60c7b0 100644
--- a/front/src/views/personalCenter/components/ApplyDetails.vue
+++ b/front/src/views/personalCenter/components/ApplyDetails.vue
@@ -1,6 +1,20 @@
 <template>
   <div class="form-container">
-    <AbilityApplication :refObj="refObj"></AbilityApplication>
+    <AbilityApplication
+      :refObj="refObj"
+      v-if="showType === '能力申请'"
+    ></AbilityApplication>
+    <PutOnTheShelf
+      :refObj="refObj"
+      v-else-if="showType === '能力上架'"
+    ></PutOnTheShelf>
+    <OffTheShelf
+      :refObj="refObj"
+      v-else-if="showType === '能力下架'"
+    ></OffTheShelf>
+    <Demand :refObj="refObj" v-else-if="showType === '能力需求'"></Demand>
+    <Comment :refObj="refObj" v-else-if="showType === '需求评论'"></Comment>
+    <OtherApplications :refObj="refObj" v-else></OtherApplications>
     <!-- <div class="title">流程图</div>
     <div>
       <img :src="getResourceURL()" alt="" />
@@ -16,6 +30,11 @@
 </template>
 <script setup>
   import AbilityApplication from './AbilityApplication.vue'
+  import PutOnTheShelf from './PutOnTheShelf .vue'
+  import OffTheShelf from './OffTheShelf.vue'
+  import Demand from './Demand.vue'
+  import Comment from './Comment.vue'
+  import OtherApplications from '@/views/personalCenter/components/OtherApplications '
   import { onMounted, reactive, defineProps, ref } from 'vue'
   import Cookies from 'js-cookie'
   // import { baseURL } from '@/config'
@@ -34,23 +53,18 @@
     processInstanceId: { type: String, default: null },
     resourceId: { type: String, default: null },
     refObj: { type: Object, default: null },
+    showType: { type: String, default: null },
   })
   const refObj = ref({})
+  const showType = ref('')
   // eslint-disable-next-line vue/no-setup-props-destructure
   refObj.value = props.refObj
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  showType.value = props.showType
   //流转详情
   const dataSource = reactive({ data: [] })
   // console.log(props.refObj, '---------------------------------------')
-  if (props.refObj.resourceApplication) {
-    dataSource.data = []
-    for (const key in props.refObj.resourceApplication) {
-      if (props.refObj.resourceApplication[key].length > 0) {
-        props.refObj.resourceApplication[key].map((item) => {
-          dataSource.data.push([item.instanceId, item.taskHandleDetailInfo])
-        })
-      }
-    }
-  }
+
   const downloadFile = (path, name) => {
     const xhr = new XMLHttpRequest()
     xhr.open('get', path)
@@ -194,20 +208,31 @@
 
   const getLiuZhuanInfo = () => {
     const params = qs.stringify({
-      page: 1,
-      limit: 4,
       processInstanceId: props.processInstanceId,
     })
     getTaskHandleDetailInfo(params).then((res) => {
+      let arr = []
       res.data.data.forEach((item) => {
-        dataSource.data.push(item)
+        arr.push(item)
       })
+      dataSource.data.push([props.processInstanceId, arr])
     })
   }
 
   onMounted(() => {
     // getInfo()
-    // getLiuZhuanInfo()
+    if (props.refObj.resourceApplication) {
+      dataSource.data = []
+      for (const key in props.refObj.resourceApplication) {
+        if (props.refObj.resourceApplication[key].length > 0) {
+          props.refObj.resourceApplication[key].map((item) => {
+            dataSource.data.push([item.instanceId, item.taskHandleDetailInfo])
+          })
+        }
+      }
+    } else {
+      getLiuZhuanInfo()
+    }
   })
 
   const getResourceURL = () => {
diff --git a/front/src/views/personalCenter/components/Comment.vue b/front/src/views/personalCenter/components/Comment.vue
new file mode 100644
index 00000000..b37806f3
--- /dev/null
+++ b/front/src/views/personalCenter/components/Comment.vue
@@ -0,0 +1,207 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-07-12 09:42:44
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-14 16:33:00
+ * @Description:我的申请 能力申请 查看详情
+-->
+<template>
+  <div class="top">
+    <div class="title">基本信息</div>
+    <div class="main">
+      <div>
+        <p class="item">
+          <span>申请单号：{{ props.refObj.applyNumber || '--' }}</span>
+        </p>
+        <p class="item">
+          <span>评论内容：{{ props.refObj.dto.comment }}</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps } from 'vue'
+  const props = defineProps({
+    refObj: { type: Object, default: null },
+  })
+  console.log(props.refObj, '=====================================')
+  // if (props.refObj.resourceApplication) {
+  //   showArr.value = []
+  //   for (const key in props.refObj.resourceApplication) {
+  //     if (props.refObj.resourceApplication[key].length > 0) {
+  //       let obj = { name: '', instanceId: '', list: [], list2: [] }
+  //       obj.name = key
+  //       props.refObj.resourceApplication[key].map((item) => {
+  //         obj.instanceId = item.instanceId
+  //         if (item.resources.length > 0) {
+  //           item.resources.map((val) => {
+  //             obj.list.push(val)
+  //           })
+  //         } else {
+  //           item.camera.map((val) => {
+  //             obj.list2.push(val)
+  //           })
+  //         }
+  //       })
+  //       showArr.value.push(obj)
+  //     }
+  //   }
+  // }
+</script>
+<style lang="less" scoped>
+  .title {
+    font-size: 0.18rem;
+    color: #000;
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+    padding-left: 0.1rem;
+    border-left: 0.06rem #0058e1 solid;
+  }
+  .top {
+    margin-bottom: 0.1rem;
+    .main {
+      background: #eee;
+      padding: 0.2rem 0.2rem 0.1rem;
+      p {
+        display: flex;
+        justify-content: space-between;
+        & > span {
+          width: 100%;
+        }
+        .enclosure {
+          width: 95%;
+          padding: 0.05rem 0.1rem;
+          background: #ddd;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 0.05rem;
+        }
+        .btn:hover {
+          color: #0058e1;
+          cursor: pointer;
+        }
+      }
+      .item {
+        span {
+          width: 2.5rem;
+        }
+      }
+    }
+  }
+  .bottom {
+    .main {
+      .item {
+        border-top: 1px #eee solid;
+        .deptName {
+          color: #0058e1;
+          font-size: 0.16rem;
+          margin-top: 0.1rem;
+          display: flex;
+          align-items: center;
+          .img {
+            width: 0.05rem;
+            height: 0.05rem;
+            border-radius: 0.05rem;
+            background: #0058e1;
+            margin-right: 0.1rem;
+          }
+        }
+        .oddNumbers {
+          margin: 0.1rem 0 0 0.15rem;
+        }
+        .box {
+          margin-left: 0.1rem;
+          .ability {
+            height: 1.3rem;
+            display: flex;
+            border-bottom: 1px #eee solid;
+            padding: 0.1rem 0;
+            .left {
+              display: inline-block;
+              width: 1.1rem;
+              height: 1.1rem;
+              margin-left: 0.1rem;
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .sxt {
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .yyzy {
+              background: url('~@/assets/home/yyzy_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .znsf {
+              background: url('~@/assets/home/znsf_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .tcfw {
+              background: url('~@/assets/home/tcfw_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .kfzj {
+              background: url('~@/assets/home/kfzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .ywzj {
+              background: url('~@/assets/home/ywzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .btn {
+              cursor: pointer;
+              color: #0087ff;
+              align-self: flex-end;
+              padding: 5px 10px;
+              border: 1px #0087ff solid;
+              border-radius: 0.2rem;
+            }
+            .right {
+              flex: 1;
+              margin-left: 0.15rem;
+              .ability-top {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .name {
+                  .type {
+                    background: #0087ff;
+                    color: #fff;
+                    padding: 2px 10px;
+                    border-radius: 10px;
+                    margin-left: 0.1rem;
+                  }
+                }
+              }
+              .ability-bottom {
+                margin-top: 0.15rem;
+                // display: flex;
+                // justify-content: space-between;
+                .dec {
+                  width: 7rem;
+                  height: 0.44rem;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                }
+                .result:hover {
+                  color: #0058e1;
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/personalCenter/components/Demand.vue b/front/src/views/personalCenter/components/Demand.vue
new file mode 100644
index 00000000..c81f92ef
--- /dev/null
+++ b/front/src/views/personalCenter/components/Demand.vue
@@ -0,0 +1,216 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-07-12 09:42:44
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-14 16:29:01
+ * @Description:我的申请 能力申请 查看详情
+-->
+<template>
+  <div class="top">
+    <div class="title">基本信息</div>
+    <div class="main">
+      <div>
+        <p class="item">
+          <span>申请单号：{{ props.refObj.applyNumber || '--' }}</span>
+        </p>
+        <p class="item">
+          <span>需求标题：{{ props.refObj.dto.demandSubject }}</span>
+        </p>
+        <p class="item">
+          <span>需求类型：{{ props.refObj.dto.detailsType }}</span>
+        </p>
+        <p class="item">
+          <span>需求描述：{{ props.refObj.dto.demandDetails }}</span>
+        </p>
+        <p class="item">
+          <span>需求领域：{{ props.refObj.dto.detailsField }}</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps } from 'vue'
+  const props = defineProps({
+    refObj: { type: Object, default: null },
+  })
+  console.log(props.refObj, '=====================================')
+  // if (props.refObj.resourceApplication) {
+  //   showArr.value = []
+  //   for (const key in props.refObj.resourceApplication) {
+  //     if (props.refObj.resourceApplication[key].length > 0) {
+  //       let obj = { name: '', instanceId: '', list: [], list2: [] }
+  //       obj.name = key
+  //       props.refObj.resourceApplication[key].map((item) => {
+  //         obj.instanceId = item.instanceId
+  //         if (item.resources.length > 0) {
+  //           item.resources.map((val) => {
+  //             obj.list.push(val)
+  //           })
+  //         } else {
+  //           item.camera.map((val) => {
+  //             obj.list2.push(val)
+  //           })
+  //         }
+  //       })
+  //       showArr.value.push(obj)
+  //     }
+  //   }
+  // }
+</script>
+<style lang="less" scoped>
+  .title {
+    font-size: 0.18rem;
+    color: #000;
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+    padding-left: 0.1rem;
+    border-left: 0.06rem #0058e1 solid;
+  }
+  .top {
+    margin-bottom: 0.1rem;
+    .main {
+      background: #eee;
+      padding: 0.2rem 0.2rem 0.1rem;
+      p {
+        display: flex;
+        justify-content: space-between;
+        & > span {
+          width: 100%;
+        }
+        .enclosure {
+          width: 95%;
+          padding: 0.05rem 0.1rem;
+          background: #ddd;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 0.05rem;
+        }
+        .btn:hover {
+          color: #0058e1;
+          cursor: pointer;
+        }
+      }
+      .item {
+        span {
+          width: 2.5rem;
+        }
+      }
+    }
+  }
+  .bottom {
+    .main {
+      .item {
+        border-top: 1px #eee solid;
+        .deptName {
+          color: #0058e1;
+          font-size: 0.16rem;
+          margin-top: 0.1rem;
+          display: flex;
+          align-items: center;
+          .img {
+            width: 0.05rem;
+            height: 0.05rem;
+            border-radius: 0.05rem;
+            background: #0058e1;
+            margin-right: 0.1rem;
+          }
+        }
+        .oddNumbers {
+          margin: 0.1rem 0 0 0.15rem;
+        }
+        .box {
+          margin-left: 0.1rem;
+          .ability {
+            height: 1.3rem;
+            display: flex;
+            border-bottom: 1px #eee solid;
+            padding: 0.1rem 0;
+            .left {
+              display: inline-block;
+              width: 1.1rem;
+              height: 1.1rem;
+              margin-left: 0.1rem;
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .sxt {
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .yyzy {
+              background: url('~@/assets/home/yyzy_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .znsf {
+              background: url('~@/assets/home/znsf_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .tcfw {
+              background: url('~@/assets/home/tcfw_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .kfzj {
+              background: url('~@/assets/home/kfzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .ywzj {
+              background: url('~@/assets/home/ywzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .btn {
+              cursor: pointer;
+              color: #0087ff;
+              align-self: flex-end;
+              padding: 5px 10px;
+              border: 1px #0087ff solid;
+              border-radius: 0.2rem;
+            }
+            .right {
+              flex: 1;
+              margin-left: 0.15rem;
+              .ability-top {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .name {
+                  .type {
+                    background: #0087ff;
+                    color: #fff;
+                    padding: 2px 10px;
+                    border-radius: 10px;
+                    margin-left: 0.1rem;
+                  }
+                }
+              }
+              .ability-bottom {
+                margin-top: 0.15rem;
+                // display: flex;
+                // justify-content: space-between;
+                .dec {
+                  width: 7rem;
+                  height: 0.44rem;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                }
+                .result:hover {
+                  color: #0058e1;
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/personalCenter/components/MyApply.vue b/front/src/views/personalCenter/components/MyApply.vue
index 8e13ed69..394d111c 100644
--- a/front/src/views/personalCenter/components/MyApply.vue
+++ b/front/src/views/personalCenter/components/MyApply.vue
@@ -85,7 +85,7 @@
             <p class="content-body-content-son">
               审核结果：{{
                 // item.ended ? '审核完成' : item.backToFirst ? '被终止' : '审核中'
-                item.approveStatus
+                item.approveStatus || item.resourceStatusTip || '--'
               }}
             </p>
           </div>
@@ -155,11 +155,11 @@
           <!-- <div class="content-body-bottom" v-if="item.currentTaskList">
             <div>申请日期：{{ item.currentTaskList[0].createTime }}</div>
             <div>审批人：{{ item.currentTaskList[0].assigneeName }}</div>
-          </div>
-          <div class="content-body-bottom" v-else>
-            <div>申请日期：{{ item.startTime }}</div>
-            <div></div>
           </div> -->
+          <div class="content-body-bottom">
+            <div>申请日期：{{ item.createDate || item.startTime }}</div>
+            <div></div>
+          </div>
           <div class="button-box">
             <div class="button" @click="showDetail(item)">查看详情</div>
             <!-- <div class="button" @click="showAdd(item)" v-if="item.backToFirst">
@@ -273,6 +273,7 @@
         :processInstanceId="processInstanceId"
         :resourceId="resourceId"
         :refObj="refObj"
+        :showType="showType"
       ></apply-details>
     </a-modal>
     <a-modal
@@ -305,13 +306,16 @@
 </template>
 
 <script setup>
-  import qs from 'qs'
+  // import qs from 'qs'
   import { onMounted, reactive, ref } from 'vue'
   import {
     getMyProcessInstancePage,
-    getTaskHandleDetailInfo,
+    // getTaskHandleDetailInfo,
     getTabilityapplication,
     getByApplyFlag,
+    nengliziyuanshangjiaapply,
+    getDemandForm,
+    demandComment,
     // getProcDefBizRoute,
   } from '@/api/personalCenter'
   import {
@@ -319,6 +323,7 @@
     relaunch,
     selectOne,
     getApplyCameraList,
+    selectOneDel,
   } from '@/api/home'
   import { useRouter } from 'vue-router'
   import { message } from 'ant-design-vue'
@@ -370,11 +375,13 @@
   // 选择类型
   const changeType = (item, index) => {
     console.log(item, index)
+    page.value = 1
     typeIndex.value = index
     getApplyList()
   }
   let name = ref('')
   const detailsVisible = ref(false)
+  const detailsVisible2 = ref(false)
   const businessKey = ref('')
   const processInstanceId = ref('')
   const processDefinitionName = ref('')
@@ -388,14 +395,29 @@
   const showDetail = (item) => {
     console.log('showDetail', item)
     // getProcDefBizRoute(item.processDefinitionId)
-    getByApplyFlag(item.applyFlag).then((res) => {
-      refObj.value = res.data.data
+    if (typeIndex.value == 0 && item.applyFlag) {
+      getByApplyFlag(item.applyFlag).then((res) => {
+        if (res.data.code == 0) {
+          refObj.value = res.data.data
+          detailsVisible.value = true
+          processDefinitionName.value = item.processDefinitionName
+          businessKey.value = item.businessKey
+          processInstanceId.value = item.instanceId
+          resourceId.value = item.resourceId
+        } else {
+          message.error('数据请求失败！')
+        }
+      })
+    } else if (typeIndex.value !== 1) {
+      refObj.value = item
       detailsVisible.value = true
       processDefinitionName.value = item.processDefinitionName
       businessKey.value = item.businessKey
-      processInstanceId.value = item.instanceId
+      processInstanceId.value = item.processInstanceId
       resourceId.value = item.resourceId
-    })
+    } else {
+      message.error('数据请求失败！')
+    }
   }
   const showVideoList = (item) => {
     console.log('显示列表', item)
@@ -497,6 +519,7 @@
   }
   // initNum()
   const total = ref('')
+  const showType = ref('')
   const page = ref('1')
   const ended = ref('')
   // 搜索框
@@ -509,8 +532,6 @@
     getApplyList(name.value)
   }
   const getApplyList = () => {
-    contentList.data = []
-    total.value = 0
     const params = {
       page: page.value,
       limit: 4,
@@ -519,9 +540,11 @@
     }
     if (typeIndex.value == 0) {
       getTabilityapplication(params).then((res) => {
+        contentList.data = []
         console.log('获取我的申请===============>', res.data.data)
         contentList.data = res.data.data.list
         total.value = res.data.data.total
+        showType.value = '能力申请'
       })
     } else if (typeIndex.value !== 1) {
       switch (typeIndex.value) {
@@ -539,33 +562,84 @@
           break
       }
       getMyProcessInstancePage(params).then((res) => {
+        contentList.data = []
         // initNum(name.value)
         console.log(res.data.data.list)
         contentList.data = res.data.data.list
         total.value = res.data.data.total
-        if (contentList.data && contentList.data.length > 0) {
-          contentList.data.map((item) => {
-            const param = {
-              page: 1,
-              limit: 4,
-              processInstanceId: item.processInstanceId,
-            }
-            getTaskHandleDetailInfo(qs.stringify(param)).then((res) => {
-              console.log('申请结果', res.data.data, res.data.data[0].comment)
-              const result = res.data.data
-              if (result && result.length > 2) {
-                item.comment =
-                  result[0].comment.length > result[1].comment.length
-                    ? result[0].comment
-                    : result[1].comment
-              } else {
-                item.comment = result[0].comment
-              }
+        switch (typeIndex.value) {
+          case 2:
+            contentList.data.map((val) => {
+              nengliziyuanshangjiaapply(val.businessKey).then((res1) => {
+                console.log('上架===========>', res1.data.data)
+                val.title = res1.data.data.resourceDTO.name
+                val.dto = res1.data.data.resourceDTO
+                showType.value = '能力上架'
+              })
             })
-            return item
-          })
+            break
+          case 3:
+            contentList.data.map((val) => {
+              selectOneDel(val.businessKey).then((res1) => {
+                console.log('下架===========>', res1.data.data)
+                val.title = res1.data.data.name
+                val.dto = res1.data.data
+                showType.value = '能力下架'
+              })
+            })
+            // params.processDefinitionKey = 'resourcundercarriageapply'
+            break
+          case 4:
+            contentList.data.map((val) => {
+              getDemandForm(val.businessKey).then((res1) => {
+                console.log('需求===========>', res1.data.data)
+                val.title = res1.data.data.demandSubject
+                val.resourceStatusTip = res1.data.data.flagTip
+                val.dto = res1.data.data
+                showType.value = '能力需求'
+              })
+            })
+            // params.processDefinitionKey = 'abilitydemandapply'
+            break
+          case 5:
+            contentList.data.map((val) => {
+              demandComment(val.businessKey).then((res1) => {
+                console.log('评论===========>', res1.data.data)
+                val.title = res1.data.data.comment
+                val.resourceStatusTip = res1.data.data.delFlagTip
+                val.dto = res1.data.data
+                showType.value = '需求评论'
+              })
+            })
+            // params.processDefinitionKey = 'comment_review'
+            break
         }
+        // if (contentList.data && contentList.data.length > 0) {
+        //   contentList.data.map((item) => {
+        //     const param = {
+        //       page: 1,
+        //       limit: 4,
+        //       processInstanceId: item.processInstanceId,
+        //     }
+        //     getTaskHandleDetailInfo(qs.stringify(param)).then((res) => {
+        //       console.log('申请结果', res.data.data, res.data.data[0].comment)
+        //       const result = res.data.data
+        //       if (result && result.length > 2) {
+        //         item.comment =
+        //           result[0].comment.length > result[1].comment.length
+        //             ? result[0].comment
+        //             : result[1].comment
+        //       } else {
+        //         item.comment = result[0].comment
+        //       }
+        //     })
+        //     return item
+        //   })
+        // }
       })
+    } else {
+      contentList.data = []
+      showType.value = ''
     }
   }
   const handleCurrentChange = (val) => {
diff --git a/front/src/views/personalCenter/components/OffTheShelf.vue b/front/src/views/personalCenter/components/OffTheShelf.vue
new file mode 100644
index 00000000..b7bf4d45
--- /dev/null
+++ b/front/src/views/personalCenter/components/OffTheShelf.vue
@@ -0,0 +1,210 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-07-12 09:42:44
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-14 16:24:54
+ * @Description:我的申请 能力申请 查看详情
+-->
+<template>
+  <div class="top">
+    <div class="title">基本信息</div>
+    <div class="main">
+      <div>
+        <p class="item">
+          <span>申请单号：{{ props.refObj.applyNumber || '--' }}</span>
+        </p>
+        <p class="item">
+          <span>下架原因：{{ props.refObj.dto.undercarriageReason }}</span>
+        </p>
+        <p class="item">
+          <span>下架发起人：{{ props.refObj.dto.undercarriageUserName }}</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps } from 'vue'
+  const props = defineProps({
+    refObj: { type: Object, default: null },
+  })
+  console.log(props.refObj, '=====================================')
+  // if (props.refObj.resourceApplication) {
+  //   showArr.value = []
+  //   for (const key in props.refObj.resourceApplication) {
+  //     if (props.refObj.resourceApplication[key].length > 0) {
+  //       let obj = { name: '', instanceId: '', list: [], list2: [] }
+  //       obj.name = key
+  //       props.refObj.resourceApplication[key].map((item) => {
+  //         obj.instanceId = item.instanceId
+  //         if (item.resources.length > 0) {
+  //           item.resources.map((val) => {
+  //             obj.list.push(val)
+  //           })
+  //         } else {
+  //           item.camera.map((val) => {
+  //             obj.list2.push(val)
+  //           })
+  //         }
+  //       })
+  //       showArr.value.push(obj)
+  //     }
+  //   }
+  // }
+</script>
+<style lang="less" scoped>
+  .title {
+    font-size: 0.18rem;
+    color: #000;
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+    padding-left: 0.1rem;
+    border-left: 0.06rem #0058e1 solid;
+  }
+  .top {
+    margin-bottom: 0.1rem;
+    .main {
+      background: #eee;
+      padding: 0.2rem 0.2rem 0.1rem;
+      p {
+        display: flex;
+        justify-content: space-between;
+        & > span {
+          width: 100%;
+        }
+        .enclosure {
+          width: 95%;
+          padding: 0.05rem 0.1rem;
+          background: #ddd;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 0.05rem;
+        }
+        .btn:hover {
+          color: #0058e1;
+          cursor: pointer;
+        }
+      }
+      .item {
+        span {
+          width: 2.5rem;
+        }
+      }
+    }
+  }
+  .bottom {
+    .main {
+      .item {
+        border-top: 1px #eee solid;
+        .deptName {
+          color: #0058e1;
+          font-size: 0.16rem;
+          margin-top: 0.1rem;
+          display: flex;
+          align-items: center;
+          .img {
+            width: 0.05rem;
+            height: 0.05rem;
+            border-radius: 0.05rem;
+            background: #0058e1;
+            margin-right: 0.1rem;
+          }
+        }
+        .oddNumbers {
+          margin: 0.1rem 0 0 0.15rem;
+        }
+        .box {
+          margin-left: 0.1rem;
+          .ability {
+            height: 1.3rem;
+            display: flex;
+            border-bottom: 1px #eee solid;
+            padding: 0.1rem 0;
+            .left {
+              display: inline-block;
+              width: 1.1rem;
+              height: 1.1rem;
+              margin-left: 0.1rem;
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .sxt {
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .yyzy {
+              background: url('~@/assets/home/yyzy_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .znsf {
+              background: url('~@/assets/home/znsf_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .tcfw {
+              background: url('~@/assets/home/tcfw_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .kfzj {
+              background: url('~@/assets/home/kfzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .ywzj {
+              background: url('~@/assets/home/ywzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .btn {
+              cursor: pointer;
+              color: #0087ff;
+              align-self: flex-end;
+              padding: 5px 10px;
+              border: 1px #0087ff solid;
+              border-radius: 0.2rem;
+            }
+            .right {
+              flex: 1;
+              margin-left: 0.15rem;
+              .ability-top {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .name {
+                  .type {
+                    background: #0087ff;
+                    color: #fff;
+                    padding: 2px 10px;
+                    border-radius: 10px;
+                    margin-left: 0.1rem;
+                  }
+                }
+              }
+              .ability-bottom {
+                margin-top: 0.15rem;
+                // display: flex;
+                // justify-content: space-between;
+                .dec {
+                  width: 7rem;
+                  height: 0.44rem;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                }
+                .result:hover {
+                  color: #0058e1;
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/personalCenter/components/OtherApplications .vue b/front/src/views/personalCenter/components/OtherApplications .vue
new file mode 100644
index 00000000..695a741b
--- /dev/null
+++ b/front/src/views/personalCenter/components/OtherApplications .vue	
@@ -0,0 +1,229 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-07-12 09:42:44
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-14 14:50:30
+ * @Description:我的申请 能力申请 查看详情
+-->
+<template>
+  <div class="top">
+    <!-- <div class="title">基本信息</div>
+    <div class="main">
+      <div>
+        <p class="item">
+          <span>申请标题：{{ title }}</span>
+          <span>申请单号：{{ applyNumber || '--' }}</span>
+          <span>应用系统：{{ applicationSystem }}</span>
+        </p>
+        <p class="item">
+          <span>申请人信息：{{ user }}</span>
+          <span>电话：{{ phone }}</span>
+          <span>单位：{{ unit }}</span>
+        </p>
+        <p>
+          <span>应用场景：{{}}</span>
+        </p>
+        <p>
+          <span>应用背景：{{ applicationBackground }}</span>
+        </p>
+        <p>
+          <span>期望效果：{{ effectWish }}</span>
+        </p>
+        <p v-if="props.refObj.enclosure">
+          <span>
+            申请单附件：
+            <span class="enclosure">
+              {{ enclosureName || '--' }}
+              <span class="btn">预览</span>
+            </span>
+          </span>
+        </p>
+      </div>
+    </div> -->
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps } from 'vue'
+  const props = defineProps({
+    refObj: { type: Object, default: null },
+  })
+  console.log(props.refObj, '=====================================')
+  // if (props.refObj.resourceApplication) {
+  //   showArr.value = []
+  //   for (const key in props.refObj.resourceApplication) {
+  //     if (props.refObj.resourceApplication[key].length > 0) {
+  //       let obj = { name: '', instanceId: '', list: [], list2: [] }
+  //       obj.name = key
+  //       props.refObj.resourceApplication[key].map((item) => {
+  //         obj.instanceId = item.instanceId
+  //         if (item.resources.length > 0) {
+  //           item.resources.map((val) => {
+  //             obj.list.push(val)
+  //           })
+  //         } else {
+  //           item.camera.map((val) => {
+  //             obj.list2.push(val)
+  //           })
+  //         }
+  //       })
+  //       showArr.value.push(obj)
+  //     }
+  //   }
+  // }
+</script>
+<style lang="less" scoped>
+  .title {
+    font-size: 0.18rem;
+    color: #000;
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+    padding-left: 0.1rem;
+    border-left: 0.06rem #0058e1 solid;
+  }
+  .top {
+    margin-bottom: 0.1rem;
+    .main {
+      background: #eee;
+      padding: 0.2rem 0.2rem 0.1rem;
+      p {
+        display: flex;
+        justify-content: space-between;
+        & > span {
+          width: 100%;
+        }
+        .enclosure {
+          width: 95%;
+          padding: 0.05rem 0.1rem;
+          background: #ddd;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 0.05rem;
+        }
+        .btn:hover {
+          color: #0058e1;
+          cursor: pointer;
+        }
+      }
+      .item {
+        span {
+          width: 2.5rem;
+        }
+      }
+    }
+  }
+  .bottom {
+    .main {
+      .item {
+        border-top: 1px #eee solid;
+        .deptName {
+          color: #0058e1;
+          font-size: 0.16rem;
+          margin-top: 0.1rem;
+          display: flex;
+          align-items: center;
+          .img {
+            width: 0.05rem;
+            height: 0.05rem;
+            border-radius: 0.05rem;
+            background: #0058e1;
+            margin-right: 0.1rem;
+          }
+        }
+        .oddNumbers {
+          margin: 0.1rem 0 0 0.15rem;
+        }
+        .box {
+          margin-left: 0.1rem;
+          .ability {
+            height: 1.3rem;
+            display: flex;
+            border-bottom: 1px #eee solid;
+            padding: 0.1rem 0;
+            .left {
+              display: inline-block;
+              width: 1.1rem;
+              height: 1.1rem;
+              margin-left: 0.1rem;
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .sxt {
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .yyzy {
+              background: url('~@/assets/home/yyzy_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .znsf {
+              background: url('~@/assets/home/znsf_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .tcfw {
+              background: url('~@/assets/home/tcfw_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .kfzj {
+              background: url('~@/assets/home/kfzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .ywzj {
+              background: url('~@/assets/home/ywzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .btn {
+              cursor: pointer;
+              color: #0087ff;
+              align-self: flex-end;
+              padding: 5px 10px;
+              border: 1px #0087ff solid;
+              border-radius: 0.2rem;
+            }
+            .right {
+              flex: 1;
+              margin-left: 0.15rem;
+              .ability-top {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .name {
+                  .type {
+                    background: #0087ff;
+                    color: #fff;
+                    padding: 2px 10px;
+                    border-radius: 10px;
+                    margin-left: 0.1rem;
+                  }
+                }
+              }
+              .ability-bottom {
+                margin-top: 0.15rem;
+                // display: flex;
+                // justify-content: space-between;
+                .dec {
+                  width: 7rem;
+                  height: 0.44rem;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                }
+                .result:hover {
+                  color: #0058e1;
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/personalCenter/components/PutOnTheShelf .vue b/front/src/views/personalCenter/components/PutOnTheShelf .vue
new file mode 100644
index 00000000..74365751
--- /dev/null
+++ b/front/src/views/personalCenter/components/PutOnTheShelf .vue	
@@ -0,0 +1,214 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-07-12 09:42:44
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-14 16:25:57
+ * @Description:我的申请 能力申请 查看详情
+-->
+<template>
+  <div class="top">
+    <div class="title">基本信息</div>
+    <div class="main">
+      <div>
+        <p class="item">
+          <span>申请单号：{{ props.refObj.applyNumber || '--' }}</span>
+          <span>能力名称：{{ props.refObj.dto.name }}</span>
+          <span>能力类型：{{ props.refObj.dto.type }}</span>
+        </p>
+        <p class="item">
+          <span>共享条件：{{ props.refObj.dto.shareCondition }}</span>
+          <span>能力描述：{{ props.refObj.dto.description }}</span>
+          <span>归属部门：{{ props.refObj.dto.deptName }}</span>
+        </p>
+        <p v-for="item in props.refObj.dto.infoList" :key="item.attrType">
+          <span>{{ item.attrType + '：' + item.attrValue }}</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps } from 'vue'
+  const props = defineProps({
+    refObj: { type: Object, default: null },
+  })
+  console.log(props.refObj, '=====================================')
+  // if (props.refObj.resourceApplication) {
+  //   showArr.value = []
+  //   for (const key in props.refObj.resourceApplication) {
+  //     if (props.refObj.resourceApplication[key].length > 0) {
+  //       let obj = { name: '', instanceId: '', list: [], list2: [] }
+  //       obj.name = key
+  //       props.refObj.resourceApplication[key].map((item) => {
+  //         obj.instanceId = item.instanceId
+  //         if (item.resources.length > 0) {
+  //           item.resources.map((val) => {
+  //             obj.list.push(val)
+  //           })
+  //         } else {
+  //           item.camera.map((val) => {
+  //             obj.list2.push(val)
+  //           })
+  //         }
+  //       })
+  //       showArr.value.push(obj)
+  //     }
+  //   }
+  // }
+</script>
+<style lang="less" scoped>
+  .title {
+    font-size: 0.18rem;
+    color: #000;
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+    padding-left: 0.1rem;
+    border-left: 0.06rem #0058e1 solid;
+  }
+  .top {
+    margin-bottom: 0.1rem;
+    .main {
+      background: #eee;
+      padding: 0.2rem 0.2rem 0.1rem;
+      p {
+        display: flex;
+        justify-content: space-between;
+        & > span {
+          width: 100%;
+        }
+        .enclosure {
+          width: 95%;
+          padding: 0.05rem 0.1rem;
+          background: #ddd;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 0.05rem;
+        }
+        .btn:hover {
+          color: #0058e1;
+          cursor: pointer;
+        }
+      }
+      .item {
+        span {
+          width: 2.5rem;
+        }
+      }
+    }
+  }
+  .bottom {
+    .main {
+      .item {
+        border-top: 1px #eee solid;
+        .deptName {
+          color: #0058e1;
+          font-size: 0.16rem;
+          margin-top: 0.1rem;
+          display: flex;
+          align-items: center;
+          .img {
+            width: 0.05rem;
+            height: 0.05rem;
+            border-radius: 0.05rem;
+            background: #0058e1;
+            margin-right: 0.1rem;
+          }
+        }
+        .oddNumbers {
+          margin: 0.1rem 0 0 0.15rem;
+        }
+        .box {
+          margin-left: 0.1rem;
+          .ability {
+            height: 1.3rem;
+            display: flex;
+            border-bottom: 1px #eee solid;
+            padding: 0.1rem 0;
+            .left {
+              display: inline-block;
+              width: 1.1rem;
+              height: 1.1rem;
+              margin-left: 0.1rem;
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .sxt {
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .yyzy {
+              background: url('~@/assets/home/yyzy_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .znsf {
+              background: url('~@/assets/home/znsf_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .tcfw {
+              background: url('~@/assets/home/tcfw_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .kfzj {
+              background: url('~@/assets/home/kfzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .ywzj {
+              background: url('~@/assets/home/ywzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .btn {
+              cursor: pointer;
+              color: #0087ff;
+              align-self: flex-end;
+              padding: 5px 10px;
+              border: 1px #0087ff solid;
+              border-radius: 0.2rem;
+            }
+            .right {
+              flex: 1;
+              margin-left: 0.15rem;
+              .ability-top {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .name {
+                  .type {
+                    background: #0087ff;
+                    color: #fff;
+                    padding: 2px 10px;
+                    border-radius: 10px;
+                    margin-left: 0.1rem;
+                  }
+                }
+              }
+              .ability-bottom {
+                margin-top: 0.15rem;
+                // display: flex;
+                // justify-content: space-between;
+                .dec {
+                  width: 7rem;
+                  height: 0.44rem;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                }
+                .result:hover {
+                  color: #0058e1;
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
