开发文档

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

@@ -1,17 +1,225 @@
 <template>
     <div class="menu-box">
-        <home-header></home-header>
-        <div></div>
-        <home-footer></home-footer>
+        <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>
     </div>
 </template>
 <script setup>
 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 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 {
-    width: 100%;
+    width: 1920px;
+}
+
+.title {
+    margin-bottom: 20px;
+
+    .text {
+        padding: 20px 0;
+        font-size: 26px;
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    .line {
+        width: 50px;
+        height: 3px;
+        background: #0058e1;
+        margin: 0 auto
+    }
+
+    .line-white {
+        background: #fff;
+    }
+
+    .text-white {
+        color: #fff;
+    }
+
+}
+
+.btn {
+    width: 150px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    margin: 30px auto;
+    color: #0058e1;
+    border: 1px solid #0058e1;
+    border-radius: 2px;
+    font-size: 16px;
+    cursor: pointer;
+
+    &:hover {
+        background: #e5eefc;
+    }
+}
+
+
+.img-box {
+    margin-bottom: 50px;
+}
+
+.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;
+    }
+}
+
+.img-bg {
+    width: 1920px;
+    background-size: 100% 100%;
+}
+
+.process-img {
+    height: 855px;
+    background-image: url('../../../assets/menu/process.png');
+}
+
+.shelves-img {
+    height: 497px;
+    background-image: url('../../../assets/menu/shelves.png');
+}
+
+.apply-img {
+    height: 752px;
+    background-image: url('../../../assets/menu/apply.png');
+}
+
+.demand-img {
+    height: 525px;
+    background-image: url('../../../assets/menu/demand.png');
+}
+
+.down-img {
+    height: 544px;
+    background-image: url('../../../assets/menu/down.png');
+}
+
+.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 20px;
+        cursor: pointer;
+
+
+        .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;
+        }
+
+        .item-v {
+            width: 50%;
+            color: #fff;
+            font-size: 20px;
+            text-align: center;
+            padding: 10px 0;
+        }
+    }
 }
 </style>

front/src/views/instructionManual/index.vue

@@ -1,58 +1,41 @@
 <template>
-  <div class="menu-box">
   <home-header></home-header>
+  <div class="menu-container">
+    <div class="menu-box">
       <div id="container" class="content-menu">
-      <div class="rela">
         <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">
-          <div
-            class="new-menu-box"
-            style="height: 100%"
-            v-if="titleData.name === '新手指引'"
-          >
-            <!-- 新手指引 -->
-            <a-empty description="新手指引" />
-          </div>
-          <div v-else style="height: 100%">
-            <iframe
-              name="iframeName"
-              width="1000"
-              height="100%"
-              id="iframeId"
-              :frameborder="0"
-              :src="doc_base_url + clickData.doc"
-            ></iframe>
+        <!-- 技术文档 -->
+        <div class="right" v-if="titleData.name !== '新手指引'">
+          <div style="height: 100%">
+            <iframe name="iframeName" width="1000" height="100%" id="iframeId" :frameborder="0"
+              :src="doc_base_url + clickData.doc"></iframe>
           </div>
         </div>
       </div>
+      <menuBook v-if="titleData.name === '新手指引'"></menuBook>
     </div>
   </div>
+
+  <!-- <home-footer></home-footer> -->
 </template>
 <script setup>
-  import HomeHeader from '@/views/home/components/header'
-  import abilityDocTree from './components/abilityDocTree'
-  import { ref, onMounted } from 'vue'
-  import { message } from 'ant-design-vue'
-  import { getDevelopDocTree } from '@/api/home'
-  // 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',
@@ -61,21 +44,21 @@
     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)
@@ -88,9 +71,9 @@
     .catch((err) => {
       message.error(err)
     })
-  }
+}
 
-  const changeName = (item) => {
+const changeName = (item) => {
   titleData.value = item
   if (item.name == '新手指引') {
     clickData.value = {}
@@ -115,9 +98,9 @@
       getFirstData(treeArrayCopy.value[0] || {})
     }
   }
-  }
+}
 
-  const formData = (children = [], dataItem) => {
+const formData = (children = [], dataItem) => {
   children.map((item, index) => {
     let _obj = Object.assign({}, item, {
       title: item.title,
@@ -133,28 +116,28 @@
     }
     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;
@@ -165,14 +148,20 @@
   &:hover {
     color: #0058e1;
   }
-  }
+}
 
-  .content-menu {
-    width: 1240px;
+.menu-container {
+  width: 100%;
+  padding-top: 0.74rem;
+}
+
+.content-menu {
+  width: 1800px;
   display: flex;
   justify-content: flex-start;
   margin: 0 auto;
-    margin-top: 74px;
+  // margin-top: 74px;
+  // padding-top: 0.74rem;
   box-sizing: border-box;
   position: fixed;
   left: 50%;
@@ -180,64 +169,66 @@
   transform: translateX(-50%);
   top: 0.6rem;
   top: 0;
-  }
+}
 
-  .left {
-    width: 240px;
+.left {
+  width: 200px;
   padding: 20px;
-    height: 600px;
   margin-right: 20px;
-    background: rgba(244, 245, 248, 0.8);
+  background: rgba(244, 245, 248, 1);
   overflow-y: scroll;
-    position: absolute;
-    top: 10px;
-    left: 0;
-  }
+  position: fixed;
+  top: 200px;
+  left: 20px;
+}
 
-  .right {
-    width: 870px;
+.right {
+  width: 1300px;
   height: calc(100% - 20px);
-
   position: absolute;
   top: 10px;
   left: 260px;
-  }
+}
 
-  .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;
-  }
+}
+
+.content-menu {
+  min-height: 600px;
+}
 </style>