diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue
index f90305c8..4be1bfff 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue
@@ -8,24 +8,24 @@
       <div class="content-left">
         <div class="content-left-content">
           <ul>
-            <li v-for="(item, index) in dataFromLeft" :key="index">
+            <li v-for="(item, index) in dataFromLeft.content" :key="index">
               <img :src="iconImg" />
               <span>{{ item.type }}</span>
-              <p>{{ item.value }}</p>
+              <p>{{ item.values }}</p>
             </li>
           </ul>
           <ul>
-            <li v-for="(item, index) in dataFromCenter" :key="index">
+            <li v-for="(item, index) in dataFromCenter.content" :key="index">
               <img :src="iconImg" />
               <span>{{ item.type }}</span>
-              <p>{{ item.value }}</p>
+              <p>{{ item.values }}</p>
             </li>
           </ul>
           <ul>
-            <li v-for="(item, index) in dataFromRight" :key="index">
+            <li v-for="(item, index) in dataFromRight.content" :key="index">
               <img :src="iconImg" />
               <span>{{ item.type }}</span>
-              <p>{{ item.value }}</p>
+              <p>{{ item.values }}</p>
             </li>
           </ul>
         </div>
@@ -38,48 +38,54 @@
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
   import { ref, defineProps, watch } from 'vue'
   const iconImg = require('@/assets/detailsAll/layer-service/layer-icon.png')
