From eefa5354eca89e9633f929640960aee9ce823a95 Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Thu, 14 Jul 2022 10:56:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8C=87=E5=AF=BC=E6=89=8B=E5=86=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/assets/capabilityCloud/doc.png      | Bin 0 -> 1239 bytes
 front/src/assets/capabilityCloud/newGuide.png | Bin 0 -> 1216 bytes
 front/src/views/instructionManual/index.vue   | 203 +++++++++++-------
 3 files changed, 129 insertions(+), 74 deletions(-)
 create mode 100644 front/src/assets/capabilityCloud/doc.png
 create mode 100644 front/src/assets/capabilityCloud/newGuide.png

diff --git a/front/src/assets/capabilityCloud/doc.png b/front/src/assets/capabilityCloud/doc.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf49ca67d533f9b69374276e87f40c6e5a71fa4a
GIT binary patch
literal 1239
zcmeAS@N?(olHy`uVBq!ia0vp^B0wz4!3HGVuAW-~q$EpRBT9nv(@M${i&7aJQ}UBi
z6+Ckj(^G>|6H_V+Po~;1FfglRhD4M^`1)8S=jZArg4F0$<Q4#RGcefLR}>^BXQ!4Z
zB&DWj=GiK}-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di
zNuokUZcbjYRfVk**jy_h8zii+qySb@l5ML5aa4qFfP!;=QL2Kuo}q5Cfq{X7xusr8
zVp3vqQj(5>k%5t+zJZCpp^2`6ft9hPm5GT06et0$D@sYT3UYCSS_b6VDrJ<E6j<r&
zmzS68l^g5j7p3bPT3TA_8yM*u8R-I5=oVMzl_XZ^<`pZ$OmImpPA<wUD9OyvQvjKm
zn3P{yVygsnD#Q=D1#n~YilN~I3^DzR!~%UoJp+)RU<!SG@hi>Eg{v+u2}(t{7puX=
zA(aKG`a!A1`K3k4z?e%@23b{L<y@4SSdw29lAoUg3&wzq{F40QjQj!xBO^Ui1&#2`
zyp;U%Vok6HUtcTFyyB9?yyR3*7h5Hu5qg=KDON@%F3x6#hE8rqE(V5%uFj557S5JV
zu0~FlCPpTP&W13(F8Rr&xv6<2Fuf@Vz0NrGf)Yb+0nlcb)S}F?)D*X({9FaFpRF=+
zyTuZxc~HG6xZUE2Q?EYIG5VmGMT%*d5HR_GnDB%P<iL}DY927X7XcG?i{v(7regH;
zba4!+xRu0n>X-ca0|yd#j{KMOVD@qN!`^Y7>7(Eb1#SWTgateq%p0XQ>Au%A`JlUN
z^M9cWAG#a<*q1PKGCC@3Q*)ZDBVa9%oM0*-&zz*rq!+_+<aejx2Ck0uCK2Y1%3_rf
zuO1wD_B7g|hV@h(%aQ2|-k2!NV?M&(aD%I3f3o2ZYn_`4%%v*PxeMF&F(m~m_^~}I
zcZgv-a?fFpc!%UgUsv-2If44tP3jCEofV$7e|qn9)FCeWK$?UZv+%?ljUI1iJFH<$
zjb~2st-0AQu!F~xXUR7?yTcoH3P@jY?o!E2GO|$I!28N5GwG9}q23pjtsFv2HWWN?
zHvb^j%66~yQjdYYG}A_rpm~3Ij>vZya7^R-uQc6Dfw`XPW39>2M;Sk-OqlN4aDyX!
z$s4AmaHGBT%(EMd7g#oTdWai2HFHmSKAnL@f+6j;-3{(OIdf1^<LT<>vd$@?2>`Yy
Boi_jg

literal 0
HcmV?d00001

diff --git a/front/src/assets/capabilityCloud/newGuide.png b/front/src/assets/capabilityCloud/newGuide.png
new file mode 100644
index 0000000000000000000000000000000000000000..1853f840399e45de389e178057ef970ec2bd996d
GIT binary patch
literal 1216
zcmeAS@N?(olHy`uVBq!ia0vp^LO?9S!3HE7rssMADajJoh?3y^w370~qErUQl>DSr
z1<%~X^wgl##FWaylc_cg49qH-ArU1JzCKpT`MG+DAT@dwxdlMo3=B5*6$OdO*{LN8
zNvY|XdA3ULckfqH$V{<S3ODsN@GWpo&B*kqDoPEm@(W3>%1*XSQL?vFu&J;D8jzb>
zlBiITo0C^;Rbi_HHrEQs1_|pcDS(xfWZNo192Makpx~Tel&WB^XQ-QOU|^tNZmE}&
zn3R~Dl%%6zWME{dZ(yQtXrgOiU}bD+Wn!WL1xi5cic-?7f?V97mH~OTN*N_31y=g{
z<>lpi<;HsXMd|v6mX?<K21fcuM!G;1y2X`wC5aWfdBw^w6I@b@lZ!G7N;32F6hI~>
zCgqow*eU^?3h_g30o>TUVrV!4LrlLSu|VHY&j92nm_lD){7Q3k;i`*Ef>IIg#cFVI
zNM%8)eo$(0erZuMFy_*fK~@!5ITxiSmgE<O<mczWf-xW?za+mnBfmhw$VksrK_fgf
zFD1XcSQD(l*VoE3uec;JFFDoI#a0PugkEN5ij}K@k%gm)p^2N3vzwuztFxoCn}MsL
zqnm+?xw(sxxj9U)OMY@`Zfaf$Om7N8uPIKwpu~_{0JPa9wJ5VJHN~wcKUV?lXRA!y
zZZX1X9#n4%ZnqfY)T<A4j6Nu4kzyJq1WZ04COqK+Iq;;Png>kpMZkppES>cg0|TRx
zr;B4q#jQ1$cY7Ui5IOeoWKM{P7^}Fq;LU5-(pV3=Z}=LtW|2~p|AM7cIk=iCGLPKy
ztK~d+NL=6`x6-B!VS(oV_~$elvP|9}`D5eBn<u9yo>Q3-+b`a0SS?`|+aqxN#bL&M
zf+A-o{0v;7c>TtkGFPKt#?N{akL~U+Y!0`7A$Zy1AXnRl)!zROX{i-X<CuSGL2v|T
zR-(x12xng3_l%rXevwbPwIU`-ci%hGqVaU0m)F^<uYG5CPPf<GdV;&_Guuw%ZH<+C
zr|G`fvA`fb{pne2iz`vGwh}r*CVk$ejsCe^7xVsGy8rKG|7&}EPTc-P>Gye?H#gZC
zG}P);eATsisP(?<$?e^jC(o5}-%%cWmP_j7kNQJ<FU%@(3kaK_X}TiJsUp<uw^*;s
h@>{IUxArsfFzB(G9qVzQZUib*JYD@<);T3K0RUiCr&$01

literal 0
HcmV?d00001

diff --git a/front/src/views/instructionManual/index.vue b/front/src/views/instructionManual/index.vue
index 5e2e9c6f..a26dd1f7 100644
--- a/front/src/views/instructionManual/index.vue
+++ b/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" @click="showManual" :style="{ color: !showManualFlag ? '#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>
       </div>
       <div class="right">
-        <div v-if="showManualFlag">新手指引</div>
-        <div v-else>
-          <!-- 技术文档 -->
-          <iframe name="iframeName" width="1000" height="800" id="iframeId" :frameborder="0"
+        <div v-if="titleData.name === '新手指引'">新手指引</div>
+        <div v-else style="height:100%">
+          <iframe name="iframeName" width="1000" height="100%" 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 showManual = () => {
-  showManualFlag.value = !showManualFlag.value
-}
-
+const titleList = ref([
+  {
+    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>