全屏修改

src/views/bookView.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="container">
     <div class="book-content-inner">
-      <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" :change-id="changeId" /> -->
       </div>
-      <div id="data-screen" class="inner">
+      <div id="data-screen" :class="['inner', fullscreen ? 'inner-full' : '']">
         <!-- 显示答案按钮 -->
         <!-- <a v-if="chapterId" :class="['answerShow',isAnswerShow?'answerShowTrue':'']" @click="handleAnswerShow">显示答案</a> -->
         <!-- <a class="edit-btn" @click="handleEdit">编辑</a> -->
@@ -13,12 +16,16 @@
             v-if="!treeFlag"
             src="../assets/common/icon-view-back.png"
             @click="treeShow"
-          >
+          />
           <img
             v-if="!treeFlag"
-            :src="fullTree?require('../assets/common/icon-treelist-gray.png'):require('../assets/common/icon-treelist.png')"
+            :src="
+              fullTree
+                ? require('../assets/common/icon-treelist-gray.png')
+                : require('../assets/common/icon-treelist.png')
+            "
             @click="chooseCourseware"
-          >
+          />
           <!-- <h2 class="title">{{ chapterName }}</h2> -->
           <!-- <el-switch
             v-if="!treeFlag"
@@ -43,7 +50,7 @@
         v-if="chapterId && treeFlag"
         class="screen-full"
         @click="fullScreen()"
-        />
+      />
     </div>
     <!-- <Preview :context="context" :queIndex="queIndex" /> -->
   </div>
@@ -51,125 +58,130 @@
 
 <script>
 // import TreeView from '@/components/inputModules/common/TreeView'
-import { getContent } from '@/api/ajax'
-import Cookies from 'js-cookie'
+import { getContent } from "@/api/ajax";
+import Cookies from "js-cookie";
 // import Preview from '@/componentsAnswer/PreviewAnswer.vue'
