diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
index 9407128a..44ebfcd0 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
@@ -12,7 +12,9 @@
         <span class="name">{{ props.dataList.name }}</span>
         <div class="label-content">
           <p class="lable-father">
-            <span class="label">{{ props.dataList.type }}</span>
+            <span class="label">
+              {{ componentType || props.dataList.type }}
+            </span>
             <span class="label">{{ props.dataList.shareType }}</span>
             <span class="label">{{ props.dataList.shareCondition }}</span>
           </p>
@@ -77,6 +79,7 @@
       },
     })
   }
+  const componentType = ref('')
   // 收藏
   const goTOCollection = () => {
     console.log('收藏===================》', props.dataList)
@@ -89,6 +92,12 @@
     applicationArea.value = props.dataList.infoList.filter(
       (val) => val.attrType === '应用领域'
     )[0].attrValue
+    let obj = props.dataList.infoList.filter(
+      (val) => val.attrType === '组件类型'
+    )[0]
+    if (obj) {
+      componentType.value = obj.attrValue
+    }
   }
   watch(
     () => props.dataList,
@@ -97,6 +106,12 @@
         applicationArea.value = props.dataList.infoList.filter(
           (val) => val.attrType === '应用领域'
         )[0].attrValue
+        let obj = props.dataList.infoList.filter(
+          (val) => val.attrType === '组件类型'
+        )[0]
+        if (obj) {
+          componentType.value = obj.attrValue
+        }
       }
     }
   )
diff --git a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
index 56cac162..64a4be26 100644
--- a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
@@ -12,7 +12,9 @@
         <span class="name">{{ props.dataList.name }}</span>
         <div class="label-content">
           <p class="lable-father">
-            <span class="label">{{ props.dataList.type }}</span>
+            <span class="label">
+              {{ componentType || props.dataList.type }}
+            </span>
             <span class="label">{{ props.dataList.shareType }}</span>
             <span class="label">{{ props.dataList.shareCondition }}</span>
           </p>
@@ -86,10 +88,17 @@
       message.success('收藏成功')
     })
   }
+  const componentType = ref('')
   if (props.dataList.infoList) {
     businessArea.value = props.dataList.infoList.filter(
       (val) => val.attrType === '应用领域'
     )[0].attrValue
+    let obj = props.dataList.infoList.filter(
+      (val) => val.attrType === '组件类型'
+    )[0]
+    if (obj) {
+      componentType.value = obj.attrValue
+    }
   }
   watch(
     () => props.dataList,
@@ -98,6 +107,12 @@
         businessArea.value = props.dataList.infoList.filter(
           (val) => val.attrType === '应用领域'
         )[0].attrValue
+        let obj = props.dataList.infoList.filter(
+          (val) => val.attrType === '组件类型'
+        )[0]
+        if (obj) {
+          componentType.value = obj.attrValue
+        }
       }
     }
   )
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue b/front/src/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue
index 03d712d7..38b38178 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue
@@ -151,6 +151,7 @@
             font-size: 0.24rem;
             line-height: 0.24rem;
             margin-bottom: 0.2rem;
+            text-align: center;
             max-width: 2rem;
             height: 0.24rem;
             display: -webkit-box;
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue b/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
index 7f845960..fba86c5c 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
@@ -18,7 +18,7 @@
         </div>
         <div class="right">
           <div @click="technical()">技术文档</div>
-          <div>新手指引</div>
+          <div @click="technicaltow()">新手指引</div>
         </div>
       </div>
       <div class="content-card">
@@ -126,6 +126,17 @@
     //     btoa(encodeURI(dataFrom.value.link))
     // )
   }
+  function technicaltow() {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '使用手册'
+    )[0]
+    console.log('dataFrom.value.link', obj.attrValue)
+    window.open(
+      window.SITE_CONFIG.previewUrl +
+        'hisense_office/onlinePreview?url=' +
+        btoa(encodeURI(obj.attrValue))
+    )
+  }
   watch(
     () => props.dataList,
     (val) => {
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperPresentation.vue b/front/src/views/detailsAll/components/Developer/DeveloperPresentation.vue
index 0f8ecd52..d1fa2b43 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperPresentation.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperPresentation.vue
@@ -8,7 +8,10 @@
 <template>
   <div class="application-presentation" v-if="flag">
     <detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
-    <div class="main">
+    <div
+      class="main"
+      :style="`${img}background-position:center;background-size:cover;`"
+    >
       <div class="play" @click="showModal"></div>
     </div>
     <a-modal
@@ -63,6 +66,7 @@
     dataList: { type: Object, default: null },
   })
   const flag = ref(true)
+  const img = ref({})
   console.log('111111111111111111111,', props.dataList)
   if (props.dataList.infoList) {
     let obj = props.dataList.infoList.filter(
@@ -72,7 +76,13 @@
     if (!obj) {
       flag.value = false
     } else {
+      let imgindex = props.dataList.infoList.filter(
+        (item) => item.attrType === '组件图片'
+      )[0]
       options.src = obj.attrValue
+      if (imgindex) {
+        img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+      }
     }
   }
   watch(
@@ -86,7 +96,14 @@
         if (!obj) {
           flag.value = false
         } else {
+          let imgindex = props.dataList.infoList.filter(
+            (item) => item.attrType === '组件图片'
+          )[0]
           options.src = obj.attrValue
+          if (imgindex) {
+            img.value =
+              'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+          }
         }
       }
     }
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue b/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
index 8c2d1832..f0734a64 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
@@ -12,7 +12,9 @@
         <span class="name">{{ props.dataList.name }}</span>
         <div class="label-content">
           <p class="lable-father">
-            <span class="label">{{ props.dataList.type }}</span>
+            <span class="label">
+              {{ componentType || props.dataList.type }}
+            </span>
             <span class="label">{{ props.dataList.shareType }}</span>
             <span class="label">{{ props.dataList.shareCondition }}</span>
           </p>
@@ -85,10 +87,17 @@
       message.success('收藏成功')
     })
   }
+  const componentType = ref('')
   if (props.dataList.infoList) {
     applicationArea.value = props.dataList.infoList.filter(
       (val) => val.attrType === '应用领域'
     )[0].attrValue
+    let obj = props.dataList.infoList.filter(
+      (val) => val.attrType === '组件类型'
+    )[0]
+    if (obj) {
+      componentType.value = obj.attrValue
+    }
   }
   watch(
     () => props.dataList,
@@ -97,6 +106,12 @@
         applicationArea.value = props.dataList.infoList.filter(
           (val) => val.attrType === '应用领域'
         )[0].attrValue
+        let obj = props.dataList.infoList.filter(
+          (val) => val.attrType === '组件类型'
+        )[0]
+        if (obj) {
+          componentType.value = obj.attrValue
+        }
       }
     }
   )