diff --git a/front/src/views/abilityStatistics/components/AbilityRanking.vue b/front/src/views/abilityStatistics/components/AbilityRanking.vue
index 9f7c9740..ea0efca1 100644
--- a/front/src/views/abilityStatistics/components/AbilityRanking.vue
+++ b/front/src/views/abilityStatistics/components/AbilityRanking.vue
@@ -257,6 +257,7 @@
                 -webkit-line-clamp: 1;
                 -webkit-box-orient: vertical;
                 margin-bottom: 20px;
+                word-break: break-all;
               }
               .content-fangwenliang {
                 width: 215px;
@@ -268,6 +269,7 @@
                 -webkit-box-orient: vertical;
                 color: #999999;
                 margin-bottom: 20px;
+                word-break: break-all;
               }
             }
           }
diff --git a/front/src/views/abilityStatistics/components/AtlasResources.vue b/front/src/views/abilityStatistics/components/AtlasResources.vue
index 29aa1ade..454685fd 100644
--- a/front/src/views/abilityStatistics/components/AtlasResources.vue
+++ b/front/src/views/abilityStatistics/components/AtlasResources.vue
@@ -599,6 +599,7 @@
                 display: -webkit-box;
                 -webkit-line-clamp: 1;
                 -webkit-box-orient: vertical;
