指导手册增加图标

front/src/views/instructionManual/index.vue

@@ -1,18 +1,19 @@
 <template>
-  <div class="father">
+  <div class="menu-box">
     <home-header></home-header>
-    <div id="container" class="content">
+    <div id="container" class="content-menu">
       <div class="left">
-        <div class="first-title-text" @click="showManual" :style="{ color: showManualFlag ? '#0058e1' : '' }">新手指引</div>
+        <div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
-        <div class="first-title-text" @click="showManual" :style="{ color: !showManualFlag ? '#0058e1' : '' }">技术文档
+          :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>
       </div>
       <div class="right">
-        <div v-if="showManualFlag">新手指引</div>
+        <div v-if="titleData.name === '新手指引'">新手指引</div>
-        <div v-else>
+        <div v-else style="height:100%">
-          <!-- 技术文档 -->
+          <iframe name="iframeName" width="1000" height="100%" id="iframeId" :frameborder="0"
-          <iframe name="iframeName" width="1000" height="800" id="iframeId" :frameborder="0"
             :src="clickData.doc"></iframe>
         </div>
       </div>
@@ -22,26 +23,31 @@
 <script setup>
 import HomeHeader from '@/views/home/components/header'
 import abilityDocTree from './components/abilityDocTree'
-import { selectOne } from '@/api/home'
 import { ref, reactive, onMounted, nextTick, watch } from 'vue'
-import { useStore } from 'vuex'
 import { Empty, message } from 'ant-design-vue'
 import { getDevelopDocTree } from '@/api/home'
 
-const showManualFlag = ref(false)
+const titleList = ref([
-const showManual = () => {
+  {
-  showManualFlag.value = !showManualFlag.value
+    name: '新手指引',
-}
+    className: 'newGuide'
-
+  },
+  {
+    name: '技术文档',
+    className: 'doc'
+  }
+])
+const titleData = ref(titleList.value[0])
 const clickData = ref({})
+let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
+const treeArray = ref([])
+
 const treeClick = (item) => {
-  showManualFlag.value = false;
   console.log('item---treeClick--------->', item);
   clickData.value = item;
+  titleData.value = titleList.value[1]
 }
-let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
 
-const treeArray = ref([])
 const getTreeData = () => {
   getDevelopDocTree({}).then((res) => {
     console.log('res------文档树------>', res);
@@ -54,80 +60,31 @@ const getTreeData = () => {
   });
 }
 
+const changeName = (item) => {
+  titleData.value = item
+}
+
 onMounted(() => {
   getTreeData()
-  // loadPage()
-
 })
 
-var x = document.getElementById("iframeId");
-console.log('x------------>', x);
 
 watch(
   () => clickData.value,
   (val) => {
     if (val) {
       console.log('val-watch---clickData-------->', val);
-
-      // clickData.value = val
-      loadPage()
     }
   },
   {
-    //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
-    //那么首次执行，val为默认值,preVal为undefined
-    // immediate: true,
-    //这个参数代表监听对象时，可以监听深度嵌套的对象属性
-    //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
     deep: true,
   }
 )
 
-
-// window.onload = () => loadPage()
-
-
-
-
-const loadPage = () => {
-  console.log('2222----onload-------->', 2222);
-  if (!clickData.value.doc) {
-    return;
-  }
-
-  // var _iframe = document.getElementById('iframeId').contentWindow.document.getElementsByTagName('aside')//iframe下的id
-  // console.log('_iframe------------>', _iframe);
-
-  var x = document.getElementById("iframeId");
-  console.log('x------------>', x);
-
-  if (x) {
-    var y = (x.contentWindow || x.contentDocument);
-    if (y.document) {
-      y = y.document;
-    }
-    let asideDom = y.body.getElementsByClassName('.aside') && y.body.getElementsByClassName('.aside')[0]
-    if (asideDom) {
-      asideDom.style.right = 0;
-    }
-    console.log('asideDom------------>', asideDom);
-
-    let contentDom = y.body.getElementsByClassName('.content') && y.body.getElementsByClassName('.content')[0];
-    console.log('contentDom------------>', contentDom);
-    if (contentDom) {
-      contentDom.style.left = 0
-      contentDom.style.right = '16rem'
-    }
-
-    //id和class获取方式有一点点区别
-    // y.getElementById('元素id').style.fontSize = '12px'
-  }
-}
-
 </script>
 
 <style scoped lang="less">
-.father {
+.menu-box {
   // overflow: hidden;
   height: 100%;
 }
@@ -137,18 +94,36 @@ const loadPage = () => {
   font-size: 18px;
   color: #333;
   padding-bottom: 10px;
+  display: flex;
+  align-items: center;
 
   &:hover {
     color: #0058e1;
   }
 }
 
-.content {
+.content-menu {
+  // width: 1240px;
+  // display: flex;
+  // justify-content: flex-start;
+  // margin: 0 auto;
+  // margin-top: 74px;
+  // box-sizing: border-box;
+  // position: relative;
+
   width: 1240px;
   display: flex;
   justify-content: flex-start;
   margin: 0 auto;
-  margin-top: 84px;
+  margin-top: 74px;
+  box-sizing: border-box;
+  /* height: calc(100vh - 306px); */
+  position: fixed;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  top: 0.6rem;
+  top: 0;
 }
 
 .left {
@@ -158,10 +133,18 @@ const loadPage = () => {
   margin-right: 20px;
   background: rgba(244, 245, 248, 0.8);
   overflow-y: auto;
+  position: absolute;
+  top: 10px;
+  left: 0;
 }
 
 .right {
   width: 880px;
+  height: calc(100% - 20px);
+
+  position: absolute;
+  top: 10px;
+  left: 260px;
 }
 
 .sidebar {
@@ -172,4 +155,76 @@ const loadPage = () => {
   right: 16rem !important;
   left: 0 !important;
 }
+
+.img {
+  height: 20px;
+  width: 20px;
+  margin-right: 8px;
+}
+
+.doc {
+  background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
+  background-size: 100%;
+}
+
+.newGuide {
+  background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
+  background-size: 100%;
+}
+
+#iframeId {
+  // ::-webkit-scrollbar {
+  //   width: 6px;
+  //   height: 6px;
+  //   background-color: rgb(255, 255, 255);
+  // }
+
+  // ::-webkit-scrollbar-thumb {
+  //   border-radius: 10px;
+  //   background-color: rgb(200, 204, 209);
+  // }
+
+  /* 设置滚动条的样式 */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    // width: 2px;
+    // height: 2px;
+    // height: 67px;
+  }
+
+  ::scrollbar {
+    width: 6px;
+    height: 6px;
+    // width: 2px;
+    // height: 2px;
+    // height: 67px;
+  }
+
+  /* 滚动槽 */
+  ::-webkit-scrollbar-track {
+    display: none;
+    // -webkit-box-shadow: inset 0 0 3px #b18933;
+    // border-radius: 1px;
+  }
+
+  ::scrollbar-track {
+    display: none;
+    // -webkit-box-shadow: inset 0 0 3px #98f165;
+    // border-radius: 1px;
+  }
+
+  /* 滚动条滑块 */
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: #006666;
+    -webkit-box-shadow: inset 0 0 1px #006666;
+  }
+
+  ::scrollbar-thumb {
+    border-radius: 10px;
+    background: #006666;
+    -webkit-box-shadow: inset 0 0 1px #006666;
+  }
+}
 </style>