|
@@ -2,7 +2,7 @@
|
|
|
<div class="container">
|
|
|
<Header />
|
|
|
<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"
|
|
@@ -18,9 +18,14 @@
|
|
|
<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
|
|
|
v-if="!treeFlag"
|
|
@@ -80,6 +85,7 @@ export default {
|
|
|
FatherTreeData: null,
|
|
|
themeColor: "",
|
|
|
loading: false,
|
|
|
+ fullTree: false, // 全屏模式下树是否显示
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -98,6 +104,10 @@ export default {
|
|
|
_this.isAnswerShow = false;
|
|
|
|
|
|
_this.onGetData();
|
|
|
+ if (!_this.treeFlag) {
|
|
|
+ _this.fullTree = false;
|
|
|
+ document.getElementById("content-tree").style.display = "none";
|
|
|
+ }
|
|
|
},
|
|
|
// 点击全屏展示 隐藏tree
|
|
|
fullScreen() {
|
|
@@ -106,6 +116,7 @@ export default {
|
|
|
},
|
|
|
treeShow() {
|
|
|
this.treeFlag = true;
|
|
|
+ this.fullTree = false;
|
|
|
document.getElementById("content-tree").style.display = "block";
|
|
|
},
|
|
|
// 获取预览数据
|
|
@@ -163,6 +174,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>
|
|
@@ -187,6 +207,17 @@ export default {
|
|
|
left: 0;
|
|
|
padding-top: 64px;
|
|
|
}
|
|
|
+ .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;
|