From 2cac4a0f4ea0b1cf7bff4759fae8136c72792563 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期一, 14 四月 2025 15:30:29 +0800 Subject: [PATCH] 番茄闹钟 --- src/views/readerPages/webHome.vue | 718 +++++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 570 insertions(+), 148 deletions(-) diff --git a/src/views/readerPages/webHome.vue b/src/views/readerPages/webHome.vue index 3ba1680..f709147 100644 --- a/src/views/readerPages/webHome.vue +++ b/src/views/readerPages/webHome.vue @@ -6,9 +6,15 @@ <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 @click="openFormulaDialog">鍏紡</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 class="layout hover" @click="openFormulaDialog">鍏紡</div> + </div> --> </div> </div> <div class="contentBox"> @@ -197,9 +203,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 @@ -250,9 +259,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 @@ -369,66 +381,101 @@ ><VideoCamera /></el-icon> --> <!-- <el-icon v-else-if="activeClassify == 'other'" size="30"><Files /></el-icon> --> - <img src="@/assets/images/resource/yp-mr.png" v-else-if="activeClassify == 'audio'" /> - <img src="@/assets/images/resource/sp-mr.png" v-else-if="activeClassify == 'video'" /> - <img src="@/assets/images/resource/qt-mr.png" v-else-if="activeClassify == 'other'" /> + <img + src="@/assets/images/resource/yp-mr.png" + v-else-if="activeClassify == 'audio'" + /> + <img + src="@/assets/images/resource/sp-mr.png" + v-else-if="activeClassify == 'video'" + /> + <img + src="@/assets/images/resource/qt-mr.png" + v-else-if="activeClassify == 'other'" + /> <div class="handleBox" v-if="showHandle == index"> <div class="delImg"> <el-icon class="icon hover" size="20" @click="JumpPosition(item)" - v-if="resourceType == 'default'" - ><LocationInformation - /></el-icon> + v-if="item.pagination" + > + <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 + @click="goPlay(item)" + size="20" + class="icon hover" + v-if=" + item.resourceType != '瑙嗛' && + item.resourceType != '闊抽' && + item.resourceType != '鍥剧墖' + " + > + <View /> + </el-icon> <el-icon size="20" class="icon hover" - @click="goPlay(item)" - v-if=" - !( - item.resourceType == '瑙嗛' || - item.resourceType == '闊抽' || - item.resourceType == '涔犻' || - item.resourceType == '鍥剧墖' - ) && item.isDownload == '鏄�' - " - ><Download - /></el-icon> + @click="goDownload(item)" + v-if="item.isDownload == '鏄�'" + > + <Download /> + </el-icon> <!-- 鏀惰棌鎸夐挳 --> - <img - :src="collectResourceList.findIndex(citem => citem.id == item.id) > -1 ? isHeart : heart " - class="icon hover" - style="width: 15px;" - @click="handleCollectResource(item.id,item.md5 ? item.md5 : '',item.resourcePath ? item.resourcePath : '',item.resourceType,item.resourceType == '瑙嗛' || '闊抽' ? 'bits' : 'json',item.resourceName)" /> + <img + :src=" + collectResourceList.findIndex((citem) => citem.id == item.id) > -1 + ? isHeart + : heart + " + class="icon hover" + style="width: 15px" + @click=" + handleCollectResource( + item.id, + item.md5 ? item.md5 : '', + item.resourcePath ? item.resourcePath : '', + item.resourceType, + item.resourceType == '瑙嗛' || '闊抽' ? 'bits' : 'json', + item.resourceName + ) + " + /> </div> </div> </div> @@ -459,9 +506,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> @@ -538,9 +585,9 @@ </div> <!-- 棰樺簱搴曢儴鏀惰棌澶瑰拰閿欓闆� --> <ul class="question-bottom" v-if="activeMenu == '棰樺簱'"> - <li @click="selectExercisesType('collection')">鏀惰棌澶�</li> - <li @click="selectExercisesType('wrong')">閿欓鏈�</li> - </ul> + <li @click="selectExercisesType('collection')">鏀惰棌澶�</li> + <li @click="selectExercisesType('wrong')">閿欓鏈�</li> + </ul> <!-- 鑿滃崟鍐呭鏀惰捣 --> <div class="menuStateBox" v-if="menuState.open"> <svg @@ -601,6 +648,18 @@ <!-- 鐢荤瑪鐢诲竷 --> <div class="canvas-box" v-show="canvasShow"> <canvas id="canvasRef" :width="canvasWith" :height="canvasheight"></canvas> + </div> + <!-- 鐣寗闂归挓缁勪欢 --> + <div + class="watch-box" + v-if="pomodoroRef && pomodoroRef.isShow" + :style="{ top:position.x + 'px', left:position.y + 'px'}" + > + <p @mousedown.native="mouseDown">{{ formatTime(pomodoroRef.pageData.currentTime) }}</p> + <span @click="()=> pomodoroRef.isRuning ? pomodoroRef.pauseFun() : pomodoroRef.startFun()">{{pomodoroRef.isRuning ? '鏆傚仠': '寮�濮�'}}</span> + <span @click="pomodoroRef.resetFun" >閲嶇疆</span> + <span @click="pomodoroRef.handleRestFun(false)">闀夸紤鎭�</span> + <span @click="pomodoroRef.handleRestFun(true)">鐭紤鎭�</span> </div> </div> </div> @@ -817,7 +876,7 @@ </div> </div> <!-- 璇煶闃呰缁勪欢 --> - <!-- <div class="voice-reader"> + <!-- <div class="voice-reader"> <voiceReader /> </div> --> </div> @@ -1109,9 +1168,12 @@ <video controls controlslist="nodownload" :src="testVideo"></video> </div> - <!-- <div class="wordBox" v-if="resourType == 'word'"> - <vue-office-docx :src="testWord" /> - </div> --> + <div class="wordBox" v-if="resourType == 'PDF' || resourType == 'PPT' || resourType == 'WORD'"> + <div v-for="(item, index) in showData" :key="index" class="pdfItem" :page="index + 1"> + <img :src="item.showSrc" alt="" style="min-height: 550px" loading="lazy" /> + <el-divider content-position="center"> 绗� {{ index + 1 }} 椤� </el-divider> + </div> + </div> </el-dialog> <div class="audioBox" v-show="false"> <!-- <video controls controlslist="nodownload" :src="testVideo"></video> --> @@ -1220,6 +1282,11 @@ </el-dialog> <el-dialog title="妯″瀷宸ュ叿" align-center v-model="modelToolVisble" width="80%" class="myDialogs"> <div class="wendabox"> + <iframe :src="sceneUrl" frameborder="0"></iframe> + </div> + </el-dialog> + <el-dialog title="妯″瀷宸ュ叿" align-center v-model="modelTool" width="80%" class="myDialogs"> + <div class="wendabox"> <iframe src="https://adjam93.github.io/threejs-model-viewer/#" frameborder="0"></iframe> </div> </el-dialog> @@ -1239,12 +1306,7 @@ <wrongQuestion /> </div> </el-dialog> - <el-dialog - title="鍏紡缂栬緫" - align-center - v-model="formulaDialog" - class="myDialogs" - > + <el-dialog title="鍏紡缂栬緫" align-center v-model="formulaDialog" class="myDialogs"> <div class="wendabox"> <formula /> </div> @@ -1258,23 +1320,25 @@ :infoType="examinationData.infoType" /> <!-- 璁$畻鍣� --> - <el-dialog title="璁$畻鍣�" align-center v-model="calculatorVisble" width="550" style="height:548px"> - <calculator /> - </el-dialog> + <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> + <!-- 鐣寗闂归挓 --> + <!-- <pomodoro ref="pomodoroRef" /> --> </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 pomodoro from '@/views/components/pomodoro.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 { useFormatData } from '@/hooks/public' import useClipboard from 'vue-clipboard3' -import examination from '../examination/index.vue' -import calculator from '../components/calculator.vue' const { toClipboard } = useClipboard() +const { formatTime } = useFormatData() const MG: any = inject('MG') const toolClass = inject('toolClass') -const qiankunActions = inject('qiankunActions') //鑾峰彇璺敱鍣� let router = useRouter() //鑾峰彇褰撳墠璺敱鐨勪俊鎭� @@ -1285,7 +1349,6 @@ import formula from '@/views/components/formula.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' @@ -1394,9 +1457,16 @@ const bookConfig = ref({}) const activeCatalog = ref() const reMarResult = ref() +const bookInfo = ref() +const isBuy = ref(false) +const tryPageCount = ref(0) +const searchText = ref() onMounted(() => { if (token) { getUserInfo() + } + if (localStorage.getItem('bookId')) { + getBookInfo() } setTimeout(() => { canvasWith.value = document.querySelector('.content-box').offsetWidth @@ -1427,12 +1497,14 @@ window.qiankunActions.onGlobalStateChange((state, prev) => { console.log('鐖跺眰state鍙樺寲', state) window.qiankunState = state - - if (window.qiankunState && window.qiankunState.initTestBook) { - window.qiankunState.initTestBook( - localStorage.getItem('bookId') + '', - localStorage.getItem('tryPageCount') - ) + if (isBuy.value) { + if (window.qiankunState && window.qiankunState.initTestBook) { + window.qiankunState.initTestBook(localStorage.getItem('bookId') + '') + } + } else { + if (window.qiankunState && window.qiankunState.initTestBook) { + window.qiankunState.initTestBook(localStorage.getItem('bookId') + '', tryPageCount.value) + } } }) @@ -1544,6 +1616,45 @@ // } // } // ) + +//鏍规嵁refcode鑾峰彇鍥句功淇℃伅 + +const getBookInfo = () => { + const obj = { + storeInfo: 'jsek_digitalTextbooks', + path: '*', + queryType: '*', + coverSize: { + width: 150 + }, + paging: { + start: 0, + size: 6 + }, + filterList: [ + { + value: 'Normal', + field: 'state' + } + ], + fields: { + author: [], + RefCodes: [localStorage.getItem('bookId')], + probationPage: [] + } + } + MG.store.getProductList(obj).then((res) => { + console.log(res.datas, '鍥句功淇℃伅') + if (!res.datas.length) return + bookInfo.value = res.datas[0] + if (res.datas[0].purchasedSaleMethodIdList.includes(res.datas[0].defaultSaleMethodId)) { + isBuy.value = true + } else { + isBuy.value = false + } + tryPageCount.value = Number(res.datas[0].probationPage) + }) +} const getUserInfo = () => { MG.identity.getCurrentAppUser().then((res) => { @@ -1707,12 +1818,18 @@ icon: fanqiezhong, isShow: bookConfig.value.textbookComponents.indexOf('E4DC9777') > -1 } + // { + // name: '鐣寗闂归挓', + // icon: fanqiezhong, + // isShow: true + // } ] floatingToolBox = [ { icon: huabi, name: '鐢荤瑪', isShow: bookConfig.value.textbookComponents.indexOf('800109C0') > -1 + // isShow: true }, { icon: baiban, @@ -1794,10 +1911,19 @@ 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 = { @@ -1812,9 +1938,8 @@ } const handleNodeClick = (data) => { - console.log(data) - if (localStorage.getItem('tryPageCount')) { - if (data.start < localStorage.getItem('tryPageCount')) { + if (!isBuy.value) { + if (data.start < tryPageCount.value) { headerData.process = data.start if (window.qiankunState && window.qiankunState.gotoPage) window.qiankunState.gotoPage(data.chapter, data.start) @@ -1952,6 +2077,15 @@ if (resItem1.resourceType == classifySelectList.value[0].title) { resourceDataList.value.push(resItem1) } + if (activeClassify.value == 'other') { + if ( + resItem1.resourceType != '鍥剧墖' && + resItem1.resourceType != '瑙嗛' && + resItem1.resourceType != '闊抽' + ) { + resourceDataList.value.push(resItem1) + } + } }) } } else { @@ -2026,6 +2160,15 @@ if (resItem1.resourceType == classifySelectList.value[0].title) { resourceDataList.value.push(resItem1) } + if (activeClassify.value == 'other') { + if ( + resItem1.resourceType != '鍥剧墖' && + resItem1.resourceType != '瑙嗛' && + resItem1.resourceType != '闊抽' + ) { + resourceDataList.value.push(resItem1) + } + } }) } } @@ -2058,7 +2201,10 @@ } } //璧勬簮鎾斁瑙嗛 +const sceneUrl = ref() +const showData = ref() const goPlay = (data, index) => { + console.log(data.resourceType, 123) resourType.value = data.resourceType if (data.resourceType == '瑙嗛') { if (data.md5) { @@ -2075,6 +2221,59 @@ testAudio.value = bookConfig.value.resourceUrl + '/' + data.resourcePath } autoPlay() + } else if (data.resourceType == '妯″瀷') { + console.log(data, 222) + let file = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5 + console.log(file.exd, 777) + const ctx = 'https://jsek.bnuic.com' + if (data.md5) { + sceneUrl.value = + 'https://jsek.bnuic.com/books/book/civilAviation/static/modelView/index.html?md5=' + + data.md5 + + '&name=je' + + '&domain=' + + ctx + + '&exd=obj' + + '&target=iframe' + } else { + sceneUrl.value = bookConfig.value.resourceUrl + '/' + data.resourcePath + } + modelToolVisble.value = true + // if (data.md5) { + // window.open(bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5) + // } else if (data.resourcePath) { + // window.open(bookConfig.value.resourceUrl + '/' + data.resourcePath) + // } + } else if (data.resourceType == 'PPT' || data.resourceType == 'PDF') { + let md5 = data.md5 + let dataList = [] + MG.file + .getPdfInfo({ + md5 + }) + .then((res: any) => { + console.log() + if (res && res.totalPages) { + for (let i = 0; i < res.totalPages; i++) { + const src = + bookConfig.value.requestCtx + + '/file/GetPdfPageImage?md5=' + + md5 + + '&index=' + + (i + 1) + + '&dpi=300' + dataList.push({ + showSrc: src + }) + } + console.log(dataList) + showData.value = dataList + // 鍚姩椤电爜瑙傚療 + setTimeout(() => { + resourVisble.value = true + }, 500) + } + }) } else { if (data.md5) { window.open(bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5) @@ -2086,6 +2285,13 @@ // else if (data.resourceType == 'word') { // testWord.value = bookConfig.value.resourceUrl + '/' + data.resourcePath // } +} +const goDownload = (data) => { + if (data.md5) { + window.open(bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5) + } else if (data.resourcePath) { + window.open(bookConfig.value.resourceUrl + '/' + data.resourcePath) + } } // 鍏抽棴瑙嗛 const resourVisbleClose = () => { @@ -2113,6 +2319,9 @@ //璧勬簮绫诲瀷閫夋嫨榛樿/鏁欏笀 const selectResourceType = (type) => { resourceType.value = type + resourceDataList.value = [] + classifySelectList.value = [] + activeClassify.value = '' searchText.value = '' if (type == 'collect') { getCollectResource() @@ -2125,12 +2334,11 @@ activeClassify.value = item.key resourceDataList.value = [] searchText.value = '' - if(resourceType.value == 'collect') { + if (resourceType.value == 'collect') { getCollectResource() } else { getResourceData() } - } const searchBtn = () => { if (searchShow.value) { @@ -2142,17 +2350,17 @@ // 鑾峰彇鏀惰棌鐨勮祫婧� const getCollectResource = () => { - if(token) { + if (token) { MG.identity - .getUserKey({ - domain: 'collectResource', - keys: [bookConfig.value.bookId] - }) - .then((res) => { - if (res.length) { - collectResourceList.value = JSON.parse(res[0].value) - console.log('鏀惰棌璧勬簮鍒楄〃', collectResourceList.value) - if(collectResourceList.value.length > 0) { + .getUserKey({ + domain: 'collectResource', + keys: [bookConfig.value.bookId] + }) + .then((res) => { + if (res.length) { + collectResourceList.value = JSON.parse(res[0].value) + console.log('鏀惰棌璧勬簮鍒楄〃', collectResourceList.value) + if (collectResourceList.value.length > 0) { let imgCount = 0 let audioCount = 0 let videoCount = 0 @@ -2225,13 +2433,22 @@ if (resItem1.resourceType == classifySelectList.value[0].title) { resourceDataList.value.push(resItem1) } + if (activeClassify.value == 'other') { + if ( + resItem1.resourceType != '鍥剧墖' && + resItem1.resourceType != '瑙嗛' && + resItem1.resourceType != '闊抽' + ) { + resourceDataList.value.push(resItem1) + } + } }) } + } + } else { + resourceDataList.value = [] } - } else { - resourceDataList.value = [] - } - }) + }) } else { ElMessageBox.confirm('璇峰厛鐧诲綍锛�', { confirmButtonText: '鍘荤櫥褰�', @@ -2252,27 +2469,27 @@ } } // 鏀惰棌鎸夐挳 -const handleCollectResource = (id,md5,resourcePath,resourceType,source,resourceName) => { - if(collectResourceList.value.findIndex(item => item.id == id) > -1) { - collectResourceList.value = collectResourceList.value.filter(item => item.id != id) - } else { - collectResourceList.value.push({ - id, - md5, - resourcePath:resourcePath.replace(bookConfig.value.resourceUrl + '/',''), - resourceType, - source, - resourceName - }) - } - MG.identity.setUserKey({ +const handleCollectResource = (id, md5, resourcePath, resourceType, source, resourceName) => { + if (collectResourceList.value.findIndex((item) => item.id == id) > -1) { + collectResourceList.value = collectResourceList.value.filter((item) => item.id != id) + } else { + collectResourceList.value.push({ + id, + md5, + resourcePath: resourcePath.replace(bookConfig.value.resourceUrl + '/', ''), + resourceType, + source, + resourceName + }) + } + MG.identity.setUserKey({ setKeyRequests: [ { - domain: "collectResource", - key:bookConfig.value.bookId, - value: JSON.stringify(collectResourceList.value), - }, - ], + domain: 'collectResource', + key: bookConfig.value.bookId, + value: JSON.stringify(collectResourceList.value) + } + ] }) } @@ -2369,15 +2586,14 @@ //閿欓鏈� const wrongQuestionVisble = ref(false) const selectExercisesType = (type) => { - if (type == 'exercises') { getExercisesList() - exercisesType.value = type - searchText.value = '' + exercisesType.value = type + searchText.value = '' } else if (type == 'additional') { getAdditionalList() - exercisesType.value = type - searchText.value = '' + exercisesType.value = type + searchText.value = '' } else if (type == 'wrong') { openExaminationDialog(true, {}, 'errorQuestion') } else { @@ -2458,7 +2674,6 @@ // } } -const searchText = ref<string>('') //绛涢�� const menuState = reactive({ open: true, notesColor: 'all' //绗旇棰滆壊 @@ -2712,22 +2927,24 @@ break } } - +type pomodoroType = InstanceType<typeof Pomodoro> const baiduVisible = ref(false) const wendaVisible = ref(false) const cidianVisible = ref(false) const functionVisible = ref(false) const siweiVisble = ref(false) const modelToolVisble = ref(false) +const modelTool = ref(false) const shengciVisble = ref(false) const calculatorVisble = ref(false) +const pomodoroRef = ref<pomodoroType>() const activeTool = ref(0) const toolState = reactive({ open: true }) const resourceUrl = ref('') -const selectTeachTools = (item) => { +const selectTeachTools = (item: any) => { if (token) { activeTool.value = item.name switch (item.name) { @@ -2741,7 +2958,7 @@ siweiVisble.value = true break case '妯″瀷宸ュ叿': - modelToolVisble.value = true + modelTool.value = true break case '璇嶅吀': cidianVisible.value = true @@ -2751,8 +2968,10 @@ shengciVisble.value = true break case '璁$畻鍣�': - calculatorVisble.value = true - break + calculatorVisble.value = true + case '鐣寗闂归挓': + pomodoroRef.value.setDialogVisable(true) + break } } else { ElMessageBox.confirm('璇峰厛鐧诲綍锛�', { @@ -2830,7 +3049,6 @@ //娴獥宸ュ叿鏍忕偣鍑讳簨浠� const floatItemHandle = (item) => { - console.log(floatingToolData.activeToolData, 'floatingToolData.activeToolData') if (floatingToolData.activeToolData == '鐢荤瑪') { floatingToolData.activeToolData = '' } else { @@ -3067,7 +3285,6 @@ //璺宠浆 const goReMark = (item) => { - console.log(item) if (window.qiankunState && window.qiankunState.gotoPage) { window.qiankunState.gotoPage(Number(item.chapterNum), Number(item.page)) } @@ -3152,7 +3369,6 @@ } //鍙栨秷鍥炶皟 const closeFn = (base64: any) => { - console.log(base64) floatingToolData.activeToolData = '' } //淇濆瓨鎴浘 @@ -3399,7 +3615,6 @@ window.speechSynthesis.cancel() const synth = window.speechSynthesis const utterance = new SpeechSynthesisUtterance(dialogToolData.txt) - console.log(utterance, 1) utterance.lang = 'zh-CN' // 璁剧疆璇█涓轰腑鏂� synth.speak(utterance) showToolBox.value = false @@ -3436,10 +3651,8 @@ showToolBox.value = false // cidianVisible.value = true - console.log(dialogToolData.txt) break case '鐧剧': - console.log('https://baike.baidu.com/item/' + dialogToolData.txt) baiduVisible.value = true break } @@ -3680,7 +3893,6 @@ const item = res[i] // 鍌ㄥ�� let data = catalogueData.value.find((item1) => item1.chapter == Number(item.key)) - // console.log(data,'666') let dataList = [] if (catalogueData.value.length > 0) { catalogueData.value.forEach((item1) => { @@ -3722,7 +3934,6 @@ }) } } - console.log(scribeData.noteList, 'scribeData.noteList') } listLoading.value = false }) @@ -3796,13 +4007,11 @@ document.addEventListener('mousemove', function (event) { var x = event.offsetX var y = event.offsetY - // console.log('榧犳爣鍧愭爣浣嶇疆锛�', x, y) noteContent.top = event.clientY + 20 noteContent.left = event.clientX }) } window.noteOut = (type) => { - console.log(type, 123) noteContent.show = false } @@ -3852,7 +4061,6 @@ //绗旇璺宠浆 const jumpContent = (item) => { - console.log(item) if (window.qiankunState && window.qiankunState.gotoPage) { window.qiankunState.gotoPage(Number(item.chapterNum), Number(item.page)) } @@ -3860,7 +4068,6 @@ //鑿滃崟绗旇缂栬緫 const update = (item) => { - console.log(item) dialogToolData.chapter = item.chapterNum noteColorActive.value = item.color formData.id = item.id @@ -3943,13 +4150,11 @@ } ]) .then((res) => { - console.log(res[0][0], 'cid') if (res.length > 0 && res[0].length > 0) { res[0].map((item) => { item.trans = JSON.parse(item.trans) }) dictionaryData.data = res[0][0] - console.log(dictionaryData.data, '14') dictionaryData.showContent = true } }) @@ -4045,6 +4250,29 @@ const openFormulaDialog = () => { formulaDialog.value = true } + +// 鐣寗閽熺Щ鍔� +const isMove = ref<boolean>(false) +const position = reactive({x:100,y:100}) +const dragOffset = reactive({x:0,y:0}) +const mouseDown = (e: MouseEvent) => { + isMove.value = true + dragOffset.x = e.clientX - position.x + dragOffset.y = e.clientY - position.y + document.addEventListener('mousemove', mouseMove) + document.addEventListener('mouseup', mouseUp) +} +const mouseUp = (e: MouseEvent) => { + isMove.value = false + document.removeEventListener('mousemove', mouseMove) + document.removeEventListener('mouseup', mouseUp) +} +const mouseMove = (e: MouseEvent) => { + if (isMove.value) { + position.x = e.clientX - dragOffset.x + position.y = e.clientY - dragOffset.y + } +} </script> <style lang="less"> @@ -4066,15 +4294,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; @@ -4082,6 +4313,7 @@ border-right: 1px solid #e0e0e0; color: #2c2c2c; } + .layout { width: 69px; height: 30px; @@ -4093,11 +4325,13 @@ } } } + .contentBox { overflow: hidden; flex: 1; display: flex; position: relative; + .menuBox { width: 80px; flex-shrink: 0; @@ -4120,30 +4354,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; @@ -4151,6 +4391,7 @@ text-align: center; } } + .menuContent { // position: relative; width: 300px; @@ -4161,6 +4402,7 @@ -moz-user-select: none; -khtml-user-select: none; user-select: none; + .searchBox { width: 100%; height: 60px; @@ -4170,22 +4412,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; @@ -4196,16 +4443,19 @@ height: 18px; font-size: 12px; } + .activeClassify, .classifyItem:hover { .title { color: #0093ff; } + .count { background: #0093ff; color: #fff; } } + .showSearch { .imgBox { width: 39px; @@ -4213,17 +4463,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; @@ -4231,18 +4484,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; @@ -4250,12 +4507,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; @@ -4267,19 +4527,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; @@ -4330,14 +4594,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; @@ -4352,11 +4619,13 @@ align-items: center; justify-content: center; position: relative; + img { height: 100%; width: 100%; object-fit: contain; } + .handleBox { position: absolute; top: 0; @@ -4366,11 +4635,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; @@ -4386,21 +4657,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; @@ -4410,11 +4685,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; @@ -4422,6 +4699,7 @@ } } } + // .capture { // width: 100%; // } @@ -4445,22 +4723,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; @@ -4473,6 +4755,7 @@ margin-left: 5px; } } + .chapter { color: #b7b7b7; margin: 5px 5px 5px 14px; @@ -4485,10 +4768,12 @@ padding: 0 5px; } } + .noteText { margin: 10px 10px 10px 15px; border-radius: 3px; padding: 2px 5px; + .con { max-height: 65px; display: -webkit-box; @@ -4498,14 +4783,17 @@ } } } + .chapterName { margin: 15px; display: flex; align-items: center; + span { margin-left: 5px; } } + .reMarkItem { margin: 15px; background: #fff; @@ -4513,8 +4801,10 @@ padding: 10px; display: flex; justify-content: space-between; + .reMarkCon { display: flex; + .con { width: 200px; white-space: nowrap; @@ -4523,10 +4813,12 @@ margin-right: 8px; } } + .deleteReMarkImg { display: flex; align-items: center; } + .questionCon { width: 240px; white-space: nowrap; @@ -4542,10 +4834,12 @@ border-radius: 10px; padding: 10px; display: flex; + .index { line-height: 24px; margin-right: 10px; } + .searchCon { flex: 1; width: 240px; @@ -4557,6 +4851,7 @@ -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; + .searchColor { background: rgb(245, 225, 42, 0.5); } @@ -4564,6 +4859,7 @@ } } } + .allSearch, .notesBox, .resourceBox, @@ -4573,30 +4869,33 @@ height: calc(100% - 60px); overflow-y: auto; } + .questionList { - height:83% + height: 83%; } + .question-bottom { position: absolute; bottom: 0; display: flex; justify-content: space-evenly; - width:300px; - padding:20px 0; - background-color:#fff; + width: 300px; + padding: 20px 0; + background-color: #fff; li { cursor: pointer; width: 65px; - height:65px; - border:1px solid #cfcfcf; - border-radius:10px; - background-color:#f9f9f9; - display:flex; + height: 65px; + border: 1px solid #cfcfcf; + border-radius: 10px; + background-color: #f9f9f9; + display: flex; justify-content: center; align-items: center; } } } + .menuStateBox { width: 25px; height: 25px; @@ -4608,6 +4907,7 @@ text-align: center; box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3); z-index: 2; + img { height: 10px; width: 18px; @@ -4618,6 +4918,7 @@ flex: 1; font-size: 16px; position: relative; + .pageBox-header { height: 57px; padding: 0 20px; @@ -4626,6 +4927,7 @@ z-index: 99; align-items: center; justify-content: space-between; + .classTime { display: flex; align-items: center; @@ -4633,6 +4935,7 @@ border-radius: 20px 20px 20px 20px; color: #0093ff; padding: 8px; + .qureIcon { width: 9px; height: 9px; @@ -4641,16 +4944,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; @@ -4660,21 +4967,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; @@ -4683,21 +4994,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%; @@ -4707,8 +5023,36 @@ z-index: 96; background: rgba(255, 255, 255, 0.2); } + .watch-box { + display: flex; + align-items: center; + position: absolute; + background-color: #555; + color: #fff; + padding: 10px; + border-radius: 5px; + width: max-content; + p { + cursor: move; + padding: 0 8px; + font-size: 18px; + border-radius: 4px; + margin-right: 10px; + background-color: #666; + } + span { + cursor: pointer; + border-right: 1px solid #fff; + padding: 0 4px; + font-size: 14px; + &:last-child { + border-right: none; + } + } + } } } + .toolBox { position: relative; box-shadow: -3px 0px 6px 1px rgba(0, 0, 0, 0.07); @@ -4717,11 +5061,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; @@ -4730,8 +5076,10 @@ border-radius: 3px 3px 0px 0px; } } + .menu { padding-top: 20px; + li > div { // height: 50px; padding: 10px 36px; @@ -4751,6 +5099,7 @@ } } } + .openBox { width: 25px; height: 25px; @@ -4769,22 +5118,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; @@ -4792,13 +5146,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); @@ -4806,6 +5163,7 @@ border-radius: 5px; border: 2px solid #cfcfcf; } + .typeActive { text-align: center; color: #0093ff; @@ -4815,6 +5173,7 @@ background: rgba(0, 147, 255, 0.13); } } + .giveLessons { color: #0093ff; width: 90px; @@ -4825,6 +5184,7 @@ display: flex; align-items: center; justify-content: center; + span { margin-left: 10px; } @@ -4845,6 +5205,7 @@ border-radius: 10px; padding: 6px; overflow: hidden; + .floatToolItem { margin: 10px 0; height: 30px; @@ -4854,11 +5215,13 @@ border-radius: 5px; color: #fff; cursor: pointer; + .imgBox { width: 24px; height: 24px; margin: 0 auto; position: relative; + img { width: 100%; height: 100%; @@ -4874,10 +5237,12 @@ margin: auto; } } + .text { margin-right: 5px; } } + .floatToolItem:hover, .floatToolActive { background-color: rgba(255, 255, 255, 0.3); @@ -4896,10 +5261,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; @@ -4910,6 +5277,7 @@ align-items: center; // flex: 1; font-size: 14px; + .imgBox { height: 18px; width: 18px; @@ -4917,9 +5285,11 @@ margin: 0 auto; } } + .floatToolItem:hover { background-color: rgba(44, 44, 44, 0.2); } + .layOutTool { height: 20px; margin-right: 5px; @@ -4931,6 +5301,7 @@ .dialogToolBox { position: fixed; z-index: 2; + .toolSelectBox { height: 40px; display: flex; @@ -4940,6 +5311,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; @@ -4950,10 +5322,12 @@ margin: 0 5px; cursor: pointer; text-align: center; + span { color: #fff; } } + .dialogToolItem:hover, .active { background-color: rgba(255, 255, 255, 0.2); @@ -4963,6 +5337,7 @@ } } } + .colorSelectBox { padding: 5px 10px; width: 190px; @@ -4972,8 +5347,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; @@ -4988,6 +5365,7 @@ } } } + .lineDeleteBox { position: fixed; z-index: 2; @@ -4997,6 +5375,7 @@ background-color: rgba(90, 90, 90, 0.9); border-radius: 5px; display: flex; + .dialogToolItem { padding: 3px; margin: 0 5px; @@ -5005,10 +5384,12 @@ justify-content: center; align-items: center; } + .dialogToolItem:hover { background-color: rgba(255, 255, 255, 0.3); } } + .noteContentBox { max-width: 240px; position: fixed; @@ -5016,6 +5397,7 @@ padding: 10px; border-radius: 5px; } + .dictionaryDataBox { position: fixed; z-index: 2; @@ -5023,9 +5405,11 @@ padding: 5px 20px; background: #fff; border-radius: 5px; + .word { font-weight: bold; } + .phone_con { .per-phone { align-items: center; @@ -5039,33 +5423,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: 82vh; iframe { width: 100%; @@ -5097,38 +5488,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; @@ -5141,29 +5542,50 @@ } } } + .videoBox { text-align: center; + video { width: 100%; } } + .audioBox { // display:none; } .wordBox { height: 600px; + width: 100%; + overflow-y: scroll; + + img { + display: block; + margin: 0 auto; + width: 90%; + height: auto; + box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1); + object-fit: contain; + } } + .imgUrlBox { width: 100%; text-align: center; + img { width: 100%; } } + .voice-reader { - position:absolute; - bottom:30px; - left:50px; + position: absolute; + bottom: 30px; + left: 50px; +} +.iframe-box { + width: 100%; + height: 800px; } </style> -- Gitblit v1.9.1