diff --git a/front/package.json b/front/package.json
index 60073475..d0ddbf1b 100644
--- a/front/package.json
+++ b/front/package.json
@@ -38,6 +38,7 @@
     "pinyin-pro": "^3.8.3",
     "postprocessing": "^5.3.2",
     "remixicon": "^2.5.0",
+    "swiper": "^8.2.6",
     "three": "^0.98.0",
     "three.meshline": "^1.1.0",
     "vue": "^3.1.4",
@@ -70,6 +71,7 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "svg-sprite-loader": "^6.0.9",
+    "swiper": "^8.0.0",
     "vab-config": "0.0.8",
     "webpackbar": "^5.0.0-3"
   },
diff --git a/front/src/assets/newHome/newHome-title-bg.png b/front/src/assets/newHome/newHome-title-bg.png
index a6f75e59..f86a4c1a 100644
Binary files a/front/src/assets/newHome/newHome-title-bg.png and b/front/src/assets/newHome/newHome-title-bg.png differ
diff --git a/front/src/views/detailsAll/AlgorithmDetails.vue b/front/src/views/detailsAll/AlgorithmDetails.vue
index f215bd10..b870c33b 100644
--- a/front/src/views/detailsAll/AlgorithmDetails.vue
+++ b/front/src/views/detailsAll/AlgorithmDetails.vue
@@ -15,12 +15,6 @@
       :class="{ fixed: scrollTop >= 600 }"
       :selectNow="selectNow"
     ></algorithm-navigation>
-    <!-- 算法展示  视频 -->
-    <algorithm-display
-      :dataList="dataList.data"
-      id="algorithm-display"
-      class="scrollBox"
-    ></algorithm-display>
     <!-- 关联能力 -->
     <algorithm-associated-ability
       v-if="!loading"
@@ -28,6 +22,12 @@
       id="algorithm-associated-ability"
       class="scrollBox"
     ></algorithm-associated-ability>
+    <!-- 算法展示  视频 -->
+    <algorithm-display
+      :dataList="dataList.data"
+      id="algorithm-display"
+      class="scrollBox"
+    ></algorithm-display>
     <!-- 算法优势 -->
     <algorithm-advantage
       :dataList="dataList.data"
diff --git a/front/src/views/detailsAll/ApplicationDetails.vue b/front/src/views/detailsAll/ApplicationDetails.vue
index bd5f757d..4da1ccb3 100644
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@@ -163,7 +163,6 @@
         }
         queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
           associatedComponents.value[0].dataList = res.data.data
-          debugger
           loading.value = false
         })
       })
diff --git a/front/src/views/detailsAll/DeveloperComponents.vue b/front/src/views/detailsAll/DeveloperComponents.vue
index cd9fcbe3..90bcd4a5 100644
--- a/front/src/views/detailsAll/DeveloperComponents.vue
+++ b/front/src/views/detailsAll/DeveloperComponents.vue
@@ -16,12 +16,6 @@
       :class="{ fixed: scrollTop >= 600 }"
       :selectNow="selectNow"
     ></developer-navigation>
-    <!-- 组件展示  视频 -->
-    <Developer-presentation
-      :dataList="dataList.data"
-      id="eveloper-presentation"
-      class="scrollBox"
-    ></Developer-presentation>
     <!-- 关联能力 -->
     <developer-associated-ability
       v-if="!loading"
@@ -29,6 +23,12 @@
       id="developer-associated-ability"
       class="scrollBox"
     ></developer-associated-ability>
+    <!-- 组件展示  视频 -->
+    <Developer-presentation
+      :dataList="dataList.data"
+      id="eveloper-presentation"
+      class="scrollBox"
+    ></Developer-presentation>
     <!-- 功能介绍-->
     <developer-function-intorduction
       :dataList="dataList.data"
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
index a39683c2..d7f93986 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="application-associated-ability" v-if="flag">
     <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
-    <div class="application-associated-ability-main">
+    <div
+      class="application-associated-ability-main"
+      v-if="dataFrom[0].dataList.length < 4"
+    >
       <div
         class="associated-ability-card"
         v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@@ -24,13 +27,53 @@
         </div>
       </div>
     </div>
