From 6754eddf2b9d166e32c7bdcfffe09b75b8bb970b Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期三, 07 八月 2024 10:59:43 +0800 Subject: [PATCH] 数字教材阅读器(科学计算器) --- src/views/components/calculatorNew.vue | 65 +++ src/views/readerPages/webHome.vue | 1030 +++++++++++++++++++++++------------------------------- 2 files changed, 506 insertions(+), 589 deletions(-) diff --git a/src/views/components/calculatorNew.vue b/src/views/components/calculatorNew.vue new file mode 100644 index 0000000..075e08e --- /dev/null +++ b/src/views/components/calculatorNew.vue @@ -0,0 +1,65 @@ +<template> + <div ref="ggbContainer" class="ggb-container"></div> +</template> + +<script lang="ts"> +import { defineComponent, onMounted, ref } from 'vue'; +export default defineComponent({ + name: 'GeoGebraCalculator', + setup() { + const ggbContainer = ref<HTMLDivElement | null>(null); + + onMounted(() => { + if (!window.GGBApplet) { + const script = document.createElement('script'); + script.src = 'https://www.geogebra.org/apps/deployggb.js'; + script.onload = () => { + initGeoGebra(); + }; + document.body.appendChild(script); + } else { + initGeoGebra(); + } + + function initGeoGebra() { + var params = { + "id": "ggbApplet", + "appName": "scientific", + "width": 800, + "height": 800, + "showToolBar": true, + "borderColor": null, + "showMenuBar": true, + "allowStyleBar": true, + "showAlgebraInput": true, + "enableLabelDrags": false, + "enableShiftDragZoom": true, + "capturingThreshold": null, + "showToolBarHelp": false, + "errorDialogsActive": true, + "showTutorialLink": true, + "showLogging": true, + "useBrowserForJS": false + }; + + if (ggbContainer.value) { + const applet = new GGBApplet(params, true); + applet.inject(ggbContainer.value); + } + } + }); + + return { + ggbContainer, + }; + }, +}); +</script> + +<style scoped> +.ggb-container { + width: 100%; + height: 100%; + /* 鍏朵粬鏍峰紡 */ +} +</style> \ No newline at end of file diff --git a/src/views/readerPages/webHome.vue b/src/views/readerPages/webHome.vue index e4f1f31..1b677de 100644 --- a/src/views/readerPages/webHome.vue +++ b/src/views/readerPages/webHome.vue @@ -6,19 +6,20 @@ <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"> <!-- 鑿滃崟 --> <div class="menuBox"> <div v-for="(item, index) in menuData" :key="index"> - <div - :class="['menuItem', activeMenu == item.name ? 'active' : '']" - @click="menuItemClick(item.name)" - v-if="item.isShow" - > + <div :class="['menuItem', activeMenu == item.name ? 'active' : '']" @click="menuItemClick(item.name)" + v-if="item.isShow"> <div class="menuIcon imgBox"> <img :src="item.icon" /> </div> @@ -33,16 +34,10 @@ <el-form-item label="瀛椾綋澶у皬"> <div class="lineStyle"> <div class="lineTypeBox"> - <div - v-for="item in settingForm.fontSizeList" - :key="item.key" - :class=" - settingForm.fontSizeActive == item.key - ? 'typeItem lineTypeActive' - : 'typeItem' - " - @click="fontSizeSelect(item)" - > + <div v-for="item in settingForm.fontSizeList" :key="item.key" :class="settingForm.fontSizeActive == item.key + ? 'typeItem lineTypeActive' + : 'typeItem' + " @click="fontSizeSelect(item)"> {{ item.lable }} <div class="activeIcon" v-if="settingForm.fontSizeActive == item.key"> <img :src="xuanzhong" /> @@ -61,20 +56,13 @@ </div> --> <el-form-item label="搴曡壊"> <div class="bgColor"> - <div - v-for="item in settingForm.bgColorList" - :key="item.key" - class="flex1 hover" - @click="bgColorSelect(item)" - > - <div - :style="{ - background: item.key, - 'border-color': - item.key == settingForm.bgColorActive ? '#0093FF' : '#EBEBEB' - }" - class="scribeItem" - > + <div v-for="item in settingForm.bgColorList" :key="item.key" class="flex1 hover" + @click="bgColorSelect(item)"> + <div :style="{ + background: item.key, + 'border-color': + item.key == settingForm.bgColorActive ? '#0093FF' : '#EBEBEB' + }" class="scribeItem"> <img :src="xuanzhong1" v-if="item.key == settingForm.bgColorActive" /> </div> </div> @@ -94,14 +82,8 @@ <div class="menuContent" v-if="menuState.open"> <div class="searchBox"> <div class="inputBox" v-if="activeMenu !== '璧勬簮' && activeMenu !== '棰樺簱'"> - <el-input - class="custom-input" - placeholder="璇疯緭鍏ュ唴瀹�" - v-model="searchText" - @keyup.enter="searchBook" - clearable - @clear="handleClear" - > + <el-input class="custom-input" placeholder="璇疯緭鍏ュ唴瀹�" v-model="searchText" @keyup.enter="searchBook" clearable + @clear="handleClear"> <template #prefix> <img :src="listSearch" @click="searchBook" class="hover" /> </template> @@ -124,20 +106,14 @@ </div> </div> <div v-if="activeMenu == '棰樺簱'" class="resourceTab"> - <div - class="tabItem hover" - @click="selectExercisesType('exercises')" - v-if="bookConfig.textbookComponents.indexOf('3D3B4F55') > -1" - > + <div class="tabItem hover" @click="selectExercisesType('exercises')" + v-if="bookConfig.textbookComponents.indexOf('3D3B4F55') > -1"> <div>涔犻</div> <div :class="exercisesType == 'exercises' ? 'text' : 'line'"></div> </div> <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1" /> - <div - class="tabItem hover" - @click="selectExercisesType('additional')" - v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1" - > + <div class="tabItem hover" @click="selectExercisesType('additional')" + v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1"> <div>闄勫姞棰�</div> <div :class="exercisesType == 'additional' ? 'text' : 'line'"></div> </div> @@ -163,18 +139,9 @@ </div> <!-- 鐩綍 --> <div class="menuList" v-if="activeMenu == '鐩綍'" v-loading="listLoading"> - <el-tree - ref="catalogTree" - default-expand-all="true" - :expand-on-click-node="false" - node-key="start" - highlight-current - :data="catalogueData" - :props="defaultProps" - v-if="catalogueData.length > 0" - @node-click="handleNodeClick" - :filter-node-method="filterNode" - > + <el-tree ref="catalogTree" default-expand-all="true" :expand-on-click-node="false" node-key="start" + highlight-current :data="catalogueData" :props="defaultProps" v-if="catalogueData.length > 0" + @node-click="handleNodeClick" :filter-node-method="filterNode"> <template #default="{ node, data }"> <div class="custom-tree-node"> <div class="catalogueLabel" :title="node.label">{{ node.label }}</div> @@ -192,28 +159,20 @@ <div v-if="allSearchReault.length > 0" class="allSearchList"> <div v-for="(reault, index) in allSearchReault" :key="index"> <div class="chapterName"> - <el-icon - @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> + <el-icon @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> <span>{{ reault.chapterName }} 锛坽{ reault.itemList.length }}锛�</span> </div> - <div - v-for="(item, index1) in reault.itemList" - :key="index1" - class="searchItem" - v-show="searchReaultData.isShow && searchReaultData.openIndex == index" - > + <div v-for="(item, index1) in reault.itemList" :key="index1" class="searchItem" + v-show="searchReaultData.isShow && searchReaultData.openIndex == index"> <div class="index">{{ index1 + 1 }}.</div> - <div - class="searchCon hover" - @click="goSearchContent(item)" - v-html="item.txt1" - :title="item.txt" - ></div> + <div class="searchCon hover" @click="goSearchContent(item)" v-html="item.txt1" :title="item.txt"> + </div> </div> </div> </div> @@ -229,44 +188,30 @@ <div class="flex1 hover" @click="searchClick('all')"> <div :class="menuState.notesColor == 'all' ? ' allActive' : 'all'">鍏ㄩ儴</div> </div> - <div - v-for="item in colorSelectList" - :key="item.key" - class="flex1 hover" - @click="searchClick(item)" - > - <div - :style="{ background: item.key }" - :class="item.key == menuState.notesColor ? 'activeScribe scribeItem' : 'scribeItem'" - ></div> + <div v-for="item in colorSelectList" :key="item.key" class="flex1 hover" @click="searchClick(item)"> + <div :style="{ background: item.key }" + :class="item.key == menuState.notesColor ? 'activeScribe scribeItem' : 'scribeItem'"></div> </div> </div> <div class="list-box"> <div v-if="scribeData.noteList.length > 0"> <div v-for="(noteItem, index) in scribeData.noteList" :key="noteItem"> <div class="chapterName"> - <el-icon - @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> + <el-icon @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> <span>{{ noteItem.chapterName }}</span> </div> - <div - v-for="(item, index1) in noteItem.noteList" - :key="item.key" - class="listItem" - v-show="scribeData.isShow && scribeData.openIndex == index" - > + <div v-for="(item, index1) in noteItem.noteList" :key="item.key" class="listItem" + v-show="scribeData.isShow && scribeData.openIndex == index"> <div class="textBox"> <div class="title"> <div class="title-con"> - <div - class="border-left" - :style="{ 'border-right-color': item.color }" - ></div> + <div class="border-left" :style="{ 'border-right-color': item.color }"></div> <span>{{ moment(item.createDate).format('YYYY-MM-DD') }}</span> </div> <div> @@ -274,24 +219,20 @@ <img :src="shanchu" @click="deleteBtn(item)" class="hover" /> </div> </div> - <div - class="noteText hover 123456" - @click="jumpContent(item)" - :style="{ - background: - item.color == '#F5E12A' - ? 'rgba(255,234,41,0.1)' - : item.color == '#76F0AE' - ? 'rgba(83,255,162,0.1)' - : item.color == '#59CFF5' - ? 'rgba(93,216,255,0.1)' - : item.color == '#CAA5FC' - ? 'rgba(205,167,255,0.1)' - : item.color == '#F5A0B9' - ? 'rgba(255,167,193,0.1)' - : item.color - }" - > + <div class="noteText hover 123456" @click="jumpContent(item)" :style="{ + background: + item.color == '#F5E12A' + ? 'rgba(255,234,41,0.1)' + : item.color == '#76F0AE' + ? 'rgba(83,255,162,0.1)' + : item.color == '#59CFF5' + ? 'rgba(93,216,255,0.1)' + : item.color == '#CAA5FC' + ? 'rgba(205,167,255,0.1)' + : item.color == '#F5A0B9' + ? 'rgba(255,167,193,0.1)' + : item.color + }"> <div class="con hover"> {{ item.note }} </div> @@ -310,17 +251,9 @@ <div class="resourceBox" v-if="activeMenu == '璧勬簮'" v-loading="listLoading"> <div class="resourceSearchBox" v-if="classifySelectList.length > 0"> <div class="classification"> - <div - v-for="item in classifySelectList" - :key="item.key" - class="flex1 hover" - @click="classifyClick(item)" - > - <div - :class=" - item.key == activeClassify ? 'activeClassify classifyItem' : 'classifyItem' - " - > + <div v-for="item in classifySelectList" :key="item.key" class="flex1 hover" @click="classifyClick(item)"> + <div :class="item.key == activeClassify ? 'activeClassify classifyItem' : 'classifyItem' + "> <div class="title">{{ item.title }}</div> <div class="count">{{ item.count }}</div> </div> @@ -332,14 +265,8 @@ </div> </div> <div class="inputBox" v-if="!searchShow"> - <el-input - class="custom-input" - placeholder="璇疯緭鍏ュ唴瀹�" - v-model="searchText" - @keyup.enter="searchBook" - clearable - @clear="handleClear" - > + <el-input class="custom-input" placeholder="璇疯緭鍏ュ唴瀹�" v-model="searchText" @keyup.enter="searchBook" + clearable @clear="handleClear"> <template #prefix> <img :src="listSearch" @click="searchBook" class="hover" /> </template> @@ -351,83 +278,54 @@ <el-row :gutter="20"> <el-col :span="12" v-for="(item, index) in resourceDataList" :key="item"> <div class="resourceItem"> - <div - class="resourceImg" - @mouseover="showHandle = index" - @mouseleave="showHandle = null" - > + <div class="resourceImg" @mouseover="showHandle = index" @mouseleave="showHandle = null"> <img :src="item.resourcePath" mode="" v-if="activeClassify == 'image'" /> - <img - :src="item.icon" - mode="" - v-else-if="item.icon && activeClassify != 'image'" - /> + <img :src="item.icon" mode="" v-else-if="item.icon && activeClassify != 'image'" /> <!-- <el-icon v-else-if="activeClassify == 'image'" size="30"></el-icon> --> <!-- <el-icon v-else-if="activeClassify == 'audio'" size="30"><Headset /></el-icon> --> <!-- <el-icon v-else-if="activeClassify == 'video'" size="30" ><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> - <el-icon - @click="goPlay(item)" - size="20" - class="icon hover" - v-if="item.resourceType == '瑙嗛'" - ><VideoPlay - /></el-icon> - <el-icon - @click="goPlay(item, index)" - size="20" - class="icon hover" - v-if="item.resourceType == '闊抽' && playIndex != index" - ><VideoPlay - /></el-icon> - <el-icon - @click="goPause()" - size="20" - class="icon hover" - v-if="item.resourceType == '闊抽' && playIndex == index" - ><VideoPause - /></el-icon> - <el-icon - @click="getCapture(item, index)" - size="20" - class="icon hover" - v-if="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> + <el-icon class="icon hover" size="20" @click="JumpPosition(item)" + v-if="resourceType == 'default'"> + <LocationInformation /> + </el-icon> + <el-icon @click="goPlay(item)" size="20" class="icon hover" v-if="item.resourceType == '瑙嗛'"> + <VideoPlay /> + </el-icon> + <el-icon @click="goPlay(item, index)" size="20" class="icon hover" + v-if="item.resourceType == '闊抽' && playIndex != index"> + <VideoPlay /> + </el-icon> + <el-icon @click="goPause()" size="20" class="icon hover" + v-if="item.resourceType == '闊抽' && playIndex == index"> + <VideoPause /> + </el-icon> + <el-icon @click="getCapture(item, index)" size="20" class="icon hover" + v-if="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> <!-- 鏀惰棌鎸夐挳 --> - <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 +356,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> @@ -493,19 +391,10 @@ </div> </div> <div class="questionList" v-if="activeMenu == '棰樺簱'" v-loading="listLoading"> - <div - class="resourceSearchBox" - v-if="exercisesType !== 'collection' && exercisesType !== 'wrong'" - > + <div class="resourceSearchBox" v-if="exercisesType !== 'collection' && exercisesType !== 'wrong'"> <div class="inputBox"> - <el-input - class="custom-input" - placeholder="璇疯緭鍏ュ唴瀹�" - v-model="searchText" - @keyup.enter="searchBook" - clearable - @clear="handleClear" - > + <el-input class="custom-input" placeholder="璇疯緭鍏ュ唴瀹�" v-model="searchText" @keyup.enter="searchBook" + clearable @clear="handleClear"> <template #prefix> <img :src="listSearch" @click="searchBook" class="hover" /> </template> @@ -515,46 +404,30 @@ <div class="list-box" v-loading="listLoading"> <div v-if="questionList.length > 0"> <div v-for="(item, index) in questionList" :key="index" class="reMarkItem"> - <div - class="questionCon hover" - @click="clickQuestion(exercisesType, item)" - :title="item.resourceName" - > + <div class="questionCon hover" @click="clickQuestion(exercisesType, item)" :title="item.resourceName"> {{ item.resourceName }} </div> </div> </div> - <div - v-if=" - questionList.length == 0 && - exercisesType !== 'collection' && - exercisesType !== 'wrong' - " - > + <div v-if=" + questionList.length == 0 && + exercisesType !== 'collection' && + exercisesType !== 'wrong' + "> <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> </div> </div> </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 - @click="menuState.open = false" - xmlns="http://www.w3.org/2000/svg" - width="20" - height="20" - viewBox="0 0 20 20" - fill="none" - stroke="currentColor" - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" - class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-bar-to-left" - > + <svg @click="menuState.open = false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" + viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" + stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-bar-to-left"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M10 12l10 0" /> <path d="M10 12l4 4" /> @@ -610,42 +483,28 @@ <div class="popinnerBox"> <div class="brush"> <div class="thickness"> - <div - :class="toolSelectData.thicknessActive == '1' ? 'small active' : 'small'" - @click="selectThickness('1')" - ></div> - <div - :class="toolSelectData.thicknessActive == '3' ? 'middle active' : 'middle'" - @click="selectThickness('3')" - ></div> - <div - :class="toolSelectData.thicknessActive == '5' ? 'large active' : 'large'" - @click="selectThickness('5')" - ></div> + <div :class="toolSelectData.thicknessActive == '1' ? 'small active' : 'small'" + @click="selectThickness('1')"></div> + <div :class="toolSelectData.thicknessActive == '3' ? 'middle active' : 'middle'" + @click="selectThickness('3')"></div> + <div :class="toolSelectData.thicknessActive == '5' ? 'large active' : 'large'" + @click="selectThickness('5')"></div> </div> <div class="lineStyle"> <div class="lineTypeBox"> - <div - :class=" - toolSelectData.lineTypeActive == 'solid' - ? 'typeItem lineTypeActive' - : 'typeItem' - " - @click="selectLineType('solid')" - > + <div :class="toolSelectData.lineTypeActive == 'solid' + ? 'typeItem lineTypeActive' + : 'typeItem' + " @click="selectLineType('solid')"> <div class="solid"></div> <div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'solid'"> <img :src="xuanzhong" /> </div> </div> - <div - :class=" - toolSelectData.lineTypeActive == 'dashed' - ? 'typeItem lineTypeActive' - : 'typeItem' - " - @click="selectLineType('dashed')" - > + <div :class="toolSelectData.lineTypeActive == 'dashed' + ? 'typeItem lineTypeActive' + : 'typeItem' + " @click="selectLineType('dashed')"> <div class="dashed"></div> <div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'dashed'"> <img :src="xuanzhong" /> @@ -653,12 +512,8 @@ </div> </div> <div class="colorSelectBox"> - <div - v-for="item in colorSelectList" - :key="item.key" - class="flex1 hover" - @click="lineColorSelect(item)" - > + <div v-for="item in colorSelectList" :key="item.key" class="flex1 hover" + @click="lineColorSelect(item)"> <div :style="{ background: item.key }" class="scribeItem"> <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" /> </div> @@ -680,40 +535,28 @@ <div class="popinnerBox"> <div class="lineStyle"> <div class="lineTypeBox"> - <div - :class=" - toolSelectData.fontSizeActive == '14' - ? 'typeItem lineTypeActive' - : 'typeItem' - " - @click="selectfontSize('14')" - > + <div :class="toolSelectData.fontSizeActive == '14' + ? 'typeItem lineTypeActive' + : 'typeItem' + " @click="selectfontSize('14')"> 灏� <div class="activeIcon" v-if="toolSelectData.fontSizeActive == '14'"> <img :src="xuanzhong" /> </div> </div> - <div - :class=" - toolSelectData.fontSizeActive == '16' - ? 'typeItem lineTypeActive' - : 'typeItem' - " - @click="selectfontSize('16')" - > + <div :class="toolSelectData.fontSizeActive == '16' + ? 'typeItem lineTypeActive' + : 'typeItem' + " @click="selectfontSize('16')"> 涓� <div class="activeIcon" v-if="toolSelectData.fontSizeActive == '16'"> <img :src="xuanzhong" /> </div> </div> - <div - :class=" - toolSelectData.fontSizeActive == '18' - ? 'typeItem lineTypeActive' - : 'typeItem' - " - @click="selectfontSize('18')" - > + <div :class="toolSelectData.fontSizeActive == '18' + ? 'typeItem lineTypeActive' + : 'typeItem' + " @click="selectfontSize('18')"> 澶� <div class="activeIcon" v-if="toolSelectData.fontSizeActive == '18'"> <img :src="xuanzhong" /> @@ -722,12 +565,8 @@ </div> <div class="lineStyle"> <div class="colorSelectBox"> - <div - v-for="item in colorSelectList" - :key="item.key" - class="flex1 hover" - @click="lineColorSelect(item)" - > + <div v-for="item in colorSelectList" :key="item.key" class="flex1 hover" + @click="lineColorSelect(item)"> <div :style="{ background: item.key }" class="scribeItem"> <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" /> </div> @@ -763,12 +602,8 @@ </div> <div class="lineStyle"> <div class="colorSelectBox"> - <div - v-for="item in colorSelectList" - :key="item.key" - class="flex1 hover" - @click="lineColorSelect(item)" - > + <div v-for="item in colorSelectList" :key="item.key" class="flex1 hover" + @click="lineColorSelect(item)"> <div :style="{ background: item.key }" class="scribeItem"> <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" /> </div> @@ -816,7 +651,7 @@ </div> </div> <!-- 璇煶闃呰缁勪欢 --> - <!-- <div class="voice-reader"> + <!-- <div class="voice-reader"> <voiceReader /> </div> --> </div> @@ -829,57 +664,29 @@ <div class="menuList"> <ul class="menu" v-if="teachToolsMenuData.length > 0"> <li v-for="item in teachToolsMenuData" :key="item.key" class="hover"> - <div - :style="!toolState.open ? 'padding:10px 15px' : ''" - v-if="item.isShow" - @click="selectTeachTools(item)" - > + <div :style="!toolState.open ? 'padding:10px 15px' : ''" v-if="item.isShow" + @click="selectTeachTools(item)"> <img :src="item.icon" alt="" /> <span v-if="toolState.open">{{ item.name }}</span> </div> </li> </ul> </div> - <div - :class="['openBox', toolState.open ? 'right' : '']" - v-if="teachToolsMenuData.length > 0" - > + <div :class="['openBox', toolState.open ? 'right' : '']" v-if="teachToolsMenuData.length > 0"> <!-- <img :src="shouqiR" v-if="toolState.open" @click="toolState.open = false" /> --> <!-- <img :src="shouqiL" v-if="!toolState.open" @click="toolState.open = true" /> --> - <svg - v-if="!toolState.open" - @click="toolState.open = true" - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 24 24" - fill="none" - stroke="currentColor" - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" - class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-bar-to-left" - > + <svg v-if="!toolState.open" @click="toolState.open = true" xmlns="http://www.w3.org/2000/svg" width="24" + height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" + stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-bar-to-left"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M10 12l10 0" /> <path d="M10 12l4 4" /> <path d="M10 12l4 -4" /> <path d="M4 4l0 16" /> </svg> - <svg - v-if="toolState.open" - @click="toolState.open = false" - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 24 24" - fill="none" - stroke="currentColor" - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" - class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-bar-to-right" - > + <svg v-if="toolState.open" @click="toolState.open = false" xmlns="http://www.w3.org/2000/svg" width="24" + height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" + stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-bar-to-right"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M14 12l-10 0" /> <path d="M14 12l-4 4" /> @@ -892,17 +699,13 @@ <el-tab-pane label="澶囪缁勪欢" name="first"> <div class="tabBox"> <div class="insertSelect"> - <div - :class="selectType == 'resource' ? 'typeActive' : 'selectItem hover'" - @click="selectTypeClick('resource')" - > + <div :class="selectType == 'resource' ? 'typeActive' : 'selectItem hover'" + @click="selectTypeClick('resource')"> <img :src="selectType == 'resource' ? charuziyuan_blue : charuziyuan" /> <div>鎻掑叆璧勬簮</div> </div> - <div - :class="selectType == 'answer' ? 'typeActive' : 'selectItem hover'" - @click="selectTypeClick('answer')" - > + <div :class="selectType == 'answer' ? 'typeActive' : 'selectItem hover'" + @click="selectTypeClick('answer')"> <img :src="selectType == 'answer' ? dati_charu_blue : dati_charu" /> <div>鎻掑叆绛旈</div> </div> @@ -921,20 +724,11 @@ </div> </div> <!-- 鐢荤瑪宸ュ叿鏍� --> - <div - draggable="true" - class="draggableBox" - :style="`left:${floatingToolData.elLeft}px`" - v-if="floatingToolBox.length > 0" - > + <div draggable="true" class="draggableBox" :style="`left:${floatingToolData.elLeft}px`" + v-if="floatingToolBox.length > 0"> <div v-for="item in floatingToolBox" :key="item.name" @click="floatItemHandle(item)"> <div v-if="item.isShow"> - <el-popover - placement="right" - width="120" - trigger="click" - v-if="floatingToolData.activeToolData == '鏍囪'" - > + <el-popover placement="right" width="120" trigger="click" v-if="floatingToolData.activeToolData == '鏍囪'"> <div class="popinnerBox"> <div class="label" v-if="floatingToolData.activeToolData == '鏍囪'"> <div class="labelItem hover" @click="labelShow('hide')"> @@ -948,13 +742,10 @@ </div> </div> <template #reference> - <div - :class=" - floatingToolData.activeToolData == item.name - ? 'floatToolActive floatToolItem' - : 'floatToolItem' - " - > + <div :class="floatingToolData.activeToolData == item.name + ? 'floatToolActive floatToolItem' + : 'floatToolItem' + "> <el-tooltip class="box-item" effect="dark" :content="item.name" placement="right"> <div class="imgBox"> <img :src="item.icon" alt="" /> @@ -972,17 +763,13 @@ </div> </el-tooltip> </div> - <div - :class=" - floatingToolData.activeToolData == item.name - ? 'floatToolActive floatToolItem' - : 'floatToolItem' - " - v-else-if=" + <div :class="floatingToolData.activeToolData == item.name + ? 'floatToolActive floatToolItem' + : 'floatToolItem' + " v-else-if=" floatingToolData.activeToolData != '涔︾' && floatingToolData.activeToolData != '鏍囪' - " - > + "> <el-tooltip class="box-item" effect="dark" :content="item.name" placement="right"> <div class="imgBox"> <img :src="item.icon" alt="" /> @@ -995,19 +782,10 @@ </div> <!-- 閫変腑宸ュ叿鏍� --> - <div - class="dialogToolBox" - id="dialogToolBox" - v-show="showToolBox" - :style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }" - > + <div class="dialogToolBox" id="dialogToolBox" v-show="showToolBox" + :style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }"> <div class="colorSelectBox" v-show="toolActive == '楂樹寒' || toolActive == '鍒掔嚎'"> - <div - v-for="item in colorSelectList" - :key="item.key" - class="flex1 hover" - @click="clickSelect(item)" - > + <div v-for="item in colorSelectList" :key="item.key" class="flex1 hover" @click="clickSelect(item)"> <div :style="{ background: item.key }" class="scribeItem"> <img :src="xuanzhong1" v-if="item.key == colorActive" /> </div> @@ -1015,10 +793,7 @@ </div> <div class="toolSelectBox" v-show="toolActive != '楂樹寒' && toolActive != '鍒掔嚎'"> <div v-for="item in dialogToolList" :key="item.icon" @click="dialogToolHandle(item)"> - <div - :class="item.name == toolActive ? 'dialogToolItem active' : 'dialogToolItem'" - v-if="item.isShow" - > + <div :class="item.name == toolActive ? 'dialogToolItem active' : 'dialogToolItem'" v-if="item.isShow"> <el-tooltip class="box-item" effect="dark" :content="item.name" placement="bottom"> <img :src="item.icon" alt="" /> </el-tooltip> @@ -1030,11 +805,8 @@ </div> </div> <!-- 鍒掔嚎锛岄珮浜垹闄� --> - <div - class="lineDeleteBox" - v-show="lineDelete.showLineDelete" - :style="{ top: `${lineDelete.top}px`, left: `${lineDelete.left}px` }" - > + <div class="lineDeleteBox" v-show="lineDelete.showLineDelete" + :style="{ top: `${lineDelete.top}px`, left: `${lineDelete.left}px` }"> <!-- <el-button @click="delUserKey">鍒犻櫎</el-button> --> <div class="dialogToolItem"> <el-tooltip class="box-item" effect="dark" content="鍒犻櫎" placement="bottom"> @@ -1048,41 +820,26 @@ </div> </div> <!-- 绗旇鎮诞妗� --> - <div - class="noteContentBox" - v-show="noteContent.show" - :style="{ - top: `${noteContent.top}px`, - left: `${noteContent.left}px`, - background: noteContent.color - }" - > + <div class="noteContentBox" v-show="noteContent.show" :style="{ + top: `${noteContent.top}px`, + left: `${noteContent.left}px`, + background: noteContent.color + }"> <div>{{ noteContent.note }}</div> </div> <!-- 鑻辨枃涔﹂�変腑鍗曡瘝璇嶅吀鍐呭 --> - <div - class="dictionaryDataBox" - v-if="dictionaryData.showContent" - :style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }" - > + <div class="dictionaryDataBox" v-if="dictionaryData.showContent" + :style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }"> <div class="content"> <div class="word">{{ dictionaryData.data.word }}</div> <div class="phone_con"> <div class="per-phone"> - 鑻� <span>/{{ dictionaryData.data.ukPhone }}/</span - ><img - :src="sound" - class="soundBtn hover" - @click="soundWord(dictionaryData.data.word, 'en-UK')" - /> + 鑻� <span>/{{ dictionaryData.data.ukPhone }}/</span><img :src="sound" class="soundBtn hover" + @click="soundWord(dictionaryData.data.word, 'en-UK')" /> </div> <div class="per-phone"> - 缇� <span>/{{ dictionaryData.data.usPhone }}/</span - ><img - :src="sound" - class="soundBtn hover" - @click="soundWord(dictionaryData.data.word, 'en-US')" - /> + 缇� <span>/{{ dictionaryData.data.usPhone }}/</span><img :src="sound" class="soundBtn hover" + @click="soundWord(dictionaryData.data.word, 'en-US')" /> </div> </div> <div class="trans"> @@ -1096,14 +853,8 @@ </div> </div> - <el-dialog - title="璧勬簮" - align-center - v-model="resourVisble" - width="845" - class="resourDialog" - :before-close="resourVisbleClose" - > + <el-dialog title="璧勬簮" align-center v-model="resourVisble" width="845" class="resourDialog" + :before-close="resourVisbleClose"> <div class="videoBox" v-if="resourType == '瑙嗛'"> <video controls controlslist="nodownload" :src="testVideo"></video> </div> @@ -1117,35 +868,14 @@ <audio ref="audioPlayer" :src="testAudio" controls @loadedmetadata="autoPlay"></audio> </div> <!-- 鍥剧墖 --> - <el-image-viewer - v-if="confirmDialog" - :zoom-rate="1.2" - @close="closePreview" - :initial-index="previewIndex" - :url-list="imgPreviewList" - /> - <el-dialog - title="娣诲姞绗旇" - align-center - v-model="addNoteVisble" - :before-close="handleClose" - class="myNoteDialogs" - > + <el-image-viewer v-if="confirmDialog" :zoom-rate="1.2" @close="closePreview" :initial-index="previewIndex" + :url-list="imgPreviewList" /> + <el-dialog title="娣诲姞绗旇" align-center v-model="addNoteVisble" :before-close="handleClose" class="myNoteDialogs"> <div class="formBox"> - <el-input - type="textarea" - :rows="4" - v-model="formData.desc" - placeholder="璇疯緭鍏ョ瑪璁板唴瀹�" - ></el-input> + <el-input type="textarea" :rows="4" v-model="formData.desc" placeholder="璇疯緭鍏ョ瑪璁板唴瀹�"></el-input> </div> <div class="noteColorSelectBox"> - <div - v-for="item in colorSelectList" - :key="item.key" - class="flex1 hover" - @click="clickSelectColor(item)" - > + <div v-for="item in colorSelectList" :key="item.key" class="flex1 hover" @click="clickSelectColor(item)"> <div :style="{ background: item.key }" class="scribeItem"> <img :src="xuanzhong" v-if="item.key == noteColorActive" /> </div> @@ -1159,23 +889,15 @@ </span> </template> </el-dialog> - <el-dialog - title="淇濆瓨鎴浘" - align-center - v-model="screenshotVisble" - :before-close="screenshotClose" - width="400" - class="resourDialog screenshotDialog" - > + <el-dialog title="淇濆瓨鎴浘" align-center v-model="screenshotVisble" :before-close="screenshotClose" width="400" + class="resourDialog screenshotDialog"> <div class="formBox"> <el-input v-model="nameData" placeholder="璇疯緭鍏ユ埅鍥惧悕绉�"></el-input> </div> <template #footer> <span class="dialog-footer"> <el-button @click="screenshotClose">鍙� 娑�</el-button> - <el-button type="primary" @click="addScreenshot" :loading="screenshotLoading" - >纭� 瀹�</el-button - > + <el-button type="primary" @click="addScreenshot" :loading="screenshotLoading">纭� 瀹�</el-button> </span> </template> </el-dialog> @@ -1184,13 +906,7 @@ <iframe :src="'https://baike.baidu.com/item/' + dialogToolData.txt" frameborder="0"></iframe> </div> </el-dialog> - <el-dialog - title="AI鏅鸿兘闂瓟" - align-center - v-model="wendaVisible" - width="60%" - class="myAnserDialogs" - > + <el-dialog title="AI鏅鸿兘闂瓟" align-center v-model="wendaVisible" width="60%" class="myAnserDialogs"> <div class="wendabox"> <iframe src="https://yiyan.baidu.com/" frameborder="0"></iframe> </div> @@ -1201,13 +917,7 @@ <dictionary /> </div> </el-dialog> - <el-dialog - title="GGB鍑芥暟宸ュ叿" - align-center - v-model="functionVisible" - width="80%" - class="myDialogs" - > + <el-dialog title="GGB鍑芥暟宸ュ叿" align-center v-model="functionVisible" width="80%" class="myDialogs"> <div class="wendabox"> <iframe src="https://www.geogebra.org/calculator" frameborder="0"></iframe> </div> @@ -1227,39 +937,28 @@ <newWord :resourceUrl="resourceUrl" /> </div> </el-dialog> - <el-dialog - title="閿欓鏈�" - align-center - v-model="wrongQuestionVisble" - width="800" - class="myDialogs" - > + <el-dialog title="閿欓鏈�" align-center v-model="wrongQuestionVisble" width="800" class="myDialogs"> <div class="wendabox"> <wrongQuestion /> </div> </el-dialog> <!-- 绛旈鍣� --> - <examination - ref="examinationRef" - :activeBook="bookConfig" - :info="examinationData.info" - :type="examinationData.type" - :infoType="examinationData.infoType" - /> + <examination ref="examinationRef" :activeBook="bookConfig" :info="examinationData.info" :type="examinationData.type" + :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> + </el-dialog> </template> - <script setup lang="ts"> import heart from '@/assets/images/examination/collectIcon.png' import isHeart from '@/assets/images/examination/collectClickIcon.png' -import { ref, reactive, watch, onMounted, onBeforeMount, onBeforeUnmount, inject } from 'vue' +import { ref, reactive, watch, onMounted, onBeforeMount, onBeforeUnmount, inject, defineComponent } from 'vue' import { useRouter, useRoute } from 'vue-router' import useClipboard from 'vue-clipboard3' import examination from '../examination/index.vue' import calculator from '../components/calculator.vue' +import calculatorNew from '../components/calculatorNew.vue' const { toClipboard } = useClipboard() const MG: any = inject('MG') const toolClass = inject('toolClass') @@ -2042,7 +1741,7 @@ }) } }) - .catch(() => {}) + .catch(() => { }) } } //璧勬簮鎾斁瑙嗛 @@ -2113,12 +1812,12 @@ activeClassify.value = item.key resourceDataList.value = [] searchText.value = '' - if(resourceType.value == 'collect') { + if (resourceType.value == 'collect') { getCollectResource() } else { getResourceData() } - + } const searchBtn = () => { if (searchShow.value) { @@ -2130,17 +1829,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 @@ -2215,11 +1914,11 @@ } }) } + } + } else { + resourceDataList.value = [] } - } else { - resourceDataList.value = [] - } - }) + }) } else { ElMessageBox.confirm('璇峰厛鐧诲綍锛�', { confirmButtonText: '鍘荤櫥褰�', @@ -2236,28 +1935,28 @@ }) } }) - .catch(() => {}) + .catch(() => { }) } } // 鏀惰棌鎸夐挳 -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, + key: bookConfig.value.bookId, value: JSON.stringify(collectResourceList.value), }, ], @@ -2318,7 +2017,7 @@ }) } }) - .catch(() => {}) + .catch(() => { }) } } @@ -2350,7 +2049,7 @@ .then(() => { router.push('/login') }) - .catch(() => {}) + .catch(() => { }) } } @@ -2360,12 +2059,12 @@ 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 { @@ -2739,8 +2438,8 @@ shengciVisble.value = true break case '璁$畻鍣�': - calculatorVisble.value = true - break + calculatorVisble.value = true + break } } else { ElMessageBox.confirm('璇峰厛鐧诲綍锛�', { @@ -2758,7 +2457,7 @@ }) } }) - .catch(() => {}) + .catch(() => { }) } } @@ -2985,7 +2684,7 @@ }) getReMarkList() }) - .catch(function (error) {}) + .catch(function (error) { }) } } else { ElMessageBox.confirm('璇峰厛鐧诲綍锛�', { @@ -3003,7 +2702,7 @@ }) } }) - .catch(() => {}) + .catch(() => { }) } } const getReMarkList = () => { @@ -3049,7 +2748,7 @@ }) } }) - .catch(() => {}) + .catch(() => { }) } } @@ -3129,7 +2828,7 @@ }) } }) - .catch(() => {}) + .catch(() => { }) } } //纭鍥炶皟 @@ -3240,7 +2939,7 @@ }) } }) - .catch(() => {}) + .catch(() => { }) } } //鏌ョ湅鎴浘 @@ -3288,7 +2987,7 @@ getScreenshotList() }) }) - .catch(() => {}) + .catch(() => { }) } //閫変腑鏂囧瓧宸ュ叿鏍� @@ -3553,7 +3252,7 @@ }) } }) - .catch(() => {}) + .catch(() => { }) } } @@ -3643,7 +3342,7 @@ }) } }) - .catch(() => {}) + .catch(() => { }) } } @@ -3730,7 +3429,7 @@ }) } }) - .catch(() => {}) + .catch(() => { }) } } @@ -3917,7 +3616,7 @@ } }) }) - .catch(() => {}) + .catch(() => { }) } //鑾峰彇閫変腑鑻辨枃璇嶅吀 @@ -4049,15 +3748,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; @@ -4065,6 +3767,7 @@ border-right: 1px solid #e0e0e0; color: #2c2c2c; } + .layout { width: 69px; height: 30px; @@ -4076,11 +3779,13 @@ } } } + .contentBox { overflow: hidden; flex: 1; display: flex; position: relative; + .menuBox { width: 80px; flex-shrink: 0; @@ -4103,30 +3808,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; @@ -4134,6 +3845,7 @@ text-align: center; } } + .menuContent { // position: relative; width: 300px; @@ -4144,6 +3856,7 @@ -moz-user-select: none; -khtml-user-select: none; user-select: none; + .searchBox { width: 100%; height: 60px; @@ -4153,22 +3866,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; @@ -4179,16 +3897,19 @@ height: 18px; font-size: 12px; } + .activeClassify, .classifyItem:hover { .title { color: #0093ff; } + .count { background: #0093ff; color: #fff; } } + .showSearch { .imgBox { width: 39px; @@ -4196,17 +3917,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; @@ -4214,18 +3938,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; @@ -4233,12 +3961,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; @@ -4250,19 +3981,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; @@ -4313,14 +4048,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; @@ -4335,11 +4073,13 @@ align-items: center; justify-content: center; position: relative; + img { height: 100%; width: 100%; object-fit: contain; } + .handleBox { position: absolute; top: 0; @@ -4349,11 +4089,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; @@ -4369,21 +4111,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; @@ -4393,11 +4139,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; @@ -4405,6 +4153,7 @@ } } } + // .capture { // width: 100%; // } @@ -4428,22 +4177,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; @@ -4456,6 +4209,7 @@ margin-left: 5px; } } + .chapter { color: #b7b7b7; margin: 5px 5px 5px 14px; @@ -4468,10 +4222,12 @@ padding: 0 5px; } } + .noteText { margin: 10px 10px 10px 15px; border-radius: 3px; padding: 2px 5px; + .con { max-height: 65px; display: -webkit-box; @@ -4481,14 +4237,17 @@ } } } + .chapterName { margin: 15px; display: flex; align-items: center; + span { margin-left: 5px; } } + .reMarkItem { margin: 15px; background: #fff; @@ -4496,8 +4255,10 @@ padding: 10px; display: flex; justify-content: space-between; + .reMarkCon { display: flex; + .con { width: 200px; white-space: nowrap; @@ -4506,10 +4267,12 @@ margin-right: 8px; } } + .deleteReMarkImg { display: flex; align-items: center; } + .questionCon { width: 240px; white-space: nowrap; @@ -4525,10 +4288,12 @@ border-radius: 10px; padding: 10px; display: flex; + .index { line-height: 24px; margin-right: 10px; } + .searchCon { flex: 1; width: 240px; @@ -4540,6 +4305,7 @@ -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; + .searchColor { background: rgb(245, 225, 42, 0.5); } @@ -4547,6 +4313,7 @@ } } } + .allSearch, .notesBox, .resourceBox, @@ -4556,30 +4323,34 @@ 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; @@ -4591,6 +4362,7 @@ text-align: center; box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3); z-index: 2; + img { height: 10px; width: 18px; @@ -4601,6 +4373,7 @@ flex: 1; font-size: 16px; position: relative; + .pageBox-header { height: 57px; padding: 0 20px; @@ -4609,6 +4382,7 @@ z-index: 99; align-items: center; justify-content: space-between; + .classTime { display: flex; align-items: center; @@ -4616,6 +4390,7 @@ border-radius: 20px 20px 20px 20px; color: #0093ff; padding: 8px; + .qureIcon { width: 9px; height: 9px; @@ -4624,16 +4399,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; @@ -4643,21 +4422,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; @@ -4666,21 +4449,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%; @@ -4692,6 +4480,7 @@ } } } + .toolBox { position: relative; box-shadow: -3px 0px 6px 1px rgba(0, 0, 0, 0.07); @@ -4700,11 +4489,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; @@ -4713,9 +4504,11 @@ border-radius: 3px 3px 0px 0px; } } + .menu { padding-top: 20px; - li > div { + + li>div { // height: 50px; padding: 10px 36px; font-size: 16px; @@ -4734,6 +4527,7 @@ } } } + .openBox { width: 25px; height: 25px; @@ -4752,22 +4546,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; @@ -4775,13 +4574,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); @@ -4789,6 +4591,7 @@ border-radius: 5px; border: 2px solid #cfcfcf; } + .typeActive { text-align: center; color: #0093ff; @@ -4798,6 +4601,7 @@ background: rgba(0, 147, 255, 0.13); } } + .giveLessons { color: #0093ff; width: 90px; @@ -4808,6 +4612,7 @@ display: flex; align-items: center; justify-content: center; + span { margin-left: 10px; } @@ -4828,6 +4633,7 @@ border-radius: 10px; padding: 6px; overflow: hidden; + .floatToolItem { margin: 10px 0; height: 30px; @@ -4837,11 +4643,13 @@ border-radius: 5px; color: #fff; cursor: pointer; + .imgBox { width: 24px; height: 24px; margin: 0 auto; position: relative; + img { width: 100%; height: 100%; @@ -4857,10 +4665,12 @@ margin: auto; } } + .text { margin-right: 5px; } } + .floatToolItem:hover, .floatToolActive { background-color: rgba(255, 255, 255, 0.3); @@ -4879,10 +4689,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; @@ -4893,6 +4705,7 @@ align-items: center; // flex: 1; font-size: 14px; + .imgBox { height: 18px; width: 18px; @@ -4900,9 +4713,11 @@ margin: 0 auto; } } + .floatToolItem:hover { background-color: rgba(44, 44, 44, 0.2); } + .layOutTool { height: 20px; margin-right: 5px; @@ -4914,6 +4729,7 @@ .dialogToolBox { position: fixed; z-index: 2; + .toolSelectBox { height: 40px; display: flex; @@ -4923,6 +4739,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; @@ -4933,10 +4750,12 @@ margin: 0 5px; cursor: pointer; text-align: center; + span { color: #fff; } } + .dialogToolItem:hover, .active { background-color: rgba(255, 255, 255, 0.2); @@ -4946,6 +4765,7 @@ } } } + .colorSelectBox { padding: 5px 10px; width: 190px; @@ -4955,8 +4775,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; @@ -4971,6 +4793,7 @@ } } } + .lineDeleteBox { position: fixed; z-index: 2; @@ -4980,6 +4803,7 @@ background-color: rgba(90, 90, 90, 0.9); border-radius: 5px; display: flex; + .dialogToolItem { padding: 3px; margin: 0 5px; @@ -4988,10 +4812,12 @@ justify-content: center; align-items: center; } + .dialogToolItem:hover { background-color: rgba(255, 255, 255, 0.3); } } + .noteContentBox { max-width: 240px; position: fixed; @@ -4999,6 +4825,7 @@ padding: 10px; border-radius: 5px; } + .dictionaryDataBox { position: fixed; z-index: 2; @@ -5006,9 +4833,11 @@ padding: 5px 20px; background: #fff; border-radius: 5px; + .word { font-weight: bold; } + .phone_con { .per-phone { align-items: center; @@ -5022,33 +4851,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%; @@ -5080,38 +4916,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; @@ -5124,12 +4970,15 @@ } } } + .videoBox { text-align: center; + video { width: 100%; } } + .audioBox { // display:none; } @@ -5137,16 +4986,19 @@ .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; } </style> -- Gitblit v1.9.1