diff --git a/front/src/assets/menu/callus.png b/front/src/assets/menu/callus.png
new file mode 100644
index 00000000..c41e288a
Binary files /dev/null and b/front/src/assets/menu/callus.png differ
diff --git a/front/src/assets/menu/manual.png b/front/src/assets/menu/manual.png
new file mode 100644
index 00000000..6b3c5ef9
Binary files /dev/null and b/front/src/assets/menu/manual.png differ
diff --git a/front/src/assets/menu/service-application.png b/front/src/assets/menu/service-application.png
new file mode 100644
index 00000000..10de2b03
Binary files /dev/null and b/front/src/assets/menu/service-application.png differ
diff --git a/front/src/assets/menu/service-component.png b/front/src/assets/menu/service-component.png
new file mode 100644
index 00000000..2affd86b
Binary files /dev/null and b/front/src/assets/menu/service-component.png differ
diff --git a/front/src/assets/menu/service-data.png b/front/src/assets/menu/service-data.png
new file mode 100644
index 00000000..e6a8b8ad
Binary files /dev/null and b/front/src/assets/menu/service-data.png differ
diff --git a/front/src/assets/menu/service-infrastructure.png b/front/src/assets/menu/service-infrastructure.png
new file mode 100644
index 00000000..5e9dab0b
Binary files /dev/null and b/front/src/assets/menu/service-infrastructure.png differ
diff --git a/front/src/views/instructionManual/components/menuBook.vue b/front/src/views/instructionManual/components/menuBook.vue
index ce9ed800..2a7bea0b 100644
--- a/front/src/views/instructionManual/components/menuBook.vue
+++ b/front/src/views/instructionManual/components/menuBook.vue
@@ -1,125 +1,157 @@
 <template>
-    <div class="menu-box">
-        <div class="content-box">
-            <!-- 提供服务 -->
-            <div class="img-bg service-box">
-                <div class="title" style="margin-bottom: 20px">
-                    <div class="text text-white">提供服务</div>
-                    <div class="line line-white"></div>
-                </div>
-                <div class="list-box">
-                    <div class="list-item" v-for="(item, i) in seviceList" :key="i">
-                        <div class="item-name">{{ item.name }}</div>
-                        <div class="name-box">
-                            <div class="item-v" v-for="(v, j) in item.list" :key="j">{{ v }}</div>
-                        </div>
-
-                    </div>
-                </div>
-            </div>
-            <!-- imgList -->
-            <div class="img-box" v-for="(item, i) in imgList" :key="i">
-                <div class="title">
-                    <div class="text">{{ item.name }}</div>
-                    <div class="line"></div>
-                </div>
-                <div class="img-bg" :class="item.className" :style="{ 'background-image': `url(${item.bgImg || ''})` }">
-                </div>
-                <div v-if="item.btnText" class="btn">{{ item.btnText }} >></div>
-            </div>
+  <div class="menu-box">
+    <div class="content-box">
+      <!-- 提供服务 -->
+      <div class="img-bg service-box">
+        <div class="title" style="margin-bottom: 20px">
+          <div class="text text-white">提供服务</div>
+          <div class="line line-white"></div>
         </div>