-  const dataFromLeft = ref([
-    {
-      type: '服务类型',
-      value: '服务类型名称',
-    },
-    {
-      type: '覆盖区域',
-      value: '覆盖区域名称',
-    },
-    {
-      type: '切片策略',
-      value: '名称',
-    },
-  ])
-  const dataFromCenter = ref([
-    {
-      type: '坐标系',
-      value: '名称',
-    },
-    {
-      type: '切片尺寸详情',
-      value: '名称',
-    },
-    {
-      type: '最小级别名称',
-      value: '名称',
-    },
-  ])
-  const dataFromRight = ref([
-    {
-      type: '数据范围',
-      value: '名称',
-    },
-    {
-      type: '图层名称',
-      value: '名称',
-    },
-    {
-      type: '最大级别',
-      value: '名称',
-    },
-  ])
+  const dataFromLeft = ref({
+    content: [
+      {
+        type: '服务类型',
+        values: '',
+      },
+      {
+        type: '覆盖区域',
+        values: '',
+      },
+      {
+        type: '切片策略',
+        values: '',
+      },
+    ],
+  })
+  const dataFromCenter = ref({
+    content: [
+      {
+        type: '坐标系',
+        values: '',
+      },
+      {
+        type: '切片尺寸详情',
+        values: '',
+      },
+      {
+        type: '最小级别名称',
+        values: '',
+      },
+    ],
+  })
+  const dataFromRight = ref({
+    content: [
+      {
+        type: '数据范围',
+        values: '',
+      },
+      {
+        type: '图层名称',
+        values: '',
+      },
+      {
+        type: '最大级别',
+        values: '',
+      },
+    ],
+  })
   //数据初始化
   const props = defineProps({
     dataList: { type: Object, default: null },
@@ -87,25 +93,35 @@
   const flag = ref(true)
   if (props.dataList.infoList) {
     let obj = props.dataList.infoList.filter(
-      (item) => item.attrType === '图层信息'
+      (item) => item.attrType === '技术文档'
     )[0]
     if (!obj) {
       flag.value = false
     } else {
       // dataFrom.value.content[0].link.value = props.dataList.apiUrl
       // dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
-      // console.log('dataList', props.dataList)
-      // props.dataList.infoList.map((item) => {
-      //   if (item.attrType === '组件地址') {
-      //     dataFrom.value.content[0].linkValue = item.attrValue || '--'
-      //   } else if (item.attrType === '服务商') {
-      //     dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
-      //   } else if (item.attrType === '服务商联系人') {
-      //     dataFrom.value.content[0].people2.value = item.attrValue || '--'
-      //   } else if (item.attrType === '服务商联系电话') {
-      //     dataFrom.value.content[0].phone2.value = item.attrValue || '--'
-      //   }
-      // })
+      console.log('dataList', props.dataList)
+      props.dataList.infoList.map((item) => {
+        if (item.attrType === '服务类型') {
+          dataFromLeft.value.content[0].values = item.attrValue || '123'
+        } else if (item.attrType === '覆盖区域') {
+          dataFromLeft.value.content[1].values = item.attrValue || '--'
+        } else if (item.attrType === '切片策略') {
+          dataFromLeft.value.content[2].values = item.attrValue || '--'
+        } else if (item.attrType === '坐标系') {
+          dataFromCenter.value.content[0].values = item.attrValue || '--'
+        } else if (item.attrType === '切片尺寸') {
+          dataFromCenter.value.content[1].values = item.attrValue || '--'
+        } else if (item.attrType === '最小级别') {
+          dataFromCenter.value.content[2].values = item.attrValue || '--'
+        } else if (item.attrType === '数据范围') {
+          dataFromRight.value.content[0].values = item.attrValue || '--'
+        } else if (item.attrType === '图层类型') {
+          dataFromRight.value.content[1].values = item.attrValue || '--'
+        } else if (item.attrType === '最大级别') {
+          dataFromRight.value.content[2].values = item.attrValue || '--'
+        }
+      })
     }
   }
   watch(
@@ -118,19 +134,28 @@
         } else {
           // dataFrom.value.content[0].link.value = val.apiUrl
           // dataFrom.value.content[0].facilitator.value = val.deptContacts
-          // console.log('dataList', val)
-          // val.infoList.map((item) => {
-          //   if (item.attrType === '组件地址') {
-          //     dataFrom.value.content[0].linkValue = item.attrValue || '--'
-          //   } else if (item.attrType === '服务商') {
-          //     dataFrom.value.content[0].facilitator2.value =
-          //       item.attrValue || '--'
-          //   } else if (item.attrType === '服务商联系人') {
-          //     dataFrom.value.content[0].people2.value = item.attrValue || '--'
-          //   } else if (item.attrType === '服务商联系电话') {
-          //     dataFrom.value.content[0].phone2.value = item.attrValue || '--'
-          //   }
-          // })
+          console.log('dataList', val)
+          val.infoList.map((item) => {
+            if (item.attrType === '服务类型') {
+              dataFromLeft.value.content[0].values = item.attrValue || '123'
+            } else if (item.attrType === '覆盖区域') {
+              dataFromLeft.value.content[1].values = item.attrValue || '--'
+            } else if (item.attrType === '切片策略') {
+              dataFromLeft.value.content[2].values = item.attrValue || '--'
+            } else if (item.attrType === '坐标系') {
+              dataFromCenter.value.content[0].values = item.attrValue || '--'
+            } else if (item.attrType === '切片尺寸') {
+              dataFromCenter.value.content[1].values = item.attrValue || '--'
+            } else if (item.attrType === '最小级别') {
+              dataFromCenter.value.content[2].values = item.attrValue || '--'
+            } else if (item.attrType === '数据范围') {
+              dataFromRight.value.content[0].values = item.attrValue || '--'
+            } else if (item.attrType === '图层类型') {
+              dataFromRight.value.content[1].values = item.attrValue || '--'
+            } else if (item.attrType === '最大级别') {
+              dataFromRight.value.content[2].values = item.attrValue || '--'
+            }
+          })
         }
       }
     }
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
index a9b12bf3..9e120f43 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
@@ -67,11 +67,11 @@
   if (props.dataList.infoList) {
     list.value = []
     let arr = [
-      '组件视频介绍',
-      '图层信息',
+      '图层缩略图',
+      '坐标系',
       '应用场景',
       '应用案例',
-      '图层预览',
+      '是否可预览',
       '使用方式',
       '常见问题',
     ]
@@ -83,14 +83,18 @@
     props.dataList.infoList.map((item) => {
       if (
         item.attrType === '常见问题' ||
-        item.attrType === '图层信息' ||
-        item.attrType === '图层预览' ||
         item.attrType === '应用场景' ||
         item.attrType === '应用案例'
       ) {
         list.value.push(item.attrType)
-      } else if (item.attrType === '组件视频介绍') {
+      } else if (item.attrType === '图层缩略图') {
         list.value.push('图层展示')
+      } else if (item.attrType === '坐标系') {
+        list.value.push('图层信息')
+      } else if (item.attrType === '是否可预览') {
+        if (item.attrValue === '是') {
+          list.value.push('图层预览')
+        }
       }
     })
     list.value.push('使用方式')
@@ -117,11 +121,11 @@
       if (val) {
         list.value = []
         let arr = [
-          '组件视频介绍',
-          '图层信息',
+          '图层缩略图',
+          '坐标系',
           '应用场景',
           '应用案例',
-          '图层预览',
+          '是否可预览',
           '使用方式',
           '常见问题',
         ]
@@ -134,14 +138,18 @@
         val.infoList.map((item) => {
           if (
             item.attrType === '常见问题' ||
-            item.attrType === '图层信息' ||
-            item.attrType === '图层预览' ||
             item.attrType === '应用场景' ||
             item.attrType === '应用案例'
           ) {
             list.value.push(item.attrType)
-          } else if (item.attrType === '组件视频介绍') {
-            list.value.push('组件展示')
+          } else if (item.attrType === '图层缩略图') {
+            list.value.push('图层展示')
+          } else if (item.attrType === '坐标系') {
+            list.value.push('图层信息')
+          } else if (item.attrType === '是否可预览') {
+            if (item.attrValue === '是') {
+              list.value.push('图层预览')
+            }
           }
         })
         list.value.push('使用方式')
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServicePresentation.vue b/front/src/views/detailsAll/components/LayerService/LayerServicePresentation.vue
index 64e80108..690695d8 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServicePresentation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServicePresentation.vue
@@ -9,7 +9,7 @@
   <div class="application-presentation" v-if="flag">
     <detals-title title="图层展示" type="IMAGE"></detals-title>
     <div class="main">
-      <img :src="img" />
+      <img :src="onTrial" />
     </div>
   </div>
 </template>
@@ -20,16 +20,16 @@
     dataList: { type: Object, default: null },
   })
   const flag = ref(true)
