diff --git a/front/src/assets/menu/imgBG-long.png b/front/src/assets/menu/imgBG-long.png
new file mode 100644
index 00000000..95974faa
Binary files /dev/null and b/front/src/assets/menu/imgBG-long.png differ
diff --git a/front/src/assets/menu/imgBG.png b/front/src/assets/menu/imgBG.png
new file mode 100644
index 00000000..95b9da2a
Binary files /dev/null and b/front/src/assets/menu/imgBG.png differ
diff --git a/front/src/views/instructionManual/components/menuBook.vue b/front/src/views/instructionManual/components/menuBook.vue
index c79f13c6..34183224 100644
--- a/front/src/views/instructionManual/components/menuBook.vue
+++ b/front/src/views/instructionManual/components/menuBook.vue
@@ -14,7 +14,15 @@
               {{ item.name }}
             </div>
             <div class="name-box">
-              <div class="item-v" v-for="(v, j) in item.list" :key="j">
+              <div
+                class="item-v"
+                v-for="(v, j) in item.list"
+                :key="j"
+                :style="{
+                  'background-image': `url(${item.imgBG || ''})`,
+                  width: `${item.width || ''}`,
+                }"
+              >
                 {{ v }}
               </div>
             </div>
@@ -34,7 +42,9 @@
           :class="item.className"
           :style="{ 'background-image': `url(${item.bgImg || ''})` }"
         ></div>
-        <div v-if="item.btnText" class="btn">{{ item.btnText }} >></div>
+        <div v-if="item.btnText" class="btn" @click="toWhere(item.name)">
+          {{ item.btnText }} >>
+        </div>
       </div>
       <!-- 联系我们 -->
       <div class="img-bg callus-box">
@@ -53,20 +63,76 @@
           </p>
         </div>
       </div>
+      <!-- 能力上架弹窗 -->
+      <a-modal
+        v-model:visible="visible"
+        @ok="handleOk"
+        class="shangjia-class"
+        @cancel="handlecancel"
+      >
+        <div class="ant-modal-title" id="vcDialogTitle1">
+          <div class="showBg"></div>
+          能力上架申请
+        </div>
+        <div class="ability-to-type">
+          <div class="title">能力类型选择</div>
+          <div class="ability-to-type-content">
+            <div
+              v-for="item in abilityToType"
+              :key="item"
+              @click="abilityToTypeFunction(item)"
+              :class="
+                abilityToTypeFunctionData == item ? 'ability-to-type-down' : ''
+              "
+            >
+              {{ item }}
+            </div>
+          </div>
+        </div>
+        <div
+          class="component-type"
+          v-if="abilityToTypeFunctionData == '组件服务'"
+        >
+          <div class="title">组件类型选择</div>
+          <div class="component-type-content">
+            <!-- <a-checkbox-group
+                v-model:value="value1"
+                name="checkboxgroup"
+                :options="componentType"
+              /> -->
+            <a-radio-group v-model:value="componentTypeValue">
+              <a-radio
+                @click="componentTypeValueFunction(item)"
+                v-for="item in componentType"
+                :key="item"
+                :value="item"
+              >
+                {{ item }}
+              </a-radio>
+            </a-radio-group>
+          </div>
+        </div>
+      </a-modal>
     </div>
   </div>
 </template>
 <script setup>
   import HomeHeader from '@/views/home/components/header'
   import HomeFooter from '@/views/newHome/components/Footer'
-  import { ref, onMounted } from 'vue'
+  import { ref, onMounted, watch } from 'vue'
   import TheOverallProcess from './TheOverallProcess.vue'
+  import { useRouter } from 'vue-router'
+  import { message } from 'ant-design-vue'
+
+  const router = useRouter()
 
   const seviceList = ref([
     {
       name: '组件服务',
       img: require('@/assets/menu/service-component.png'),
       list: ['智能算法', '图层服务', '开发组件', '业务组件'],
+      imgBG: require('../../../assets/menu/imgBG.png'),
+      width: '124px',
     },
     {
       name: '应用资源',
@@ -79,18 +145,24 @@
         '小程序',
         '公众号',
       ],
+      imgBG: require('../../../assets/menu/imgBG.png'),
+      width: '124px',
     },
     {
       name: '基础设施',
       img: require('@/assets/menu/service-infrastructure.png'),
 
       list: ['视频资源', '云资源', '感知资源'],
+      imgBG: require('../../../assets/menu/imgBG.png'),
+      width: '124px',
     },
     {
       name: '数据资源',
       img: require('@/assets/menu/service-data.png'),
 
       list: ['政务信息资源'],
+      imgBG: require('../../../assets/menu/imgBG-long.png'),
+      width: '200px',
     },
   ])
 
@@ -120,8 +192,203 @@
       className: 'down-img',
     },
   ])