+        <div class="list-box">
+          <div class="list-item" v-for="(item, i) in seviceList" :key="i">
+            <div class="item-name">
+              <img :src="item.img" />
+              {{ item.name }}
+            </div>
+            <div class="name-box">
+              <div class="item-v" v-for="(v, j) in item.list" :key="j">
+                {{ v }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- imgList -->
+      <div class="img-box" v-for="(item, i) in imgList" :key="i">
+        <div class="title">
+          <div class="text">{{ item.name }}</div>
+          <div class="line"></div>
+        </div>
+        <div
+          class="img-bg"
+          :class="item.className"
+          :style="{ 'background-image': `url(${item.bgImg || ''})` }"
+        ></div>
+        <div v-if="item.btnText" class="btn">{{ item.btnText }} >></div>
+      </div>
+      <!-- 联系我们 -->
+      <div class="img-bg callus-box">
+        <div class="title" style="margin-bottom: 20px">
+          <div class="text text-white">联系我们</div>
+          <div class="line line-white"></div>
+        </div>
+        <div class="list-box">
+          <p>
+            办公电话：
+            <span>0530-0000000</span>
+          </p>
+          <p>
+            手机号：
+            <span>0530-0000000</span>
+          </p>
+        </div>
+      </div>
     </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 HomeHeader from '@/views/home/components/header'
+  import HomeFooter from '@/views/newHome/components/Footer'
+  import { ref, onMounted } from 'vue'
 
-const seviceList = ref(
-    [
-        {
-            name: '组件服务',
-            list: ['智能算法', '图层服务', '开发组件', '业务组件'],
-        },
-        {
-            name: '应用资源',
-            list: ['办公系统', '业务系统', '门户网站', '大屏看板', '小程序', '公众号'],
-        },
-        {
-            name: '组件服务',
-            list: ['视频资源', '云资源', '感知资源'],
-        },
-        {
-            name: '组件服务',
-            list: ['政务信息资源'],
-        },
-    ]
-)
+  const seviceList = ref([
+    {
+      name: '组件服务',
+      img: require('@/assets/menu/service-component.png'),
+      list: ['智能算法', '图层服务', '开发组件', '业务组件'],
+    },
+    {
+      name: '应用资源',
+      img: require('@/assets/menu/service-application.png'),
+      list: [
+        '办公系统',
+        '业务系统',
+        '门户网站',
+        '大屏看板',
+        '小程序',
+        '公众号',
+      ],
+    },
+    {
+      name: '基础设施',
+      img: require('@/assets/menu/service-infrastructure.png'),
 
-const imgList = ref([
-    {
-        name: '能力上架',
-        bgImg: require('../../../assets/menu/shelves.png'),
-        btnText: '立即上架',
-        className: 'shelves-img'
+      list: ['视频资源', '云资源', '感知资源'],
     },
     {
-        name: '能力申请',
-        bgImg: require('../../../assets/menu/apply.png'),
-        btnText: '立即申请',
-        className: 'apply-img'
-    },
-    {
-        name: '需求发布',
-        bgImg: require('../../../assets/menu/demand.png'),
-        btnText: '立即发布',
-        className: 'demand-img'
-    },
-    {
-        name: '资源下架',
-        bgImg: require('../../../assets/menu/down.png'),
-        btnText: '立即下架',
-        className: 'down-img'
-    },
-])
+      name: '数据资源',
+      img: require('@/assets/menu/service-data.png'),
 
+      list: ['政务信息资源'],
+    },
+  ])
+
+  const imgList = ref([
+    {
+      name: '能力上架',
+      bgImg: require('../../../assets/menu/shelves.png'),
+      btnText: '立即上架',
+      className: 'shelves-img',
+    },
+    {
+      name: '能力申请',
+      bgImg: require('../../../assets/menu/apply.png'),
+      btnText: '立即申请',
+      className: 'apply-img',
+    },
+    {
+      name: '需求发布',
+      bgImg: require('../../../assets/menu/demand.png'),
+      btnText: '立即发布',
+      className: 'demand-img',
+    },
+    {
+      name: '资源下架',
+      bgImg: require('../../../assets/menu/down.png'),
+      btnText: '立即下架',
+      className: 'down-img',
+    },
+  ])
 </script>
 
-
 <style lang="less" scoped>
-.menu-box {
+  .menu-box {
     width: 1920px;
-    padding-bottom: 40px;
-}
+    // padding-bottom: 40px;
+  }
 
-.title {
+  .title {
     margin-bottom: 20px;
 
     .text {
-        padding: 20px 0;
-        font-size: 26px;
-        margin: 0 auto;
-        text-align: center;
+      padding: 20px 0;
+      font-size: 26px;
+      margin: 0 auto;
+      text-align: center;
     }
 
     .line {
-        width: 50px;
-        height: 3px;
-        background: #0058e1;
-        margin: 0 auto
+      width: 50px;
+      height: 3px;
+      background: #0058e1;
+      margin: 0 auto;
     }
 
     .line-white {
-        background: #fff;
+      background: #fff;
     }
 
     .text-white {
-        color: #fff;
+      color: #fff;
     }
+  }
 
-}
-
-.btn {
+  .btn {
     width: 150px;
     height: 50px;
     line-height: 50px;
@@ -132,103 +164,123 @@ const imgList = ref([
     cursor: pointer;
 
     &:hover {
-        background: #e5eefc;
+      background: #e5eefc;
     }
-}
+  }
 
-
-.img-box {
+  .img-box {
     margin-bottom: 50px;
-}
+  }
 
-.service-box {
+  .service-box {
     width: 1920px;
     height: 613px;
     background-size: 100% 100%;
     background-image: url('../../../assets/menu/service.png');
 
     .list-box {
-        width: 1560px;
-        height: 350px;
-        margin: 0 auto;
+      width: 1560px;
+      height: 350px;
+      margin: 0 auto;
     }
-}
+  }
+  .callus-box {
+    width: 1920px;
+    height: 214px;
+    background-size: 100% 100%;
+    background-image: url('../../../assets/menu/callus.png');
+    .list-box {
+      width: 1560px;
+      // height: 350px;
+      margin: 0 auto;
+      p {
+        font-size: 24px;
+        color: #ffffff;
+        font-weight: bold;
+        span {
+          font-size: 30px;
+        }
+      }
+      p:nth-child(1) {
+        margin-right: 100px;
+      }
+    }
+  }
 
-.img-bg {
+  .img-bg {
     width: 1920px;
     background-size: 100% 100%;
-}
+  }
 
-.process-img {
+  .process-img {
     height: 855px;
     background-image: url('../../../assets/menu/process.png');
-}
+  }
 
-.shelves-img {
+  .shelves-img {
     height: 497px;
     width: 1107px;
     margin: 0 auto;
     background-image: url('../../../assets/menu/shelves.png');
-}
+  }
 
-.apply-img {
+  .apply-img {
     height: 752px;
     background-image: url('../../../assets/menu/apply.png');
-}
+  }
 
-.demand-img {
+  .demand-img {
     height: 525px;
     width: 1300px;
     margin: 0 auto;
     background-image: url('../../../assets/menu/demand.png');
-}
+  }
 
-.down-img {
+  .down-img {
     height: 544px;
     background-image: url('../../../assets/menu/down.png');
-}
+  }
 
-.list-box {
+  .list-box {
     display: flex;
     align-items: center;
     justify-content: center;
 
     .list-item {
-        padding: 10px 20px;
-        width: 310px;
-        height: 330px;
-        background: rgba(23, 85, 177, 0.43);
-        border: 1px solid #74a9f8;
-        border-radius: 2px;
-        margin: 0 10px;
-        cursor: pointer;
+      padding: 10px 20px;
+      width: 310px;
+      height: 330px;
+      background: rgba(23, 85, 177, 0.43);
+      border: 1px solid #74a9f8;
+      border-radius: 10px;
+      margin: 0 10px;
+      cursor: pointer;
 
+      .item-name {
+        color: #fff;
+        font-size: 20px;
+        text-align: center;
+        padding: 20px 0 10px 0;
+      }
 
-        .item-name {
-            color: #fff;
-            font-size: 20px;
-            text-align: center;
-            padding: 20px 0 10px 0;
-        }
+      .name-box {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+      }
 
-        .name-box {
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            flex-wrap: wrap;
-        }
-
-        .item-v {
-            min-width: 100px;
-            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;
-        }
+      .item-v {
+        min-width: 100px;
+        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;
+      }
     }
-}
-</style>
\ No newline at end of file
+  }
+</style>
diff --git a/front/src/views/instructionManual/index.vue b/front/src/views/instructionManual/index.vue
index cb4c45b6..ccbc5966 100644
--- a/front/src/views/instructionManual/index.vue
+++ b/front/src/views/instructionManual/index.vue
@@ -4,227 +4,264 @@
     <div class="menu-box">
       <div id="container" class="content-menu">
         <div class="left">
-          <div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
-            :style="{ color: data.name === titleData.name ? '#0058e1' : '' }">
+          <div
+            class="first-title-text"
+            v-for="(data, i) in titleList"
+            :key="i"
+            @click="changeName(data)"
+            :style="{ color: data.name === titleData.name ? '#0058e1' : '' }"
+          >
             <div class="img" :class="data.className"></div>
             {{ data.name }}
           </div>
-          <abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
+          <abilityDocTree
+            :dataList="treeArray"
+            @treeClick="treeClick"
+            :clickData="clickData"
+          ></abilityDocTree>
         </div>
         <!-- 技术文档 -->
         <div class="right" v-if="titleData.name !== '新手指引'">
           <div style="height: 100%">
-            <iframe name="iframeName" width="1300" height="100%" id="iframeId" :frameborder="0"
-              :src="doc_base_url + clickData.doc"></iframe>
+            <iframe
+              name="iframeName"
+              width="1300"
+              height="100%"
+              id="iframeId"
+              :frameborder="0"
+              :src="doc_base_url + clickData.doc"
+            ></iframe>
           </div>
         </div>
+        <!-- 使用手册 -->
+        <div class="manual"><p>使用手册</p></div>
       </div>
       <menuBook v-if="titleData.name === '新手指引'"></menuBook>
     </div>
   </div>
 
-  <!-- <home-footer></home-footer> -->
+  <home-footer></home-footer>
 </template>
 <script setup>
-import HomeHeader from '@/views/home/components/header'
-import abilityDocTree from './components/abilityDocTree'
-import menuBook from './components/menuBook'
-import { ref, onMounted } from 'vue'
-import { message } from 'ant-design-vue'
-import { getDevelopDocTree } from '@/api/home'
-import HomeFooter from '@/views/newHome/components/Footer'
-// import flatten from '@turf/flatten'
+  import HomeHeader from '@/views/home/components/header'
+  import abilityDocTree from './components/abilityDocTree'
+  import menuBook from './components/menuBook'
+  import { ref, onMounted } from 'vue'
+  import { message } from 'ant-design-vue'
+  import { getDevelopDocTree } from '@/api/home'
+  import HomeFooter from '@/views/newHome/components/Footer'
+  // import flatten from '@turf/flatten'
 
-const titleList = ref([
-  {
-    name: '新手指引',
-    className: 'newGuide',
-  },
-  {
-    name: '技术文档',
-    className: 'doc',
-  },
-])
-const titleData = ref(titleList.value[0])
-const clickData = ref({})
-const treeArray = ref([])
-const treeArrayCopy = ref([])
-let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
-let doc_base_url = ref(window.SITE_CONFIG['frontUrl'])
+  const titleList = ref([
+    {
+      name: '新手指引',
+      className: 'newGuide',
+    },
+    {
+      name: '技术文档',
+      className: 'doc',
+    },
+  ])
+  const titleData = ref(titleList.value[0])
+  const clickData = ref({})
+  const treeArray = ref([])
+  const treeArrayCopy = ref([])
+  let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
+  let doc_base_url = ref(window.SITE_CONFIG['frontUrl'])
 
-const treeClick = (item) => {
-  clickData.value = item
-  console.log('clickData------------>', item)
-  titleData.value = titleList.value[1]
-}
-
-const getTreeData = () => {
-  getDevelopDocTree({})
-    .then((res) => {
-      console.log('res------文档树------>', res)
-      if (res.data.code !== 0) {
-        return message.error(res.data.msg)
-      }
-      treeArray.value = res.data.data || []
-      treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
-    })
-    .catch((err) => {
-      message.error(err)
-    })
-}
-
-const changeName = (item) => {
-  titleData.value = item
-  if (item.name == '新手指引') {
-    clickData.value = {}
+  const treeClick = (item) => {
+    clickData.value = item
+    console.log('clickData------------>', item)
+    titleData.value = titleList.value[1]
   }
-  if (item.name == '技术文档') {
-    if (!clickData.value.title) {
-      clickData.value = {}
-      treeArray.value = []
-      treeArrayCopy.value.map((val, i) => {
-        let obj = Object.assign({}, val, {
-          title: val.title,
-          show:
-            (i === 0 && val.children && val.children.length > 0) ||
-              typeList.includes(val.title)
-              ? true
-              : false,
-          children: [],
-        })
-        formData(val.children, obj)
-        treeArray.value.push(obj)
+
+  const getTreeData = () => {
+    getDevelopDocTree({})
+      .then((res) => {
+        console.log('res------文档树------>', res)
+        if (res.data.code !== 0) {
+          return message.error(res.data.msg)
+        }
+        treeArray.value = res.data.data || []
+        treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
       })
-      getFirstData(treeArrayCopy.value[0] || {})
+      .catch((err) => {
+        message.error(err)
+      })
+  }
+
+  const changeName = (item) => {
+    titleData.value = item
+    if (item.name == '新手指引') {
+      clickData.value = {}
+    }
+    if (item.name == '技术文档') {
+      if (!clickData.value.title) {
+        clickData.value = {}
+        treeArray.value = []
+        treeArrayCopy.value.map((val, i) => {
+          let obj = Object.assign({}, val, {
+            title: val.title,
+            show:
+              (i === 0 && val.children && val.children.length > 0) ||
+              typeList.includes(val.title)
+                ? true
+                : false,
+            children: [],
+          })
+          formData(val.children, obj)
+          treeArray.value.push(obj)
+        })
+        getFirstData(treeArrayCopy.value[0] || {})
+      }
     }
   }
-}
 
-const formData = (children = [], dataItem) => {
-  children.map((item, index) => {
-    let _obj = Object.assign({}, item, {
-      title: item.title,
-      show:
-        (index === 0 && item.children && item.children.length > 0) ||
+  const formData = (children = [], dataItem) => {
+    children.map((item, index) => {
+      let _obj = Object.assign({}, item, {
+        title: item.title,
+        show:
+          (index === 0 && item.children && item.children.length > 0) ||
           typeList.includes(item.title)
-          ? true
-          : false,
-      children: [],
+            ? true
+            : false,
+        children: [],
+      })
+      if (item.children && item.children.length > 0) {
+        formData(item.children, _obj)
+      }
+      dataItem.children.push(_obj)
     })
-    if (item.children && item.children.length > 0) {
-      formData(item.children, _obj)
-    }
-    dataItem.children.push(_obj)
-  })
-}
-
-const getFirstData = (firstObj = {}) => {
-  if (firstObj && firstObj.children && firstObj.children.length > 0) {
-    getFirstData(firstObj.children[0])
-  } else {
-    clickData.value = firstObj
   }
-}
 
-onMounted(() => {
-  getTreeData()
-})
+  const getFirstData = (firstObj = {}) => {
+    if (firstObj && firstObj.children && firstObj.children.length > 0) {
+      getFirstData(firstObj.children[0])
+    } else {
+      clickData.value = firstObj
+    }
+  }
+
+  onMounted(() => {
+    getTreeData()
+  })
 </script>
 
 <style scoped lang="less">
-.menu-box {
-  // overflow: hidden;
-  height: 100%;
-}
-
-.first-title-text {
-  cursor: pointer;
-  font-size: 18px;
-  color: #333;
-  padding-bottom: 10px;
-  display: flex;
-  align-items: center;
-
-  &:hover {
-    color: #0058e1;
+  .menu-box {
+    // overflow: hidden;
+    height: 100%;
   }
-}
 
-.menu-container {
-  width: 100%;
-  padding-top: 0.74rem;
-}
+  .first-title-text {
+    cursor: pointer;
+    font-size: 18px;
+    color: #333;
+    padding-bottom: 10px;
+    display: flex;
+    align-items: center;
 
-.content-menu {
-  width: 1800px;
-  display: flex;
-  justify-content: flex-start;
-  margin: 0 auto;
-  box-sizing: border-box;
-  // position: fixed;
-  // left: 50%;
-  // bottom: 0;
-  // transform: translateX(-50%);
-  // top: 0.6rem;
-  // top: 0;
-}
+    &:hover {
+      color: #0058e1;
+    }
+  }
 
-.left {
-  width: 200px;
-  padding: 20px;
-  margin-right: 20px;
-  background: rgba(244, 245, 248, 1);
-  overflow-y: scroll;
-  position: fixed;
-  top: 200px;
-  left: 90px;
-}
+  .menu-container {
+    width: 100%;
+    padding-top: 0.74rem;
+  }
 
-.right {
-  width: 1300px;
-  height: calc(100% - 20px);
-  position: absolute;
-  top: 10px;
-  left: 300px;
-  min-height: 600px;
-}
+  .content-menu {
+    width: 1800px;
+    display: flex;
+    justify-content: flex-start;
+    margin: 0 auto;
+    box-sizing: border-box;
+    // position: fixed;
+    // left: 50%;
+    // bottom: 0;
+    // transform: translateX(-50%);
+    // top: 0.6rem;
+    // top: 0;
+  }
 
-.sidebar {
-  right: 0 !important;
-}
+  .left {
+    z-index: 10;
+    width: 200px;
+    padding: 20px;
+    margin-right: 20px;
+    background: rgba(244, 245, 248, 1);
+    overflow-y: scroll;
+    position: fixed;
+    top: 200px;
+    left: 90px;
+  }
 
-.content {
-  right: 16rem !important;
-  left: 0 !important;
-}
+  .right {
+    width: 1300px;
+    height: calc(100% - 20px);
+    position: absolute;
+    top: 10px;
+    left: 300px;
+    min-height: 600px;
+  }
+  .manual {
+    z-index: 10;
+    width: 74px;
+    height: 136px;
+    position: fixed;
+    top: 200px;
+    right: 200px;
+    background-size: 100% 100%;
+    background-image: url('../../assets/menu/manual.png');
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: unset !important;
+    p {
+      color: #005be1;
+      font-size: 20px;
+      margin-bottom: 0;
+      width: 20px;
+    }
+  }
 
-.img {
-  height: 20px;
-  width: 20px;
-  margin-right: 8px;
-}
+  .sidebar {
+    right: 0 !important;
+  }
 
-.doc {
-  background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
-  background-size: 100%;
-}
+  .content {
+    right: 16rem !important;
+    left: 0 !important;
+  }
 
-.newGuide {
-  background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
-  background-size: 100%;
-}
+  .img {
+    height: 20px;
+    width: 20px;
+    margin-right: 8px;
+  }
 
-.new-menu-box {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  .doc {
+    background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
+    background-size: 100%;
+  }
 
-.rela {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
+  .newGuide {
+    background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
+    background-size: 100%;
+  }
 
+  .new-menu-box {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .rela {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
 </style>