Merge branch 'hi-ucs-dev' of http://192.168.124.50:3000/wuhongjian/hi-ucs into hi-ucs-dev

# Conflicts:
#	front/src/views/instructionManual/components/menuBook.vue

front/src/views/instructionManual/components/menuBook.vue

@@ -9,7 +9,10 @@
         </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="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 }}
@@ -33,6 +36,23 @@
         ></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>
@@ -45,10 +65,12 @@
   const seviceList = ref([
     {
       name: '组件服务',
+      img: require('@/assets/menu/service-component.png'),
       list: ['智能算法', '图层服务', '开发组件', '业务组件'],
     },
     {
       name: '应用资源',
+      img: require('@/assets/menu/service-application.png'),
       list: [
         '办公系统',
         '业务系统',
@@ -59,11 +81,15 @@
       ],
     },
     {
-      name: '组件服务',
+      name: '基础设施',
+      img: require('@/assets/menu/service-infrastructure.png'),
+
       list: ['视频资源', '云资源', '感知资源'],
     },
     {
-      name: '组件服务',
+      name: '数据资源',
+      img: require('@/assets/menu/service-data.png'),
+
       list: ['政务信息资源'],
     },
   ])
@@ -99,7 +125,7 @@
 <style lang="less" scoped>
   .menu-box {
     width: 1920px;
-    padding-bottom: 40px;
+    // padding-bottom: 40px;
   }
 
   .title {
@@ -161,6 +187,28 @@
       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 {
     width: 1920px;
@@ -207,7 +255,7 @@
       height: 330px;
       background: rgba(23, 85, 177, 0.43);
       border: 1px solid #74a9f8;
-      border-radius: 2px;
+      border-radius: 10px;
       margin: 0 10px;
       cursor: pointer;
 
@@ -231,9 +279,9 @@
         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);
+        // border: 1px solid rgba(255, 255, 255, 0.4);
+        // border-radius: 6px;
+        // background: rgba(255, 255, 255, 0.2);
         margin: 0 16px 20px 16px;
       }
     }

front/src/views/instructionManual/index.vue

@@ -4,38 +4,55 @@
     <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([
+  const titleList = ref([
     {
       name: '新手指引',
       className: 'newGuide',
@@ -44,21 +61,21 @@ const titleList = ref([
       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 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) => {
+  const treeClick = (item) => {
     clickData.value = item
     console.log('clickData------------>', item)
     titleData.value = titleList.value[1]
-}
+  }
 
-const getTreeData = () => {
+  const getTreeData = () => {
     getDevelopDocTree({})
       .then((res) => {
         console.log('res------文档树------>', res)
@@ -71,9 +88,9 @@ const getTreeData = () => {
       .catch((err) => {
         message.error(err)
       })
-}
+  }
 
-const changeName = (item) => {
+  const changeName = (item) => {
     titleData.value = item
     if (item.name == '新手指引') {
       clickData.value = {}
@@ -98,9 +115,9 @@ const changeName = (item) => {
         getFirstData(treeArrayCopy.value[0] || {})
       }
     }
-}
+  }
 
-const formData = (children = [], dataItem) => {
+  const formData = (children = [], dataItem) => {
     children.map((item, index) => {
       let _obj = Object.assign({}, item, {
         title: item.title,
@@ -116,28 +133,28 @@ const formData = (children = [], dataItem) => {
       }
       dataItem.children.push(_obj)
     })
-}
+  }
 
-const getFirstData = (firstObj = {}) => {
+  const getFirstData = (firstObj = {}) => {
     if (firstObj && firstObj.children && firstObj.children.length > 0) {
       getFirstData(firstObj.children[0])
     } else {
       clickData.value = firstObj
     }
-}
+  }
 
-onMounted(() => {
+  onMounted(() => {
     getTreeData()
-})
+  })
 </script>
 
 <style scoped lang="less">
-.menu-box {
+  .menu-box {
     // overflow: hidden;
     height: 100%;
-}
+  }
 
-.first-title-text {
+  .first-title-text {
     cursor: pointer;
     font-size: 18px;
     color: #333;
@@ -148,14 +165,14 @@ onMounted(() => {
     &:hover {
       color: #0058e1;
     }
-}
+  }
 
-.menu-container {
+  .menu-container {
     width: 100%;
     padding-top: 0.74rem;
-}
+  }
 
-.content-menu {
+  .content-menu {
     width: 1800px;
     display: flex;
     justify-content: flex-start;
@@ -167,9 +184,10 @@ onMounted(() => {
     // transform: translateX(-50%);
     // top: 0.6rem;
     // top: 0;
-}
+  }
 
-.left {
+  .left {
+    z-index: 10;
     width: 200px;
     padding: 20px;
     margin-right: 20px;
@@ -178,53 +196,72 @@ onMounted(() => {
     position: fixed;
     top: 200px;
     left: 90px;
-}
+  }
 
-.right {
+  .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;
+    }
+  }
 
-.sidebar {
+  .sidebar {
     right: 0 !important;
-}
+  }
 
-.content {
+  .content {
     right: 16rem !important;
     left: 0 !important;
-}
+  }
 
-.img {
+  .img {
     height: 20px;
     width: 20px;
     margin-right: 8px;
-}
+  }
 
-.doc {
+  .doc {
     background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
     background-size: 100%;
-}
+  }
 
-.newGuide {
+  .newGuide {
     background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
     background-size: 100%;
-}
+  }
 
-.new-menu-box {
+  .new-menu-box {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-}
+  }
 
-.rela {
+  .rela {
     width: 100%;
     height: 100%;
     position: relative;
-}
-
+  }
 </style>