From e7932d7a92de25b1a53b0b4fe3262b6240044d1b Mon Sep 17 00:00:00 2001 From: litian <2804272236@qq.com> Date: 星期二, 05 十一月 2024 17:58:30 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TextbookReader --- src/views/readerPages/webHome.vue | 259 +++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 216 insertions(+), 43 deletions(-) diff --git a/src/views/readerPages/webHome.vue b/src/views/readerPages/webHome.vue index ebbb875..348affa 100644 --- a/src/views/readerPages/webHome.vue +++ b/src/views/readerPages/webHome.vue @@ -6,8 +6,12 @@ <span></span> <div class="userInfoBox"> <div class="userName" v-if="userInfo.name">{{ userInfo.name }}</div> - <div v-if="token"><div class="layout hover" @click="layoutBtn">閫�鍑�</div></div> - <div v-else><div class="layout hover" @click="goLogin">鐧诲綍</div></div> + <div v-if="token"> + <div class="layout hover" @click="layoutBtn">閫�鍑�</div> + </div> + <div v-else> + <div class="layout hover" @click="goLogin">鐧诲綍</div> + </div> </div> </div> <div class="contentBox"> @@ -196,9 +200,12 @@ @click="searchClose(index)" v-if="searchReaultData.isShow && searchReaultData.openIndex == index" class="hover" - ><ArrowDown - /></el-icon> - <el-icon @click="searchOpen(index)" v-else class="hover"><ArrowRight /></el-icon> + > + <ArrowDown /> + </el-icon> + <el-icon @click="searchOpen(index)" v-else class="hover"> + <ArrowRight /> + </el-icon> <span>{{ reault.chapterName }} 锛坽{ reault.itemList.length }}锛�</span> </div> <div @@ -249,9 +256,12 @@ @click="noteClose(index)" v-if="scribeData.isShow && scribeData.openIndex == index" class="hover" - ><ArrowDown - /></el-icon> - <el-icon @click="noteOpen(index)" v-else class="hover"><ArrowRight /></el-icon> + > + <ArrowDown /> + </el-icon> + <el-icon @click="noteOpen(index)" v-else class="hover"> + <ArrowRight /> + </el-icon> <span>{{ noteItem.chapterName }}</span> </div> <div @@ -387,36 +397,41 @@ size="20" @click="JumpPosition(item)" v-if="resourceType == 'default'" - ><LocationInformation - /></el-icon> + > + <LocationInformation /> + </el-icon> <el-icon @click="goPlay(item)" size="20" class="icon hover" v-if="item.resourceType == '瑙嗛'" - ><VideoPlay - /></el-icon> + > + <VideoPlay /> + </el-icon> <el-icon @click="goPlay(item, index)" size="20" class="icon hover" v-if="item.resourceType == '闊抽' && playIndex != index" - ><VideoPlay - /></el-icon> + > + <VideoPlay /> + </el-icon> <el-icon @click="goPause()" size="20" class="icon hover" v-if="item.resourceType == '闊抽' && playIndex == index" - ><VideoPause - /></el-icon> + > + <VideoPause /> + </el-icon> <el-icon @click="getCapture(item, index)" size="20" class="icon hover" v-if="item.resourceType == '鍥剧墖'" - ><View - /></el-icon> + > + <View /> + </el-icon> <el-icon size="20" class="icon hover" @@ -429,8 +444,9 @@ item.resourceType == '鍥剧墖' ) && item.isDownload == '鏄�' " - ><Download - /></el-icon> + > + <Download /> + </el-icon> <!-- 鏀惰棌鎸夐挳 --> <img :src=" @@ -481,9 +497,9 @@ <img :src="item.imgUrl" class="capture hover" mode="aspectFill" /> <div class="deleteBox" v-if="showDelete == index"> <div class="delImg"> - <el-icon @click="getCapture(item, index)" size="18" class="icon hover" - ><View - /></el-icon> + <el-icon @click="getCapture(item, index)" size="18" class="icon hover"> + <View /> + </el-icon> <img :src="bianji" class="icon hover" @click="updateScreenshot(item)" /> <img :src="shanchu" class="icon hover" @click="deleteScreenshot(item)" /> </div> @@ -1270,29 +1286,20 @@ :infoType="examinationData.infoType" /> <!-- 璁$畻鍣� --> - <el-dialog - title="璁$畻鍣�" - align-center - v-model="calculatorVisble" - width="550" - style="height: 548px" - > - <calculator /> + <el-dialog title="璁$畻鍣�" align-center v-model="calculatorVisble" width="850" class="myDialogs"> + <!-- <calculatorNew></calculatorNew> --> + <iframe src="https://www.geogebra.org/scientific" frameborder="0" class="iframe-box"></iframe> </el-dialog> </template> - <script setup lang="ts"> -import heart from '@/assets/images/examination/collectIcon.png' -import isHeart from '@/assets/images/examination/collectClickIcon.png' +import examination from '@/views/examination/index.vue' import { ref, reactive, watch, onMounted, onBeforeMount, onBeforeUnmount, inject } from 'vue' import { useRouter, useRoute } from 'vue-router' +import { ElMessage, ElMessageBox, valueEquals } from 'element-plus' import useClipboard from 'vue-clipboard3' -import examination from '../examination/index.vue' -import calculator from '../components/calculator.vue' const { toClipboard } = useClipboard() const MG: any = inject('MG') const toolClass = inject('toolClass') -const qiankunActions = inject('qiankunActions') //鑾峰彇璺敱鍣� let router = useRouter() //鑾峰彇褰撳墠璺敱鐨勪俊鎭� @@ -1302,7 +1309,6 @@ import newWord from '@/views/components/newWord.vue' import wrongQuestion from '@/views/components/wrongQuestion.vue' import voiceReader from '@/views/components/voiceReader.vue' -import { ElMessage, ElMessageBox, valueEquals } from 'element-plus' import logo from '@/assets/images/header/logo.png' import mulu from '@/assets/images/menu/mulu.png' import biji from '@/assets/images/menu/biji.png' @@ -1414,6 +1420,7 @@ const bookInfo = ref() const isBuy = ref(false) const tryPageCount = ref(0) +const searchText = ref() onMounted(() => { if (token) { getUserInfo() @@ -1459,6 +1466,7 @@ window.qiankunState.initTestBook(localStorage.getItem('bookId') + '', tryPageCount.value) } } + }) // 瀹氫箟鐖跺眰鏂规硶 @@ -1548,6 +1556,7 @@ // if (window.qiankunState && window.qiankunState.getAnswers){ // window.qiankunState.getAnswers(localStorage.getItem("")) // } + }) onBeforeUnmount(() => { @@ -1776,7 +1785,7 @@ icon: huabi, name: '鐢荤瑪', // isShow: bookConfig.value.textbookComponents.indexOf('800109C0') > -1 - isShow:true + isShow: true }, { icon: baiban, @@ -1858,10 +1867,20 @@ catalogueData.value = json.data headerData.totlePage = json.data[json.data.length - 1].end listLoading.value = false + if (localStorage.getItem('chapter') && localStorage.getItem('startPage')) { + let chapter = Number(localStorage.getItem('chapter')) + let start = Number(localStorage.getItem('startPage')) + + if (window.qiankunState && window.qiankunState.gotoPage) { + window.qiankunState.gotoPage(chapter,start) + localStorage.removeItem('chapter') + localStorage.removeItem('startPage') + } + } }) .catch(function (error) { listLoading.value = false - console.log(error) + }) } const defaultProps = { @@ -1876,7 +1895,6 @@ } const handleNodeClick = (data) => { - console.log(data) if (!isBuy.value) { if (data.start < tryPageCount.value) { headerData.process = data.start @@ -2520,7 +2538,6 @@ // } } -const searchText = ref<string>('') //绛涢�� const menuState = reactive({ open: true, notesColor: 'all' //绗旇棰滆壊 @@ -4123,15 +4140,18 @@ display: flex; justify-content: space-between; align-items: center; + .logoTxt { font-size: 24px; color: #333; letter-spacing: 2px; font-weight: bold; } + .userInfoBox { display: flex; align-items: center; + .userName { font-size: 18px; margin-right: 15px; @@ -4139,6 +4159,7 @@ border-right: 1px solid #e0e0e0; color: #2c2c2c; } + .layout { width: 69px; height: 30px; @@ -4150,11 +4171,13 @@ } } } + .contentBox { overflow: hidden; flex: 1; display: flex; position: relative; + .menuBox { width: 80px; flex-shrink: 0; @@ -4177,30 +4200,36 @@ width: 63px; margin: 10px auto; border-radius: 10px; + &.active, &:hover { background-color: rgba(0, 147, 255, 0.1); + p { color: #0093ff; } } + .menuIcon { display: inline-block; width: 32px; height: 32px; } + .name { text-align: center; line-height: 1; color: #2c3e50; } } + .reload { width: 80px; position: absolute; bottom: 100px; text-align: center; } + .setting { width: 80px; position: absolute; @@ -4208,6 +4237,7 @@ text-align: center; } } + .menuContent { // position: relative; width: 300px; @@ -4218,6 +4248,7 @@ -moz-user-select: none; -khtml-user-select: none; user-select: none; + .searchBox { width: 100%; height: 60px; @@ -4227,22 +4258,27 @@ align-items: center; border-bottom: 1px solid #efefef; } + .resourceSearchBox { padding: 10px 0; margin: 0 20px; border-bottom: 1px solid rgba(204, 204, 204, 0.32); + .classification { width: 100%; display: flex; justify-content: space-between; align-items: center; + .flex1 { flex: 1; text-align: center; } + .title { color: #999999; } + .count { width: 35px; margin: 0 auto; @@ -4253,16 +4289,19 @@ height: 18px; font-size: 12px; } + .activeClassify, .classifyItem:hover { .title { color: #0093ff; } + .count { background: #0093ff; color: #fff; } } + .showSearch { .imgBox { width: 39px; @@ -4270,17 +4309,20 @@ border-radius: 16px; margin: 0 auto; } + .imgBox:hover, .activeSearch { border: 1px solid #0093ff; } } } + .inputBox { margin-top: 10px; width: 100% !important; } } + .resourceTab { width: 100%; height: 60px; @@ -4288,18 +4330,22 @@ justify-content: center; align-items: center; font-size: 16px; + .hr { height: 25px; color: #dbdbdb !important; } + .tabItem:first-child(1) { border-right: 1px solid #707070; } + .tabItem { flex: 1; text-align: center; line-height: 57px; } + .text { width: 43px; height: 3px; @@ -4307,12 +4353,15 @@ background: #0093ff; border-radius: 3px 3px 0px 0px; } + .line { height: 3px; } } + .inputBox { width: 85%; + .custom-input { border: 1px solid #0093ff !important; border-radius: 50px; @@ -4324,19 +4373,23 @@ .is-focus, .el-input__wrapper { box-shadow: none !important; + .el-input__inner { border: none !important; height: 34px !important; } } + .el-input-group__append { padding: 0 10px !important; background: none !important; } } + .screenBox { display: flex; padding: 0 10px; + .title { margin: 10px 0; line-height: 40px; @@ -4387,14 +4440,17 @@ border: 1px solid #0093ff; } } + .menuList { height: calc(100% - 60px); overflow-y: auto; padding: 10px 0; } + .list-box { .resourceList { padding: 10px; + .resourceItem { padding: 10px 0; align-items: center; @@ -4409,11 +4465,13 @@ align-items: center; justify-content: center; position: relative; + img { height: 100%; width: 100%; object-fit: contain; } + .handleBox { position: absolute; top: 0; @@ -4423,11 +4481,13 @@ background: rgba(44, 44, 44, 0.6); text-align: center; padding: 2px; + .delImg { height: 100%; display: flex; align-items: center; justify-content: center; + .icon { position: static; margin: 5px; @@ -4443,21 +4503,25 @@ } } } + .screenshot { padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; + .captureItem { margin-bottom: 10px; width: 46%; position: relative; + .imgBox { border: 1px solid #d8d8d8; width: 100%; height: 80px; margin-bottom: 5px; } + .deleteBox { position: absolute; top: 0; @@ -4467,11 +4531,13 @@ background: rgba(44, 44, 44, 0.6); text-align: center; padding: 2px; + .delImg { height: 100%; display: flex; align-items: center; justify-content: center; + .icon { position: static; margin: 5px; @@ -4479,6 +4545,7 @@ } } } + // .capture { // width: 100%; // } @@ -4502,22 +4569,26 @@ background: #fff; border-radius: 5px; padding: 10px 0; + .textBox { .title { display: flex; justify-content: space-between; align-items: center; margin-right: 10px; + .border-left { height: 25px; border-right: 4px solid; border-radius: 0 5px 5px 0; margin-right: 10px; } + .title-con { display: flex; align-items: center; color: #949494; + .round { width: 10px; height: 10px; @@ -4530,6 +4601,7 @@ margin-left: 5px; } } + .chapter { color: #b7b7b7; margin: 5px 5px 5px 14px; @@ -4542,10 +4614,12 @@ padding: 0 5px; } } + .noteText { margin: 10px 10px 10px 15px; border-radius: 3px; padding: 2px 5px; + .con { max-height: 65px; display: -webkit-box; @@ -4555,14 +4629,17 @@ } } } + .chapterName { margin: 15px; display: flex; align-items: center; + span { margin-left: 5px; } } + .reMarkItem { margin: 15px; background: #fff; @@ -4570,8 +4647,10 @@ padding: 10px; display: flex; justify-content: space-between; + .reMarkCon { display: flex; + .con { width: 200px; white-space: nowrap; @@ -4580,10 +4659,12 @@ margin-right: 8px; } } + .deleteReMarkImg { display: flex; align-items: center; } + .questionCon { width: 240px; white-space: nowrap; @@ -4599,10 +4680,12 @@ border-radius: 10px; padding: 10px; display: flex; + .index { line-height: 24px; margin-right: 10px; } + .searchCon { flex: 1; width: 240px; @@ -4614,6 +4697,7 @@ -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; + .searchColor { background: rgb(245, 225, 42, 0.5); } @@ -4621,6 +4705,7 @@ } } } + .allSearch, .notesBox, .resourceBox, @@ -4630,9 +4715,11 @@ height: calc(100% - 60px); overflow-y: auto; } + .questionList { height: 83%; } + .question-bottom { position: absolute; bottom: 0; @@ -4654,6 +4741,7 @@ } } } + .menuStateBox { width: 25px; height: 25px; @@ -4665,6 +4753,7 @@ text-align: center; box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3); z-index: 2; + img { height: 10px; width: 18px; @@ -4675,6 +4764,7 @@ flex: 1; font-size: 16px; position: relative; + .pageBox-header { height: 57px; padding: 0 20px; @@ -4683,6 +4773,7 @@ z-index: 99; align-items: center; justify-content: space-between; + .classTime { display: flex; align-items: center; @@ -4690,6 +4781,7 @@ border-radius: 20px 20px 20px 20px; color: #0093ff; padding: 8px; + .qureIcon { width: 9px; height: 9px; @@ -4698,16 +4790,20 @@ margin: 0 5px; } } + .progress { text-align: center; + .bookName { font-weight: 800; margin-bottom: 5px; color: #333; } } + .rightBox { display: flex; + .pageSizeBox { display: flex; align-items: center; @@ -4717,21 +4813,25 @@ padding: 5px; display: flex; align-items: center; + img { width: 18px; height: 18px; } } } + .brushImgBox { display: flex; align-items: center; border-left: 1px solid #d8d8d8; + div { padding: 5px; display: flex; align-items: center; } + .brushImg { width: 22px; margin-left: 20px; @@ -4740,21 +4840,26 @@ } } } + .pageBox-content { height: calc(100% - 57px); background: #fbf9f4; padding: 10px 0; + .content-box { height: 100%; position: relative; + #container { background: #fbf9f4; height: 100%; + #__qiankun_microapp_wrapper_for_app_content__ { height: 100%; } } } + .canvas-box { height: 100%; width: 100%; @@ -4766,6 +4871,7 @@ } } } + .toolBox { position: relative; box-shadow: -3px 0px 6px 1px rgba(0, 0, 0, 0.07); @@ -4774,11 +4880,13 @@ -moz-user-select: none; -khtml-user-select: none; user-select: none; + .toolTitle { height: 57px; line-height: 53px; text-align: center; border-bottom: 1px solid #efefef; + .text { width: 43px; height: 3px; @@ -4787,8 +4895,10 @@ border-radius: 3px 3px 0px 0px; } } + .menu { padding-top: 20px; + li > div { // height: 50px; padding: 10px 36px; @@ -4808,6 +4918,7 @@ } } } + .openBox { width: 25px; height: 25px; @@ -4826,22 +4937,27 @@ width: 18px; } } + .right { right: 198px !important; border-radius: 0px 3px 3px 0px !important; } + .classRoomBox { position: absolute; bottom: 0; width: 100%; + .el-tabs__nav { width: 100% !important; } + .el-tabs__item { flex: 1 !important; padding: 0 !important; text-align: center; } + .el-tabs__active-bar { width: 43px !important; left: 30px !important; @@ -4849,13 +4965,16 @@ bottom: 1px; border-radius: 3px 3px 0px 0px; } + .tabBox { height: 100px; padding: 10px 17px; text-align: center; + .insertSelect { display: flex; justify-content: space-between; + .selectItem { text-align: center; background: rgba(207, 207, 207, 0.13); @@ -4863,6 +4982,7 @@ border-radius: 5px; border: 2px solid #cfcfcf; } + .typeActive { text-align: center; color: #0093ff; @@ -4872,6 +4992,7 @@ background: rgba(0, 147, 255, 0.13); } } + .giveLessons { color: #0093ff; width: 90px; @@ -4882,6 +5003,7 @@ display: flex; align-items: center; justify-content: center; + span { margin-left: 10px; } @@ -4902,6 +5024,7 @@ border-radius: 10px; padding: 6px; overflow: hidden; + .floatToolItem { margin: 10px 0; height: 30px; @@ -4911,11 +5034,13 @@ border-radius: 5px; color: #fff; cursor: pointer; + .imgBox { width: 24px; height: 24px; margin: 0 auto; position: relative; + img { width: 100%; height: 100%; @@ -4931,10 +5056,12 @@ margin: auto; } } + .text { margin-right: 5px; } } + .floatToolItem:hover, .floatToolActive { background-color: rgba(255, 255, 255, 0.3); @@ -4953,10 +5080,12 @@ background: #fff; overflow: hidden; box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3); + .toolList { display: flex; justify-content: center; align-items: center; + .floatToolItem { margin: 6px 8px; padding: 5px; @@ -4967,6 +5096,7 @@ align-items: center; // flex: 1; font-size: 14px; + .imgBox { height: 18px; width: 18px; @@ -4974,9 +5104,11 @@ margin: 0 auto; } } + .floatToolItem:hover { background-color: rgba(44, 44, 44, 0.2); } + .layOutTool { height: 20px; margin-right: 5px; @@ -4988,6 +5120,7 @@ .dialogToolBox { position: fixed; z-index: 2; + .toolSelectBox { height: 40px; display: flex; @@ -4997,6 +5130,7 @@ overflow: hidden; padding: 5px; background-color: rgba(90, 90, 90, 0.9); + // background-image: linear-gradient(to right, #0093ff, #005dff); .dialogToolItem { user-select: none; @@ -5007,10 +5141,12 @@ margin: 0 5px; cursor: pointer; text-align: center; + span { color: #fff; } } + .dialogToolItem:hover, .active { background-color: rgba(255, 255, 255, 0.2); @@ -5020,6 +5156,7 @@ } } } + .colorSelectBox { padding: 5px 10px; width: 190px; @@ -5029,8 +5166,10 @@ box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16); border-radius: 5px; margin-bottom: 10px; + .flex1 { flex: 1; + .scribeItem { width: 18px; height: 18px; @@ -5045,6 +5184,7 @@ } } } + .lineDeleteBox { position: fixed; z-index: 2; @@ -5054,6 +5194,7 @@ background-color: rgba(90, 90, 90, 0.9); border-radius: 5px; display: flex; + .dialogToolItem { padding: 3px; margin: 0 5px; @@ -5062,10 +5203,12 @@ justify-content: center; align-items: center; } + .dialogToolItem:hover { background-color: rgba(255, 255, 255, 0.3); } } + .noteContentBox { max-width: 240px; position: fixed; @@ -5073,6 +5216,7 @@ padding: 10px; border-radius: 5px; } + .dictionaryDataBox { position: fixed; z-index: 2; @@ -5080,9 +5224,11 @@ padding: 5px 20px; background: #fff; border-radius: 5px; + .word { font-weight: bold; } + .phone_con { .per-phone { align-items: center; @@ -5096,33 +5242,40 @@ margin-right: 10px; margin-top: 10px; padding: 8px 10px; + span { margin: 0 10px; flex: 1; } } + .soundBtn { width: 16px; height: 14px; } } + .trans { padding: 20px 0; + .itemList { display: flex; padding: 10px 0; + .index { margin-right: 15px; } + .pos { margin-right: 30px; } } } } + .wendabox { width: 100%; - height: 80vh; + height: 95vh; iframe { width: 100%; @@ -5154,38 +5307,48 @@ top: 0px !important; right: 0px !important; } + .el-dialog__body { padding: 20px !important; } + .el-dialog__footer { padding: 10px 20px 20px !important; text-align: right; box-sizing: border-box; } } + .myDialogs { height: 90vh; } + .myAnserDialogs { width: 700px; height: 90vh; } + .myNoteDialogs { width: 500px !important; } + .screenshotDialog { width: 400px !important; } + .baiduDialog { width: 90vw; height: 90vh; } + .noteColorSelectBox { margin-top: 10px; width: 190px; display: flex; + .flex1 { flex: 1; + .scribeItem { width: 18px; height: 18px; @@ -5198,12 +5361,15 @@ } } } + .videoBox { text-align: center; + video { width: 100%; } } + .audioBox { // display:none; } @@ -5211,16 +5377,23 @@ .wordBox { height: 600px; } + .imgUrlBox { width: 100%; text-align: center; + img { width: 100%; } } + .voice-reader { position: absolute; bottom: 30px; left: 50px; } +.iframe-box { + width:100%; + height: 800px; +} </style> -- Gitblit v1.9.1