-</script>
+  // 能力上架弹窗
+  function handlecancel() {
+    abilityToTypeFunctionData.value = '组件服务'
+    componentTypeValue.value = ''
+  }
+  let abilityToTypeFunctionData = ref('组件服务')
+  function abilityToTypeFunction(item) {
+    abilityToTypeFunctionData.value = item
+  }
+  let abilityToType = ref(['组件服务', '应用资源'])
+  let componentType = ref([
+    '智能算法',
+    '图层服务',
+    '开发组件',
+    // '办公组件',
+    '业务组件',
+    // '其他',
+  ])
+  const visible = ref(false)
+  let componentTypeValueOld = ref('')
+  function componentTypeValueFunction(item) {
+    if (componentTypeValueOld.value != item) {
+      componentTypeValue.value = item
+      componentTypeValueOld.value = item
+    } else {
+      componentTypeValue.value = ''
+    }
+  }
+  let componentTypeValue = ref('')
+  const handleOk = (e) => {
+    let snum = ref({})
+    if (abilityToTypeFunctionData.value == '组件服务') {
+      if (!componentTypeValue.value || componentTypeValue.value == '') {
+        message.error('请选择组件类型！')
+        return
+      } else if (
+        componentTypeValue.value === '智能算法' ||
+        componentTypeValue.value === '开发组件' ||
+        componentTypeValue.value === '业务组件' ||
+        componentTypeValue.value === '图层服务'
+      ) {
+        snum.value = {
+          abilityToType: abilityToTypeFunctionData.value,
+          componentTypeValue: componentTypeValue.value,
+        }
+      } else {
+        message.error('功能开发中！')
+        return
+      }
+    } else {
+      snum.value = {
+        abilityToType: abilityToTypeFunctionData.value,
+      }
+    }
+    const applypage = router.resolve({
+      path: '/nenglishangjia', // 跳转的页面路由
+      query: snum.value,
+    })
+    window.open(applypage.href, '_blank')
+    visible.value = false
+    abilityToTypeFunctionData.value = '组件服务'
+    componentTypeValue.value = ''
+    console.log(e)
+  }
 
+  // 跳转
+  const toWhere = (data) => {
+    console.log(data, 'wwwwwww')
+    if (data === '能力上架') {
+      visible.value = true
+    } else if (data === '能力申请') {
+      const newpage = router.resolve({
+        path: '/addApplication', // 跳转的页面路由
+      })
+      window.open(newpage.href, '_blank')
+    } else if (data === '需求发布') {
+      const newpage = router.resolve({
+        path: '/DetailsPageconetent',
+        query: {
+          select: '组件服务',
+        },
+      })
+      window.location.href = newpage.href
+    } else if (data === '资源下架') {
+      window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
+      const newpage = router.resolve({
+        path: '/personalCenter',
+      })
+      window.location.href = newpage.href
+    }
+  }
+  watch(abilityToTypeFunctionData, () => {
+    componentTypeValue.value = ''
+  })
+</script>
+<style lang="less">
+  .shangjia-class {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    margin-left: -2.6rem;
+    margin-top: -1.44rem;
+    font-size: 0.14rem;
+    font-weight: 500;
+
+    .ant-radio-inner {
+      height: 0.16rem;
+      width: 0.16rem;
+    }
+    .ant-radio-inner::after {
+      background-color: unset;
+      background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
+      background-size: cover;
+      background-position: center;
+    }
+    .ant-modal-content {
+      border-radius: 0.1rem;
+      .ability-to-type,
+      .component-type {
+        display: flex;
+        margin-top: 0.2rem;
+        .title {
+          white-space: nowrap;
+          margin-right: 0.2rem;
+          display: flex;
+          align-items: center;
+          height: 0.26rem;
+        }
+        .component-type-content {
+          width: 100%;
+          height: unset;
+          border: unset;
+          background: unset;
+          .ant-radio-group {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            grid-gap: 0.15rem;
+          }
+        }
+      }
+
+      .ability-to-type {
+        .ability-to-type-content {
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr;
+          height: unset;
+          border: unset;
+          background: unset;
+          div {
+            margin-right: 0.15rem;
+            cursor: pointer;
+            font-size: 0.14rem;
+            width: 0.9rem;
+            height: 0.26rem;
+            border-radius: 0.13rem;
+            color: #333333;
+            background: #f5f5f5;
+            border: 0.01rem #cccccc solid;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-weight: 500;
+          }
+
+          .ability-to-type-down {
+            background: #0087ff;
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .ant-modal-title {
+      display: flex;
+      align-items: center;
+    }
+
+    .ant-modal-footer {
+      border: 0;
+      text-align: center;
+      padding-bottom: 0.2rem;
+      button {
+        margin-right: 0.2rem;
+        border-radius: 0.08rem;
+      }
+    }
+
+    .showBg {
+      height: 0.24rem;
+      width: 0.24rem;
+      background: url('~@/assets/home/shenqing.png') no-repeat;
+      background-size: cover;
+      background-position: center;
+      margin-right: 0.1rem;
+    }
+  }
+</style>
 <style lang="less" scoped>
   .menu-box {
     width: 1920px;
@@ -252,7 +519,7 @@
     .list-item {
       padding: 10px 20px;
       width: 310px;
-      height: 330px;
+      height: 356px;
       background: rgba(23, 85, 177, 0.43);
       border: 1px solid #74a9f8;
       border-radius: 10px;
@@ -274,16 +541,21 @@
       }
 
       .item-v {
-        min-width: 100px;
+        width: 124px;
+        height: 74px;
+        line-height: 74px;
         color: #fff;
         font-size: 20px;
         text-align: center;
-        padding: 10px;
-        // border: 1px solid rgba(255, 255, 255, 0.4);
-        // border-radius: 6px;
-        // background: rgba(255, 255, 255, 0.2);
-        margin: 0 16px 20px 16px;
+        margin: 0 0 20px;
+        background-size: 100% 100%;
       }
+      .item-v:nth-child(2n) {
+        margin-left: 16px;
+      }
+      // .item-v:last-child {
+      //   width: 200px;
+      // }
     }
   }
 </style>
diff --git a/front/src/views/instructionManual/index.vue b/front/src/views/instructionManual/index.vue
index ccbc5966..0995a93f 100644
--- a/front/src/views/instructionManual/index.vue
+++ b/front/src/views/instructionManual/index.vue
@@ -207,6 +207,7 @@
     min-height: 600px;
   }
   .manual {
+    cursor: pointer;
     z-index: 10;
     width: 74px;
     height: 136px;