diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
index 06303258..24869e6f 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
@@ -18,11 +18,15 @@
         <!-- <span class="name">{{ props.dataList.name }}</span> -->
         <div class="label-content">
           <p class="lable-father">
-            <span class="label">
-              {{ componentType || props.dataList.type }}
+            <span class="label" v-if="props.dataList.type">
+              {{ props.dataList.type }}
+            </span>
+            <span class="label" v-if="props.dataList.shareType">
+              {{ props.dataList.shareType }}
+            </span>
+            <span class="label" v-if="props.dataList.shareCondition">
+              {{ props.dataList.shareCondition }}
             </span>
-            <span class="label">{{ props.dataList.shareType }}</span>
-            <span class="label">{{ props.dataList.shareCondition }}</span>
           </p>
         </div>
         <!-- <span class="label">免费</span> -->
diff --git a/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue b/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
index 135cff66..81ad5792 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
@@ -2,17 +2,34 @@
 <template>
   <div class="application-deployment-and-security">
     <div class="title">
-      <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
+      <DetalsTitle
+        :title="dataFrom.title"
+        :type="dataFrom.englishTitle"
+      ></DetalsTitle>
     </div>
     <div class="content">
-      <div v-for="(item, index) in dataFrom.content" :key="index" class="content-card">
+      <div
+        v-for="(item, index) in dataFrom.content"
+        :key="index"
+        class="content-card"
+      >
         <div class="card-title">{{ item.childrenTitle }}</div>
         <div class="card-content">
-          <div v-for="carditem in item.childrenContent" :key="carditem">
+          <div
+            v-for="carditem in item.childrenContent"
+            :key="carditem"
+            :class="
+              carditem.attrType == '访问地址' ? 'access-to-the-address' : ''
+            "
+          >
             <span>{{ carditem.attrType }}：</span>
             <a-tooltip>
               <template #title>{{ carditem.attrValue }}</template>
-              <span>{{ carditem.attrValue }}</span>
+              <span
+                @click="addressFunction(carditem.attrType, carditem.attrValue)"
+              >
+                {{ carditem.attrValue }}
+              </span>
             </a-tooltip>
           </div>
         </div>
@@ -22,176 +39,187 @@
 </template>
 
 <script setup>
-import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-import { ref, defineProps, watch } from 'vue'
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
 