+    <div class="application-associated-ability-main" v-else>
+      <swiper
+        :slidesPerView="3"
+        :spaceBetween="30"
+        :pagination="{ clickable: true }"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+          :key="dataListitem.id"
+        >
+          <div
+            class="associated-ability-card"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <a-tooltip>
+              <template #title>{{ dataListitem.name }}</template>
+              <div class="associated-ability-card-title">
+                {{ dataListitem.name }}
+              </div>
+            </a-tooltip>
+            <div class="associated-ability-card-content">
+              <a-tooltip>
+                <template #title>{{ dataListitem.description }}</template>
+                <div class="associated-ability-card-content-font">
+                  {{ dataListitem.description }}
+                </div>
+              </a-tooltip>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
   </div>
 </template>
 
 <script setup>
   import { ref, defineProps, watch } from 'vue'
   import { useRouter } from 'vue-router'
+  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
   const router = useRouter()
+  const modules = ref([Pagination])
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
   const props = defineProps({
     associatedComponents: { type: Array, default: null },
@@ -84,15 +127,18 @@
 <style lang="less" scoped>
   .application-associated-ability {
     padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     .application-associated-ability-main {
       margin-top: 0.4rem;
       width: 13.3rem;
-      display: grid;
-      grid-template-columns: repeat(4, 25%);
+      display: flex;
+      justify-content: space-around !important;
+      :deep(.swiper) {
+        padding-bottom: 0.6rem;
+      }
       .associated-ability-card {
         width: 3.2rem;
         height: 2.78rem;
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
index 687c4549..71d00d5e 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
@@ -85,7 +85,7 @@
     dataList: { type: Object, default: null },
   })
 
-  const select = ref('algorithm-display')
+  const select = ref('algorithm-associated-ability')
 
   const selectNav = (key) => {
     select.value = key
@@ -128,7 +128,7 @@
     )
     if (navList.value.filter((item) => item.name === list.value[0])[0]) {
       select.value = navList.value.filter(
-        (item) => item.name === list.value[0]
+        (item) => (item.name === '关联应用') | (item.name === list.value[0])
       )[0].key
     }
     console.log('11111111111111111111111111', list.value, navList.value)
@@ -167,7 +167,7 @@
             list.value.push('使用方式')
           }
         })