-  const img = ref()
+  const onTrial = ref('')
   console.log('111111111111111111111,', props.dataList)
   if (props.dataList.infoList) {
     let imgindex = props.dataList.infoList.filter(
-      (item) => item.attrType === '组件图片'
+      (item) => item.attrType === '图层缩略图'
     )[0]
     if (!imgindex) {
       flag.value = false
     } else {
-      img.value = imgindex.attrValue
+      onTrial.value = imgindex.attrValue
     }
   }
   watch(
@@ -37,12 +37,12 @@
     (val) => {
       if (val) {
         let imgindex = props.dataList.infoList.filter(
-          (item) => item.attrType === '组件图片'
+          (item) => item.attrType === '图层缩略图'
         )[0]
         if (!imgindex) {
           flag.value = false
         } else {
-          img.value = imgindex.attrValue
+          onTrial.value = imgindex.attrValue
         }
       }
     }
@@ -72,7 +72,7 @@
         cursor: pointer;
       }
       img {
-        width: 50%;
+        width: 100%;
         height: 100%;
         border-radius: 0.1rem;
       }
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServicePreview.vue b/front/src/views/detailsAll/components/LayerService/LayerServicePreview.vue
index bfd4aaac..c0f50a4d 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServicePreview.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServicePreview.vue
@@ -8,7 +8,14 @@
 <template>
   <div class="application-presentation" v-if="flag">
     <detals-title title="图层预览" type="PREVIEW"></detals-title>
-    <div class="main" :style="`${img}background-position:center;`"></div>
+    <div class="main" :style="`${img}background-position:center;`">
+      <iframe
+        :src="img"
+        width="100%"
+        height="100%"
+        border-radius="0.1rem"
+      ></iframe>
+    </div>
   </div>
 </template>
 <script setup>
@@ -19,16 +26,16 @@
     dataList: { type: Object, default: null },
   })
   const flag = ref(true)
