课件全屏模式

src/views/courseView.vue

@@ -15,7 +15,10 @@
       </div>
     </template>
     <div class="content">
-      <div id="content-tree" :class="[fullTree ? 'content-tree-full' : 'content-tree']">
+      <div
+        id="content-tree"
+        :class="[fullTree ? 'content-tree-full' : 'content-tree']"
+      >
         <TreeView
           ref="treeView"
           :book-id="bookId"
@@ -24,7 +27,11 @@
           :currentTreeID="chapterId"
         />
       </div>
-      <div id="data-screen" class="inner" v-loading="loading">
+      <div
+        id="data-screen"
+        :class="['inner', fullscreen ? 'inner-full' : '']"
+        v-loading="loading"
+      >
         <!-- 显示答案按钮 -->
         <!-- <a v-if="chapterId" :class="['answerShow',isAnswerShow?'answerShowTrue':'']" @click="handleAnswerShow">显示答案</a> -->
         <!-- <a class="edit-btn" @click="handleEdit">编辑</a> -->
@@ -185,16 +192,18 @@ export default {
         _this.fullTree = false;
         document.getElementById("content-tree").style.display = "none";
       }
-      scrollTo(0,0)
+      scrollTo(0, 0);
     },
     // 点击全屏展示 隐藏tree
     fullScreen() {
       this.treeFlag = false;
+      this.fullscreen = true;
       document.getElementById("content-tree").style.display = "none";
     },
     treeShow() {
       this.treeFlag = true;
       this.fullTree = false;
+      this.fullscreen = false;
       document.getElementById("content-tree").style.display = "block";
     },
     // 获取预览数据
@@ -316,6 +325,9 @@ export default {
       padding: 20px;
       position: relative;
       background: #fff;
+      &.inner-full {
+        margin-left: 0;
+      }
       .title-box {
         display: flex;
         align-items: center;
@@ -449,17 +461,17 @@ 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;
-    }
+.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 {