From 58e3b80c2d26b831900759bf8666c7fd9c759df5 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期二, 05 十一月 2024 17:56:00 +0800 Subject: [PATCH] 计算器 --- src/views/readerPages/webHome.vue | 470 ++++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 359 insertions(+), 111 deletions(-) diff --git a/src/views/readerPages/webHome.vue b/src/views/readerPages/webHome.vue index 796cff7..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 @@ -368,9 +378,18 @@ ><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 @@ -378,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" @@ -420,14 +444,29 @@ item.resourceType == '鍥剧墖' ) && item.isDownload == '鏄�' " - ><Download - /></el-icon> + > + <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> @@ -458,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> @@ -537,9 +576,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 @@ -816,7 +855,7 @@ </div> </div> <!-- 璇煶闃呰缁勪欢 --> - <!-- <div class="voice-reader"> + <!-- <div class="voice-reader"> <voiceReader /> </div> --> </div> @@ -1247,22 +1286,20 @@ :infoType="examinationData.infoType" /> <!-- 璁$畻鍣� --> - <el-dialog title="璁$畻鍣�" align-center v-model="calculatorVisble" width="40%"> - - </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> </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' const { toClipboard } = useClipboard() const MG: any = inject('MG') const toolClass = inject('toolClass') -const qiankunActions = inject('qiankunActions') //鑾峰彇璺敱鍣� let router = useRouter() //鑾峰彇褰撳墠璺敱鐨勪俊鎭� @@ -1272,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' @@ -1381,9 +1417,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 @@ -1414,13 +1457,16 @@ 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) + } } + }) // 瀹氫箟鐖跺眰鏂规硶 @@ -1510,6 +1556,7 @@ // if (window.qiankunState && window.qiankunState.getAnswers){ // window.qiankunState.getAnswers(localStorage.getItem("")) // } + }) onBeforeUnmount(() => { @@ -1531,6 +1578,44 @@ // } // } // ) + +//鏍规嵁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, '鍥句功淇℃伅') + 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) => { @@ -1699,7 +1784,8 @@ { icon: huabi, name: '鐢荤瑪', - isShow: bookConfig.value.textbookComponents.indexOf('800109C0') > -1 + // isShow: bookConfig.value.textbookComponents.indexOf('800109C0') > -1 + isShow: true }, { icon: baiban, @@ -1781,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 = { @@ -1799,9 +1895,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) @@ -2112,12 +2207,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) { @@ -2129,17 +2223,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 @@ -2214,11 +2308,11 @@ } }) } + } + } else { + resourceDataList.value = [] } - } else { - resourceDataList.value = [] - } - }) + }) } else { ElMessageBox.confirm('璇峰厛鐧诲綍锛�', { confirmButtonText: '鍘荤櫥褰�', @@ -2239,27 +2333,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) + } + ] }) } @@ -2356,15 +2450,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 { @@ -2445,7 +2538,6 @@ // } } -const searchText = ref<string>('') //绛涢�� const menuState = reactive({ open: true, notesColor: 'all' //绗旇棰滆壊 @@ -2738,8 +2830,8 @@ shengciVisble.value = true break case '璁$畻鍣�': - calculatorVisble.value = true - break + calculatorVisble.value = true + break } } else { ElMessageBox.confirm('璇峰厛鐧诲綍锛�', { @@ -4048,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; @@ -4064,6 +4159,7 @@ border-right: 1px solid #e0e0e0; color: #2c2c2c; } + .layout { width: 69px; height: 30px; @@ -4075,11 +4171,13 @@ } } } + .contentBox { overflow: hidden; flex: 1; display: flex; position: relative; + .menuBox { width: 80px; flex-shrink: 0; @@ -4102,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; @@ -4133,6 +4237,7 @@ text-align: center; } } + .menuContent { // position: relative; width: 300px; @@ -4143,6 +4248,7 @@ -moz-user-select: none; -khtml-user-select: none; user-select: none; + .searchBox { width: 100%; height: 60px; @@ -4152,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; @@ -4178,16 +4289,19 @@ height: 18px; font-size: 12px; } + .activeClassify, .classifyItem:hover { .title { color: #0093ff; } + .count { background: #0093ff; color: #fff; } } + .showSearch { .imgBox { width: 39px; @@ -4195,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; @@ -4213,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; @@ -4232,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; @@ -4249,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; @@ -4312,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; @@ -4334,11 +4465,13 @@ align-items: center; justify-content: center; position: relative; + img { height: 100%; width: 100%; object-fit: contain; } + .handleBox { position: absolute; top: 0; @@ -4348,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; @@ -4368,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; @@ -4392,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; @@ -4404,6 +4545,7 @@ } } } + // .capture { // width: 100%; // } @@ -4427,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; @@ -4455,6 +4601,7 @@ margin-left: 5px; } } + .chapter { color: #b7b7b7; margin: 5px 5px 5px 14px; @@ -4467,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; @@ -4480,14 +4629,17 @@ } } } + .chapterName { margin: 15px; display: flex; align-items: center; + span { margin-left: 5px; } } + .reMarkItem { margin: 15px; background: #fff; @@ -4495,8 +4647,10 @@ padding: 10px; display: flex; justify-content: space-between; + .reMarkCon { display: flex; + .con { width: 200px; white-space: nowrap; @@ -4505,10 +4659,12 @@ margin-right: 8px; } } + .deleteReMarkImg { display: flex; align-items: center; } + .questionCon { width: 240px; white-space: nowrap; @@ -4524,10 +4680,12 @@ border-radius: 10px; padding: 10px; display: flex; + .index { line-height: 24px; margin-right: 10px; } + .searchCon { flex: 1; width: 240px; @@ -4539,6 +4697,7 @@ -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; + .searchColor { background: rgb(245, 225, 42, 0.5); } @@ -4546,6 +4705,7 @@ } } } + .allSearch, .notesBox, .resourceBox, @@ -4555,30 +4715,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; @@ -4590,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; @@ -4600,6 +4764,7 @@ flex: 1; font-size: 16px; position: relative; + .pageBox-header { height: 57px; padding: 0 20px; @@ -4608,6 +4773,7 @@ z-index: 99; align-items: center; justify-content: space-between; + .classTime { display: flex; align-items: center; @@ -4615,6 +4781,7 @@ border-radius: 20px 20px 20px 20px; color: #0093ff; padding: 8px; + .qureIcon { width: 9px; height: 9px; @@ -4623,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; @@ -4642,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; @@ -4665,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%; @@ -4691,6 +4871,7 @@ } } } + .toolBox { position: relative; box-shadow: -3px 0px 6px 1px rgba(0, 0, 0, 0.07); @@ -4699,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; @@ -4712,8 +4895,10 @@ border-radius: 3px 3px 0px 0px; } } + .menu { padding-top: 20px; + li > div { // height: 50px; padding: 10px 36px; @@ -4733,6 +4918,7 @@ } } } + .openBox { width: 25px; height: 25px; @@ -4751,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; @@ -4774,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); @@ -4788,6 +4982,7 @@ border-radius: 5px; border: 2px solid #cfcfcf; } + .typeActive { text-align: center; color: #0093ff; @@ -4797,6 +4992,7 @@ background: rgba(0, 147, 255, 0.13); } } + .giveLessons { color: #0093ff; width: 90px; @@ -4807,6 +5003,7 @@ display: flex; align-items: center; justify-content: center; + span { margin-left: 10px; } @@ -4827,6 +5024,7 @@ border-radius: 10px; padding: 6px; overflow: hidden; + .floatToolItem { margin: 10px 0; height: 30px; @@ -4836,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%; @@ -4856,10 +5056,12 @@ margin: auto; } } + .text { margin-right: 5px; } } + .floatToolItem:hover, .floatToolActive { background-color: rgba(255, 255, 255, 0.3); @@ -4878,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; @@ -4892,6 +5096,7 @@ align-items: center; // flex: 1; font-size: 14px; + .imgBox { height: 18px; width: 18px; @@ -4899,9 +5104,11 @@ margin: 0 auto; } } + .floatToolItem:hover { background-color: rgba(44, 44, 44, 0.2); } + .layOutTool { height: 20px; margin-right: 5px; @@ -4913,6 +5120,7 @@ .dialogToolBox { position: fixed; z-index: 2; + .toolSelectBox { height: 40px; display: flex; @@ -4922,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; @@ -4932,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); @@ -4945,6 +5156,7 @@ } } } + .colorSelectBox { padding: 5px 10px; width: 190px; @@ -4954,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; @@ -4970,6 +5184,7 @@ } } } + .lineDeleteBox { position: fixed; z-index: 2; @@ -4979,6 +5194,7 @@ background-color: rgba(90, 90, 90, 0.9); border-radius: 5px; display: flex; + .dialogToolItem { padding: 3px; margin: 0 5px; @@ -4987,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; @@ -4998,6 +5216,7 @@ padding: 10px; border-radius: 5px; } + .dictionaryDataBox { position: fixed; z-index: 2; @@ -5005,9 +5224,11 @@ padding: 5px 20px; background: #fff; border-radius: 5px; + .word { font-weight: bold; } + .phone_con { .per-phone { align-items: center; @@ -5021,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%; @@ -5079,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; @@ -5123,12 +5361,15 @@ } } } + .videoBox { text-align: center; + video { width: 100%; } } + .audioBox { // display:none; } @@ -5136,16 +5377,23 @@ .wordBox { height: 600px; } + .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