-  const img = ref({})
+  const img = ref('')
   console.log('111111111111111111111,', props.dataList)
   if (props.dataList.infoList) {
     let imgindex = props.dataList.infoList.filter(
-      (item) => item.attrType === '图层预览'
+      (item) => item.attrType === '是否可预览' && item.attrValue === '是'
     )[0]
     if (!imgindex) {
       flag.value = false
     } else {
-      img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+      img.value = imgindex.attrValue
     }
   }
   watch(
@@ -36,13 +43,12 @@
     (val) => {
       if (val) {
         let imgindex = props.dataList.infoList.filter(
-          (item) => item.attrType === '图层预览'
+          (item) => item.attrType === '是否可预览' && item.attrValue === '是'
         )[0]
         if (!imgindex) {
           flag.value = false
         } else {
-          img.value =
-            'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+          img.value = imgindex.attrValue
         }
       }
     }
@@ -54,10 +60,6 @@
     .main {
       height: 5rem;
       border-radius: 0.1rem;
-      // background-image: url('~@/assets/detailsAll/sf_video_bg.png');
-      background-size: 100% 100%;
-      background-position: center;
-      background-repeat: no-repeat;
       margin-top: 0.4rem;
       display: flex;
       justify-content: center;
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
index 4e20e88e..ebb52843 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
@@ -30,11 +30,11 @@
       </div>
       <div class="bottom" v-if="props.dataList.id">
         <a-button type="primary" @click="toView()">
-          <!--<template #icon><form-outlined /></template>-->
+          <template #icon><form-outlined /></template>
           申请使用
         </a-button>
         <a-button type="primary" @click="addShoppingCart()">
-          <!--<template #icon><shopping-cart-outlined /></template>-->
+          <template #icon><shopping-cart-outlined /></template>
           加入购物车
         </a-button>
         <a-button type="primary" @click="goTOCollection()">收藏</a-button>
@@ -44,7 +44,7 @@
   </div>
 </template>
 <script setup>
-  import { ShoppingCartOutlined } from '@ant-design/icons-vue'
+  import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
   import { defineProps, ref, watch } from 'vue'
   import { scInsert } from '@/api/personalCenter'
   import { sgcInsert } from '@/api/home'
@@ -150,7 +150,7 @@
         .lable-father {
           position: absolute;
           min-width: 2.5rem;
-          right: -2.5rem;
+          right: -2.8rem;
           top: 0;
         }
         .label {
@@ -182,37 +182,21 @@
       .bottom {
         margin-top: 0.4rem;
         display: flex;
-
         .ant-btn {
           height: 0.5rem;
           margin-right: 0.2rem;
-          background: #ffffff;
+          background: #ff8b55;
           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;
-          background-image: url('~@/assets/detailsAll/layer-service/layer-apply-using.png');
-          background-repeat: no-repeat;
-          background-position: 24px center;
-          background-color: #ff8b55;
-          color: #fff;
-          padding-left: 26px;
         }
         .ant-btn:nth-of-type(2) {
           width: 2.2rem;
-          background-image: url('~@/assets/detailsAll/layer-service/layer-shopping-car.png');
-          background-repeat: no-repeat;
-          background-position: 24px center;
-          background-color: #ff8b55;
-          color: #fff;
-          padding-left: 26px;
         }
         .ant-btn:nth-of-type(3) {
           width: 1.45rem;
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
index 49e8bc44..748248d9 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
@@ -63,8 +63,9 @@
           name: '接口地址：',
         },
         linkValue: '',
+        csslnkValue: '',
         contact: '归属部门',
-        facilitator: { name: '归属部门：', value: '讯飞科大' },
+        facilitator: { name: '归属部门：', values: '讯飞科大' },
         people: { name: '部门联系人：', value: '李四' },
         phone: {
           name: '联系人电话：',
@@ -87,17 +88,17 @@
     } else {
       // eslint-disable-next-line vue/no-setup-props-destructure
       dataFrom.value.content[0].link.value = props.dataList.apiUrl
-      dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
+      dataFrom.value.content[0].facilitator.values = props.dataList.deptContacts
       console.log('dataList', props.dataList)
       props.dataList.infoList.map((item) => {
         if (item.attrType === '组件地址') {
           dataFrom.value.content[0].linkValue = item.attrValue || '--'
         } else if (item.attrType === '服务商') {
-          dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
+          dataFrom.value.content[0].facilitator.value = item.attrValue || '--'
         } else if (item.attrType === '服务商联系人') {
-          dataFrom.value.content[0].people2.value = item.attrValue || '--'
+          dataFrom.value.content[0].people.value = item.attrValue || '--'
         } else if (item.attrType === '服务商联系电话') {
-          dataFrom.value.content[0].phone2.value = item.attrValue || '--'
+          dataFrom.value.content[0].phone.value = item.attrValue || '--'
         }
       })
     }
@@ -117,12 +118,12 @@
             if (item.attrType === '组件地址') {
               dataFrom.value.content[0].linkValue = item.attrValue || '--'
             } else if (item.attrType === '服务商') {
-              dataFrom.value.content[0].facilitator2.value =
+              dataFrom.value.content[0].facilitator.value =
                 item.attrValue || '--'
             } else if (item.attrType === '服务商联系人') {
-              dataFrom.value.content[0].people2.value = item.attrValue || '--'
+              dataFrom.value.content[0].people.value = item.attrValue || '--'
             } else if (item.attrType === '服务商联系电话') {
-              dataFrom.value.content[0].phone2.value = item.attrValue || '--'
+              dataFrom.value.content[0].phone.value = item.attrValue || '--'
             }
           })
         }
diff --git a/front/src/views/home/details.vue b/front/src/views/home/details.vue
index 4504988d..ff5c7ec5 100644
--- a/front/src/views/home/details.vue
+++ b/front/src/views/home/details.vue
@@ -112,7 +112,7 @@
                       case '业务组件':
                         showView.value = 'business-details'
                         break
-                      case 'GIS图层':
+                      case '图层服务':
                         showView.value = 'layer-service'
                         break
                       default:
@@ -146,7 +146,7 @@
                     case '业务组件':
                       showView.value = 'business-details'
                       break
-                    case 'GIS图层':
+                    case '图层服务':
                       showView.value = 'layer-service'
                       break
                     default: