From a8ca6dbb8dfcea7f8481e45c8f83222358f36577 Mon Sep 17 00:00:00 2001 From: litian <2804272236@qq.com> Date: 星期三, 16 十月 2024 18:26:22 +0800 Subject: [PATCH] 1 --- src/views/readerPages/webHome.vue | 784 ++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 560 insertions(+), 224 deletions(-) diff --git a/src/views/readerPages/webHome.vue b/src/views/readerPages/webHome.vue index 0b14be8..5aab5b3 100644 --- a/src/views/readerPages/webHome.vue +++ b/src/views/readerPages/webHome.vue @@ -18,8 +18,11 @@ <!-- 鑿滃崟 --> <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> @@ -34,10 +37,16 @@ <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" /> @@ -56,13 +65,20 @@ </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> @@ -82,8 +98,14 @@ <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> @@ -106,14 +128,20 @@ </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> @@ -139,9 +167,18 @@ </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> @@ -159,8 +196,11 @@ <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"> + <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"> @@ -168,11 +208,19 @@ </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> @@ -188,17 +236,27 @@ <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"> + <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"> @@ -206,12 +264,19 @@ </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> @@ -219,20 +284,24 @@ <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> @@ -251,9 +320,17 @@ <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> @@ -265,8 +342,14 @@ </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> @@ -278,54 +361,112 @@ <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'"> + <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 == '瑙嗛'"> + <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"> + <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"> + <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 == '鍥剧墖'"> + <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 == '鏄�' - "> + <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)" /> + :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> @@ -391,10 +532,19 @@ </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> @@ -404,16 +554,22 @@ <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> @@ -425,9 +581,19 @@ </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" /> @@ -483,28 +649,42 @@ <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" /> @@ -512,8 +692,12 @@ </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> @@ -535,28 +719,40 @@ <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" /> @@ -565,8 +761,12 @@ </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> @@ -602,8 +802,12 @@ </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> @@ -664,29 +868,57 @@ <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" /> @@ -699,13 +931,17 @@ <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> @@ -724,11 +960,20 @@ </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')"> @@ -742,10 +987,13 @@ </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="" /> @@ -763,13 +1011,17 @@ </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="" /> @@ -782,10 +1034,19 @@ </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> @@ -793,7 +1054,10 @@ </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> @@ -805,8 +1069,11 @@ </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"> @@ -820,26 +1087,41 @@ </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"> @@ -853,8 +1135,14 @@ </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> @@ -868,14 +1156,35 @@ <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> @@ -889,15 +1198,23 @@ </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> @@ -906,7 +1223,13 @@ <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> @@ -917,7 +1240,13 @@ <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> @@ -937,19 +1266,36 @@ <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="850" class="myDialogs"> - <calculatorNew></calculatorNew> + <el-dialog title="璁$畻鍣�" align-center v-model="calculatorVisble" width="850" class="myDialogs"> + <calculatorNew></calculatorNew> </el-dialog> </template> +<script setup lang="ts"> +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' +const { toClipboard } = useClipboard() const MG: any = inject('MG') const toolClass = inject('toolClass') //鑾峰彇璺敱鍣� @@ -961,7 +1307,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' @@ -1073,6 +1418,7 @@ const bookInfo = ref() const isBuy = ref(false) const tryPageCount = ref(0) +const searchText = ref() onMounted(() => { if (token) { getUserInfo() @@ -1118,6 +1464,7 @@ window.qiankunState.initTestBook(localStorage.getItem('bookId') + '', tryPageCount.value) } } + }) // 瀹氫箟鐖跺眰鏂规硶 @@ -1207,6 +1554,7 @@ // if (window.qiankunState && window.qiankunState.getAnswers){ // window.qiankunState.getAnswers(localStorage.getItem("")) // } + }) onBeforeUnmount(() => { @@ -1435,7 +1783,7 @@ icon: huabi, name: '鐢荤瑪', // isShow: bookConfig.value.textbookComponents.indexOf('800109C0') > -1 - isShow:true + isShow: true }, { icon: baiban, @@ -1517,10 +1865,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 = { @@ -1535,7 +1893,6 @@ } const handleNodeClick = (data) => { - console.log(data) if (!isBuy.value) { if (data.start < tryPageCount.value) { headerData.process = data.start @@ -1777,7 +2134,7 @@ }) } }) - .catch(() => { }) + .catch(() => {}) } } //璧勬簮鎾斁瑙嗛 @@ -1853,10 +2210,6 @@ } else { getResourceData() } -<<<<<<< HEAD -======= - ->>>>>>> bcee5cd49c38973e2c6c316e1405f27ab1b74db7 } const searchBtn = () => { if (searchShow.value) { @@ -1974,18 +2327,13 @@ }) } }) - .catch(() => { }) + .catch(() => {}) } } // 鏀惰棌鎸夐挳 const handleCollectResource = (id, md5, resourcePath, resourceType, source, resourceName) => { -<<<<<<< HEAD if (collectResourceList.value.findIndex((item) => item.id == id) > -1) { collectResourceList.value = collectResourceList.value.filter((item) => item.id != id) -======= - if (collectResourceList.value.findIndex(item => item.id == id) > -1) { - collectResourceList.value = collectResourceList.value.filter(item => item.id != id) ->>>>>>> bcee5cd49c38973e2c6c316e1405f27ab1b74db7 } else { collectResourceList.value.push({ id, @@ -1999,14 +2347,11 @@ MG.identity.setUserKey({ setKeyRequests: [ { -<<<<<<< HEAD domain: 'collectResource', key: bookConfig.value.bookId, value: JSON.stringify(collectResourceList.value) } ] - }, - ], }) } @@ -2064,7 +2409,7 @@ }) } }) - .catch(() => { }) + .catch(() => {}) } } @@ -2096,7 +2441,7 @@ .then(() => { router.push('/login') }) - .catch(() => { }) + .catch(() => {}) } } @@ -2191,7 +2536,6 @@ // } } -const searchText = ref<string>('') //绛涢�� const menuState = reactive({ open: true, notesColor: 'all' //绗旇棰滆壊 @@ -2503,7 +2847,7 @@ }) } }) - .catch(() => { }) + .catch(() => {}) } } @@ -2730,7 +3074,7 @@ }) getReMarkList() }) - .catch(function (error) { }) + .catch(function (error) {}) } } else { ElMessageBox.confirm('璇峰厛鐧诲綍锛�', { @@ -2748,7 +3092,7 @@ }) } }) - .catch(() => { }) + .catch(() => {}) } } const getReMarkList = () => { @@ -2794,7 +3138,7 @@ }) } }) - .catch(() => { }) + .catch(() => {}) } } @@ -2874,7 +3218,7 @@ }) } }) - .catch(() => { }) + .catch(() => {}) } } //纭鍥炶皟 @@ -2985,7 +3329,7 @@ }) } }) - .catch(() => { }) + .catch(() => {}) } } //鏌ョ湅鎴浘 @@ -3033,7 +3377,7 @@ getScreenshotList() }) }) - .catch(() => { }) + .catch(() => {}) } //閫変腑鏂囧瓧宸ュ叿鏍� @@ -3298,7 +3642,7 @@ }) } }) - .catch(() => { }) + .catch(() => {}) } } @@ -3388,7 +3732,7 @@ }) } }) - .catch(() => { }) + .catch(() => {}) } } @@ -3475,7 +3819,7 @@ }) } }) - .catch(() => { }) + .catch(() => {}) } } @@ -3662,7 +4006,7 @@ } }) }) - .catch(() => { }) + .catch(() => {}) } //鑾峰彇閫変腑鑻辨枃璇嶅吀 @@ -4371,11 +4715,7 @@ } .questionList { -<<<<<<< HEAD height: 83%; -======= - height: 83% ->>>>>>> bcee5cd49c38973e2c6c316e1405f27ab1b74db7 } .question-bottom { @@ -4386,10 +4726,6 @@ width: 300px; padding: 20px 0; background-color: #fff; -<<<<<<< HEAD -======= - ->>>>>>> bcee5cd49c38973e2c6c316e1405f27ab1b74db7 li { cursor: pointer; width: 65px; @@ -4561,7 +4897,7 @@ .menu { padding-top: 20px; - li>div { + li > div { // height: 50px; padding: 10px 36px; font-size: 16px; -- Gitblit v1.9.1