From 8c9eb5abf5d3efebe8e934fdf5c66febeb21b34a Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Sat, 9 Oct 2021 20:52:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E9=AA=8C=E5=8F=B0=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=B5=8B=E8=AF=95=E6=9C=8D=EF=BC=8C?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                    |   8 +-
 src/pages/account/login/index.vue   |   2 +-
 src/pages/ass/list/index.vue        |   9 +-
 src/pages/course/details/index.vue  |   2 -
 src/pages/station/list/index.vue    |   2 +-
 src/pages/station/preview/index.vue | 672 +++++++++++++++-------------
 6 files changed, 382 insertions(+), 313 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index 919b487..b6510d9 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -3,7 +3,10 @@ import Setting from "@/setting";
 // let host = `${Setting.apiBaseURL}evaluation/`;
 let loginhost = `${Setting.apiBaseURL}liuwanr/`;
 
-let host = "http://192.168.31.151:9000/"; // 榕
+// let host = "http://192.168.31.151:9000/"; // 榕
+// let host = "http://192.168.31.137:9000/"; // 赓
+
+let host = "http://39.108.250.202:9000/"; // 测试服
 
 export default {
     host,
@@ -13,7 +16,8 @@ export default {
     verification: `${host}users/users/user/captcha`,// 验证码图片
 
     //实验台
-
+    curriculumChapter: `${host}nakadai/curriculum/chapter/queryChaptersAndSubsections`, //
+    curriculumDetail: `${host}nakadai/nakadai/curriculum/curriculumDetail`, // 课程详情
 
     // 能力测评
     canExperiment: `${host}occupationlab/occupationlab/evaluationrecord/can_experiment`, // 查询是否能够开启实验
diff --git a/src/pages/account/login/index.vue b/src/pages/account/login/index.vue
index c8a7383..48696e4 100644
--- a/src/pages/account/login/index.vue
+++ b/src/pages/account/login/index.vue
@@ -608,7 +608,7 @@ export default {
                 position: absolute;
                 right: 0px;
                 width: 100px;
-                height: 40px;
+                height: 32px;
                 border: 1px solid #DCDFE6;
                 cursor: pointer;
             }
diff --git a/src/pages/ass/list/index.vue b/src/pages/ass/list/index.vue
index ff362ee..09ac3fb 100644
--- a/src/pages/ass/list/index.vue
+++ b/src/pages/ass/list/index.vue
@@ -42,6 +42,7 @@
                     <li>
                         <label>实验班级</label>
                         <el-select size="small" v-model="form.classId" @change="initData">
+                            <el-option label="不限" value=""></el-option>
                             <el-option
                                 v-for="(item,index) in classList"
                                 :key="index"
@@ -53,6 +54,7 @@
                     <li>
                         <label>课程名称</label>
                         <el-select size="small" v-model="form.systemId" @change="initData">
+                            <el-option label="不限" value=""></el-option>
                             <el-option
                                 v-for="(item,index) in courseList"
                                 :key="index"
@@ -248,9 +250,10 @@ export default {
         beginTimer() {
             this.ticker = setInterval(() => {
                 for (let i = 0; i < this.listData.length; i++) {
+                    console.log(i);
                     const item = this.listData[i];
-                    if (item.countDown > 0) {
-                        item.countDown = item.countDown - 1;
+                    if (item.countDown && item.countDown > 0) {
+                        item.countDown--;
                     }
                     this.$set(this.listData, i, item);
                 }
@@ -274,8 +277,10 @@ export default {
                             i.countDown = 0;
                         } else if (i.status === 1) { // 进行中
                             i.countDown = (new Date(i.stopTime).getTime() - new Date().getTime()) / 1000;
+                            // console.log(1, i.countDown);
                         } else if (i.status === 0) { // 待开始
                             i.countDown = (new Date(i.startTime).getTime() - new Date().getTime()) / 1000; // 获得两个日期时间的秒数差
+                            // console.log(0, i.countDown);
                         }
                     });
                     this.beginTimer();
diff --git a/src/pages/course/details/index.vue b/src/pages/course/details/index.vue
index 46a3342..8b46b10 100644
--- a/src/pages/course/details/index.vue
+++ b/src/pages/course/details/index.vue
@@ -81,8 +81,6 @@ export default {
         return {
             id: this.$route.query.id,
             video: 'http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4',
-            videoSrc: '',
-            userId: this.$store.state.userId,
             videoList: [],
             courseName: '',
             description: '',
diff --git a/src/pages/station/list/index.vue b/src/pages/station/list/index.vue
index 82797e4..b007f89 100644
--- a/src/pages/station/list/index.vue
+++ b/src/pages/station/list/index.vue
@@ -38,7 +38,7 @@ export default {
         },
         goPreview(item) {
             // let systemName = item.name.replace("<br>","")
-            this.$router.push(`/station/preview?systemId=${item.cid}&systemName=${item.curriculumName}`);
+            this.$router.push(`/station/preview?courseId=${item.cid}&curriculumName=${item.curriculumName}`);
         },
     }
 };
diff --git a/src/pages/station/preview/index.vue b/src/pages/station/preview/index.vue
index de692c1..5162061 100644
--- a/src/pages/station/preview/index.vue
+++ b/src/pages/station/preview/index.vue
@@ -1,162 +1,109 @@
 <template>
-<div>
-    <el-card shadow="hover" class="m-b-20">
-        <div class="flex-between">
-            <el-page-header @back="goBack" :content="systemName"></el-page-header>
-        </div>
-    </el-card>
-    <el-card shadow="hover" class="m-b-20">
-        <el-row :gutter="20" style="padding-top: 20px;">
-            <el-col :span="24">
-                <el-col :span="18">
-                    <div class="cover">
-                        <img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%">
-                        <template v-else-if="iframeSrc">
-                            <iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
-                            <template v-if="showMask">
-                                <div class="mask" style="width: 500px;height: 30px;top: 53px;right: 320px"></div>
-                                <div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
-                            </template>
-                            <template v-if="showMask1">
-                                <div class="word-mask" style="height: 40px;"></div>
-                                <div class="word-mask2"
-                                     style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
-                            </template>
-                            <template v-if="showMask2">
-                                <div class="excel-mask1" style="height: 48px;"></div>
-                            </template>
+    <div>
+        <el-card shadow="hover" class="m-b-20">
+            <div class="flex-between">
+                <el-page-header @back="goBack" :content="curriculumName"></el-page-header>
+            </div>
+        </el-card>
+        <el-card shadow="hover" class="m-b-20">
+            <div class="flex p-40">
+                <div class="cover" :class="{'is-word': showMask1}">
+                    <img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%">
+                    <template v-else-if="iframeSrc">
+                        <iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
+                        <template v-if="showMask">
+                            <div class="mask" style="width: 500px;height: 30px;top: 53px;right: 320px"></div>
+                            <div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
                         </template>
-                        <div class="pdf inner" v-else-if="pdfSrc">
-                            <pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf>
-                        </div>
-                        <div v-else>
-                            <video ref="video" controls class="video_wid" :src="videoSrc"
-                                   controlsList="nodownload"></video>
-                        </div>
+                        <template v-if="showMask1">
+                            <div class="word-mask" style="height: 40px;"></div>
+                            <div class="word-mask2"
+                                 style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
+                        </template>
+                        <template v-if="showMask2">
+                            <div class="excel-mask1" style="height: 48px;"></div>
+                        </template>
+                    </template>
+                    <div class="pdf inner" v-else-if="pdfSrc">
+                        <p class="arrow">
+                            <span @click="changePdfPage(0)" class="turn el-icon-arrow-left"
+                                  :class="{grey: currentPage==1}"></span>
+                            {{ currentPage }} / {{ pageCount }}
+                            <span @click="changePdfPage(1)" class="turn el-icon-arrow-right"
+                                  :class="{grey: currentPage==pageCount}"></span>
+                        </p>
+                        <pdf
+                            class="pdf-wrap"
+                            :src="pdfSrc"
+                            :page="currentPage"
+                            @num-pages="pageCount=$event"
+                            @page-loaded="currentPage=$event"
+                            @loaded="loadPdfHandler">
+                        </pdf>
                     </div>
-                </el-col>
-                <el-col :span="6">
-                    <div class="catalog">
-                        <div class="btns">
-                            <el-button type="primary" @click="goSubSystem">进入实验</el-button>
-                        </div>
-                        <div class="list_he">
-                            <h4 class="list_title">学习资源</h4>
-                            <template v-if="systemId == 1">
-                                <div v-for="(item,index) in videoList1" :key="index">
-                                    <div class="flex-between list_catalog">
-                                        <p class="experimental_title" :class="{active: curLink == item.title}"
-                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
-                                    </div>
-                                </div>
-                            </template>
-                            <template v-else-if="systemId == 4">
-                                <div v-for="(item,index) in videoList4" :key="index">
-                                    <div class="flex-between list_catalog">
-                                        <p class="experimental_title" :class="{active: curLink == item.title}"
-                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
-                                    </div>
-                                </div>
-                            </template>
-                            <template v-else-if="systemId == 5">
-                                <div v-for="(item,index) in videoList5" :key="index">
-                                    <div class="flex-between list_catalog">
-                                        <p class="experimental_title" :class="{active: curLink == item.title}"
-                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
-                                    </div>
-                                </div>
-                            </template>
-                            <template v-else-if="systemId == 6">
-                                <div v-for="(item,index) in videoList6" :key="index">
-                                    <div class="flex-between list_catalog">
-                                        <p class="experimental_title" :class="{active: curLink == item.title}"
-                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
-                                    </div>
-                                </div>
-                            </template>
-                            <template v-else-if="systemId == 7">
-                                <div v-for="(item,index) in videoList7" :key="index">
-                                    <div class="flex-between list_catalog">
-                                        <p class="experimental_title" :class="{active: curLink == item.title}"
-                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
-                                    </div>
-                                </div>
-                            </template>
-                            <template v-else-if="systemId == 8">
-                                <div v-for="(item,index) in videoList8" :key="index">
-                                    <div class="flex-between list_catalog">
-                                        <p class="experimental_title" :class="{active: curLink == item.title}"
-                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
-                                    </div>
-                                </div>
-                            </template>
-                            <template v-else-if="systemId == 9">
-                                <div v-for="(item,index) in videoList9" :key="index">
-                                    <div class="flex-between list_catalog">
-                                        <p class="experimental_title" :class="{active: curLink == item.title}"
-                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
-                                    </div>
-                                </div>
-                            </template>
-                            <template v-else-if="systemId == 10">
-                                <div v-for="(item,index) in videoList10" :key="index">
-                                    <div class="flex-between list_catalog">
-                                        <p class="experimental_title" :class="{active: curLink == item.title}"
-                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
-                                    </div>
-                                </div>
-                            </template>
-                            <template v-else>
-                                <div v-for="(item,index) in videoList1" :key="index">
-                                    <div class="flex-between list_catalog">
-                                        <p class="experimental_title" :class="{active: curLink == item.title}"
-                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
+                    <div class="inner" v-else-if="playAuth">
+                        <div class="video_wid" id="player"></div>
+                    </div>
+                </div>
+                <div class="catalog flex-1">
+                    <div style="padding: 0 16px">
+                        <el-button type="primary" style="width: 100%; height: 50px; font-size: 18px">进 入 实 验</el-button>
+                    </div>
+                    <div class="list">
+                        <h4 class="title">{{ courseName }}</h4>
+                        <div class="chapters">
+                            <template v-if="videoList.length">
+                                <div class="chapter" v-for="(item,index) in videoList" :key="index">
+                                    <div class="chapterName">{{ item.name }}</div>
+                                    <div class="section" v-if="item.subsectionList.length">
+                                        <div class="sectionName" v-for="(section,i) in item.subsectionList" :key="i"
+                                             @click="preview(section)">{{ section.name }}
+                                        </div>
                                     </div>
                                 </div>
                             </template>
                         </div>
                     </div>
-                </el-col>
-            </el-col>
-        </el-row>
-    </el-card>
-
-    <el-card shadow="hover" class="m-b-20">
-        <div>课程简介</div>
-        <p>课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介</p>
-    </el-card>
-    <el-card shadow="hover" class="m-b-20">
-        <div>课程目标</div>
-        <p>课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介</p>
-    </el-card>
-    <el-card shadow="hover" class="m-b-20">
-        <div>课程进度</div>
-        <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
-    </el-card>
-</div>
+                </div>
+            </div>
+        </el-card>
+
+        <el-card shadow="hover" class="m-b-20">
+            <h4 style="margin-bottom: 10px">课程简介</h4>
+            <p>{{ briefIntroduction }}123</p>
+        </el-card>
+        <el-card shadow="hover" class="m-b-20">
+            <h4 style="margin-bottom: 10px">课程目标</h4>
+            <p>{{ teachingObjectives }}</p>
+        </el-card>
+        <el-card shadow="hover" class="m-b-20">
+            <h4 style="margin-bottom: 10px">课程进度</h4>
+            <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
+        </el-card>
+    </div>
 </template>
 
 <script>
 import util from "@/libs/util";
 import Setting from "@/setting";
-import pdf from "@/components/pdf";
-import { videoList1, videoList4, videoList5, videoList6, videoList7, videoList8 } from "@/libs/videoList";
 import { mapState } from "vuex";
+import pdf from "vue-pdf";
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+import bus from "@/libs/bus";
+
 export default {
     components: { pdf },
     data() {
         return {
-            systemId: this.$route.query.systemId,
-            systemName: this.$route.query.systemName,
+            courseId: this.$route.query.courseId,
+            curriculumName: this.$route.query.curriculumName,
             video: "http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4",
-            videoSrc: "",
-            curLink: "",
-            videoList1,
-            videoList4,
-            videoList5,
-            videoList6,
-            videoList7,
-            videoList8,
+            videoList: [],
+            courseName: "",
+            briefIntroduction: "",
+            teachingObjectives: "",
             coverUrl: "",
             playAuth: "",
             player: null,
@@ -172,8 +119,12 @@ export default {
                 top: "80px"
             },
             pdfVisible: false,
-            pdfSrc: ""
-        }
+            pdfSrc: "",
+            currentPage: 0, // pdf文件页码
+            pageCount: 0, // pdf文件总页数
+            fileType: "pdf", // 文件类型
+            desShrink: false
+        };
     },
     computed: {
         ...mapState("user", [
@@ -181,63 +132,25 @@ export default {
         ])
     },
     mounted() {
+        bus.$emit("setBg", "none");
         this.insertScript();
-        this.preview(this[`videoList${this.systemId}`][0]);
+        this.getData();
+        this.getChapter();
     },
     methods: {
         goBack() {
             this.$router.back();
         },
-        preview(row) { // 预览
-            let url = row.links;
-            this.videoSrc = "";
-            this.coverUrl = "";
-            this.pdfSrc = "";
-            this.iframeSrc = "";
-            this.curLink = row.title;
-            let ext = util.getFileExt(url);
-            if (util.isVideo(ext)) {
-                this.videoSrc = url;
-            } else if (ext == "pdf") {
-                this.pdfSrc = url;
-                this.pdfVisible = true;
-            } else if (util.isImg(ext)) {
-                window.open(url);
-            } else if (util.isDoc(ext)) {
-                if (ext == "pptx") {
-                    this.isPPT = true;
-                    this.isWord = false;
-                    this.isExcel = false;
-                } else if (ext == "doc" || ext == "docx") {
-                    this.isPPT = false;
-                    this.isWord = true;
-                    this.isExcel = false;
-                } else if (ext == "xls" || ext == "xlsx") {
-                    this.isExcel = true;
-                    this.isPPT = false;
-                    this.isWord = false;
-                } else {
-                    this.isPPT = false;
-                    this.isWord = false;
-                    this.isExcel = false;
-                }
-                if (this.isPPT) {
-                    this.showMask = true;
-                } else {
-                    this.showMask = false;
-                }
-                if (this.isWord) {
-                    this.showMask1 = true;
-                } else {
-                    this.showMask1 = false;
-                }
-                if (this.isExcel) {
-                    this.showMask2 = true;
-                } else {
-                    this.showMask2 = false;
-                }
-                this.iframeSrc = `https://view.officeapps.live.com/op/view.aspx?src=${url}`;
-            }
+        async getData() {
+            let { data } = await this.$post(`${this.api.curriculumDetail}?cid=${this.courseId}`);
+            this.courseName = data.curriculumName;
+            this.coverUrl = data.coverUrl;
+            this.briefIntroduction = data.briefIntroduction;
+            this.teachingObjectives = data.teachingObjectives;
+        },
+        async getChapter() {
+            let res = await this.$get(`${this.api.curriculumChapter}/${this.courseId}`);
+            this.videoList = res.chapterList;
         },
         // 插入阿里云播放器脚本
         insertScript() {
@@ -257,6 +170,107 @@ export default {
                 document.body.removeChild(document.querySelector("#aliplayerScript"));
             });
         },
+        transferType(ext) {
+            if ("jpg,jpeg,png,gif,svg,psd".includes(ext)) return "图片";
+            if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(ext)) return "视频";
+            return ext;
+        },
+        preview(row) {
+            this.player = null;
+            this.playauth = "";
+            this.coverUrl = "";
+            this.pdfSrc = "";
+            this.iframeSrc = "";
+            this.isPPT = false;
+            this.isWord = false;
+            this.isExcel = false;
+            if (this.transferType(row.fileType) == "视频") {
+                this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
+                    this.playAuth = res.playAuth;
+                    this.$nextTick(() => {
+                        if (this.player) {
+                            this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth);
+                        } else {
+                            this.player = new Aliplayer({
+                                id: "player",
+                                width: "100%",
+                                autoplay: false,
+                                vid: row.fileId,
+                                playauth: this.playAuth,
+                                encryptType: 1 //当播放私有加密流时需要设置。
+                            });
+                        }
+                    });
+
+                }).catch(res => {
+                });
+            } else if (this.transferType(row.fileType) == "图片") {
+                this.coverUrl = row.fileUrl;
+            } else if (row.fileType == "pdf") {
+                this.pdfSrc = row.fileUrl;
+                this.pdfVisible = true;
+            } else {
+                this.$get(`${this.api.getSubsection}/${row.id}`).then(res => {
+                    if (row.fileType == "pptx") {
+                        this.isPPT = true;
+                        this.isWord = false;
+                        this.isExcel = false;
+                    } else if (row.fileType == "doc" || row.fileType == "docx") {
+                        this.isPPT = false;
+                        this.isWord = true;
+                        this.isExcel = false;
+                    } else if (row.fileType == "xls" || row.fileType == "xlsx") {
+                        this.isExcel = true;
+                        this.isPPT = false;
+                        this.isWord = false;
+                    } else {
+                        this.isPPT = false;
+                        this.isWord = false;
+                        this.isExcel = false;
+                    }
+                    if (this.isPPT) {
+                        this.showMask = true;
+                    } else {
+                        this.showMask = false;
+                    }
+                    if (this.isWord) {
+                        this.showMask1 = true;
+                    } else {
+                        this.showMask1 = false;
+                    }
+                    if (this.isExcel) {
+                        this.showMask2 = true;
+                    } else {
+                        this.showMask2 = false;
+                    }
+                    this.iframeSrc = res.previewUrl;
+                }).catch(err => {});
+            }
+        },
+        closePlayer() {
+            this.playAuth = "";
+            this.player.pause();
+        },
+        closeIframe() {
+            this.iframeSrc = "";
+            this.showMask = false;
+            this.showMask1 = false;
+        },
+        closePdf() {
+            this.pdfSrc = "";
+            this.currentPage = 1;
+        },
+        changePdfPage(val) {
+            if (val === 0 && this.currentPage > 1) {
+                this.currentPage--;
+            }
+            if (val === 1 && this.currentPage < this.pageCount) {
+                this.currentPage++;
+            }
+        },
+        loadPdfHandler(e) {
+            this.currentPage = 1;
+        },
         goSubSystem() {
             let type = this.systemId;
             let host = Setting.apiBaseURL;
@@ -304,142 +318,156 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$height: 650px;
-.cover {
+$height: 700px;
+.video_wid,.cover{
     position: relative;
-    height: $height;
+    width: 76%;
+    max-width: 1400px;
+    height: $height !important;
     border: 0;
-
-    .fileIframe {
-        width: 100%;
-        height: $height !important;
+}
+.cover{
+    img{
+        border-radius: 8px;
     }
+    &.is-word{
+        overflow: hidden;
+    }
+}
+.fileIframe{
+    height: $height !important;
 }
-.video_wid {
+.video_wid,.inner{
     width: 100%;
-    height: 650px;
+    height: 100% !important;
     border: 0;
+    overflow: auto;
 }
-
-.video_wid:focus {
-    outline: none;
-}
-
-.title_view {
-    background-color: #2F3236;
-    padding: 12px 10px;
-}
-
-h3 {
-    color: #9076FF;
-    margin-bottom: 10px;
-}
-
-.catalog .title_view .el-button {
-    padding: 8px 20px;
-}
-
-.btns {
-    display: flex;
-    justify-content: space-between;
-    .el-button {
-        flex: 1;
-        height: 90px;
-        font-size: 30px;
-        background: transparent url(../../../assets/img/ques1.png) 0 0/100% 100% no-repeat;
-        border: 0;
+.cover.is-word{
+    .inner{
+        height: calc(100% + 38px) !important;
+        margin-top: -38px;
     }
 }
-
-.list_he {
-    height: 550px;
-    overflow-y: auto;
-    padding: 20px 12px;
-    background: #3f4449;
-    margin-top: 10px;
-}
-
-.list_he ul {
-    padding: 20px 0;
-}
-
-.list_he ul li:first-child {
-    margin-top: 0;
-}
-
-.list_he ul li {
-    margin-top: 10px;
-    font-size: 14px;
-}
-
-.list_title {
-    color: #9278FF;
-    font-size: 20px;
-    margin-left: 12px;
-}
-
-.list_catalog {
-    padding: 0 8px;
-    font-size: 14px;
-    margin-top: 15px;
-    cursor: pointer;
-}
-
-.mar0 {
-    margin-top: 0;
+.video_wid:focus{
+    outline: none;
 }
-
-.list_catalog .catalog_button .el-button {
-    background-color: #2F3236;
-    border: 1px solid rgba(144, 118, 255, 1);
-    color: #9278FF;
-    padding: 6px 8px;
+.catalog{
+    margin-left: 40px;
 }
-
-.experimental_title {
-    color: #fff;
-    word-wrap: break-word;
-
-    &.active {
-        color: #9278FF;
+.list{
+    height: calc(700px - 50px) ;
+    overflow-y: auto;
+    padding: 24px 16px;
+    background: #fff;
+    .title{
+        margin-bottom: 8px;
+        color: rgba(0, 0, 0, 0.85);
+        font-size: 20px;
+    }
+    .desc-wrap{
+        position: relative;
+        .desc{
+            font-size: 14px;
+            color: rgba(0, 0, 0, 0.65);
+            line-height: 22px;
+            @include mul-ellipsis(2);
+            &.active{
+                display: block;
+                overflow: visible;
+            }
+        }
+        .arrow{
+            position: absolute;
+            bottom: 2px;
+            right: 0;
+            display: flex;
+            justify-content: space-between;
+            width: 46px;
+            background-color: #fff;
+            span{
+                font-size: 14px;
+                color: rgba(0, 0, 0, 0.65);
+            }
+            img{
+                width: 16px;
+                cursor: pointer;
+            }
+            &.active{
+                span{
+                    opacity: 0;
+                }
+                img{
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+    .chapters{
+        margin-top: 16px;
+        max-height: calc(100% - 53px);
+        overflow: auto;
+    }
+    .chapter{
+        margin-bottom: 20px;
+        .chapterName{
+            color: rgba(0, 0, 0, 0.85);
+            font-size: 16px;
+        }
+        .section{
+            padding: 5px 15px;
+            margin-top: 8px;
+            background: rgba(0, 0, 0, 0.02);
+            .sectionName{
+                margin: 10px 0;
+                font-size: 14px;
+                color: rgba(0, 0, 0, 0.65);
+                cursor: pointer;
+                @include ellipsis;
+            }
+        }
     }
 }
+.el-image-viewer__wrapper{
+    transform: translateY(-10px);
+    transition: transform .5s;
 
-.experimental_status {
-    margin-right: 10px;
-    color: #7A7A7A;
+    &.active{
+        transform: translateY(0)
+    }
 }
-
-.curriculum_name {
-    color: #fff;
+.el-image-viewer__close{
+    z-index: 2000;
+    top: 15px;
+    right: 15px;
+    &.doc-close{
+        i{
+            color: #000 !important;
+        }
+    }
 }
-
-.curriculum_name i {
-    margin-left: 5px;
-    margin-right: 5px;
+.list::-webkit-scrollbar {
+    width: 4px;
 }
-
-.curriculum_status {
-    color: #7A7A7A;
+.list::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: rgba(0, 0, 0, 0.06);
 }
 
-
-.mask {
+.mask{
     z-index: 9;
     position: absolute;
-    background-color: rgb(57, 58, 61);
+    background-color: rgb(57,58,61);
 }
-
-.word-mask {
+.word-mask{
     z-index: 9;
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
-    background-color: rgb(243, 242, 241);
+    background-color: rgb(243,242,241);
 }
-
-.word-mask1 {
+.word-mask1{
     z-index: 9;
     position: absolute;
     top: 0;
@@ -447,14 +475,12 @@ h3 {
     width: 100%;
     background-color: #185abd;
 }
-
-.word-mask2 {
+.word-mask2{
     z-index: 9;
     position: absolute;
     background-color: transparent;
 }
-
-.excel-mask1 {
+.excel-mask1{
     z-index: 9;
     position: absolute;
     top: 0;
@@ -462,5 +488,41 @@ h3 {
     width: 60%;
     background-color: #107c41;
 }
+/deep/.pdf-dia{
+    border-radius: 0 !important;
+    .el-dialog__header{
+        display: none;
+    }
+    .el-dialog__body{
+        padding: 0;
+    }
+    .el-dialog__headerbtn{
+        top: 10px;
+        .el-dialog__close{
+            color: #fff;
+            font-size: 16px;
+        }
+    }
+}
+.pdf{
+    .arrow{
+        padding: 10px 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 16px;
+        color: #fff;
+        background-color: #333;
+        .turn{
+            margin: 0 10px;
+            font-size: 18px;
+            cursor: pointer;
+        }
+    }
+    .pdf-wrap{
+        width: 80%;
+        margin: 0 auto;
+    }
+}
 
 </style>
\ No newline at end of file