|
@@ -0,0 +1,627 @@
|
|
|
+<template>
|
|
|
+ <div class="container GCLS-BOOK-Container">
|
|
|
+ <!-- <div v-if="!type" class="header-box">
|
|
|
+ <Header />
|
|
|
+ <Nav nav-value="书籍预览" />
|
|
|
+ </div>
|
|
|
+ <div v-else class="header-box">
|
|
|
+ <div class="bookname">
|
|
|
+ <i
|
|
|
+ style="cursor: pointer; margin-right: 5px"
|
|
|
+ class="el-icon-arrow-left"
|
|
|
+ @click="back"
|
|
|
+ />
|
|
|
+ {{ name }}
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div
|
|
|
+ id="content-scroll"
|
|
|
+ class="content"
|
|
|
+ :class="[type ? 'content-top' : '']"
|
|
|
+ >
|
|
|
+ <!-- <div
|
|
|
+ id="content-tree"
|
|
|
+ :class="[fullTree ? 'content-tree-full' : 'content-tree']"
|
|
|
+ >
|
|
|
+ <TreeView
|
|
|
+ ref="treeView"
|
|
|
+ :book-id="bookId"
|
|
|
+ :change-id="changeId"
|
|
|
+ :change-tree-data="changeTreeData"
|
|
|
+ :current-tree-i-d="chapterId"
|
|
|
+ />
|
|
|
+ <div v-move class="moveBtn-nnpe" />
|
|
|
+ </div> -->
|
|
|
+ <div
|
|
|
+ id="data-screen"
|
|
|
+ v-loading="loading"
|
|
|
+ :class="['inner', fullscreen ? 'inner-full' : '']"
|
|
|
+ >
|
|
|
+ <!-- 显示答案按钮 -->
|
|
|
+ <!-- <a v-if="chapterId" :class="['answerShow',isAnswerShow?'answerShowTrue':'']" @click="handleAnswerShow">显示答案</a> -->
|
|
|
+ <!-- <a class="edit-btn" @click="handleEdit">编辑</a> -->
|
|
|
+ <div v-if="chapterId" class="title-box">
|
|
|
+ <img
|
|
|
+ v-if="!treeFlag"
|
|
|
+ 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"
|
|
|
+ v-model="switchvalue"
|
|
|
+ active-color="#FF9900"
|
|
|
+ active-text
|
|
|
+ inactive-text="生词模式"
|
|
|
+ /> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template v-if="category == 'OC' || !category">
|
|
|
+ <Preview
|
|
|
+ v-if="chapterId && context"
|
|
|
+ ref="previewAnswer"
|
|
|
+ :context="context"
|
|
|
+ :book-answer-content="bookAnswerContent"
|
|
|
+ bookclientwidth="900"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ @handleBookUserAnswer="handleBookUserAnswer"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="category == 'NPC'">
|
|
|
+ <Booknpc
|
|
|
+ v-if="chapterId && context"
|
|
|
+ ref="previewBook"
|
|
|
+ :context="context"
|
|
|
+ :current-tree-i-d="chapterId"
|
|
|
+ :father-tree-data="FatherTreeData"
|
|
|
+ :change-id="changeId"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :is-show-title="false"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :is-show-save="false"
|
|
|
+ :book-answer-content="bookAnswerContent"
|
|
|
+ :is-answer-item-show="isAnswerItemShow"
|
|
|
+ @finishTaskMaterial="finishTaskMaterial"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="category == 'NNPE'">
|
|
|
+ <Booknnpe
|
|
|
+ v-if="chapterId && context"
|
|
|
+ ref="previewAnswerNNPE"
|
|
|
+ :context="context"
|
|
|
+ :current-tree-i-d="chapterId"
|
|
|
+ :father-tree-data="FatherTreeData"
|
|
|
+ :change-id="changeId"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :is-show-title="false"
|
|
|
+ :is-answer-item-show="true"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :is-show-save="true"
|
|
|
+ :book-answer-content="bookAnswerContent"
|
|
|
+ @finishTaskMaterial="finishTaskMaterial"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="category == 'RLC'">
|
|
|
+ <Bookrlc
|
|
|
+ v-if="chapterId && context"
|
|
|
+ ref="previewAnswerRLC"
|
|
|
+ :context="context"
|
|
|
+ :current-tree-i-d="chapterId"
|
|
|
+ :father-tree-data="FatherTreeData"
|
|
|
+ :change-id="changeId"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :is-show-title="false"
|
|
|
+ :book-font-size="bookFontSize"
|
|
|
+ :is-answer-item-show="isAnswerItemShow"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :is-show-save="false"
|
|
|
+ :book-answer-content="bookAnswerContent"
|
|
|
+ @finishTaskMaterial="finishTaskMaterial"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <Preview :context="context" :queIndex="queIndex" /> -->
|
|
|
+
|
|
|
+ <!-- <a
|
|
|
+ v-if="chapterId && treeFlag"
|
|
|
+ class="screen-full"
|
|
|
+ @click="finishPreviewGroupId()"
|
|
|
+ /> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Header from "@/components/inputModules/common/Header";
|
|
|
+import Nav from "@/components/inputModules/common/Nav";
|
|
|
+import TreeView from "@/components/inputModules/common/TreeView";
|
|
|
+import { getContens } from "@/api/ajax";
|
|
|
+import Cookies from "js-cookie";
|
|
|
+// import Preview from '@/componentsAnswer/PreviewAnswer.vue'
|
|
|
+import Preview from "@/components/Preview";
|
|
|
+import { getStaticContent } from "@/api/ajax";
|
|
|
+import { setToken } from "@/utils/auth";
|
|
|
+export default {
|
|
|
+ name: "CourseView",
|
|
|
+ directives: {
|
|
|
+ move(el, bindings) {
|
|
|
+ el.onmousedown = function (e) {
|
|
|
+ var init = e.clientX;
|
|
|
+ var parent = document.getElementById("content-tree");
|
|
|
+ var initWidth = parent.offsetWidth;
|
|
|
+ document.onmousemove = function (e) {
|
|
|
+ var end = e.clientX;
|
|
|
+ var newWidth = end - init + initWidth;
|
|
|
+ if (newWidth >= 340 && newWidth <= 680) {
|
|
|
+ parent.style.width = newWidth + "px";
|
|
|
+ }
|
|
|
+ };
|
|
|
+ document.onmouseup = function () {
|
|
|
+ document.onmousemove = document.onmouseup = null;
|
|
|
+ };
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Header,
|
|
|
+ Nav,
|
|
|
+ TreeView,
|
|
|
+ Preview,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ bookId: "",
|
|
|
+ chapterId: "",
|
|
|
+ chapterName: "",
|
|
|
+ fullscreen: false, // 控制全屏
|
|
|
+ fullTree: false, // 全屏模式下树是否显示
|
|
|
+ context: null,
|
|
|
+ question: null, // 选择的模板题型
|
|
|
+ queIndex: "",
|
|
|
+ treeFlag: true, // tree是否显示
|
|
|
+ switchvalue: true, // 生词模式
|
|
|
+ isAnswerShow: false, // 是否显示答案
|
|
|
+ bookAnswerContent: "",
|
|
|
+ TaskModel: "",
|
|
|
+ category: "",
|
|
|
+ FatherTreeData: null,
|
|
|
+ themeColor: "",
|
|
|
+ type: "",
|
|
|
+ name: "",
|
|
|
+ loading: false,
|
|
|
+ bookFontSize: "",
|
|
|
+ showContent: false,
|
|
|
+ bookName: [
|
|
|
+ {
|
|
|
+ name: "新实用汉语课本1",
|
|
|
+ id: "002-20211006-10-NHVOMDLDRY",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "发展汉语初级综合(Ⅰ)",
|
|
|
+ id: "002-20211007-06-4DGL2ZRIB5",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "HSK标准教程1",
|
|
|
+ id: "002-20211007-14-UNYIWU8EKW",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "新实用汉语",
|
|
|
+ id: "003-20210908-10-1ZWNGSASZL",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "新航标职业英语 综合英语(基础级)学生用书1(修订版)",
|
|
|
+ id: "002-20211029-14-9VGMXLV2NU",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "新航标职业英语 综合英语(提高级)学生用书1 (第3版)",
|
|
|
+ id: "002-20211011-10-GOLXUZST4G",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "新航标英语 汽车英语",
|
|
|
+ id: "002-20211222-15-O7WVMR4XHK",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "新航标职业英语 英语视听说教程(入门级)1",
|
|
|
+ id: "001-20211222-15-LXK64LQZST",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "新航标职业英语 综合英语(提高级)学生用书2(第3版)",
|
|
|
+ id: "001-20220118-14-EZVO52PYXF",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "新航标职业英语 综合英语(基础级)学生用书2(修订版)",
|
|
|
+ id: "002-20220208-09-FDKUJJSLI8",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "轻松学中文. 课本 .第1册",
|
|
|
+ id: "002-20220312-11-HK93JKDAGR",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "轻松学中文. 课本. 第2册",
|
|
|
+ id: "001-20220312-11-WU8XCRQMDB",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "轻松学中文 . 练习册 . 第1册",
|
|
|
+ id: "001-20220429-18-ZDIKBFQ9DP",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "轻松学中文 . 练习册 . 第 2 册",
|
|
|
+ id: "002-20220429-18-KIOM0VEXLY",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ isAnswerItemShow: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ const _this = this;
|
|
|
+ const codeName = "login_control-CreateTempAccessCode";
|
|
|
+ let access_code = null;
|
|
|
+ getStaticContent(codeName, {}).then((res) => {
|
|
|
+ access_code = res.access_code;
|
|
|
+ const Mname = "login_control-GetLoginInfoByAccessCode";
|
|
|
+ getStaticContent(Mname, {
|
|
|
+ access_code: access_code,
|
|
|
+ }).then((res) => {
|
|
|
+ setToken(res);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ _this.changeId();
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ back() {
|
|
|
+ this.$router.go(-1);
|
|
|
+ },
|
|
|
+ changeTreeData(val) {
|
|
|
+ this.FatherTreeData = JSON.parse(JSON.stringify(val));
|
|
|
+ },
|
|
|
+ changeId(id, name) {
|
|
|
+ const _this = this;
|
|
|
+ _this.chapterId = _this.$route.query.CoursewareID;
|
|
|
+ _this.isAnswerShow = false;
|
|
|
+ _this.onGetData();
|
|
|
+ },
|
|
|
+ // 点击全屏展示 隐藏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";
|
|
|
+ },
|
|
|
+ // 获取预览数据
|
|
|
+ onGetData() {
|
|
|
+ this.loading = true;
|
|
|
+ const _this = this;
|
|
|
+ const AppID = _this.$route.query.AppID;
|
|
|
+ const AccessToken = _this.$route.query.AccessToken;
|
|
|
+ const MethodName =
|
|
|
+ "/TeachingServer/BookIntegrationManager/GetCoursewareContent_View";
|
|
|
+ const data = {
|
|
|
+ courseware_id: _this.$route.query.CoursewareID,
|
|
|
+ user_id: _this.$route.query.UserID,
|
|
|
+ };
|
|
|
+ getContens(MethodName, data, AccessToken, AppID).then((res) => {
|
|
|
+ this.category = res.category;
|
|
|
+ this.themeColor = res.book_theme_color;
|
|
|
+ this.bookFontSize = res.book_font_size;
|
|
|
+ if (res.content) {
|
|
|
+ const _this = this;
|
|
|
+ if (!this.category || this.category == "OC") {
|
|
|
+ _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 {
|
|
|
+ _this.context = JSON.parse(res.content);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ const _this = this;
|
|
|
+ _this.context = null;
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 跳转编辑页面
|
|
|
+ handleEdit() {
|
|
|
+ const index = this.$refs.treeView.handleParentIndex().split("###");
|
|
|
+ if (index.length > 1) {
|
|
|
+ Cookies.set("bookIndex", index[0]);
|
|
|
+ Cookies.set("bookLevel", index[1]);
|
|
|
+ Cookies.set("bookNodename", index[2]);
|
|
|
+ }
|
|
|
+ this.$router.push("/input?bookId=" + this.bookId);
|
|
|
+ },
|
|
|
+ // 显示或隐藏答案
|
|
|
+ handleAnswerShow() {
|
|
|
+ this.isAnswerShow = !this.isAnswerShow;
|
|
|
+ this.$refs.previewAnswer.bookAnswerShow(this.isAnswerShow);
|
|
|
+ },
|
|
|
+ // 得到用户答题答案
|
|
|
+ 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";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ finishTaskMaterial(data, time, rightNumber, errorNumber) {
|
|
|
+ sessionStorage.setItem("userAnswers", data);
|
|
|
+ console.log("用户提交的答案:" + data);
|
|
|
+ console.log("答题时间" + time);
|
|
|
+ console.log("答对个数" + rightNumber);
|
|
|
+ console.log("答错个数" + errorNumber);
|
|
|
+ },
|
|
|
+ finishPreviewGroupId() {
|
|
|
+ console.log(this.$refs.previewBook.submitPreviewGroupId());
|
|
|
+ this.$refs.previewBook.submitPreviewGroupId();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.header-box {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+.container {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ .bookname {
|
|
|
+ width: 100%;
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 46px;
|
|
|
+ background: #f3f7fa;
|
|
|
+ position: relative;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: auto;
|
|
|
+ padding-top: 24px;
|
|
|
+ &-top {
|
|
|
+ padding-top: 60px;
|
|
|
+ .title-box {
|
|
|
+ top: 66px !important;
|
|
|
+ }
|
|
|
+ .content-tree-full {
|
|
|
+ top: 100px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-tree {
|
|
|
+ width: 340px;
|
|
|
+ height: 85vh;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 20px 0px;
|
|
|
+ border-right: 1px solid #d9d9d9;
|
|
|
+ background: #fff;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .content-tree-full {
|
|
|
+ position: fixed !important;
|
|
|
+ top: 170px;
|
|
|
+ left: 152px;
|
|
|
+ max-height: 588px;
|
|
|
+ overflow: auto;
|
|
|
+ z-index: 1000;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ #content-tree {
|
|
|
+ // position: relative;
|
|
|
+ }
|
|
|
+ .moveBtn-nnpe {
|
|
|
+ position: absolute;
|
|
|
+ height: 100%;
|
|
|
+ width: 10px;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ cursor: col-resize;
|
|
|
+ }
|
|
|
+ .inner {
|
|
|
+ // border-left: 1px solid #d9d9d9;
|
|
|
+ width: 1000px;
|
|
|
+ margin: 0 auto;
|
|
|
+ flex: 1;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ &.inner-full {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ .title-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ padding-right: 160px;
|
|
|
+ position: fixed;
|
|
|
+ top: 130px;
|
|
|
+ left: 64px;
|
|
|
+ z-index: 1;
|
|
|
+ > img {
|
|
|
+ width: 40px;
|
|
|
+ margin-right: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 24px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .has-module {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ &-tree {
|
|
|
+ width: 340px;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 20px 0px;
|
|
|
+ border-right: 1px solid #d9d9d9;
|
|
|
+ }
|
|
|
+ .inner {
|
|
|
+ // border-left: 1px solid #d9d9d9;
|
|
|
+ width: 1000px;
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ .title-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ padding-right: 160px;
|
|
|
+ position: relative;
|
|
|
+ > img {
|
|
|
+ width: 40px;
|
|
|
+ margin-right: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 24px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .has-module {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+ .edit-btn {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #ff9900;
|
|
|
+ float: right;
|
|
|
+ line-height: 36px;
|
|
|
+ color: #fff;
|
|
|
+ width: 60px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-list {
|
|
|
+ width: 200px;
|
|
|
+ height: 40px;
|
|
|
+ background: rgba(49, 212, 134, 0.2);
|
|
|
+ border-radius: 240px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ list-style: none;
|
|
|
+ > li {
|
|
|
+ height: 40px;
|
|
|
+ width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #19b068;
|
|
|
+ cursor: pointer;
|
|
|
+ &.active {
|
|
|
+ background: #19b068;
|
|
|
+ border-radius: 240px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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>
|
|
|
+<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;
|
|
|
+ }
|
|
|
+}
|
|
|
+.title-box {
|
|
|
+ .el-switch {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0px;
|
|
|
+ border: 1px solid rgba(44, 44, 44, 0.15);
|
|
|
+ border-radius: 40px;
|
|
|
+ height: 40px;
|
|
|
+ padding: 6px 6px 6px 16px;
|
|
|
+ }
|
|
|
+ .el-switch__label.is-active {
|
|
|
+ color: #000000;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|