技术文档更改

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

@@ -1,32 +1,20 @@
 <template>
   <div class="list-box">
-    <div
-      class="list-item"
-      v-for="(item, i) in newDataList"
-      :key="i"
-      @click.stop="showChildren(item)"
-    >
+    <div class="list-item" v-for="(item, i) in newDataList" :key="i" @click.stop="showChildren(item)">
       <a-tooltip placement="top" :title="item.title" arrow-point-at-center>
-        <div
-          :class="[
+        <div :class="[
           newClickData.title === item.title ? 'select' : '',
           level === 1 ? 'parent' : '',
           judgeLeaf(item) ? 'leaf' : '',
-          ]"
-          class="list-text"
-        >
+        ]" class="list-text">
           {{ item.title }}
           <DownOutlined v-show="!item.show && !judgeLeaf(item)" />
           <UpOutlined v-show="item.show && !judgeLeaf(item)" />
         </div>
       </a-tooltip>
       <div style="margin-left: 10px" v-if="!judgeLeaf(item) && item.show">
-        <abilityDocTree
-          :dataList="item.children"
-          @tree-click="handleTreeItem"
-          :clickData="newClickData"
-          :level="newLevel + 1"
-        ></abilityDocTree>
+        <abilityDocTree :dataList="item.children" @tree-click="handleTreeItem" :clickData="newClickData"
+          :level="newLevel + 1"></abilityDocTree>
       </div>
     </div>
   </div>

front/src/views/instructionManual/index.vue

@@ -3,13 +3,18 @@
   <div class="menu-container">
     <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="img" :class="data.className"></div>
-          {{ data.name }}
+        <div class="first-title-text doc" :style="{ color: '技术文档' === titleData.name ? '#0058e1' : '' }"
+          @click="changeName({ name: '技术文档' })">
+          技术文档
         </div>
-        <abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
+        <abilityDocTree style="max-height:400px;overflow-y:auto" :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
       </div>
+
+      <div class="first-title-text new-guide-box" :style="{ color: '新手指引' === titleData.name ? '#0058e1' : '' }"
+        @click="changeName({ name: '新手指引' })">
+        <div class="guide-text">新手指引</div>
+      </div>
+
       <!-- 技术文档 -->
       <div class="right" v-if="titleData.name !== '新手指引'">
         <div style="height: 100%">
@@ -146,6 +151,10 @@ onMounted(() => {
   }
 }
 
+.doc {
+  font-weight: bold;
+}
+
 .menu-container {
   width: 100%;
   padding-top: 0.74rem;
@@ -163,22 +172,45 @@ onMounted(() => {
 
 .left {
   width: 200px;
-  padding: 20px;
-  margin-right: 20px;
-  background: rgba(244, 245, 248, 1);
-  overflow-y: scroll;
+  padding-left: 10px;
+  padding-top: 10px;
+  background: #f4f5f8;
   position: absolute;
-  top: 200px;
+  top: 300px;
   left: 85px;
+  max-height: 400px;
+}
+
+.new-guide-box {
+  position: absolute;
+  top: 300px;
+  right: 205px;
+  width: 74px;
+  height: 136px;
+  background: url('~@/assets/menu/new-bg.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding-bottom: 0;
+}
+
+.guide-text {
+  width: 25px;
+  text-align: center;
+  word-wrap: break-word;
+  font-size: 20px;
+  color: #0058e1;
 }
 
 .right {
-  width: 1400px;
+  width: 1300px;
   height: calc(100% - 20px);
   position: absolute;
-  top: 10px;
-  left: 300px;
   min-height: 600px;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .sidebar {
@@ -196,11 +228,6 @@ onMounted(() => {
   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%;