章节树定位

src/views/courseView.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="container GCLS-BOOK-Container">
-    <template v-if="!type">
+    <div v-if="!type" class="header-box">
       <Header />
       <Nav nav-value="书籍预览" />
-    </template>
-    <template v-else>
+    </div>
+    <div v-else class="header-box">
       <div class="bookname">
         <i
           style="cursor: pointer; margin-right: 5px"
@@ -13,8 +13,8 @@
         ></i>
         {{ name }}
       </div>
-    </template>
-    <div class="content">
+    </div>
+    <div class="content" :class="[type?'content-top':'']">
       <div
         id="content-tree"
         :class="[fullTree ? 'content-tree-full' : 'content-tree']"
@@ -346,6 +346,13 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.header-box{
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index:99;
+}
 .container {
   width: 100%;
   height: auto;
@@ -365,21 +372,32 @@ export default {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
+    height: 100vh;
+    overflow: auto;
+    padding-top: 124px;
+    &-top{
+        padding-top: 60px;
+        .title-box {
+            top: 66px !important;
+        }
+        .content-tree-full {
+            top: 100px !important;
+        }
+    }
     &-tree {
       width: 340px;
-      height: 100%;
+      height: 85vh;
       overflow: auto;
       padding: 20px 0px;
       border-right: 1px solid #d9d9d9;
+      background: #fff;
       position: fixed;
-      top: 0px;
       left: 0;
-      padding-top: 124px;
-      background: #fff;
+      z-index: 1;
     }
     .content-tree-full {
-      position: fixed;
-      top: 100px;
+      position: fixed !important;
+      top: 170px;
       left: 152px;
       max-height: 588px;
       overflow: auto;
@@ -389,7 +407,7 @@ export default {
       border-radius: 4px;
     }
     #content-tree {
-      position: relative;
+    //   position: relative;
     }
     .moveBtn-nnpe {
       position: absolute;
@@ -404,7 +422,7 @@ export default {
       width: 1000px;
       margin: 0 auto;
       flex: 1;
-
+      margin-left: 340px;
       box-sizing: border-box;
       padding: 20px;
       position: relative;
@@ -417,7 +435,10 @@ export default {
         align-items: center;
         margin-bottom: 12px;
         padding-right: 160px;
-        position: relative;
+        position: fixed;
+        top: 130px;
+        left: 64px;
+        z-index: 1;
         > img {
           width: 40px;
           margin-right: 16px;