+                word-break: break-all;
               }
               .num {
                 width: 100px;
@@ -719,6 +720,7 @@
               display: -webkit-box;
               -webkit-line-clamp: 2;
               -webkit-box-orient: vertical;
+              word-break: break-all;
             }
           }
           div:nth-of-type(1) {
@@ -757,6 +759,7 @@
                 display: -webkit-box;
                 -webkit-line-clamp: 1;
                 -webkit-box-orient: vertical;
+                word-break: break-all;
               }
               span:hover {
                 border: 1px solid #147ad8;
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue
index 7f35d9e9..e0294a52 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue
@@ -139,6 +139,7 @@
             display: -webkit-box;
             -webkit-line-clamp: 3;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
         .item:nth-of-type(1) {
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationCase.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationCase.vue
index 58754581..7270dca2 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationCase.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationCase.vue
@@ -302,6 +302,7 @@
           overflow: hidden;
           -webkit-line-clamp: 5;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue
index cac2ee22..da60117d 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue
@@ -177,6 +177,7 @@
             display: -webkit-box;
             overflow: hidden;
             -webkit-line-clamp: 1;
+            word-break: break-all;
             -webkit-box-orient: vertical;
           }
           .tab-top-down {
@@ -269,6 +270,7 @@
           overflow: hidden;
           -webkit-line-clamp: 6;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
index d7f93986..a5af8482 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
@@ -160,6 +160,7 @@
           overflow: hidden;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -175,6 +176,7 @@
             overflow: hidden;
             -webkit-line-clamp: 5;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
       }
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmChargingStandard.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmChargingStandard.vue
index 0ebc73a1..b47cfb22 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmChargingStandard.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmChargingStandard.vue
@@ -110,6 +110,7 @@
           overflow: hidden;
           -webkit-line-clamp: 5;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .content-footer {
           position: absolute;
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
index bffc1b64..8185cf2d 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
@@ -258,6 +258,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .label-content {
           position: relative;
@@ -291,6 +292,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 3;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
       .bottom {
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
index 21af942f..82fb965c 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
@@ -324,138 +324,141 @@
 </script>
 
 <style lang="less" scoped>
-.usage-mode {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.8rem 0;
-
-  .content {
-    margin-top: 0.3rem;
+  .usage-mode {
     display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.8rem 0;
 
-    .content-left {
-      height: 1.5rem;
-      width: 6.2rem;
-      background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
-        no-repeat;
-      background-position: center;
-      background-size: 100% 100%;
-      border-radius: 0.1rem;
-      margin-right: 0.6rem;
-      box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+    .content {
+      margin-top: 0.3rem;
       display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0 0.35rem;
 
-      .left {
-        .content-left-title {
-          font-size: 0.26rem;
-          line-height: 0.26rem;
-          color: #212956;
-          margin-bottom: 0.2rem;
+      .content-left {
+        height: 1.5rem;
+        width: 6.2rem;
+        background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
+          no-repeat;
+        background-position: center;
+        background-size: 100% 100%;
+        border-radius: 0.1rem;
+        margin-right: 0.6rem;
+        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 0.35rem;
 
-          span:first-child {
-            margin-right: 0.1rem;
+        .left {
+          .content-left-title {
+            font-size: 0.26rem;
+            line-height: 0.26rem;
+            color: #212956;
+            margin-bottom: 0.2rem;
+
+            span:first-child {
+              margin-right: 0.1rem;
+            }
           }
-        }
 
-        .content-left-content {
-          width: 4.2rem;
-          font-size: 0.2rem;
-          color: rgba(33, 41, 86, 0.8);
-          line-height: 0.2rem;
+          .content-left-content {
+            width: 4.2rem;
+            font-size: 0.2rem;
+            color: rgba(33, 41, 86, 0.8);
+            line-height: 0.2rem;
 
-          p {
-            display: -webkit-box;
-            margin-bottom: 0.1rem;
-
-            span:last-of-type {
-              width: 298px;
+            p {
               display: -webkit-box;
-              overflow: hidden;
-              -webkit-line-clamp: 1;
-              -webkit-box-orient: vertical;
+              margin-bottom: 0.1rem;
+
+              span:last-of-type {
+                width: 298px;
+                display: -webkit-box;
+                overflow: hidden;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+                word-break: break-all;
+              }
             }
           }
         }
-      }
 
-      .right {
-        div {
-          height: 0.4rem;
-          width: 1.3rem;
-          background: #ffffff;
-          border-radius: 0.2rem;
-          color: #526aff;
-          font-size: 0.2rem;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          cursor: pointer;
-        }
-
-        div:first-child {
-          margin-bottom: 0.2rem;
-        }
-      }
-    }
-
-    .content-right {
-      height: 1.5rem;
-      width: 6.2rem;
-      background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
-        no-repeat;
-      background-position: center;
-      background-size: 100% 100%;
-      border-radius: 0.1rem;
-      box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      padding: 0 0.3rem;
-
-      .content-right-left {
-        border-right: 0.01rem solid #707fe0;
-        padding-right: 0.1rem;
-        margin-right: 0.1rem;
-      }
-
-      .content-right-title {
-        font-size: 0.26rem;
-        line-height: 0.26rem;
-        color: #212956;
-        margin-bottom: 0.15rem;
-      }
-
-      .content-right-content {
-        display: flex;
-        font-size: 0.16rem;
-        color: rgba(33, 41, 86, 0.8);
-        line-height: 0.2rem;
-        overflow: hidden;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        flex-direction: column;
-
-        p {
-          // width: 1.60rem;
-          height: 0.2rem;
-          display: -webkit-box;
-          // overflow: hidden;
-          margin-bottom: 0.08rem;
-          white-space: nowrap;
-          -webkit-line-clamp: 1;
-          -webkit-box-orient: vertical;
-          margin-right: 0.15rem;
-
-          span {
+        .right {
+          div {
+            height: 0.4rem;
+            width: 1.3rem;
+            background: #ffffff;
+            border-radius: 0.2rem;
+            color: #526aff;
+            font-size: 0.2rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
             cursor: pointer;
           }
+
+          div:first-child {
+            margin-bottom: 0.2rem;
+          }
+        }
+      }
+
+      .content-right {
+        height: 1.5rem;
+        width: 6.2rem;
+        background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
+          no-repeat;
+        background-position: center;
+        background-size: 100% 100%;
+        border-radius: 0.1rem;
+        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        padding: 0 0.3rem;
+
+        .content-right-left {
+          border-right: 0.01rem solid #707fe0;
+          padding-right: 0.1rem;
+          margin-right: 0.1rem;
+        }
+
+        .content-right-title {
+          font-size: 0.26rem;
+          line-height: 0.26rem;
+          color: #212956;
+          margin-bottom: 0.15rem;
+        }
+
+        .content-right-content {
+          display: flex;
+          font-size: 0.16rem;
+          color: rgba(33, 41, 86, 0.8);
+          line-height: 0.2rem;
+          overflow: hidden;
+          -webkit-line-clamp: 1;
+          word-break: break-all;
+          -webkit-box-orient: vertical;
+          flex-direction: column;
+
+          p {
+            // width: 1.60rem;
+            height: 0.2rem;
+            display: -webkit-box;
+            // overflow: hidden;
+            margin-bottom: 0.08rem;
+            white-space: nowrap;
+            -webkit-line-clamp: 1;
+            word-break: break-all;
+            -webkit-box-orient: vertical;
+            margin-right: 0.15rem;
+
+            span {
+              cursor: pointer;
+            }
+          }
         }
       }
     }
   }
-}
 </style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationAbilityTrial.vue b/front/src/views/detailsAll/components/Application/ApplicationAbilityTrial.vue
index db3dcafa..0de7ad16 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationAbilityTrial.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationAbilityTrial.vue
@@ -153,6 +153,7 @@
           text-overflow: ellipsis;
           display: -webkit-box;
           -webkit-line-clamp: 2;
+          word-break: break-all;
           -webkit-box-orient: vertical;
         }
       }
diff --git a/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue b/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
index 2e2c8054..dae68f5f 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
@@ -175,6 +175,7 @@
           display: -webkit-box;
           overflow: hidden;
           -webkit-line-clamp: 2;
+          word-break: break-all;
           -webkit-box-orient: vertical;
         }
         .associated-ability-card-content {
@@ -190,6 +191,7 @@
             display: -webkit-box;
             overflow: hidden;
             -webkit-line-clamp: 5;
+            word-break: break-all;
             -webkit-box-orient: vertical;
           }
         }
diff --git a/front/src/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue b/front/src/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue
index 5f2b7f1c..31f47e2a 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue
@@ -138,6 +138,7 @@
             text-overflow: ellipsis;
             display: -webkit-box;
             -webkit-line-clamp: 3;
+            word-break: break-all;
             -webkit-box-orient: vertical;
           }
         }
diff --git a/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue b/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
index eec26ec0..5ea3c2f8 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
@@ -7,26 +7,42 @@
         <DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
       </div>
       <div class="tab">
-        <div v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue" :key="itemSonTitle.name"
-          @click="tabSwitch(itemSonTitle.name)" class="tab-son" :class="
+        <div
+          v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
+          :key="itemSonTitle.name"
+          @click="tabSwitch(itemSonTitle.name)"
+          class="tab-son"
+          :class="
             tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
-          ">
+          "
+        >
           <a-tooltip>
             <template #title>{{ itemSonTitle.name }}</template>
-            <div class="tab-top" :class="
-              tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
-            ">
+            <div
+              class="tab-top"
+              :class="
+                tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
+              "
+            >
               {{ itemSonTitle.name }}
             </div>
           </a-tooltip>
-          <div class="tab-bottom" v-if="tabInitialize() == itemSonTitle.name"></div>
+          <div
+            class="tab-bottom"
+            v-if="tabInitialize() == itemSonTitle.name"
+          ></div>
         </div>
       </div>
       <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
         <div class="content" v-if="tabindex == itemSonTitle.name">
           <div class="content-left">
             <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
-            <a-image :width="635" :height="340" :src="itemSonTitle.img" v-if="itemSonTitle.img"></a-image>
+            <a-image
+              :width="635"
+              :height="340"
+              :src="itemSonTitle.img"
+              v-if="itemSonTitle.img"
+            ></a-image>
           </div>
           <div class="content-right">
             <div class="content-right-scene">
@@ -44,215 +60,217 @@
 </template>
 
 <script setup>
-import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-import { ref, defineProps, watch } from 'vue'
-const flag = ref(true)
-let dataFrom = ref([])
-// tab切换方法
-let tabindex = ref('场景说明一')
-//数据初始化
-const props = defineProps({
-  dataList: { type: Object, default: null },
-})
-if (props.dataList.infoList) {
-  let obj = props.dataList.infoList.filter(
-    (item) => item.attrType === '功能介绍'
-  )[0]
-  if (!obj) {
-    flag.value = false
-  } else {
-    obj.attrValue = JSON.parse(obj.attrValue)
-    dataFrom.value = obj
-    tabindex.value = dataFrom.value.attrValue[0].name
-  }
-}
-watch(
-  () => props.dataList,
-  (val) => {
-    if (val) {
-      let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
-      if (!obj) {
-        flag.value = false
-      } else {
-        obj.attrValue = JSON.parse(obj.attrValue)
-        dataFrom.value = obj
-        tabindex.value = dataFrom.value.attrValue[0].name
-      }
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  const flag = ref(true)
+  let dataFrom = ref([])
+  // tab切换方法
+  let tabindex = ref('场景说明一')
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '功能介绍'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      obj.attrValue = JSON.parse(obj.attrValue)
+      dataFrom.value = obj
+      tabindex.value = dataFrom.value.attrValue[0].name
     }
   }
-)
-//滚动条样式
-function tabIndexClass(index, title, content) {
-  if (title == '功能介绍' && index == 0 && content.length > 6) {
-    return 'tab-son-class'
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          obj.attrValue = JSON.parse(obj.attrValue)
+          dataFrom.value = obj
+          tabindex.value = dataFrom.value.attrValue[0].name
+        }
+      }
+    }
+  )
+  //滚动条样式
+  function tabIndexClass(index, title, content) {
+    if (title == '功能介绍' && index == 0 && content.length > 6) {
+      return 'tab-son-class'
+    }
+  }
+  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
+  function tabInitialize() {
+    return tabindex.value
+  }
+  //tab切换点击事件
+  function tabSwitch(name) {
+    tabindex.value = name
+    return tabindex.value
   }
-}
-//初始化tab切换（判断标题不同，点击事件的判断变量不同）
-function tabInitialize() {
-  return tabindex.value
-}
-//tab切换点击事件
-function tabSwitch(name) {
-  tabindex.value = name
-  return tabindex.value
-}
 </script>
 
 <style lang="less" scoped>
-.function-intorduction {
-  width: 100%;
-  background: #f7f8fa;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  overflow-x: unset;
-
-  .application-scenarios-and-case-son {
-    padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+  .function-intorduction {
+    width: 100%;
+    background: #f7f8fa;
     display: flex;
     flex-direction: column;
     align-items: center;
-    overflow: unset;
+    overflow-x: unset;
 
-    .tab {
-      max-width: 13rem;
-      overflow-x: auto;
+    .application-scenarios-and-case-son {
+      padding-top: 0.8rem;
+      padding-bottom: 0.8rem;
       display: flex;
-      justify-content: center;
-      color: #808080;
-      border-bottom: 0.01rem #e4e6f5 solid;
-      margin-top: 0.45rem;
-      margin-bottom: 0.4rem;
-      cursor: pointer;
-      padding-left: 0.4rem;
-      padding-right: 0.4rem;
+      flex-direction: column;
+      align-items: center;
+      overflow: unset;
 
-      .tab-son {
+      .tab {
+        max-width: 13rem;
+        overflow-x: auto;
         display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-right: 1rem;
+        justify-content: center;
+        color: #808080;
+        border-bottom: 0.01rem #e4e6f5 solid;
+        margin-top: 0.45rem;
+        margin-bottom: 0.4rem;
+        cursor: pointer;
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
 
-        .tab-top {
-          min-width: 1.2rem;
-          font-size: 0.24rem;
-          line-height: 0.24rem;
-          margin-bottom: 0.2rem;
-          max-width: 2rem;
-          height: 0.24rem;
+        .tab-son {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-right: 1rem;
+
+          .tab-top {
+            min-width: 1.2rem;
+            font-size: 0.24rem;
+            line-height: 0.24rem;
+            margin-bottom: 0.2rem;
+            max-width: 2rem;
+            height: 0.24rem;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            text-align: center;
+            word-break: break-all;
+          }
+
+          .tab-top-down {
+            min-width: 1.2rem;
+            color: #526aff;
+            margin-bottom: 0.16rem;
+          }
+
+          .tab-bottom {
+            height: 0.04rem;
+            width: 0.6rem;
+            background: #526aff;
+          }
+        }
+
+        .tab-son-class {
+          margin-left: 4.3rem;
+          margin-bottom: 0.02rem;
+        }
+
+        .tab-son-class-two {
+          margin-left: 2.3rem;
+          margin-bottom: 0.02rem;
+        }
+
+        .tab-son:last-child {
+          margin-right: 0rem;
+        }
+      }
+
+      .tab::-webkit-scrollbar-thumb {
+        background: rgba(82, 106, 255, 0.4);
+      }
+
+      .content {
+        display: flex;
+        position: relative;
+        width: 100%;
+        min-width: 13rem;
+        height: 3.4rem;
+
+        .content-left {
+          position: absolute;
+          left: 0;
+          min-width: 6.2rem;
+
+          :deep(.ant-image-img) {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+
+          // text-align: center;
+          .content-top {
+            text-align: left;
+          }
+        }
+
+        .content-right {
+          width: 6.2rem;
+          height: 3.4rem;
+          position: absolute;
+          right: 0;
+          display: flex;
+          justify-content: center;
+        }
+
+        .content-right-scene,
+        .content-right-case {
+          width: 6.2rem;
+          height: 3.4rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+
+        .content-left-scene,
+        .content-left-case {
+          height: 3.4rem;
+          width: 6.35rem;
+          border-radius: 0.1rem;
+          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
+          background-position: center;
+          background-size: 6.35rem 3.4rem;
+        }
+
+        .content-top {
+          font-size: 0.22rem;
+          line-height: 0.22rem;
+          color: #000000;
+          margin-bottom: 0.35rem;
+        }
+
+        .content-bottom {
+          font-size: 0.18rem;
+          color: #999999;
+          line-height: 0.26rem;
           display: -webkit-box;
           overflow: hidden;
-          -webkit-line-clamp: 1;
+          -webkit-line-clamp: 6;
           -webkit-box-orient: vertical;
-          text-align: center;
+          word-break: break-all;
         }
-
-        .tab-top-down {
-          min-width: 1.2rem;
-          color: #526aff;
-          margin-bottom: 0.16rem;
-        }
-
-        .tab-bottom {
-          height: 0.04rem;
-          width: 0.6rem;
-          background: #526aff;
-        }
-      }
-
-      .tab-son-class {
-        margin-left: 4.3rem;
-        margin-bottom: 0.02rem;
-      }
-
-      .tab-son-class-two {
-        margin-left: 2.3rem;
-        margin-bottom: 0.02rem;
-      }
-
-      .tab-son:last-child {
-        margin-right: 0rem;
       }
     }
 
-    .tab::-webkit-scrollbar-thumb {
-      background: rgba(82, 106, 255, 0.4);
-    }
-
-    .content {
-      display: flex;
-      position: relative;
-      width: 100%;
-      min-width: 13rem;
-      height: 3.4rem;
-
-      .content-left {
-        position: absolute;
-        left: 0;
-        min-width: 6.2rem;
-
-        :deep(.ant-image-img) {
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
-        }
-
-        // text-align: center;
-        .content-top {
-          text-align: left;
-        }
-      }
-
-      .content-right {
-        width: 6.2rem;
-        height: 3.4rem;
-        position: absolute;
-        right: 0;
-        display: flex;
-        justify-content: center;
-      }
-
-      .content-right-scene,
-      .content-right-case {
-        width: 6.2rem;
-        height: 3.4rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-
-      .content-left-scene,
-      .content-left-case {
-        height: 3.4rem;
-        width: 6.35rem;
-        border-radius: 0.1rem;
-        background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
-        background-position: center;
-        background-size: 6.35rem 3.4rem;
-      }
-
-      .content-top {
-        font-size: 0.22rem;
-        line-height: 0.22rem;
-        color: #000000;
-        margin-bottom: 0.35rem;
-      }
-
-      .content-bottom {
-        font-size: 0.18rem;
-        color: #999999;
-        line-height: 0.26rem;
-        display: -webkit-box;
-        overflow: hidden;
-        -webkit-line-clamp: 6;
-        -webkit-box-orient: vertical;
-      }
+    .application-scenarios-and-case-son:first-child {
+      padding-top: 1rem;
     }
   }
-
-  .application-scenarios-and-case-son:first-child {
-    padding-top: 1rem;
-  }
-}
 </style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue b/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
index 758b3b85..3f1c9f01 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
@@ -236,6 +236,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
 
         .label-content {
@@ -275,6 +276,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 3;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
 
diff --git a/front/src/views/detailsAll/components/Business/BusinessApplicationCase.vue b/front/src/views/detailsAll/components/Business/BusinessApplicationCase.vue
index a0017137..098d4b24 100644
--- a/front/src/views/detailsAll/components/Business/BusinessApplicationCase.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessApplicationCase.vue
@@ -293,6 +293,7 @@
           overflow: hidden;
           -webkit-line-clamp: 5;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }
diff --git a/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue b/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue
index cac2ee22..97d3419c 100644
--- a/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue
@@ -178,6 +178,7 @@
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .tab-top-down {
             min-width: 120px;
@@ -269,6 +270,7 @@
           overflow: hidden;
           -webkit-line-clamp: 6;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }
diff --git a/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue b/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
index 0913adce..7484988e 100644
--- a/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
@@ -160,6 +160,7 @@
           overflow: hidden;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -175,6 +176,7 @@
             overflow: hidden;
             -webkit-line-clamp: 5;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
       }
diff --git a/front/src/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue b/front/src/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue
index 3ac5b4f0..508dd68b 100644
--- a/front/src/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue
@@ -158,6 +158,7 @@
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .tab-top-down {
             min-width: 1.2rem;
@@ -244,6 +245,7 @@
           overflow: hidden;
           -webkit-line-clamp: 6;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }
diff --git a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
index 023c4f92..160a84dd 100644
--- a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
@@ -243,6 +243,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
 
         .label-content {
@@ -282,6 +283,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 3;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
 
diff --git a/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue b/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
index 09512ec4..c5b810ef 100644
--- a/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
@@ -297,6 +297,7 @@
                 overflow: hidden;
                 -webkit-line-clamp: 1;
                 -webkit-box-orient: vertical;
+                word-break: break-all;
               }
             }
           }
@@ -358,6 +359,7 @@
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
           flex-direction: column;
+          word-break: break-all;
 
           p {
             // width: 1.60rem;
@@ -369,6 +371,7 @@
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
             margin-right: 0.15rem;
+            word-break: break-all;
 
             span {
               cursor: pointer;
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperApplicationCase.vue b/front/src/views/detailsAll/components/Developer/DeveloperApplicationCase.vue
index fbb2c9c0..73fe36ea 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperApplicationCase.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperApplicationCase.vue
@@ -302,6 +302,7 @@
           overflow: hidden;
           -webkit-line-clamp: 5;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue b/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
index cac2ee22..97d3419c 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
@@ -178,6 +178,7 @@
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .tab-top-down {
             min-width: 120px;
@@ -269,6 +270,7 @@
           overflow: hidden;
           -webkit-line-clamp: 6;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue b/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
index 0913adce..7484988e 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
@@ -160,6 +160,7 @@
           overflow: hidden;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -175,6 +176,7 @@
             overflow: hidden;
             -webkit-line-clamp: 5;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
       }
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue b/front/src/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue
index 38b38178..ff5f8297 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue
@@ -158,6 +158,7 @@
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .tab-top-down {
             min-width: 1.2rem;
@@ -244,6 +245,7 @@
           overflow: hidden;
           -webkit-line-clamp: 6;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue b/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
index cd10212c..1d5f2198 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
@@ -248,6 +248,7 @@
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
+                word-break: break-all;
               }
             }
           }
@@ -272,6 +273,7 @@
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 2;
             overflow: hidden;
+            word-break: break-all;
           }
         }
         .right {
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue b/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
index 3171b3f9..3896918d 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
@@ -245,6 +245,7 @@
           text-overflow: ellipsis;
           display: -webkit-box;
           -webkit-line-clamp: 1;
+          word-break: break-all;
           -webkit-box-orient: vertical;
         }
         .label-content {
@@ -278,6 +279,7 @@
           text-overflow: ellipsis;
           display: -webkit-box;
           -webkit-line-clamp: 3;
+          word-break: break-all;
           -webkit-box-orient: vertical;
         }
       }
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue b/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue
index 50ebfd2c..edf44111 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue
@@ -138,6 +138,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
       .main-center {
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationCase.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationCase.vue
index a0017137..098d4b24 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationCase.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationCase.vue
@@ -293,6 +293,7 @@
           overflow: hidden;
           -webkit-line-clamp: 5;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue
index cac2ee22..97d3419c 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue
@@ -178,6 +178,7 @@
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .tab-top-down {
             min-width: 120px;
@@ -269,6 +270,7 @@
           overflow: hidden;
           -webkit-line-clamp: 6;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
index 0913adce..7484988e 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
@@ -160,6 +160,7 @@
           overflow: hidden;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -175,6 +176,7 @@
             overflow: hidden;
             -webkit-line-clamp: 5;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
       }
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue
index 484b2503..31e69a21 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue
@@ -252,6 +252,7 @@
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
       }
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
index b768f3c7..06ba2cf3 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
@@ -239,6 +239,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .label-content {
           position: relative;
@@ -273,6 +274,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 3;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
       .bottom {
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
index b3148f0d..79ac9571 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
@@ -362,6 +362,7 @@
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
           flex-direction: column;
+          word-break: break-all;
 
           p {
             // width: 1.60rem;
@@ -372,6 +373,7 @@
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
             margin-right: 0.15rem;
+            word-break: break-all;
 
             span {
               cursor: pointer;
diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index c44b5692..9ff9bb1c 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -1757,5 +1757,6 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     -webkit-line-clamp: 1;
+    word-break: break-all;
   }
 </style>
diff --git a/front/src/views/home/algorithmCompare.vue b/front/src/views/home/algorithmCompare.vue
index d9bb13f6..bab19889 100644
--- a/front/src/views/home/algorithmCompare.vue
+++ b/front/src/views/home/algorithmCompare.vue
@@ -814,6 +814,7 @@
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
+    word-break: break-all;
   }
 
   .td-name-text {
diff --git a/front/src/views/home/components/AbilityToRecommend.vue b/front/src/views/home/components/AbilityToRecommend.vue
index ad050971..86a18e94 100644
--- a/front/src/views/home/components/AbilityToRecommend.vue
+++ b/front/src/views/home/components/AbilityToRecommend.vue
@@ -380,6 +380,7 @@
       font-size: 0.14rem;
       color: #666666;
       line-height: 0.2rem;
+      word-break: break-all;
     }
   }
   .chakangengduo {
diff --git a/front/src/views/home/components/header.vue b/front/src/views/home/components/header.vue
index 2747ebff..35354823 100644
--- a/front/src/views/home/components/header.vue
+++ b/front/src/views/home/components/header.vue
@@ -405,6 +405,7 @@
         -webkit-line-clamp: 1;
         -webkit-box-orient: vertical;
         overflow: hidden;
+        word-break: break-all;
       }
       .out {
         cursor: pointer;
@@ -487,6 +488,7 @@
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2;
+      word-break: break-all;
       -webkit-box-orient: vertical;
     }
     button {
diff --git a/front/src/views/home/components/searchResultList.vue b/front/src/views/home/components/searchResultList.vue
index 526a8768..96ded629 100644
--- a/front/src/views/home/components/searchResultList.vue
+++ b/front/src/views/home/components/searchResultList.vue
@@ -968,6 +968,7 @@
             text-overflow: ellipsis;
             /*超出显示为省略号*/
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
         .btn {
@@ -1103,5 +1104,6 @@
     text-overflow: ellipsis;
     /*超出显示为省略号*/
     -webkit-box-orient: vertical;
+    word-break: break-all;
   }
 </style>
diff --git a/front/src/views/home/components/tableGrid.vue b/front/src/views/home/components/tableGrid.vue
index c384b72f..3b770830 100644
--- a/front/src/views/home/components/tableGrid.vue
+++ b/front/src/views/home/components/tableGrid.vue
@@ -114,6 +114,7 @@
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 3;
         overflow: hidden;
+        word-break: break-all;
       }
       button {
         margin: 0px;
diff --git a/front/src/views/home/detailsPageInfrastructureTree.vue b/front/src/views/home/detailsPageInfrastructureTree.vue
index 8fd0def1..9fb6aaca 100644
--- a/front/src/views/home/detailsPageInfrastructureTree.vue
+++ b/front/src/views/home/detailsPageInfrastructureTree.vue
@@ -450,6 +450,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
       .up:hover {
@@ -496,6 +497,7 @@
             display: -webkit-box;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
         .child:hover {
diff --git a/front/src/views/home/detailsPageconetentTree.vue b/front/src/views/home/detailsPageconetentTree.vue
index 08e8c04d..91228e04 100644
--- a/front/src/views/home/detailsPageconetentTree.vue
+++ b/front/src/views/home/detailsPageconetentTree.vue
@@ -449,6 +449,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
       .up:hover {
@@ -495,6 +496,7 @@
             display: -webkit-box;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
         }
         .child:hover {
diff --git a/front/src/views/home/integrationServices.vue b/front/src/views/home/integrationServices.vue
index 14b1cf29..d2f0443b 100644
--- a/front/src/views/home/integrationServices.vue
+++ b/front/src/views/home/integrationServices.vue
@@ -1,263 +1,279 @@
 <template>
-    <!-- 青岛 -->
-    <div class="details-pageconetent">
-        <home-header></home-header>
-        <div class="top">
-            <div class="resultListSearchInput-father">
-                <div class="resultListSearchInput-son">
-                    模糊搜索
-                    <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-                        @search="getAppResources" @change="onSearch" class="resultListSearchInput" />
-                    <button class="button-reset" @click="chongzhi()">重置</button>
-                    <div class="hengxian"></div>
-                </div>
-            </div>
-            <searchResultList v-show="resourceList.data && resourceList.data.length > 0" :key="listKey2"
-                :resourceList="resourceList" :resourceTotal="resourceTotal" selectCardsname="融合服务" />
-            <div class="pagination">
-                <a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
-                    v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper
-                    :total="resourceTotal" :page-size-options="pageSizeOptions" @change="pageChange"
-                    @showSizeChange="onShowSizeChange" />
-            </div>
-            <div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 2rem">
-                <a-empty />
-            </div>
+  <!-- 青岛 -->
+  <div class="details-pageconetent">
+    <home-header></home-header>
+    <div class="top">
+      <div class="resultListSearchInput-father">
+        <div class="resultListSearchInput-son">
+          模糊搜索
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
+          <button class="button-reset" @click="chongzhi()">重置</button>
+          <div class="hengxian"></div>
         </div>
+      </div>
+      <searchResultList
+        v-show="resourceList.data && resourceList.data.length > 0"
+        :key="listKey2"
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+        selectCardsname="融合服务"
+      />
+      <div class="pagination">
+        <a-pagination
+          v-if="resourceList.data && resourceList.data.length > 0"
+          v-model:current="currentPage"
+          v-model:pageSize="currentPageSize"
+          show-size-changer
+          show-less-items
+          show-quick-jumper
+          :total="resourceTotal"
+          :page-size-options="pageSizeOptions"
+          @change="pageChange"
+          @showSizeChange="onShowSizeChange"
+        />
+      </div>
+      <div
+        v-if="resourceList.data && resourceList.data.length <= 0"
+        style="margin-top: 2rem"
+      >
+        <a-empty />
+      </div>
     </div>
-    <home-footer></home-footer>
+  </div>
+  <home-footer></home-footer>
 </template>
 <script>
-import HomeFooter from '@/views/newHome/components/Footer'
-import mybus from '@/myplugins/mybus'
-import {
-    defineComponent,
-    reactive,
-    ref,
-    toRefs,
-    onMounted,
-    watch,
-} from 'vue'
+  import HomeFooter from '@/views/newHome/components/Footer'
+  import mybus from '@/myplugins/mybus'
+  import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
 
-import {
-    getIntegrationServicesList,
-} from '@/api/home.js'
-import { useRouter } from 'vue-router'
-import HomeHeader from '@/views/home/components/header'
-import searchResultList from '@/views/home/components/searchResultList.vue'
-import { message } from 'ant-design-vue'
+  import { getIntegrationServicesList } from '@/api/home.js'
+  import { useRouter } from 'vue-router'
+  import HomeHeader from '@/views/home/components/header'
+  import searchResultList from '@/views/home/components/searchResultList.vue'
+  import { message } from 'ant-design-vue'
 
-export default defineComponent({
+  export default defineComponent({
     setup() {
+      // 分页
+      const loading = ref(true)
+      const currentPage = ref(1)
+      const currentPageSize = ref(5)
+      const pageSizeOptions = ref(['5', '10', '20', '50'])
+      const router = useRouter()
+      const select = router.currentRoute.value.query.select
+      const searchValue = ref('')
+      const Cardsname = ref(select)
+      const resourceList = reactive({ data: [] })
+      const resourceTotal = ref(0)
+      const current = ref(1)
+      // 刷新筛选条件组件
+      let listKey = ref(0)
+      // 刷新筛选列表信息组件
+      const listKey2 = ref(0)
+
+      // 查询参数
+      const paramsGetResources = {
+        pageNum: 1,
+        pageSize: currentPageSize.value,
+        type: Cardsname.value,
+        name: '',
+        orderField: 'create_date', // total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
+        orderType: 'DESC', // ASC 升序  DESC 降序
+      }
+
+      // 查询
+      const onSearch = () => {
+        loading.value = true
+        currentPage.value = 1
+      }
+      // 重置数据
+      const chongzhi = () => {
+        loading.value = true
+        // 重置模糊查字段
+        searchValue.value = ''
         // 分页
-        const loading = ref(true)
-        const currentPage = ref(1)
-        const currentPageSize = ref(5)
-        const pageSizeOptions = ref(['5', '10', '20', '50'])
-        const router = useRouter()
-        const select = router.currentRoute.value.query.select
-        const searchValue = ref('')
-        const Cardsname = ref(select)
-        const resourceList = reactive({ data: [] })
-        const resourceTotal  = ref(0)
-        const current = ref(1)
-        // 刷新筛选条件组件
-        let listKey = ref(0)
-        // 刷新筛选列表信息组件
-        const listKey2 = ref(0)
-        
-        // 查询参数
-        const paramsGetResources = {
-            pageNum: 1,
-            pageSize: currentPageSize.value,
-            type: Cardsname.value,
-            name: '',
-            orderField: 'create_date', // total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
-            orderType: 'DESC', // ASC 升序  DESC 降序
-        }
-      
-        // 查询
-        const onSearch = () => {
-            loading.value = true
-            currentPage.value = 1
-        }
-        // 重置数据
-        const chongzhi = () => {
-            loading.value = true
-            // 重置模糊查字段
-            searchValue.value = ''
-            // 分页
-            currentPage.value = 1
-            currentPageSize.value = 5
-            // 重置查询条件
-            paramsGetResources.pageNum = 1
-            paramsGetResources.pageSize = 5
-            paramsGetResources.orderField = 'create_date'
-            paramsGetResources.orderType = 'DESC'
-            mybus.emit('chongzhi', {
-                type: '融合服务'
-            })
-            getAppResources()
-        }
+        currentPage.value = 1
+        currentPageSize.value = 5
+        // 重置查询条件
+        paramsGetResources.pageNum = 1
+        paramsGetResources.pageSize = 5
+        paramsGetResources.orderField = 'create_date'
+        paramsGetResources.orderType = 'DESC'
+        mybus.emit('chongzhi', {
+          type: '融合服务',
+        })
+        getAppResources()
+      }
 
+      const getAppResources = () => {
+        getIntegrationList()
+      }
 
-        const getAppResources = () => {
-            getIntegrationList()
+      // 获取融合服务列表
+      const getIntegrationList = () => {
+        let postData = {
+          limit: currentPageSize.value,
+          page: currentPage.value,
+          orderField: paramsGetResources.orderField,
+          orderType: paramsGetResources.orderType,
+          name: searchValue.value,
         }
-
-        // 获取融合服务列表
-        const getIntegrationList = () => {
-            let postData = {
-                limit: currentPageSize.value,
-                page: currentPage.value,
-                orderField: paramsGetResources.orderField,
-                orderType: paramsGetResources.orderType,
-                name: searchValue.value
+        getIntegrationServicesList(postData).then(
+          (res) => {
+            if (res.data.code !== 0) {
+              return message.error(res.data.msg)
             }
-            getIntegrationServicesList(postData).then(res => {
-                if (res.data.code !== 0) {
-                    return message.error(res.data.msg)
-                }
-                resourceList.data = res.data.data.list || []
-                resourceTotal.value = res.data.data.total || 0
-            }, err => {
-                message.error(err)
-            })
+            resourceList.data = res.data.data.list || []
+            resourceTotal.value = res.data.data.total || 0
+          },
+          (err) => {
+            message.error(err)
+          }
+        )
+      }
+
+      mybus.on('paramsGetResources', (ids) => {
+        if (ids && ids.length > 0) {
+          paramsGetResources.deptIds = ids
+        } else {
+          delete paramsGetResources.deptIds
         }
+        getAppResources()
+        console.log('paramsGetResources', paramsGetResources)
+      })
+      mybus.on('changePage', (page) => {
+        paramsGetResources.pageNum = page
+        getAppResources('分页查询')
+      })
+      mybus.on('changeSelcted', () => {
+        getAppResources()
+      })
 
-        mybus.on('paramsGetResources', (ids) => {
-            if (ids && ids.length > 0) {
-                paramsGetResources.deptIds = ids
-            } else {
-                delete paramsGetResources.deptIds
-            }
-            getAppResources()
-            console.log('paramsGetResources', paramsGetResources)
-        })
-        mybus.on('changePage', (page) => {
-            paramsGetResources.pageNum = page
-            getAppResources('分页查询')
-        })
-        mybus.on('changeSelcted', () => {
-            getAppResources()
-        })
+      mybus.on('refresh', () => {
+        paramsGetResources.pageNum = 1
+        currentPage.value = 1
+        getAppResources()
+      })
+      mybus.on('changeCondition', (condition) => {
+        paramsGetResources.orderField = condition.orderField
+        paramsGetResources.orderType = condition.orderType
+        getAppResources()
+      })
 
-        mybus.on('refresh', () => {
-            paramsGetResources.pageNum = 1
-            currentPage.value = 1
-            getAppResources()
-        })
-        mybus.on('changeCondition', (condition) => {
-            paramsGetResources.orderField = condition.orderField
-            paramsGetResources.orderType = condition.orderType
-            getAppResources()
-        })
+      const pageChange = (val) => {
+        console.log(val)
+        loading.value = true
+        currentPage.value = val
+        paramsGetResources.pageNum = val
+        let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
+        getAppResources(params)
+      }
 
-        const pageChange = (val) => {
-            console.log(val)
-            loading.value = true
-            currentPage.value = val
-            paramsGetResources.pageNum = val
-            let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
-            getAppResources(params)
-        }
+      onMounted(() => {
+        listKey2.value++
+        getAppResources()
+      })
 
-        onMounted(() => {
-            listKey2.value++;
-            getAppResources()
-        })
+      // 分页
+      const onShowSizeChange = (current, pageSize) => {
+        currentPage.value = current
+        currentPageSize.value = pageSize
+        paramsGetResources.pageNum = current
+        paramsGetResources.pageSize = pageSize
+        getAppResources()
+      }
+      watch(currentPageSize, () => {
+        console.log('pageSize', currentPageSize.value)
+      })
 
-        // 分页
-        const onShowSizeChange = (current, pageSize) => {
-            currentPage.value = current
-            currentPageSize.value = pageSize
-            paramsGetResources.pageNum = current
-            paramsGetResources.pageSize = pageSize
-            getAppResources()
-        }
-        watch(currentPageSize, () => {
-            console.log('pageSize', currentPageSize.value)
-        })
-      
-        return {
-            listKey,
-            searchValue,
-            currentPage,
-            resourceList,
-            resourceTotal,
-            pageChange,
-            listKey2,
-            Cardsname,
-            getAppResources,
-            chongzhi,
-            onSearch,
-            currentPageSize,
-            pageSizeOptions,
-            current,
-            loading,
-        }
+      return {
+        listKey,
+        searchValue,
+        currentPage,
+        resourceList,
+        resourceTotal,
+        pageChange,
+        listKey2,
+        Cardsname,
+        getAppResources,
+        chongzhi,
+        onSearch,
+        currentPageSize,
+        pageSizeOptions,
+        current,
+        loading,
+      }
     },
     components: {
-        HomeHeader,
-        HomeFooter,
-        searchResultList,
+      HomeHeader,
+      HomeFooter,
+      searchResultList,
     },
     beforeUnmount() {
-        mybus.off('paramsGetResources')
-        mybus.off('changeCondition')
-        mybus.off('refresh')
-        mybus.off('changePage')
+      mybus.off('paramsGetResources')
+      mybus.off('changeCondition')
+      mybus.off('refresh')
+      mybus.off('changePage')
     },
-})
+  })
 </script>
 <style lang="less" scoped>
-.resultListSearchInput-father {
+  .resultListSearchInput-father {
     background: #f3f5f9;
     padding: 0.2rem;
 
     // padding-left: 0.2rem;
     // padding-top: 0.2rem;
     .resultListSearchInput-son {
-        background: #fff;
-        padding: 0.2rem 0.2rem 0rem 0.3rem;
+      background: #fff;
+      padding: 0.2rem 0.2rem 0rem 0.3rem;
 
-        .hengxian {
-            width: 100%;
-            height: 0.01rem;
-            background: rgba(150, 144, 144, 0.3);
-            margin-top: 0.2rem;
-        }
+      .hengxian {
+        width: 100%;
+        height: 0.01rem;
+        background: rgba(150, 144, 144, 0.3);
+        margin-top: 0.2rem;
+      }
     }
-}
+  }
 
-.resultListSearchInput {
+  .resultListSearchInput {
     margin-left: 0.1rem;
 
     :deep(.ant-input) {
-        width: 4rem;
-        height: 0.36rem;
-        background: #fff;
-        border-radius: 0.04rem;
+      width: 4rem;
+      height: 0.36rem;
+      background: #fff;
+      border-radius: 0.04rem;
     }
 
     :deep(.ant-input-search-button) {
-        width: 0.8rem;
-        height: 0.36rem;
-        background: #0087ff;
-        border-radius: 0.04rem !important;
-        font-size: 0.14rem;
-        font-weight: 400;
-        color: #fff;
-        line-height: 0.34rem;
-        margin-left: 0.1rem;
+      width: 0.8rem;
+      height: 0.36rem;
+      background: #0087ff;
+      border-radius: 0.04rem !important;
+      font-size: 0.14rem;
+      font-weight: 400;
+      color: #fff;
+      line-height: 0.34rem;
+      margin-left: 0.1rem;
     }
 
     :deep(.ant-input-group-addon) {
-        left: 0 !important;
+      left: 0 !important;
     }
-}
+  }
 
-.button-reset {
+  .button-reset {
     border: 0;
     outline: none;
     width: 0.8rem;
@@ -270,9 +286,9 @@ export default defineComponent({
     line-height: 0.34rem;
     margin-left: 2.5rem;
     cursor: pointer;
-}
+  }
 
-.details-pageconetent {
+  .details-pageconetent {
     height: 100%;
     width: 100%;
     display: flex;
@@ -283,37 +299,38 @@ export default defineComponent({
     background: rgba(245, 243, 243, 0.3);
 
     .details-pageconetent-left {
-        max-height: 6.9rem;
-        position: absolute;
-        width: 2.5rem;
-        top: 0.17rem;
-        left: 2.5rem;
-        margin-right: 0.17rem;
-        overflow: auto;
+      max-height: 6.9rem;
+      position: absolute;
+      width: 2.5rem;
+      top: 0.17rem;
+      left: 2.5rem;
+      margin-right: 0.17rem;
+      overflow: auto;
     }
 
     .top {
-        min-height: 7.2rem;
-        position: relative;
-        width: 11.5rem;
-        display: flex;
-        padding-top: 0.2rem;
-        flex-direction: column;
-        font-size: 0.16rem;
-        justify-content: left;
+      min-height: 7.2rem;
+      position: relative;
+      width: 11.5rem;
+      display: flex;
+      padding-top: 0.2rem;
+      flex-direction: column;
+      font-size: 0.16rem;
+      justify-content: left;
+      background: #f3f5f9;
+
+      .pagination {
         background: #f3f5f9;
-
-        .pagination {
-            background: #f3f5f9;
-            padding-bottom: 0.6rem;
-        }
+        padding-bottom: 0.6rem;
+      }
     }
-}
+  }
 
-:deep(.ant-card-grid) {
+  :deep(.ant-card-grid) {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     -webkit-line-clamp: 1;
-}
+    word-break: break-all;
+  }
 </style>
diff --git a/front/src/views/home/latestAbility.vue b/front/src/views/home/latestAbility.vue
index c12c3b9c..f31415d9 100644
--- a/front/src/views/home/latestAbility.vue
+++ b/front/src/views/home/latestAbility.vue
@@ -185,6 +185,7 @@
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 3;
           overflow: hidden;
+          word-break: break-all;
         }
         button {
           margin: 0rem;
diff --git a/front/src/views/mynoticeView/components/NoticeList.vue b/front/src/views/mynoticeView/components/NoticeList.vue
index 949ffd95..e6029fb4 100644
--- a/front/src/views/mynoticeView/components/NoticeList.vue
+++ b/front/src/views/mynoticeView/components/NoticeList.vue
@@ -423,6 +423,7 @@
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .left:hover {
             color: #0058e1;
diff --git a/front/src/views/newHome/components/CapabilityConvergence.vue b/front/src/views/newHome/components/CapabilityConvergence.vue
index 9e520325..f0bfeb1b 100644
--- a/front/src/views/newHome/components/CapabilityConvergence.vue
+++ b/front/src/views/newHome/components/CapabilityConvergence.vue
@@ -328,6 +328,7 @@
             display: -webkit-box;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .name:hover {
             color: #0058e1;
diff --git a/front/src/views/newHome/components/LatestCapabilities.vue b/front/src/views/newHome/components/LatestCapabilities.vue
index dd54b720..59ab9956 100644
--- a/front/src/views/newHome/components/LatestCapabilities.vue
+++ b/front/src/views/newHome/components/LatestCapabilities.vue
@@ -169,6 +169,7 @@
             display: -webkit-box;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
+            word-break: break-all;
           }
           .text {
             width: 100%;
diff --git a/front/src/views/newHome/components/PopularAbility.vue b/front/src/views/newHome/components/PopularAbility.vue
index ee733fcf..aba6ac2e 100644
--- a/front/src/views/newHome/components/PopularAbility.vue
+++ b/front/src/views/newHome/components/PopularAbility.vue
@@ -153,195 +153,196 @@
   }
 </script>
 <style lang="less" scoped>
-.popular-ability {
-  height: 6.8rem;
-  background: url('~@/assets/newHome/popular-bg.png') no-repeat;
-  background-size: 100%;
-  display: flex;
-  justify-content: center;
-  .main {
-    width: 13rem;
-    margin-top: 0.78rem;
+  .popular-ability {
+    height: 6.8rem;
+    background: url('~@/assets/newHome/popular-bg.png') no-repeat;
+    background-size: 100%;
     display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    .top {
-      font-size: 0.3rem;
-      color: #fff;
-      text-align: center;
+    justify-content: center;
+    .main {
+      width: 13rem;
+      margin-top: 0.78rem;
       display: flex;
       flex-direction: column;
       flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-      .line {
-        width: 0.34rem;
-        height: 0.03rem;
-        background-color: #fff;
-        margin-top: 0.08rem;
-      }
-    }
-    .bottom {
-      display: flex;
-      justify-content: space-between;
-      margin-top: 0.52rem;
-      .left {
+      .top {
+        font-size: 0.3rem;
+        color: #fff;
+        text-align: center;
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
-        .select {
-          cursor: pointer;
+        justify-content: center;
+        align-items: center;
+        .line {
+          width: 0.34rem;
+          height: 0.03rem;
+          background-color: #fff;
+          margin-top: 0.08rem;
+        }
+      }
+      .bottom {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 0.52rem;
+        .left {
           display: flex;
           flex-direction: column;
           flex-wrap: wrap;
-          align-items: center;
-          justify-content: center;
-          width: 1.05rem;
-          height: 1.39rem;
-          background: rgba(255, 255, 255, 0.08);
-          margin-bottom: 0.01rem;
-          border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
-          .img {
-            width: 0.36rem;
-            height: 0.36rem;
-            background-size: 100%;
-          }
-          .fwl {
-            background: url('~@/assets/newHome/fwl-no.png') no-repeat;
-            background-size: contain;
-          }
-          .sgl {
-            background: url('~@/assets/newHome/sgl-no.png') no-repeat;
-            background-size: contain;
-          }
-          .scl {
-            background: url('~@/assets/newHome/scl-no.png') no-repeat;
-            background-size: contain;
-          }
-          .text {
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 0.14rem;
-            margin-top: 0.08rem;
-          }
-        }
-        .select:hover {
-          background: rgba(255, 255, 255, 0.12);
-        }
-        .checked {
-          background: rgba(255, 255, 255, 0.18) !important;
-          border-right: 0.02rem solid #fff;
-        }
-      }
-      .right {
-        cursor: pointer;
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        margin-left: 0.2rem;
-        .item {
-          width: 3.78rem;
-          height: 2rem;
-          display: flex;
-          .item-left {
-            width: 0.83rem;
-            height: 100%;
+          .select {
+            cursor: pointer;
             display: flex;
-            justify-content: center;
+            flex-direction: column;
+            flex-wrap: wrap;
             align-items: center;
-            background: #eef1f8;
+            justify-content: center;
+            width: 1.05rem;
+            height: 1.39rem;
+            background: rgba(255, 255, 255, 0.08);
+            margin-bottom: 0.01rem;
+            border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
             .img {
-              width: 0.56rem;
-              height: 0.56rem;
+              width: 0.36rem;
+              height: 0.36rem;
               background-size: 100%;
             }
-            .zj {
-              background: url('~@/assets/newHome/popular-zj.png') no-repeat;
+            .fwl {
+              background: url('~@/assets/newHome/fwl-no.png') no-repeat;
               background-size: contain;
             }
-            .yy {
-              background: url('~@/assets/newHome/popular-yy.png') no-repeat;
+            .sgl {
+              background: url('~@/assets/newHome/sgl-no.png') no-repeat;
               background-size: contain;
             }
-            .jc {
-              background: url('~@/assets/newHome/popular-jc.png') no-repeat;
+            .scl {
+              background: url('~@/assets/newHome/scl-no.png') no-repeat;
               background-size: contain;
             }
-            .sj {
-              background: url('~@/assets/newHome/popular-sj.png') no-repeat;
-              background-size: contain;
-            }
-            .zs {
-              background: url('~@/assets/newHome/popular-zs.png') no-repeat;
-              background-size: contain;
-            }
-          }
-          .item-right {
-            width: 100%;
-            height: 100%;
-            background: #fff;
-            .fw {
-              width: 100%;
-              padding-right: 0.1rem;
-              padding-top: 0.03rem;
-              text-align: right;
-              color: 666;
-              font-size: 0.14rem;
-              color: #666;
-            }
-            .name {
-              font-size: 0.18rem;
-              color: #212121;
-              text-align: center;
-              margin-top: 0.05rem;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              display: -webkit-box;
-              -webkit-line-clamp: 1;
-              -webkit-box-orient: vertical;
-            }
             .text {
-              width: 100%;
-              padding: 0.24rem 0.3rem;
+              color: rgba(255, 255, 255, 0.6);
               font-size: 0.14rem;
-              color: #212121;
-              line-height: 0.24rem;
-              height: 1rem;
-              overflow: hidden;
+              margin-top: 0.08rem;
             }
           }
+          .select:hover {
+            background: rgba(255, 255, 255, 0.12);
+          }
+          .checked {
+            background: rgba(255, 255, 255, 0.18) !important;
+            border-right: 0.02rem solid #fff;
+          }
         }
-        .item:nth-of-type(4),
-        .item:nth-of-type(5),
-        .item:nth-of-type(6) {
-          margin-top: 0.2rem;
-        }
-        .item:hover {
-          border-radius: 0.02rem;
-          border: 0.01rem solid #0058e1;
-          box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+        .right {
+          cursor: pointer;
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          margin-left: 0.2rem;
+          .item {
+            width: 3.78rem;
+            height: 2rem;
+            display: flex;
+            .item-left {
+              width: 0.83rem;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              background: #eef1f8;
+              .img {
+                width: 0.56rem;
+                height: 0.56rem;
+                background-size: 100%;
+              }
+              .zj {
+                background: url('~@/assets/newHome/popular-zj.png') no-repeat;
+                background-size: contain;
+              }
+              .yy {
+                background: url('~@/assets/newHome/popular-yy.png') no-repeat;
+                background-size: contain;
+              }
+              .jc {
+                background: url('~@/assets/newHome/popular-jc.png') no-repeat;
+                background-size: contain;
+              }
+              .sj {
+                background: url('~@/assets/newHome/popular-sj.png') no-repeat;
+                background-size: contain;
+              }
+              .zs {
+                background: url('~@/assets/newHome/popular-zs.png') no-repeat;
+                background-size: contain;
+              }
+            }
+            .item-right {
+              width: 100%;
+              height: 100%;
+              background: #fff;
+              .fw {
+                width: 100%;
+                padding-right: 0.1rem;
+                padding-top: 0.03rem;
+                text-align: right;
+                color: 666;
+                font-size: 0.14rem;
+                color: #666;
+              }
+              .name {
+                font-size: 0.18rem;
+                color: #212121;
+                text-align: center;
+                margin-top: 0.05rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+                word-break: break-all;
+              }
+              .text {
+                width: 100%;
+                padding: 0.24rem 0.3rem;
+                font-size: 0.14rem;
+                color: #212121;
+                line-height: 0.24rem;
+                height: 1rem;
+                overflow: hidden;
+              }
+            }
+          }
+          .item:nth-of-type(4),
+          .item:nth-of-type(5),
+          .item:nth-of-type(6) {
+            margin-top: 0.2rem;
+          }
+          .item:hover {
+            border-radius: 0.02rem;
+            border: 0.01rem solid #0058e1;
+            box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+          }
         }
       }
-    }
-    .bottom-btn {
-      cursor: pointer;
-      text-align: center;
-      margin-top: 0.24rem;
-      color: #fff;
-      width: 1rem;
-      height: 0.24rem;
-      line-height: 0.24rem;
-      margin-left: 6rem;
-      span {
-        display: inline-block;
-        width: 0.1rem;
-        height: 0.1rem;
-        background: url('~@/assets/newHome/gd.png') no-repeat;
-        background-size: contain;
+      .bottom-btn {
+        cursor: pointer;
+        text-align: center;
+        margin-top: 0.24rem;
+        color: #fff;
+        width: 1rem;
+        height: 0.24rem;
+        line-height: 0.24rem;
+        margin-left: 6rem;
+        span {
+          display: inline-block;
+          width: 0.1rem;
+          height: 0.1rem;
+          background: url('~@/assets/newHome/gd.png') no-repeat;
+          background-size: contain;
+        }
+      }
+      .bottom-btn:hover {
+        background: rgba(0, 88, 225, 0.1);
       }
-    }
-    .bottom-btn:hover {
-      background: rgba(0, 88, 225, 0.1);
     }
   }
-}
 </style>
diff --git a/front/src/views/newHome/components/RecommendationAbility.vue b/front/src/views/newHome/components/RecommendationAbility.vue
index 33f9693f..4b772bb5 100644
--- a/front/src/views/newHome/components/RecommendationAbility.vue
+++ b/front/src/views/newHome/components/RecommendationAbility.vue
@@ -179,6 +179,7 @@
               display: -webkit-box;
               -webkit-line-clamp: 1;
               -webkit-box-orient: vertical;
+              word-break: break-all;
             }
             .content-top-pingfen {
               background: unset;
@@ -203,6 +204,7 @@
             -webkit-box-orient: vertical;
             margin-bottom: 0.12rem;
             cursor: pointer;
+            word-break: break-all;
           }
           .num {
             font-size: 0.14rem;
diff --git a/front/src/views/newHome/components/WorkDynList.vue b/front/src/views/newHome/components/WorkDynList.vue
index 8b402866..61d432ed 100644
--- a/front/src/views/newHome/components/WorkDynList.vue
+++ b/front/src/views/newHome/components/WorkDynList.vue
@@ -167,6 +167,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .pulish-time {
           position: absolute;
diff --git a/front/src/views/personalCenter/OnTheRightSideOfTheList.vue b/front/src/views/personalCenter/OnTheRightSideOfTheList.vue
index db829f9b..370572f7 100644
--- a/front/src/views/personalCenter/OnTheRightSideOfTheList.vue
+++ b/front/src/views/personalCenter/OnTheRightSideOfTheList.vue
@@ -176,6 +176,7 @@
             -webkit-line-clamp: 3;
             -webkit-box-orient: vertical;
             color: #999999;
+            word-break: break-all;
           }
         }
         .content-body-bottom {
diff --git a/front/src/views/personalCenter/components/AbilityApplication.vue b/front/src/views/personalCenter/components/AbilityApplication.vue
index 9b1da485..4ba11b26 100644
--- a/front/src/views/personalCenter/components/AbilityApplication.vue
+++ b/front/src/views/personalCenter/components/AbilityApplication.vue
@@ -300,6 +300,7 @@
                   display: -webkit-box;
                   -webkit-line-clamp: 1;
                   -webkit-box-orient: vertical;
+                  word-break: break-all;
                   .type {
                     background: #0087ff;
                     color: #fff;
@@ -321,6 +322,7 @@
                   display: -webkit-box;
                   -webkit-line-clamp: 2;
                   -webkit-box-orient: vertical;
+                  word-break: break-all;
                 }
                 .result:hover {
                   color: #0058e1;
diff --git a/front/src/views/personalCenter/components/Comment.vue b/front/src/views/personalCenter/components/Comment.vue
index b37806f3..3048a6f3 100644
--- a/front/src/views/personalCenter/components/Comment.vue
+++ b/front/src/views/personalCenter/components/Comment.vue
@@ -192,6 +192,7 @@
                   display: -webkit-box;
                   -webkit-line-clamp: 2;
                   -webkit-box-orient: vertical;
+                  word-break: break-all;
                 }
                 .result:hover {
                   color: #0058e1;
diff --git a/front/src/views/personalCenter/components/Demand.vue b/front/src/views/personalCenter/components/Demand.vue
index c81f92ef..76ffa6a3 100644
--- a/front/src/views/personalCenter/components/Demand.vue
+++ b/front/src/views/personalCenter/components/Demand.vue
@@ -201,6 +201,7 @@
                   display: -webkit-box;
                   -webkit-line-clamp: 2;
                   -webkit-box-orient: vertical;
+                  word-break: break-all;
                 }
                 .result:hover {
                   color: #0058e1;
diff --git a/front/src/views/personalCenter/components/MyApplication.vue b/front/src/views/personalCenter/components/MyApplication.vue
index 6c2bc7c1..baf33171 100644
--- a/front/src/views/personalCenter/components/MyApplication.vue
+++ b/front/src/views/personalCenter/components/MyApplication.vue
@@ -222,6 +222,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .content-body-content {
           margin-top: 10px;
@@ -238,6 +239,7 @@
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
             color: #999999;
+            word-break: break-all;
           }
         }
         .content-body-bottom {
diff --git a/front/src/views/personalCenter/components/MyApply.vue b/front/src/views/personalCenter/components/MyApply.vue
index 02be1c6f..376c200f 100644
--- a/front/src/views/personalCenter/components/MyApply.vue
+++ b/front/src/views/personalCenter/components/MyApply.vue
@@ -863,6 +863,7 @@
             -webkit-box-orient: vertical;
             max-width: 8.1rem;
             line-height: 24px;
+            word-break: break-all;
           }
         }
         .content-body-bottom {
diff --git a/front/src/views/personalCenter/components/MyComments.vue b/front/src/views/personalCenter/components/MyComments.vue
index a1007e0c..e8316b15 100644
--- a/front/src/views/personalCenter/components/MyComments.vue
+++ b/front/src/views/personalCenter/components/MyComments.vue
@@ -195,6 +195,7 @@
           display: -webkit-box;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .content-body-content {
           margin-top: 10px;
@@ -212,6 +213,7 @@
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
             color: #999999;
+            word-break: break-all;
           }
         }
         .content-body-bottom {
diff --git a/front/src/views/personalCenter/components/MyPublish.vue b/front/src/views/personalCenter/components/MyPublish.vue
index e9c4b535..c17c215c 100644
--- a/front/src/views/personalCenter/components/MyPublish.vue
+++ b/front/src/views/personalCenter/components/MyPublish.vue
@@ -573,6 +573,7 @@
             display: -webkit-box;
             -webkit-line-clamp: 3;
             -webkit-box-orient: vertical;
+            word-break: break-all;
             color: #999999;
           }
         }
diff --git a/front/src/views/personalCenter/components/OffTheShelf.vue b/front/src/views/personalCenter/components/OffTheShelf.vue
index b7bf4d45..394455d2 100644
--- a/front/src/views/personalCenter/components/OffTheShelf.vue
+++ b/front/src/views/personalCenter/components/OffTheShelf.vue
@@ -194,6 +194,7 @@
                   text-overflow: ellipsis;
                   display: -webkit-box;
                   -webkit-line-clamp: 2;
+                  word-break: break-all;
                   -webkit-box-orient: vertical;
                 }
                 .result:hover {
diff --git a/front/src/views/personalCenter/components/OtherApplications .vue b/front/src/views/personalCenter/components/OtherApplications .vue
index 695a741b..f0ff89e1 100644
--- a/front/src/views/personalCenter/components/OtherApplications .vue	
+++ b/front/src/views/personalCenter/components/OtherApplications .vue	
@@ -213,6 +213,7 @@
                   text-overflow: ellipsis;
                   display: -webkit-box;
                   -webkit-line-clamp: 2;
+                  word-break: break-all;
                   -webkit-box-orient: vertical;
                 }
                 .result:hover {
diff --git a/front/src/views/personalCenter/components/PurchaseVehicle.vue b/front/src/views/personalCenter/components/PurchaseVehicle.vue
index 819c1a7b..52f51791 100644
--- a/front/src/views/personalCenter/components/PurchaseVehicle.vue
+++ b/front/src/views/personalCenter/components/PurchaseVehicle.vue
@@ -862,6 +862,7 @@
           text-overflow: ellipsis;
           display: -webkit-box;
           -webkit-line-clamp: 2;
+          word-break: break-all;
           -webkit-box-orient: vertical;
         }
       }
diff --git a/front/src/views/personalCenter/components/PutOnTheShelf .vue b/front/src/views/personalCenter/components/PutOnTheShelf .vue
index 74365751..8007ff9f 100644
--- a/front/src/views/personalCenter/components/PutOnTheShelf .vue	
+++ b/front/src/views/personalCenter/components/PutOnTheShelf .vue	
@@ -198,6 +198,7 @@
                   text-overflow: ellipsis;
                   display: -webkit-box;
                   -webkit-line-clamp: 2;
+                  word-break: break-all;
                   -webkit-box-orient: vertical;
                 }
                 .result:hover {