菜单及全屏

src/components/inputModules/common/TreeView.vue

@@ -248,10 +248,9 @@ export default {
   }
   .tree_box_item_active,
   .tree_box_leaf:hover {
-    color: #fff;
-    background: #ff9900;
+    color: #ff9900;
     > i {
-      color: #fff;
+      color: #ff9900;
     }
   }
   .tree_box_item_light {
@@ -260,6 +259,13 @@ export default {
       color: #ff9900;
     }
   }
+  .tree_box_item_active {
+    color: #fff !important;
+    background: #ff9900 !important;
+    > i {
+      color: #fff !important;
+    }
+  }
 }
 </style>
 <style lang="scss">

src/components/inputModules/common/drag.vue

@@ -623,10 +623,9 @@ export default {
     }
     .tree_box_item_active,
     .tree_box_leaf:hover {
-        color: #fff;
-        background: #ff9900;
+        color: #ff9900;
         > i {
-            color: #fff;
+            color: #ff9900;
         }
     }
     .tree_box_item_light {
@@ -635,6 +634,13 @@ export default {
             color: #ff9900;
         }
     }
+    .tree_box_item_active {
+        color: #fff !important;
+        background: #ff9900 !important;
+        > i {
+        color: #fff !important;
+        }
+    }
     .el-icon_box {
         width: 24px;
         text-align: center;

src/views/TextbookDetail.vue

@@ -453,7 +453,7 @@ export default {
     padding-bottom: 20px;
 
     .bookDetail {
-      width: 1200px;
+      width: 1240px;
       margin: 0 auto;
       background: #6e767c;
       border-radius: 8px;
@@ -489,7 +489,7 @@ export default {
       }
 
       .text {
-        width: 600px;
+        width: 900px;
         color: white;
         p {
           font-size: 16px;
@@ -563,7 +563,7 @@ export default {
       }
     }
     .more {
-      width: 1200px;
+      width: 1240px;
       margin: 0 auto;
       margin-top: 30px;
       .moreTitle {
@@ -654,7 +654,7 @@ export default {
       }
     }
     .cutDownOrimg {
-      width: 1200px;
+      width: 1240px;
       margin: 0 auto;
       margin-top: 24px;
       .sele {
@@ -683,7 +683,7 @@ export default {
     }
     .Catalogue {
       margin: 24px auto;
-      width: 1200px;
+      width: 1240px;
       height: 710px;
       background: #ffffff;
       display: flex;
@@ -717,7 +717,7 @@ export default {
     }
     .Resources {
       margin: 24px auto;
-      width: 1200px;
+      width: 1240px;
       height: 710px;
       background: #ffffff;
       display: flex;

src/views/bookView.vue

@@ -34,7 +34,7 @@
             "
             @click="chooseCourseware"
           />
-          <h2 class="title">{{ chapterName }}</h2>
+          <!-- <h2 class="title">{{ chapterName }}</h2> -->
           <!-- <el-switch
             v-if="!treeFlag"
             v-model="switchvalue"
@@ -143,6 +143,7 @@ export default {
         _this.fullTree = false;
         document.getElementById("content-tree").style.display = "none";
       }
+    //   scrollTo(0,0)
       // } else {
       //   this.chapterId = "";
       //   this.chapterName = "";

src/views/courseView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container GCLS-BOOK-Container">
     <template v-if="!type">
       <Header />
       <Nav nav-value="书籍预览" />
@@ -15,7 +15,7 @@
       </div>
     </template>
     <div class="content">
-      <div id="content-tree" class="content-tree">
+      <div id="content-tree" :class="[fullTree ? 'content-tree-full' : 'content-tree']">
         <TreeView
           ref="treeView"
           :book-id="bookId"
@@ -31,17 +31,22 @@
         <div v-if="chapterId" class="title-box">
           <img
             v-if="!treeFlag"
-            src="../assets/common/icon-treelist.png"
+            src="../assets/common/icon-view-back.png"
             @click="treeShow"
           />
+          <img
+            v-if="!treeFlag"
+            src="../assets/common/icon-treelist.png"
+            @click="chooseCourseware"
+          />
           <!-- <h2 class="title">{{ chapterName }}</h2> -->
-          <el-switch
+          <!-- <el-switch
             v-if="!treeFlag"
             v-model="switchvalue"
             active-color="#FF9900"
             active-text
             inactive-text="生词模式"
-          />
+          /> -->
         </div>
 
         <template v-if="category == 'OC' || !category">
@@ -109,6 +114,7 @@ export default {
       chapterId: "",
       chapterName: "",
       fullscreen: false, // 控制全屏
+      fullTree: false, // 全屏模式下树是否显示
       context: null,
       question: null, // 选择的模板题型
       queIndex: "",
@@ -175,6 +181,10 @@ export default {
       _this.chapterName = name;
       _this.isAnswerShow = false;
       _this.onGetData();
+      if (!_this.treeFlag) {
+        _this.fullTree = false;
+        document.getElementById("content-tree").style.display = "none";
+      }
     },
     // 点击全屏展示 隐藏tree
     fullScreen() {
@@ -183,6 +193,7 @@ export default {
     },
     treeShow() {
       this.treeFlag = true;
+      this.fullTree = false;
       document.getElementById("content-tree").style.display = "block";
     },
     // 获取预览数据
@@ -238,6 +249,15 @@ export default {
     handleBookUserAnswer(data) {
       console.log(data);
     },
+    // 悬浮树隐藏显示
+    chooseCourseware() {
+      this.fullTree = !this.fullTree;
+      if (this.fullTree) {
+        document.getElementById("content-tree").style.display = "block";
+      } else {
+        document.getElementById("content-tree").style.display = "none";
+      }
+    },
   },
 };
 </script>
@@ -273,6 +293,17 @@ export default {
       padding-top: 124px;
       background: #fff;
     }
+    .content-tree-full {
+      position: fixed;
+      top: 100px;
+      left: 152px;
+      max-height: 588px;
+      overflow: auto;
+      z-index: 999;
+      background: #fff;
+      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
+      border-radius: 4px;
+    }
     .inner {
       // border-left: 1px solid #d9d9d9;
       width: 1000px;
@@ -389,16 +420,6 @@ export default {
         }
       }
     }
-    .screen-full {
-      position: fixed;
-      right: 30px;
-      bottom: 30px;
-      width: 48px;
-      height: 48px;
-      background: rgba(0, 0, 0, 0.4) url("../assets/common/icon-screenFull.png")
-        center no-repeat;
-      background-size: 32px;
-    }
   }
   .answerShow {
     position: absolute;
@@ -427,6 +448,18 @@ export default {
 }
 </style>
 <style lang="scss">
+.GCLS-BOOK-Container{
+    .screen-full {
+        position: fixed;
+        right: 30px;
+        bottom: 30px;
+        width: 48px;
+        height: 48px;
+        background: rgba(0, 0, 0, 0.4) url("../assets/common/icon-screenFull.png")
+        center no-repeat;
+        background-size: 32px;
+    }
+}
 .title-box {
   .el-switch {
     position: absolute;