diff --git a/front/src/assets/capacitySquare/algorithm-photo.jpg b/front/src/assets/capacitySquare/algorithm-photo.jpg
new file mode 100644
index 00000000..f805185d
Binary files /dev/null and b/front/src/assets/capacitySquare/algorithm-photo.jpg differ
diff --git a/front/src/assets/capacitySquare/algorithm-photo2.jpg b/front/src/assets/capacitySquare/algorithm-photo2.jpg
new file mode 100644
index 00000000..1446ca86
Binary files /dev/null and b/front/src/assets/capacitySquare/algorithm-photo2.jpg differ
diff --git a/front/src/assets/capacitySquare/algorithm-title-bg.png b/front/src/assets/capacitySquare/algorithm-title-bg.png
new file mode 100644
index 00000000..47760e80
Binary files /dev/null and b/front/src/assets/capacitySquare/algorithm-title-bg.png differ
diff --git a/front/src/views/capacitySquare/components/algorithm.vue b/front/src/views/capacitySquare/components/algorithm.vue
index 4d0ebf76..35b6e2d0 100644
--- a/front/src/views/capacitySquare/components/algorithm.vue
+++ b/front/src/views/capacitySquare/components/algorithm.vue
@@ -7,7 +7,17 @@
         :key="`algorithm-${index}`"
         class="algorithm-card"
       >
-        <div class="algorithm-card-title">{{ item.name }}</div>
+        <a-image
+          :src="algorithmCardPhoto(item.infoList)"
+          :width="525"
+          :height="275"
+          :fallback="imgSrc"
+        ></a-image>
+
+        <a-tooltip>
+          <template #title>{{ item.name }}</template>
+          <div class="algorithm-card-title">{{ item.name }}</div>
+        </a-tooltip>
       </div>
     </div>
   </div>
@@ -26,31 +36,51 @@
     pageSize: 9,
     type: '组件服务',
   }
+  const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
+  const dataLength = ref(true)
   const isNoMore = ref(false)
+  let url = ref('')
   const pageWithAttrsFunction = () => {
     pageWithAttrs(params).then((res) => {
       dataList.value = res.data.data.records
+      if (res.data.data.records.length < 9) {
+        dataLength.value = false
+      }
     })
   }
   pageWithAttrsFunction()
-  onMounted(() => {
-    const algorithmclass = document.querySelector('.algorithm-class')
-    algorithmclass.addEventListener('scroll', (e) => {
-      var scrollTop = e.currentTarget.scrollTop
-      var windowHeight = e.currentTarget.clientHeight
-      var scrollHeight = e.currentTarget.scrollHeight
-      console.log(scrollTop, windowHeight, scrollHeight, '123')
-      if (scrollTop + windowHeight == scrollHeight) {
-        // 当前滚动条已经触底
-        isNoMore.value = true
-        params.pageNum++
-        pageWithAttrs(params).then((res) => {
-          dataList.value.push(...res.data.data.records)
-        })
-      } else {
-        isNoMore.value = false
+  //图片显示
+  const algorithmCardPhoto = (List) => {
+    List.map((item) => {
+      if (item.attrType === '图层缩略图') {
+        url.value = item.attrValue
       }
     })
+    return url.value
+  }
+  onMounted(() => {
+    const algorithmclass = document.querySelector('.algorithm-class')
+    if (dataLength.value) {
+      algorithmclass.addEventListener('scroll', (e) => {
+        var scrollTop = e.currentTarget.scrollTop
+        var windowHeight = e.currentTarget.clientHeight
+        var scrollHeight = e.currentTarget.scrollHeight
+        console.log(scrollTop, windowHeight, scrollHeight, '123')
+        if (scrollTop + windowHeight == scrollHeight) {
+          // 当前滚动条已经触底
+          isNoMore.value = true
+          params.pageNum++
+          pageWithAttrs(params).then((res) => {
+            dataList.value.push(...res.data.data.records)
+            if (res.data.data.records.length < 9) {
+              dataLength.value = false
+            }
+          })
+        } else {
+          isNoMore.value = false
+        }
+      })
+    }
   })
 </script>
 
@@ -71,12 +101,36 @@
         margin-bottom: 0.3rem;
         margin-right: 0.65rem;
         position: relative;
+        :deep(.ant-image) {
+          img {
+            height: 2.75rem;
+            width: 5.25rem;
+          }
+        }
+        .algorithm-card-photo {
+          height: 100%;
+          width: 100%;
+          background: url('~@/assets/capacitySquare/algorithm-photo.jpg')
+            no-repeat;
+          background-size: 100%;
+        }
         .algorithm-card-title {
           position: absolute;
           height: 0.6rem;
           width: 100%;
+          line-height: 0.6rem;
           color: #ffffff;
           font-size: 0.22rem;
+          font-family: alibaba;
+          bottom: 0;
+          padding-left: 0.22rem;
+          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
+            no-repeat;
+          background-size: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          cursor: pointer;
         }
       }
     }
diff --git a/front/src/views/capacitySquare/components/layer.vue b/front/src/views/capacitySquare/components/layer.vue
index e69de29b..67d4d626 100644
--- a/front/src/views/capacitySquare/components/layer.vue
+++ b/front/src/views/capacitySquare/components/layer.vue
@@ -0,0 +1,151 @@
+<!-- 图层服务 -->
+<template>
+  <div class="algorithm">
+    <div class="algorithm-class">
+      <div
+        v-for="(item, index) in dataList"
+        :key="`algorithm-${index}`"
+        class="algorithm-card"
+      >
+        <a-image
+          :src="algorithmCardPhoto(item.infoList)"
+          :width="525"
+          :height="275"
+          :fallback="imgSrc"
+        ></a-image>
+
+        <a-tooltip>
+          <template #title>{{ item.name }}</template>
+          <div class="algorithm-card-title">{{ item.name }}</div>
+        </a-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { pageWithAttrs } from '@/api/abilityStatistics'
+  import { ref, onMounted } from 'vue'
+  const dataList = ref([])
+  const params = {
+    deptIds: [],
+    districtId: '',
+    infoList: [{ attrType: '组件类型', attrValue: '图层服务' }],
+    orderField: 'visits',
+    orderType: 'DESC',
+    pageNum: 1,
+    pageSize: 9,
+    type: '组件服务',
+  }
+  const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo2.jpg'))
+  const dataLength = ref(true)
+  const isNoMore = ref(false)
+  let url = ref('')
+  const pageWithAttrsFunction = () => {
+    pageWithAttrs(params).then((res) => {
+      dataList.value = res.data.data.records
+      if (res.data.data.records.length < 9) {
+        dataLength.value = false
+      }
+    })
+  }
+  pageWithAttrsFunction()
+  //图片显示
+  const algorithmCardPhoto = (List) => {
+    List.map((item) => {
+      if (item.attrType === '图层缩略图') {
+        url.value = item.attrValue
+      }
+    })
+    return url.value
+  }
+  onMounted(() => {
+    const algorithmclass = document.querySelector('.algorithm-class')
+    if (dataLength.value) {
+      algorithmclass.addEventListener('scroll', (e) => {
+        var scrollTop = e.currentTarget.scrollTop
+        var windowHeight = e.currentTarget.clientHeight
+        var scrollHeight = e.currentTarget.scrollHeight
+        console.log(scrollTop, windowHeight, scrollHeight, '123')
+        if (scrollTop + windowHeight == scrollHeight) {
+          // 当前滚动条已经触底
+          isNoMore.value = true
+          params.pageNum++
+          pageWithAttrs(params).then((res) => {
+            dataList.value.push(...res.data.data.records)
+            if (res.data.data.records.length < 9) {
+              dataLength.value = false
+            }
+          })
+        } else {
+          isNoMore.value = false
+        }
+      })
+    }
+  })
+</script>
+
+<style lang="less" scoped>
+  .algorithm {
+    .algorithm-class {
+      display: grid;
+      grid-template-columns: repeat(3, 33%);
+      height: 8.8rem;
+      overflow: auto;
+      margin-left: 1.15rem;
+      margin-right: 0.15rem;
+      .algorithm-card {
+        height: 2.75rem;
+        width: 5.25rem;
+        background: url('~@/assets/capacitySquare/algorithm-bg.png') no-repeat;
+        background-size: 100%;
+        margin-bottom: 0.3rem;
+        margin-right: 0.65rem;
+        position: relative;
+        :deep(.ant-image) {
+          img {
+            height: 2.75rem;
+            width: 5.25rem;
+          }
+        }
+        .algorithm-card-photo {
+          height: 100%;
+          width: 100%;
+          background: url('~@/assets/capacitySquare/algorithm-photo.jpg')
+            no-repeat;
+          background-size: 100%;
+        }
+        .algorithm-card-title {
+          position: absolute;
+          height: 0.6rem;
+          width: 100%;
+          line-height: 0.6rem;
+          color: #ffffff;
+          font-size: 0.22rem;
+          font-family: alibaba;
+          bottom: 0;
+          padding-left: 0.22rem;
+          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
+            no-repeat;
+          background-size: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          cursor: pointer;
+        }
+      }
+    }
+    .algorithm-class::-webkit-scrollbar-track-piece {
+      background: #a5bcdb;
+      border-radius: 0.08rem;
+    }
+    .algorithm-class::-webkit-scrollbar-thumb {
+      height: 3.2rem;
+      background: linear-gradient(to bottom, #47d7f5, #3dc6e3);
+    }
+    .algorithm-class::-webkit-scrollbar {
+      height: 8.8rem;
+      width: 0.08rem;
+      border-radius: 0.08rem;
+    }
+  }
+</style>