-import Preview from '@/components/Adult/Preview'
+import Preview from "@/components/Adult/Preview";
 export default {
-  name: 'CourseView',
+  name: "CourseView",
   components: {
     // TreeView,
-    Preview
+    Preview,
   },
-  props:['bookId',"bookIsBuy"],
+  props: ["bookId", "bookIsBuy"],
   data() {
     return {
-      chapterId: '',
-      chapterName: '',
+      chapterId: "",
+      chapterName: "",
       fullscreen: false, // 控制全屏
       context: null,
       question: null, // 选择的模板题型
-      queIndex: '',
+      queIndex: "",
       treeFlag: true, // tree是否显示
       switchvalue: true, // 生词模式
       isAnswerShow: false, // 是否显示答案
-      bookAnswerContent: '[[6],[],[9]]',
-      TaskModel: 'PRACTICE',
-      fullTree:false, // 全屏模式下树是否显示
-    }
+      bookAnswerContent: "[[6],[],[9]]",
+      TaskModel: "PRACTICE",
+      fullTree: false, // 全屏模式下树是否显示
+    };
   },
   mounted() {
     // const _this = this
     // _this.bookId = this.$route.query.bookId
   },
   methods: {
-    changeId(id, name,free) {
-        if( this.bookIsBuy == 'true' || ( this.bookIsBuy == 'false'&& free == 'true')){
-            const _this = this
-            _this.chapterId = id
-            _this.chapterName = name
-            _this.isAnswerShow = false
-            _this.onGetData()
-            if(!_this.treeFlag){
-                _this.fullTree = false
-                document.getElementById('content-tree').style.display = 'none'
-            }
-        }else{
-            this.chapterId = ''
-            this.chapterName = ''
-            this.context = null
-            this.$message(
-                {
-                    type: "warning",
-                    message: "您还没有购买此教材，请购买后查看!",
-                },
-                2000
-            );
+    changeId(id, name, free) {
+      if (
+        this.bookIsBuy == "true" ||
+        (this.bookIsBuy == "false" && free == "true")
+      ) {
+        const _this = this;
+        _this.chapterId = id;
+        _this.chapterName = name;
+        _this.isAnswerShow = false;
+        _this.onGetData();
+        if (!_this.treeFlag) {
+          _this.fullTree = false;
+          document.getElementById("content-tree").style.display = "none";
         }
+      } else {
+        this.chapterId = "";
+        this.chapterName = "";
+        this.context = null;
+        this.$message(
+          {
+            type: "warning",
+            message: "您还没有购买此教材，请购买后查看!",
+          },
+          2000
+        );
+      }
     },
     // 点击全屏展示 隐藏tree
     fullScreen() {
-      this.treeFlag = false
-      document.getElementById('content-tree').style.display = 'none'
-      this.$emit("bookdetailShow", false)
+      this.treeFlag = false;
+      this.fullscreen = true;
+      document.getElementById("content-tree").style.display = "none";
+      this.$emit("bookdetailShow", false);
     },
     treeShow() {
-      this.treeFlag = true
-      this.fullTree = false
-      document.getElementById('content-tree').style.display = 'block'
-      this.$emit("bookdetailShow", true)
+      this.treeFlag = true;
+      this.fullTree = false;
+      this.fullscreen = false;
+      document.getElementById("content-tree").style.display = "block";
+      this.$emit("bookdetailShow", true);
     },
     // 获取预览数据
     onGetData() {
-      const _this = this
-      const MethodName = 'book-courseware_manager-GetCoursewareContent_View'
+      const _this = this;
+      const MethodName = "book-courseware_manager-GetCoursewareContent_View";
       const data = {
-        id: _this.chapterId
-      }
-      getContent(MethodName, data).then(
-        (res) => {
-          if (res.content) {
-            const _this = this
-            _this.context = {
-              id: _this.chapterId,
-              ui_type: JSON.parse(res.content).question ? JSON.parse(res.content).question.ui_type : '',
-              sort_number: 1,
-              content: JSON.parse(res.content)
-            }
-          } else {
-            const _this = this
-            _this.context = null
-          }
+        id: _this.chapterId,
+      };
+      getContent(MethodName, data).then((res) => {
+        if (res.content) {
+          const _this = this;
+          _this.context = {
+            id: _this.chapterId,
+            ui_type: JSON.parse(res.content).question
+              ? JSON.parse(res.content).question.ui_type
+              : "",
+            sort_number: 1,
+            content: JSON.parse(res.content),
+          };
+        } else {
+          const _this = this;
+          _this.context = null;
         }
-      )
+      });
     },
     // 显示或隐藏答案
     handleAnswerShow() {
-      this.isAnswerShow = !this.isAnswerShow
-      this.$refs.previewAnswer.bookAnswerShow(this.isAnswerShow)
+      this.isAnswerShow = !this.isAnswerShow;
+      this.$refs.previewAnswer.bookAnswerShow(this.isAnswerShow);
     },
     // 得到用户答题答案
-    handleBookUserAnswer(data){
-        console.log(data)
+    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'
-        }
-    }
-  }
-}
+    chooseCourseware() {
+      this.fullTree = !this.fullTree;
+      if (this.fullTree) {
+        document.getElementById("content-tree").style.display = "block";
+      } else {
+        document.getElementById("content-tree").style.display = "none";
+      }
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .container {
   width: 100%;
   height: auto;
-//   padding: 24px 120px;
-//   background: #F5F5F5;
+  //   padding: 24px 120px;
+  //   background: #F5F5F5;
   .book-content-inner {
     background: #fff;
     width: 100%;
@@ -186,21 +198,21 @@ export default {
       padding: 20px 0px;
       border-right: 1px solid #d9d9d9;
     }
-    .content-tree{
-        border-right: 1px solid #D9D9D9;
-        max-height: 700px;
-        overflow: auto;
+    .content-tree {
+      border-right: 1px solid #d9d9d9;
+      max-height: 700px;
+      overflow: auto;
     }
-    .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;
+    .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 {
       width: 1000px;
@@ -212,6 +224,9 @@ export default {
       padding: 20px;
       position: relative;
       background: #fff;
+      &.inner-full {
+        margin-left: 0;
+      }
       .title-box {
         display: flex;
         align-items: center;
@@ -318,37 +333,39 @@ export default {
       }
     }
   }
-.screen-full {
+  .screen-full {
     position: absolute;
     right: 30px;
     bottom: 30px;
     width: 48px;
     height: 48px;
     background: rgba(0, 0, 0, 0.4) url("../assets/common/icon-screenFull.png")
-    center no-repeat;
+      center no-repeat;
     background-size: 32px;
-}
-  .answerShow{
-      position: absolute;
-      right: 20px;
-      top: 20px;
-      width: 112px;
-        height: 40px;
-        background: #FFFFFF url('../assets/common/icon-eye-close.png') 16px center no-repeat;
-        background-size: 16px;
-        border: 1px solid rgba(44, 44, 44, 0.15);
-        box-sizing: border-box;
-        border-radius: 4px;
-        font-size: 14px;
-        line-height: 150%;
-        color: #000000;
-        padding:9px 16px 9px 36px;
-        cursor: pointer;
-        z-index: 2;
-        &.answerShowTrue{
-            background: #F5F5F5 url('../assets/common/icon-eye-open.png') 16px center no-repeat;
-        background-size: 16px;
-        }
+  }
+  .answerShow {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 112px;
+    height: 40px;
+    background: #ffffff url("../assets/common/icon-eye-close.png") 16px center
+      no-repeat;
+    background-size: 16px;
+    border: 1px solid rgba(44, 44, 44, 0.15);
+    box-sizing: border-box;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 150%;
+    color: #000000;
+    padding: 9px 16px 9px 36px;
+    cursor: pointer;
+    z-index: 2;
+    &.answerShowTrue {
+      background: #f5f5f5 url("../assets/common/icon-eye-open.png") 16px center
+        no-repeat;
+      background-size: 16px;
+    }
   }
 }
 </style>

src/views/courseView.vue

@@ -2,7 +2,10 @@
   <div class="container">
     <Header />
     <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"
@@ -11,7 +14,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> -->
@@ -112,11 +119,13 @@ export default {
     // 点击全屏展示 隐藏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";
     },
     // 获取预览数据
@@ -228,6 +237,9 @@ export default {
       padding: 20px;
       position: relative;
       background: #fff;
+      &.inner-full {
+        margin-left: 0;
+      }
       .title-box {
         display: flex;
         align-items: center;