-        list.value.push('关联应用')
+        list.value.unshift('关联应用')
         navList.value.forEach((item) => {
           console.log(item)
           if (list.value.indexOf(item.name) > -1) {
diff --git a/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue b/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
index 91e0360b..2e2c8054 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="application-associated-ability" v-if="flag">
     <detals-title title="关联组件" type="ASSOCIATED"></detals-title>
-    <div class="application-associated-ability-main">
+    <div
+      class="application-associated-ability-main"
+      v-if="dataFrom[0].dataList.length < 4"
+    >
       <div
         class="associated-ability-card"
         v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@@ -26,17 +29,58 @@
         </div>
       </div>
     </div>
+    <div class="application-associated-ability-main" v-else>
+      <swiper
+        :slidesPerView="3"
+        :spaceBetween="30"
+        :pagination="{ clickable: true }"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+          :key="dataListitem.id"
+        >
+          <div
+            class="associated-ability-card"
+            @click="switchFunction(dataListitem.id)"
+            :class="cardFunction(dataFrom[0].dataList)"
+          >
+            <div class="icon"></div>
+            <a-tooltip>
+              <template #title>{{ dataListitem.name }}</template>
+              <div class="associated-ability-card-title">
+                {{ dataListitem.name }}
+              </div>
+            </a-tooltip>
+            <div class="associated-ability-card-content">
+              <a-tooltip>
+                <template #title>{{ dataListitem.description || '' }}</template>
+                <div class="associated-ability-card-content-font">
+                  {{ dataListitem.description || '' }}
+                </div>
+              </a-tooltip>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
   </div>
 </template>
-
 <script setup>
   import { ref, defineProps, watch } from 'vue'
+  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
   import { useRouter } from 'vue-router'
   const router = useRouter()
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
   const props = defineProps({
     associatedComponents: { type: Array, default: null },
   })
+  const modules = ref([Pagination])
   const dataFrom = ref([])
   const flag = ref(true)
   const oldid = router.currentRoute.value.query.id
@@ -91,18 +135,22 @@
 <style lang="less" scoped>
   .application-associated-ability {
     padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     .application-associated-ability-main {
       margin-top: 0.4rem;
       width: 13.3rem;
-      display: grid;
-      grid-template-columns: repeat(4, 25%);
+      display: flex;
+      justify-content: space-around;
+      position: relative;
+      :deep(.swiper) {
+        padding-bottom: 0.6rem;
+      }
       .associated-ability-card {
         width: 3.2rem;
-        // height: 2.78rem;
+        height: 2.78rem;
         display: flex;
         flex-direction: column;
         align-items: center;
diff --git a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
index e0e3c845..dfdca20d 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
@@ -28,6 +28,10 @@
       name: '应用展示',
       key: 'application-presentation',
     },
+    {
+      name: '关联组件',
+      key: 'application-associated-ability',
+    },
     {
       name: '功能介绍',
       key: 'function-introduction',
@@ -36,10 +40,6 @@
     //   name: '关联组件',
     //   key: 'application-associated-components',
     // },
-    {
-      name: '关联组件',
-      key: 'application-associated-ability',
-    },
     {
       name: '使用能力',
       key: 'ability-to-use',
diff --git a/front/src/views/detailsAll/components/Application/style.css b/front/src/views/detailsAll/components/Application/style.css
new file mode 100644
index 00000000..de6bea17
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/style.css
@@ -0,0 +1,31 @@
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+  background: #fff;
+
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
diff --git a/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue b/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
index a39683c2..0913adce 100644
--- a/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="application-associated-ability" v-if="flag">
     <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
-    <div class="application-associated-ability-main">
+    <div
+      class="application-associated-ability-main"
+      v-if="dataFrom[0].dataList.length < 4"
+    >
       <div
         class="associated-ability-card"
         v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@@ -24,13 +27,53 @@
         </div>
       </div>
     </div>
+    <div class="application-associated-ability-main" v-else>
+      <swiper
+        :slidesPerView="3"
+        :spaceBetween="30"
+        :pagination="{ clickable: true }"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+          :key="dataListitem.id"
+        >
+          <div
+            class="associated-ability-card"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <a-tooltip>
+              <template #title>{{ dataListitem.name }}</template>
+              <div class="associated-ability-card-title">
+                {{ dataListitem.name }}
+              </div>
+            </a-tooltip>
+            <div class="associated-ability-card-content">
+              <a-tooltip>
+                <template #title>{{ dataListitem.description }}</template>
+                <div class="associated-ability-card-content-font">
+                  {{ dataListitem.description }}
+                </div>
+              </a-tooltip>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
   </div>
 </template>
 
 <script setup>
   import { ref, defineProps, watch } from 'vue'
   import { useRouter } from 'vue-router'
+  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
   const router = useRouter()
+  const modules = ref([Pagination])
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
   const props = defineProps({
     associatedComponents: { type: Array, default: null },
@@ -84,15 +127,18 @@
 <style lang="less" scoped>
   .application-associated-ability {
     padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     .application-associated-ability-main {
       margin-top: 0.4rem;
       width: 13.3rem;
-      display: grid;
-      grid-template-columns: repeat(4, 25%);
+      display: flex;
+      justify-content: space-around;
+      :deep(.swiper) {
+        padding-bottom: 0.6rem;
+      }
       .associated-ability-card {
         width: 3.2rem;
         height: 2.78rem;
diff --git a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
index bc2e18d6..b72be29b 100644
--- a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
@@ -21,13 +21,14 @@
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch } from 'vue'
+  import { ref, defineProps, watch, getCurrentInstance } from 'vue'
+  import { useRouter } from 'vue-router'
   import mybus from '@/myplugins/mybus'
+  import { queryPartAppByKeyId2 } from '@/api/home'
+  // 获取当前路由地址
+  const router = useRouter()
+  const keyId = router.currentRoute.value.query.id
   const navList = ref([
-    {
-      name: '关联应用',
-      key: 'business-associated-ability',
-    },
     {
       name: '组件展示',
       key: 'business-presentation',
@@ -61,6 +62,22 @@
   })
   const select = ref('business-presentation')
   const list = ref([])
+  // 根据能力id查询是否存在关联应用
+  if (keyId) {
+    queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
+      console.log('ressssssss', res)
+      if (res.data.data.length > 0) {
+        // 存在关联应用时在导航栏加入关联应用
+        navList.value.unshift({
+          name: '关联应用',
+          key: 'business-associated-ability',
+          show: true,
+        })
+        // list.value.push('关联应用')
+        console.log('navList', navList)
+      }
+    })
+  }
   const selectNav = (key) => {
     select.value = key
     console.log(key, select.value)
@@ -69,8 +86,8 @@
   if (props.dataList.infoList) {
     list.value = []
     let arr = [
-      '组件视频介绍',
       '关联应用',
+      '组件视频介绍',
       '功能介绍',
       '应用场景',
       '应用案例',
@@ -94,7 +111,7 @@
         list.value.push('组件展示')
       }
     })
-    list.value.push('关联应用')
+    list.value.unshift('关联应用')
     list.value.push('使用方式')
     navList.value.forEach((item) => {
       console.log(item)
@@ -125,8 +142,8 @@
       if (val) {
         list.value = []
         let arr = [
-          '组件视频介绍',
           '关联应用',
+          '组件视频介绍',
           '功能介绍',
           '应用场景',
           '应用案例',
@@ -151,7 +168,7 @@
             list.value.push('组件展示')
           }
         })
-        list.value.push('关联应用')
+        list.value.unshift('关联应用')
         list.value.push('使用方式')
         navList.value.forEach((item) => {
           console.log(item)
@@ -166,9 +183,12 @@
           }
         })
         if (list.value.length > 0) {
-          select.value = navList.value.filter(
-            (item) => item.name === list.value[0]
-          )[0].key
+          if (navList.value.filter((item) => item.name === list.value[0])[0]) {
+            select.value = navList.value.filter(
+              (item) =>
+                (item.name === '关联应用') | (item.name === list.value[0])
+            )[0].key
+          }
         }
         console.log('11111111111111111111111111', list.value, navList.value)
       }
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue b/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
index 6f3c050c..0913adce 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="application-associated-ability" v-if="flag">
     <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
-    <div class="application-associated-ability-main">
+    <div
+      class="application-associated-ability-main"
+      v-if="dataFrom[0].dataList.length < 4"
+    >
       <div
         class="associated-ability-card"
         v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@@ -24,13 +27,53 @@
         </div>
       </div>
     </div>
+    <div class="application-associated-ability-main" v-else>
+      <swiper
+        :slidesPerView="3"
+        :spaceBetween="30"
+        :pagination="{ clickable: true }"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+          :key="dataListitem.id"
+        >
+          <div
+            class="associated-ability-card"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <a-tooltip>
+              <template #title>{{ dataListitem.name }}</template>
+              <div class="associated-ability-card-title">
+                {{ dataListitem.name }}
+              </div>
+            </a-tooltip>
+            <div class="associated-ability-card-content">
+              <a-tooltip>
+                <template #title>{{ dataListitem.description }}</template>
+                <div class="associated-ability-card-content-font">
+                  {{ dataListitem.description }}
+                </div>
+              </a-tooltip>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
   </div>
 </template>
 
 <script setup>
   import { ref, defineProps, watch } from 'vue'
   import { useRouter } from 'vue-router'
+  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
   const router = useRouter()
+  const modules = ref([Pagination])
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
   const props = defineProps({
     associatedComponents: { type: Array, default: null },
@@ -49,7 +92,8 @@
     window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
     // alert(id)
   }
-  if (props.associatedComponents[0].dataList.length != 0) {
+  console.log('这个是空值', props.associatedComponents[0])
+  if (props.associatedComponents[0].dataList.length > 0) {
     console.log('这个是空值', props.associatedComponents)
     flag.value = true
     dataFrom.value = props.associatedComponents
@@ -60,7 +104,7 @@
   watch(
     () => props.associatedComponents,
     (val) => {
-      if (val.length != 0) {
+      if (val) {
         flag.value = true
         dataFrom.value = props.associatedComponents
         console.log('dataFrom.value', dataFrom.value)
@@ -83,15 +127,18 @@
 <style lang="less" scoped>
   .application-associated-ability {
     padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     .application-associated-ability-main {
       margin-top: 0.4rem;
       width: 13.3rem;
-      display: grid;
-      grid-template-columns: repeat(4, 25%);
+      display: flex;
+      justify-content: space-around;
+      :deep(.swiper) {
+        padding-bottom: 0.6rem;
+      }
       .associated-ability-card {
         width: 3.2rem;
         height: 2.78rem;
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue b/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
index 50082f81..a406bbe8 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
@@ -21,17 +21,18 @@
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch } from 'vue'
+  import { ref, defineProps, watch, getCurrentInstance } from 'vue'
+  import { useRouter } from 'vue-router'
   import mybus from '@/myplugins/mybus'
+  import { queryPartAppByKeyId2 } from '@/api/home'
+  // 获取当前路由地址
+  const router = useRouter()
+  const keyId = router.currentRoute.value.query.id
   const navList = ref([
     {
       name: '组件展示',
       key: 'eveloper-presentation',
     },
-    {
-      name: '关联应用',
-      key: 'developer-associated-ability',
-    },
     {
       name: '功能介绍',
       key: 'function-introduction',
@@ -64,6 +65,22 @@
   })
   const select = ref('algorithm-display')
   const list = ref([])
+  // 根据能力id查询是否存在关联应用
+  if (keyId) {
+    queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
+      console.log('ressssssss', res)
+      if (res.data.data.length > 0) {
+        // 存在关联应用时在导航栏加入关联应用
+        navList.value.unshift({
+          name: '关联应用',
+          key: 'developer-associated-ability',
+          show: true,
+        })
+        // list.value.push('关联应用')
+        console.log('navList', navList)
+      }
+    })
+  }
   const selectNav = (key) => {
     select.value = key
     mybus.emit('flyToView', select.value)
@@ -81,7 +98,7 @@
         list.value.push('组件展示')
       }
     })
-    list.value.push('关联应用')
+    list.value.unshift('关联应用')
     navList.value.forEach((item) => {
       console.log(item)
       if (list.value.indexOf(item.name) > -1) {
@@ -123,7 +140,7 @@
             list.value.push('组件展示')
           }
         })
-        list.value.push('关联应用')
+        list.value.unshift('关联应用')
         list.value.push('组件试用')
         list.value.push('使用方式')
         navList.value.forEach((item) => {
@@ -139,9 +156,12 @@
           }
         })
         if (list.value.length > 0) {
-          select.value = navList.value.filter(
-            (item) => item.name === list.value[0]
-          )[0].key
+          if (navList.value.filter((item) => item.name === list.value[0])[0]) {
+            select.value = navList.value.filter(
+              (item) =>
+                (item.name === '关联应用') | (item.name === list.value[0])
+            )[0].key
+          }
         }
         console.log('11111111111111111111111111', list.value, navList.value)
       }
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
index 0173725e..0913adce 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
@@ -1,30 +1,79 @@
 <template>
   <div class="application-associated-ability" v-if="flag">
-    <detals-title title="关联应用" type="RELEVANCE"></detals-title>
-    <div class="application-associated-ability-main">
+    <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
+    <div
+      class="application-associated-ability-main"
+      v-if="dataFrom[0].dataList.length < 4"
+    >
       <div
         class="associated-ability-card"
         v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
         :key="dataListitem.id"
         @click="switchFunction(dataListitem.id)"
       >
-        <div class="associated-ability-card-title">
-          {{ dataListitem.name }}
-        </div>
-        <div class="associated-ability-card-content">
-          <div class="associated-ability-card-content-font">
-            {{ dataListitem.description }}
+        <a-tooltip>
+          <template #title>{{ dataListitem.name }}</template>
+          <div class="associated-ability-card-title">
+            {{ dataListitem.name }}
           </div>
+        </a-tooltip>
+        <div class="associated-ability-card-content">
+          <a-tooltip>
+            <template #title>{{ dataListitem.description }}</template>
+            <div class="associated-ability-card-content-font">
+              {{ dataListitem.description }}
+            </div>
+          </a-tooltip>
         </div>
       </div>
     </div>
+    <div class="application-associated-ability-main" v-else>
+      <swiper
+        :slidesPerView="3"
+        :spaceBetween="30"
+        :pagination="{ clickable: true }"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+          :key="dataListitem.id"
+        >
+          <div
+            class="associated-ability-card"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <a-tooltip>
+              <template #title>{{ dataListitem.name }}</template>
+              <div class="associated-ability-card-title">
+                {{ dataListitem.name }}
+              </div>
+            </a-tooltip>
+            <div class="associated-ability-card-content">
+              <a-tooltip>
+                <template #title>{{ dataListitem.description }}</template>
+                <div class="associated-ability-card-content-font">
+                  {{ dataListitem.description }}
+                </div>
+              </a-tooltip>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
   </div>
 </template>
 
 <script setup>
   import { ref, defineProps, watch } from 'vue'
   import { useRouter } from 'vue-router'
+  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
   const router = useRouter()
+  const modules = ref([Pagination])
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
   const props = defineProps({
     associatedComponents: { type: Array, default: null },
@@ -34,17 +83,20 @@
   const oldid = router.currentRoute.value.query.id
   //点击查看详情
   const switchFunction = (id) => {
-    router.push({
-      path: '/details',
-      query: {
-        id: id,
-      },
-    })
+    // router.push({
+    //   path: '/details',
+    //   query: {
+    //     id: id,
+    //   },
+    // })
+    window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
+    // alert(id)
   }
-  if (props.associatedComponents[0].dataList.length != 0) {
+  console.log('这个是空值', props.associatedComponents[0])
+  if (props.associatedComponents[0].dataList.length > 0) {
+    console.log('这个是空值', props.associatedComponents)
     flag.value = true
     dataFrom.value = props.associatedComponents
-    debugger
     console.log('dataFrom.value', dataFrom.value)
   } else {
     flag.value = false
@@ -75,7 +127,7 @@
 <style lang="less" scoped>
   .application-associated-ability {
     padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -83,20 +135,31 @@
       margin-top: 0.4rem;
       width: 13.3rem;
       display: flex;
-      justify-content: space-between;
+      justify-content: space-around;
+      :deep(.swiper) {
+        padding-bottom: 0.6rem;
+      }
       .associated-ability-card {
         width: 3.2rem;
+        height: 2.78rem;
         display: flex;
         flex-direction: column;
         align-items: center;
         border: 1px solid #e4e6f5;
         border-radius: 0.1rem;
         padding-bottom: 0.3rem;
+        margin-right: 0.2rem;
+        margin-top: 0.2rem;
         cursor: pointer;
         .associated-ability-card-title {
+          width: 2.2rem;
           padding-top: 0.3rem;
           font-size: 0.22rem;
           text-align: center;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -107,6 +170,11 @@
             color: #999;
             margin-right: 0.15rem;
             margin-top: 0.15rem;
+            text-align: center;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 5;
+            -webkit-box-orient: vertical;
           }
         }
       }
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
index af049b57..ba8c8819 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
@@ -21,13 +21,14 @@
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch } from 'vue'
+  import { ref, defineProps, watch, getCurrentInstance } from 'vue'
+  import { useRouter } from 'vue-router'
   import mybus from '@/myplugins/mybus'
+  import { queryPartAppByKeyId2 } from '@/api/home'
+  // 获取当前路由地址
+  const router = useRouter()
+  const keyId = router.currentRoute.value.query.id
   const navList = ref([
-    {
-      name: '关联应用',
-      key: 'layer-service-associated-ability',
-    },
     {
       name: '图层展示',
       key: 'service-presentation',
@@ -64,6 +65,22 @@
   })
   const select = ref('service-presentation')
   const list = ref([])
+  // 根据能力id查询是否存在关联应用
+  if (keyId) {
+    queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
+      console.log('ressssssss', res)
+      if (res.data.data.length > 0) {
+        // 存在关联应用时在导航栏加入关联应用
+        navList.value.unshift({
+          name: '关联应用',
+          key: 'service-associated-ability',
+          show: true,
+        })
+        // list.value.push('关联应用')
+        console.log('navList', navList)
+      }
+    })
+  }
   const selectNav = (key) => {
     select.value = key
     console.log(key, select.value)
diff --git a/front/src/views/home/details.vue b/front/src/views/home/details.vue
index ff5c7ec5..0b4a51e6 100644
--- a/front/src/views/home/details.vue
+++ b/front/src/views/home/details.vue
@@ -91,7 +91,7 @@
       const router = useRouter()
       const id = router.currentRoute.value.query.id
       const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-      let showView = ref('details-view')
+      let showView = ref('')
       const init = () => {
         if (id) {
           selectOne(id).then((res) => {