|
|
@@ -1,23 +1,33 @@
|
|
|
<template>
|
|
|
<div class="preview">
|
|
|
- <div></div>
|
|
|
- <div>
|
|
|
- <div
|
|
|
- class="content"
|
|
|
- :style="[
|
|
|
- {
|
|
|
- backgroundImage: data.background_image_url ? `url(${data.background_image_url})` : '',
|
|
|
- backgroundSize: data.background_image_url
|
|
|
- ? `${data.background_position.width}% ${data.background_position.height}%`
|
|
|
- : '',
|
|
|
- backgroundPosition: data.background_image_url
|
|
|
- ? `${data.background_position.left}% ${data.background_position.top}%`
|
|
|
- : '',
|
|
|
- },
|
|
|
- ]"
|
|
|
- >
|
|
|
- <div></div>
|
|
|
+ <div class="menu">
|
|
|
+ <div class="title">目录</div>
|
|
|
+ <CatalogueTree :nodes="nodes" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="content-wrapper">
|
|
|
+ <div class="exit">
|
|
|
+ <el-button icon="el-icon-close" @click="goBack">退出预览</el-button>
|
|
|
</div>
|
|
|
+ <main class="content">
|
|
|
+ <span class="content-title">
|
|
|
+ <SvgIcon icon-class="menu-2" size="24" />
|
|
|
+ </span>
|
|
|
+ <div
|
|
|
+ class="courserware"
|
|
|
+ :style="[
|
|
|
+ {
|
|
|
+ backgroundImage: data.background_image_url ? `url(${data.background_image_url})` : '',
|
|
|
+ backgroundSize: data.background_image_url
|
|
|
+ ? `${data.background_position.width}% ${data.background_position.height}%`
|
|
|
+ : '',
|
|
|
+ backgroundPosition: data.background_image_url
|
|
|
+ ? `${data.background_position.left}% ${data.background_position.top}%`
|
|
|
+ : '',
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ ></div>
|
|
|
+ </main>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -25,14 +35,25 @@
|
|
|
<script>
|
|
|
import { GetCoursewareContent, GetBookChapterStruct, GetCoursewareList_Chapter } from '@/api/book';
|
|
|
|
|
|
+import CatalogueTree from '@/views/book/components/catalogueTree.vue';
|
|
|
+
|
|
|
export default {
|
|
|
name: 'PreviewPage',
|
|
|
+ components: {
|
|
|
+ CatalogueTree,
|
|
|
+ },
|
|
|
+ provide() {
|
|
|
+ return {
|
|
|
+ selectNode: this.selectNode,
|
|
|
+ getCurChaterId: () => this.curChapterId,
|
|
|
+ };
|
|
|
+ },
|
|
|
data() {
|
|
|
const { chapter_id } = this.$route.query;
|
|
|
return {
|
|
|
book_id: this.$route.params.book_id,
|
|
|
chapter_id,
|
|
|
- curChaterId: chapter_id,
|
|
|
+ curChapterId: chapter_id,
|
|
|
data: {
|
|
|
background_image_url: '',
|
|
|
background_position: {
|
|
|
@@ -85,6 +106,11 @@ export default {
|
|
|
setCurPosition(id) {
|
|
|
this.curPosition = this.findNodeIndexById(this.nodes, id);
|
|
|
},
|
|
|
+ selectNode(id) {
|
|
|
+ this.setCurPosition(id);
|
|
|
+ this.getCoursewareList_Chapter(id);
|
|
|
+ this.curChapterId = id;
|
|
|
+ },
|
|
|
getCoursewareList_Chapter(chapter_id) {
|
|
|
GetCoursewareList_Chapter({ chapter_id }).then(({ courseware_list }) => {
|
|
|
this.courseware_list = courseware_list ?? [];
|
|
|
@@ -101,24 +127,77 @@ export default {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.preview {
|
|
|
- .content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- row-gap: 6px;
|
|
|
- width: 100%;
|
|
|
- min-height: calc(100% - 56px);
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .menu {
|
|
|
+ width: 240px;
|
|
|
padding: 24px;
|
|
|
+ overflow: auto;
|
|
|
background-color: #fff;
|
|
|
- background-repeat: no-repeat;
|
|
|
- border-radius: 4px;
|
|
|
|
|
|
- .row {
|
|
|
- display: grid;
|
|
|
- row-gap: 16px;
|
|
|
- align-items: start;
|
|
|
+ .title {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .node {
|
|
|
+ &-name {
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+
|
|
|
+ &.content {
|
|
|
+ padding-left: 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ border-bottom: 1px solid $border-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .node {
|
|
|
+ padding-left: 20px;
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-wrapper {
|
|
|
+ flex: 1;
|
|
|
+ padding: 24px 60px;
|
|
|
+ background: url('~@/assets/mask_group.png') repeat 0 0;
|
|
|
+
|
|
|
+ .exit {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-bottom: 24px;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ border-width: 0;
|
|
|
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 8%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ background-color: #fff;
|
|
|
+ border: 3px solid #f44444;
|
|
|
+ border-radius: 16px;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ display: inline-block;
|
|
|
+ min-width: 280px;
|
|
|
+ height: 64px;
|
|
|
+ padding: 18px 24px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #f44444;
|
|
|
+ border-top-left-radius: 12px;
|
|
|
+ border-bottom-right-radius: 16px;
|
|
|
+ }
|
|
|
|
|
|
- .col {
|
|
|
- display: grid;
|
|
|
+ .courserware {
|
|
|
+ padding: 24px;
|
|
|
}
|
|
|
}
|
|
|
}
|