-let dataFrom = ref({
-  title: '部署与安全',
-  englishTitle: 'DEPLOY&SAFE',
-  content: [
-    {
-      childrenTitle: '部署',
-      childrenContent: [],
-    },
-    {
-      childrenTitle: '安全',
-      childrenContent: [],
-    },
-  ],
-})
-//数据初始化
-const props = defineProps({
-  dataList: { type: Object, default: null },
-})
-if (props.dataList.infoList) {
-  props.dataList.infoList.map((item) => {
-    if (
-      item.attrType === '部署区域' ||
-      item.attrType === '是否统一登录' ||
-      item.attrType === '部署位置'
-    ) {
-      dataFrom.value.content[0].childrenContent.push(item)
-    } else if (
-      item.attrType === '是否等保备案' ||
-      item.attrType === '等保定级'
-    ) {
-      dataFrom.value.content[1].childrenContent.push(item)
-    } else if (item.attrType === '访问地址') {
-      let obj = {
-        attrType: '访问地址',
-        attrValue: item.attrValue || '------',
-      }
-      dataFrom.value.content[0].childrenContent.push(obj)
-    }
+  let dataFrom = ref({
+    title: '部署与安全',
+    englishTitle: 'DEPLOY&SAFE',
+    content: [
+      {
+        childrenTitle: '部署',
+        childrenContent: [],
+      },
+      {
+        childrenTitle: '安全',
+        childrenContent: [],
+      },
+    ],
   })
-  if (dataFrom.value.content[1].childrenContent.length <= 0) {
-    let data = [
-      {
-        attrType: '是否等保备案',
-        attrValue: '------',
-      },
-      {
-        attrType: '等保定级',
-        attrValue: '------',
-      },
-    ]
-    data.map((itemContent) => {
-      dataFrom.value.content[1].childrenContent.push(itemContent)
-    })
-  }
-}
-watch(
-  () => props.dataList,
-  (val) => {
-    if (val) {
-      dataFrom.value.content[0].childrenContent = []
-      dataFrom.value.content[1].childrenContent = []
-      props.dataList.infoList.map((item) => {
-        if (
-          item.attrType === '部署区域' ||
-          item.attrType === '是否统一登录' ||
-          item.attrType === '部署位置'
-        ) {
-          dataFrom.value.content[0].childrenContent.push(item)
-        } else if (
-          item.attrType === '是否等保备案' ||
-          item.attrType === '等保定级'
-        ) {
-          dataFrom.value.content[1].childrenContent.push(item)
-        } else if (item.attrType === '访问地址') {
-          let obj = {
-            attrType: '访问地址',
-            attrValue: item.attrValue || '------',
-          }
-          dataFrom.value.content[0].childrenContent.push(obj)
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    props.dataList.infoList.map((item) => {
+      if (
+        item.attrType === '部署区域' ||
+        item.attrType === '是否统一登录' ||
+        item.attrType === '部署位置'
+      ) {
+        dataFrom.value.content[0].childrenContent.push(item)
+      } else if (
+        item.attrType === '是否等保备案' ||
+        item.attrType === '等保定级'
+      ) {
+        dataFrom.value.content[1].childrenContent.push(item)
+      } else if (item.attrType === '访问地址') {
+        let obj = {
+          attrType: '访问地址',
+          attrValue: item.attrValue || '------',
         }
-      })
-      if (dataFrom.value.content[1].childrenContent.length <= 0) {
-        let data = [
-          {
-            attrType: '是否等保备案',
-            attrValue: '------',
-          },
-          {
-            attrType: '等保定级',
-            attrValue: '------',
-          },
-        ]
-        data.map((itemContent) => {
-          dataFrom.value.content[1].childrenContent.push(itemContent)
-        })
+        dataFrom.value.content[0].childrenContent.push(obj)
       }
-      // let obj = {
-      //   attrType: '访问地址',
-      //   attrValue: props.dataList.link || '------',
-      // }
-      // dataFrom.value.content[0].childrenContent.push(obj)
+    })
+    if (dataFrom.value.content[1].childrenContent.length <= 0) {
+      let data = [
+        {
+          attrType: '是否等保备案',
+          attrValue: '------',
+        },
+        {
+          attrType: '等保定级',
+          attrValue: '------',
+        },
+      ]
+      data.map((itemContent) => {
+        dataFrom.value.content[1].childrenContent.push(itemContent)
+      })
     }
   }
-)
+  //访问地址跳转方法
+  const addressFunction = (name, itemValue) => {
+    if (name == '访问地址') {
+      window.open(itemValue)
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        dataFrom.value.content[0].childrenContent = []
+        dataFrom.value.content[1].childrenContent = []
+        props.dataList.infoList.map((item) => {
+          if (
+            item.attrType === '部署区域' ||
+            item.attrType === '是否统一登录' ||
+            item.attrType === '部署位置'
+          ) {
+            dataFrom.value.content[0].childrenContent.push(item)
+          } else if (
+            item.attrType === '是否等保备案' ||
+            item.attrType === '等保定级'
+          ) {
+            dataFrom.value.content[1].childrenContent.push(item)
+          } else if (item.attrType === '访问地址') {
+            let obj = {
+              attrType: '访问地址',
+              attrValue: item.attrValue || '------',
+            }
+            dataFrom.value.content[0].childrenContent.push(obj)
+          }
+        })
+        if (dataFrom.value.content[1].childrenContent.length <= 0) {
+          let data = [
+            {
+              attrType: '是否等保备案',
+              attrValue: '------',
+            },
+            {
+              attrType: '等保定级',
+              attrValue: '------',
+            },
+          ]
+          data.map((itemContent) => {
+            dataFrom.value.content[1].childrenContent.push(itemContent)
+          })
+        }
+        // let obj = {
+        //   attrType: '访问地址',
+        //   attrValue: props.dataList.link || '------',
+        // }
+        // dataFrom.value.content[0].childrenContent.push(obj)
+      }
+    }
+  )
 </script>
 
 <style lang="less" scoped>
-.application-deployment-and-security {
-  padding: 0.8rem 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .title {
-    margin-bottom: 0.3rem;
-  }
-
-  .content {
+  .application-deployment-and-security {
+    padding: 0.8rem 0;
     display: flex;
-    width: 13rem;
-    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
 
-    .content-card {
-      height: 1.5rem;
-      width: 6.2rem;
-      border-radius: 0.2rem;
-      background: linear-gradient(to right,
-          rgba(113, 132, 252, 0.4),
-          rgba(148, 163, 252, 0.4));
-      padding: 0 0.3rem;
+    .title {
+      margin-bottom: 0.3rem;
+    }
+
+    .content {
       display: flex;
-      flex-direction: column;
-      justify-content: center;
+      width: 13rem;
+      justify-content: space-between;
 
-      .card-title {
-        font-size: 0.26rem;
-        line-height: 0.26rem;
-        color: #212956;
-        margin-bottom: 0.2rem;
-      }
+      .content-card {
+        height: 1.5rem;
+        width: 6.2rem;
+        border-radius: 0.2rem;
+        background: linear-gradient(
+          to right,
+          rgba(113, 132, 252, 0.4),
+          rgba(148, 163, 252, 0.4)
+        );
+        padding: 0 0.3rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
 
-      .card-content {
-        div {
-          display: inline-block;
-          margin-right: 0.7rem;
-          color: rgba(33, 41, 86, 0.8);
-          font-size: 0.2rem;
-          line-height: 0.2rem;
-          max-width: 5.84rem;
-          overflow: hidden;
-          /*超出的隐藏*/
-          white-space: nowrap;
-          text-overflow: ellipsis;
+        .card-title {
+          font-size: 0.26rem;
+          line-height: 0.26rem;
+          color: #212956;
+          margin-bottom: 0.2rem;
+        }
 
-          /*超出的设置为省略号*/
-          span {
+        .card-content {
+          div {
             display: inline-block;
-            max-width: 4rem;
+            margin-right: 0.7rem;
+            color: rgba(33, 41, 86, 0.8);
+            font-size: 0.2rem;
+            line-height: 0.2rem;
+            max-width: 5.84rem;
             overflow: hidden;
             /*超出的隐藏*/
             white-space: nowrap;
             text-overflow: ellipsis;
+
             /*超出的设置为省略号*/
+            span {
+              display: inline-block;
+              max-width: 4rem;
+              overflow: hidden;
+              /*超出的隐藏*/
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              /*超出的设置为省略号*/
+            }
+          }
+          .access-to-the-address {
+            cursor: pointer;
           }
         }
       }
     }
   }
-}
 </style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue b/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
index b63bb510..6a5816ae 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
@@ -18,9 +18,15 @@
         <!-- <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">{{ props.dataList.shareType }}</span>
-            <span class="label">{{ props.dataList.shareCondition }}</span>
+            <span class="label" v-if="props.dataList.type">
+              {{ props.dataList.type }}
+            </span>
+            <span class="label" v-if="props.dataList.shareType">
+              {{ props.dataList.shareType }}
+            </span>
+            <span class="label" v-if="props.dataList.shareCondition">
+              {{ props.dataList.shareCondition }}
+            </span>
           </p>
         </div>
         <!-- <span class="label">免费</span> -->
diff --git a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
index 6a919c09..ca179210 100644
--- a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
@@ -18,11 +18,15 @@
         <!-- <span class="name">{{ props.dataList.name }}</span> -->
         <div class="label-content">
           <p class="lable-father">
-            <span class="label">
-              {{ componentType || props.dataList.type }}
+            <span class="label" v-if="props.dataList.type">
+              {{ props.dataList.type }}
+            </span>
+            <span class="label" v-if="props.dataList.shareType">
+              {{ props.dataList.shareType }}
+            </span>
+            <span class="label" v-if="props.dataList.shareCondition">
+              {{ props.dataList.shareCondition }}
             </span>
-            <span class="label">{{ props.dataList.shareType }}</span>
-            <span class="label">{{ props.dataList.shareCondition }}</span>
           </p>
         </div>
         <!-- <span class="label">免费</span> -->
@@ -59,215 +63,216 @@
   </div>
 </template>
 <script setup>
-import { ShoppingCartOutlined } from '@ant-design/icons-vue'
-import { defineProps, ref, watch } from 'vue'
-import { scInsert } from '@/api/personalCenter'
-import { sgcInsert } from '@/api/home'
-import { useRouter } from 'vue-router'
-import mybus from '@/myplugins/mybus'
-import { message } from 'ant-design-vue'
-const props = defineProps({
-  dataList: { type: Object, default: null },
-})
-const router = useRouter()
-const businessArea = ref('')
-// // 加入申购车
-const addShoppingCart = () => {
-  console.log('加入申购车==================>', props.dataList)
-  sgcInsert({
-    delFlag: '0',
-    resourceId: props.dataList.id,
-    // userId: userId.value,
-  }).then((res) => {
-    console.log(res)
-    message.success('添加申购车成功！')
-    mybus.emit('getSgcNum')
+  import { ShoppingCartOutlined } from '@ant-design/icons-vue'
+  import { defineProps, ref, watch } from 'vue'
+  import { scInsert } from '@/api/personalCenter'
+  import { sgcInsert } from '@/api/home'
+  import { useRouter } from 'vue-router'
+  import mybus from '@/myplugins/mybus'
+  import { message } from 'ant-design-vue'
+  const props = defineProps({
+    dataList: { type: Object, default: null },
   })
-}
-// // 立即申请
-function toView() {
-  // window.open(newpage.href, '_blank')
-  console.log('一键申请===================>', props.dataList)
-  localStorage.setItem(
-    'applyList',
-    JSON.stringify([
-      {
-        arr: [
-          {
-            delFlag: props.dataList.delFlag,
-            description: props.dataList.description,
-            resourceId: props.dataList.id,
-            resourceName: props.dataList.name,
-            time: props.dataList.createDate,
-            type: props.dataList.type,
-            componentType: '业务组件',
-          },
-        ],
-        deptId: props.dataList.deptId,
-        deptName: props.dataList.deptName,
-      },
-    ])
-  )
-  router.push({
-    path: '/apply',
-  })
-}
-// 收藏
-const goTOCollection = () => {
-  console.log('收藏===================》', props.dataList)
-  scInsert([{ resourceId: props.dataList.id }]).then((res) => {
-    console.log(res)
-    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
+  const router = useRouter()
+  const businessArea = ref('')
+  // // 加入申购车
+  const addShoppingCart = () => {
+    console.log('加入申购车==================>', props.dataList)
+    sgcInsert({
+      delFlag: '0',
+      resourceId: props.dataList.id,
+      // userId: userId.value,
+    }).then((res) => {
+      console.log(res)
+      message.success('添加申购车成功！')
+      mybus.emit('getSgcNum')
+    })
   }
-}
-watch(
-  () => props.dataList,
-  (val) => {
-    if (val) {
-      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
-      }
+  // // 立即申请
+  function toView() {
+    // window.open(newpage.href, '_blank')
+    console.log('一键申请===================>', props.dataList)
+    localStorage.setItem(
+      'applyList',
+      JSON.stringify([
+        {
+          arr: [
+            {
+              delFlag: props.dataList.delFlag,
+              description: props.dataList.description,
+              resourceId: props.dataList.id,
+              resourceName: props.dataList.name,
+              time: props.dataList.createDate,
+              type: props.dataList.type,
+              componentType: '业务组件',
+            },
+          ],
+          deptId: props.dataList.deptId,
+          deptName: props.dataList.deptName,
+        },
+      ])
+    )
+    router.push({
+      path: '/apply',
+    })
+  }
+  // 收藏
+  const goTOCollection = () => {
+    console.log('收藏===================》', props.dataList)
+    scInsert([{ resourceId: props.dataList.id }]).then((res) => {
+      console.log(res)
+      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,
+    (val) => {
+      if (val) {
+        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
+        }
+      }
+    }
+  )
 </script>
 <style lang="less" scoped>
-.algorithm-top-details {
-  height: 6rem;
-  padding: 1.8rem 0 0;
-  background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
-  background-size: 100%;
-  display: flex;
-  justify-content: center;
-
-  .left {
-    max-width: 7.2rem;
-    color: #fff;
-    margin-right: 0.8rem;
-
-    .top {
-      display: flex;
-      align-items: center;
-
-      span {
-        font-size: 0.14rem;
-      }
-
-      .name {
-        // max-width: 3.3rem;
-        // overflow: hidden;
-        // text-overflow: ellipsis;
-        // white-space: nowrap;
-        font-size: 0.4rem;
-        margin-right: 0.2rem;
-        max-width: 7rem;
-        text-overflow: -o-ellipsis-lastline;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-      }
-
-      .label-content {
-        position: relative;
-      }
-
-      .lable-father {
-        position: absolute;
-        min-width: 3.5rem;
-        right: -3.5rem;
-        top: 0;
-      }
-
-      .label {
-        padding: 0.01rem 0.1rem;
-        margin-right: 0.1rem;
-        border-radius: 0.13rem;
-        background: rgba(255, 255, 255, 0.4);
-      }
-    }
-
-    .main {
-      margin-top: 0.2rem;
-      font-size: 0.18rem;
-      line-height: 0.34rem;
-
-      &>div:nth-of-type(1) {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      &>div:nth-of-type(2) {
-        max-height: 1rem;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical;
-      }
-    }
-
-    .bottom {
-      margin-top: 0.4rem;
-      display: flex;
-
-      .ant-btn {
-        height: 0.5rem;
-        margin-right: 0.2rem;
-        background: #ffffff;
-        border-radius: 0.06rem;
-        font-size: 0.2rem;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .ant-btn-primary {
-        color: #1890ff;
-      }
-
-      .ant-btn:nth-of-type(1) {
-        width: 1.8rem;
-      }
-
-      .ant-btn:nth-of-type(2) {
-        width: 2.2rem;
-      }
-
-      .ant-btn:nth-of-type(3) {
-        width: 1.45rem;
-        background: #fff;
-        color: #526aff;
-      }
-    }
-  }
-
-  .right {
-    width: 5.8rem;
-    height: 4rem;
-    background: url('~@/assets/detailsAll/business/business_right_bg.png') no-repeat;
+  .algorithm-top-details {
+    height: 6rem;
+    padding: 1.8rem 0 0;
+    background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
     background-size: 100%;
-    margin-top: -0.4rem;
+    display: flex;
+    justify-content: center;
+
+    .left {
+      max-width: 7.2rem;
+      color: #fff;
+      margin-right: 0.8rem;
+
+      .top {
+        display: flex;
+        align-items: center;
+
+        span {
+          font-size: 0.14rem;
+        }
+
+        .name {
+          // max-width: 3.3rem;
+          // overflow: hidden;
+          // text-overflow: ellipsis;
+          // white-space: nowrap;
+          font-size: 0.4rem;
+          margin-right: 0.2rem;
+          max-width: 7rem;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+        }
+
+        .label-content {
+          position: relative;
+        }
+
+        .lable-father {
+          position: absolute;
+          min-width: 3.5rem;
+          right: -3.5rem;
+          top: 0;
+        }
+
+        .label {
+          padding: 0.01rem 0.1rem;
+          margin-right: 0.1rem;
+          border-radius: 0.13rem;
+          background: rgba(255, 255, 255, 0.4);
+        }
+      }
+
+      .main {
+        margin-top: 0.2rem;
+        font-size: 0.18rem;
+        line-height: 0.34rem;
+
+        & > div:nth-of-type(1) {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        & > div:nth-of-type(2) {
+          max-height: 1rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      .bottom {
+        margin-top: 0.4rem;
+        display: flex;
+
+        .ant-btn {
+          height: 0.5rem;
+          margin-right: 0.2rem;
+          background: #ffffff;
+          border-radius: 0.06rem;
+          font-size: 0.2rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .ant-btn-primary {
+          color: #1890ff;
+        }
+
+        .ant-btn:nth-of-type(1) {
+          width: 1.8rem;
+        }
+
+        .ant-btn:nth-of-type(2) {
+          width: 2.2rem;
+        }
+
+        .ant-btn:nth-of-type(3) {
+          width: 1.45rem;
+          background: #fff;
+          color: #526aff;
+        }
+      }
+    }
+
+    .right {
+      width: 5.8rem;
+      height: 4rem;
+      background: url('~@/assets/detailsAll/business/business_right_bg.png')
+        no-repeat;
+      background-size: 100%;
+      margin-top: -0.4rem;
+    }
   }
-}
 </style>
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue b/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
index 0655035e..fd75008e 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
@@ -18,11 +18,15 @@
         <!-- <span class="name">{{ props.dataList.name }}</span> -->
         <div class="label-content">
           <p class="lable-father">
-            <span class="label">
-              {{ componentType || props.dataList.type }}
+            <span class="label" v-if="props.dataList.type">
+              {{ props.dataList.type }}
+            </span>
+            <span class="label" v-if="props.dataList.shareType">
+              {{ props.dataList.shareType }}
+            </span>
+            <span class="label" v-if="props.dataList.shareCondition">
+              {{ props.dataList.shareCondition }}
             </span>
-            <span class="label">{{ props.dataList.shareType }}</span>
-            <span class="label">{{ props.dataList.shareCondition }}</span>
           </p>
         </div>
         <!-- <span class="label">免费</span> -->
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
index 04c67bc2..336bc5ff 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
@@ -18,11 +18,15 @@
         <!-- <span class="name">{{ props.dataList.name }}</span> -->
         <div class="label-content">
           <p class="lable-father">
-            <span class="label">
-              {{ componentType || props.dataList.type }}
+            <span class="label" v-if="props.dataList.type">
+              {{ props.dataList.type }}
+            </span>
+            <span class="label" v-if="props.dataList.shareType">
+              {{ props.dataList.shareType }}
+            </span>
+            <span class="label" v-if="props.dataList.shareCondition">
+              {{ props.dataList.shareCondition }}
             </span>
-            <span class="label">{{ props.dataList.shareType }}</span>
-            <span class="label">{{ props.dataList.shareCondition }}</span>
           </p>
         </div>
         <!-- <span class="label">免费</span> -->