TextbookReader.git

			@@ -1,7 +1,13 @@
			<template>
			<div class="homeBox">
			<div class="headerBox">
			<p>数字教材平台</p>
			<!-- <span class="logoTxt">北京师范大学出版集团</span> -->
			<img :src="logo" />
			<div class="userInfoBox">
			<div></div>
			<div></div>
			<div><div class="layout hover" @click="layoutBtn">退出</div></div>
			</div>
			</div>
			<div class="contentBox">
			<!-- 菜单 -->
			@@ -15,17 +21,62 @@
			<div class="menuIcon imgBox">
			<img :src="item.icon" />
			</div>
			<p>{{ item.name }}</p>
			<div class="name">{{ item.name }}</div>
			</div>
			<div class="reload hover" @click="reload()">刷新</div>
			<!-- 设置 -->
			<el-popover placement="right" :width="200" trigger="click">
			<el-popover placement="right" :width="300" trigger="click">
			<div class="settingBox">
			<el-form :model="settingForm" label-width="auto" style="max-width: 400px">
			<el-form-item label="答题音效">
			<el-switch v-model="settingForm.acoustics" />
			<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)"
			>
			{{ item.lable }}
			<div class="activeIcon" v-if="settingForm.fontSizeActive == item.key">
			<img :src="xuanzhong" />
			</div>
			</div>
			</div>
			</div>
			</el-form-item>
			<el-form-item label="答题动画">
			<el-switch v-model="settingForm.animation" />
			<div class="inline">
			<el-form-item label="答题音效">
			<el-switch v-model="settingForm.acoustics" />
			</el-form-item>
			<el-form-item label="答题动画">
			<el-switch v-model="settingForm.animation" />
			</el-form-item>
			</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"
			>
			<img :src="xuanzhong1" v-if="item.key == settingForm.bgColorActive" />
			</div>
			</div>
			</div>
			</el-form-item>
			</el-form>
			</div>
			@@ -40,16 +91,35 @@
			<!-- 菜单内容 -->
			<div class="menuContent" v-if="menuState.open">
			<div class="searchBox">
			<div class="inputBox">
			<el-input class="custom-input" placeholder="请输入内容">
			<div class="inputBox" v-if="activeMenu !== 2">
			<el-input class="custom-input" placeholder="请输入内容" v-model="searchText">
			<template #prefix>
			<el-icon><Search /></el-icon>
			<el-icon @click="searchBook"><Search /></el-icon>
			</template>
			</el-input>
			</div>
			<div v-else class="resourceTab">
			<div class="tabItem hover" @click="selectResourceType('default')">
			<div>默认资源</div>
			<div :class="resourceType == 'default' ? 'text' : 'line'"></div>
			</div>
			<hr class="hr" />
			<div class="tabItem hover" @click="selectResourceType('teacher')">
			<div>教师资源</div>
			<div :class="resourceType == 'teacher' ? 'text' : 'line'"></div>
			</div>
			</div>
			</div>
			<!-- 目录 -->
			<div class="" v-if="activeMenu == 0"></div>
			<div class="menuList" v-if="activeMenu == 0">
			<el-tree
			style="max-width: 600px"
			default-expand-all="true"
			:data="catalogueData"
			:props="defaultProps"
			@node-click="handleNodeClick"
			/>
			</div>
			<!-- 笔记 -->
			<div class="notesBox" v-if="activeMenu == 1">
			<div class="screenBox">
			@@ -69,15 +139,138 @@
			></div>
			</div>
			</div>
			<div class="list-box">
			<div v-if="scribeData.noteList.length > 0 && !scribeData.loading">
			<div v-for="(item, index) in scribeData.noteList" :key="item.key" class="listItem">
			<div class="textBox">
			<div class="title">
			<div class="title-con">
			<div class="border-left" :style="{ 'border-right-color': item.color }"></div>
			<span>{{ item.createDate }}</span>
			</div>
			<div>
			<img :src="bianji" @click="update(item, 'note')" />
			<img :src="shanchu" @click="deleteBtn(item, 'note')" />
			</div>
			</div>
			<div
			class="noteText hover"
			@click="jumpContent('note' + index)"
			: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">{{ item.note }}</div>
			</div>
			<div class="chapter">{{ item.selectText }}</div>
			</div>
			</div>
			</div>
			<div v-if="scribeData.noteList.length == 0 && !scribeData.loading">
			<el-empty :image-size="60" description="暂无数据" />
			</div>
			</div>
			</div>
			<!-- 资源 -->
			<div class="" v-if="activeMenu == 2"></div>
			<div class="" v-if="activeMenu == 2">
			<div class="resourceBox">
			<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 class="title">{{ item.title }}</div>
			<div class="count">{{ item.count }}</div>
			</div>
			</div>
			<div class="showSearch flex1 hover">
			<div :class="searchShow ? 'imgBox' : 'imgBox activeSearch'" @click="searchBtn">
			<img :src="searchShow ? search : search1" />
			</div>
			</div>
			</div>
			<div class="inputBox" v-if="!searchShow">
			<el-input class="custom-input" placeholder="请输入内容" v-model="searchText">
			<template #prefix>
			<el-icon @click="searchBook" class="hover"><Search /></el-icon>
			</template>
			</el-input>
			</div>
			</div>
			<div class="list-box">
			<div v-if="resourceDataList.length > 0" class="resourceList">
			<el-row :gutter="20">
			<el-col :span="12" v-for="(item, index) in resourceDataList" :key="item">
			<div class="resourceItem hover" @click="goResourceDetail(item)">
			<div class="resourceImg">
			<img :src="video" mode="" />
			</div>
			<div class="rName" v-if="searchText != ''" v-html="item.name"></div>
			<div class="rName" v-else>{{ item.name }}</div>
			</div>
			</el-col>
			</el-row>
			</div>
			<div v-else>
			<el-empty :image-size="60" description="暂无数据" />
			</div>
			</div>
			</div>
			<!-- 知识图谱 -->
			<div class="" v-if="activeMenu == 3"></div>
			<div class="" v-if="activeMenu == 3">
			<div class="list-box">
			<div>
			<el-empty :image-size="60" description="暂无数据" />
			</div>
			</div>
			</div>
			<!-- 截图 -->
			<div class="" v-if="activeMenu == 4"></div>
			<div class="" v-if="activeMenu == 4">
			<div class="list-box">
			<div class="screenshot" v-if="screenshotList.length > 0">
			<div
			v-for="(item, index) in screenshotList"
			:key="item"
			class="captureItem"
			@click="getCapture(item)"
			>
			<div class="imgBox">
			<img :src="item.imgUrl" class="capture" mode="aspectFill" />
			</div>
			<div class="captureName">{{ item.name }}</div>
			</div>
			</div>
			<div v-else>
			<el-empty :image-size="60" description="暂无数据" />
			</div>
			</div>
			</div>
			<!-- 标签 -->
			<div class="" v-if="activeMenu == 5"></div>
			<div class="" v-if="activeMenu == 5">
			<div class="list-box">
			<div>
			<el-empty :image-size="60" description="暂无数据" />
			</div>
			</div>
			</div>
			</div>
			<!-- 菜单内容收起 -->
			<div class="menuStateBox" v-if="menuState.open">
			@@ -91,7 +284,10 @@
			<div class="qureIcon"></div>
			<div class="">已上课：{{ headerData.classTime }}</div>
			</div>
			<div class="progress">{{ headerData.process }}</div>
			<div class="progress">
			<div class="bookName">{{bookName}}</div>
			<div>{{ headerData.process }}%</div>
			</div>
			<div class="rightBox">
			<div class="pageSizeBox">
			<div><img :src="zoomIn" @click="changePageSize('add')" /></div>
			@@ -99,31 +295,25 @@
			<div><img :src="zoomOut" @click="changePageSize('reduce')" /></div>
			</div>
			<div class="brushImgBox">
			<div @click="loadChild"><img :src="huabi2" class="brushImg" />画笔</div>
			<!-- <el-switch v-model="headerData.brushToolShow" @change="brushToolShow"/> -->
			<div><img :src="huabi2" class="brushImg" />画笔</div>
			</div>
			</div>
			</div>
			<!-- 微应用盒子 -->
			<div class="pageBox-content">
			<div id="container"></div>
			<!-- 画笔画布 -->
			<div class="canvas-box">
			<canvas
			@mousedown="mousedown"
			@mousemove.stop.prevent="mousemove"
			@mouseup="mouseup"
			ref="canvas"
			width="100%"
			height="100%"
			></canvas>
			<div class="pageBox-content" @scroll="pageScroll">
			<div class="content-box">
			<div id="container" @mousedown="handleMouseDown" @mousemove="handleMousemove" ></div>
			<!-- 画笔画布 -->
			<div class="canvas-box" v-show="canvasShow">
			<canvas id="canvasRef" :width="canvasWith" :height="canvasheight"></canvas>
			</div>
			</div>
			</div>
			</div>
			<!-- 教学组件 -->
			<div class="toolBox">
			<div class="toolTitle">
			教学组件
			<span>{{ toolState.open ? '教学组件' : '组件' }}</span>
			<div class="text"></div>
			</div>
			<div class="menuList">
			@@ -195,124 +385,11 @@
			>
			<el-popover
			placement="right"
			:width="
			floatingToolData.activeToolData == '标注'
			? 120
			: floatingToolData.activeToolData == '清除'
			? 200
			: 250
			"
			width="120"
			trigger="click"
			v-if="
			floatingToolData.activeToolData == '画笔' \|\|
			floatingToolData.activeToolData == '清除' \|\|
			floatingToolData.activeToolData == '文字' \|\|
			floatingToolData.activeToolData == '标注'
			"
			v-if="floatingToolData.activeToolData == '标注'"
			>
			<div class="popinnerBox">
			<div class="brush" v-if="floatingToolData.activeToolData == '画笔'">
			<div class="thickness">
			<div
			:class="floatingToolData.thicknessActive == 'small' ? 'small active' : 'small'"
			@click="selectThickness('small')"
			></div>
			<div
			:class="
			floatingToolData.thicknessActive == 'middle' ? 'middle active' : 'middle'
			"
			@click="selectThickness('middle')"
			></div>
			<div
			:class="floatingToolData.thicknessActive == 'large' ? 'large active' : 'large'"
			@click="selectThickness('large')"
			></div>
			</div>
			<div class="lineStyle">
			<div class="lineTypeBox">
			<div
			:class="
			floatingToolData.lineTypeActive == 'solid'
			? 'typeItem lineTypeActive'
			: 'typeItem'
			"
			@click="selectLineType('solid')"
			>
			<div class="solid"></div>
			<div class="activeIcon" v-if="floatingToolData.lineTypeActive == 'solid'">
			<img :src="xuanzhong" />
			</div>
			</div>
			<div
			:class="
			floatingToolData.lineTypeActive == 'dashed'
			? 'typeItem lineTypeActive'
			: 'typeItem'
			"
			@click="selectLineType('dashed')"
			>
			<div class="dashed"></div>
			<div class="activeIcon" v-if="floatingToolData.lineTypeActive == 'dashed'">
			<img :src="xuanzhong" />
			</div>
			</div>
			</div>
			<div class="colorSelectBox">
			<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 == floatingToolData.lineColorActive" />
			</div>
			</div>
			</div>
			</div>
			</div>
			<div class="cleanup" v-if="floatingToolData.activeToolData == '清除'">
			<div class="cleanupItem hover" @click="cleanUpSelect('prev')">
			<img :src="clearPrevious" />
			<div>清除上一步</div>
			</div>
			<div class="cleanupItem hover" @click="cleanUpSelect('all')">
			<img :src="clear" />
			<div>清除全部</div>
			</div>
			</div>
			<div class="write" v-if="floatingToolData.activeToolData == '文字'">
			<div class="thickness">
			<div
			:class="floatingToolData.thicknessActive == 'small' ? 'small active' : 'small'"
			@click="selectThickness('small')"
			></div>
			<div
			:class="
			floatingToolData.thicknessActive == 'middle' ? 'middle active' : 'middle'
			"
			@click="selectThickness('middle')"
			></div>
			<div
			:class="floatingToolData.thicknessActive == 'large' ? 'large active' : 'large'"
			@click="selectThickness('large')"
			></div>
			</div>
			<div class="lineStyle">
			<div class="colorSelectBox">
			<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 == floatingToolData.lineColorActive" />
			</div>
			</div>
			</div>
			</div>
			</div>
			<div class="label" v-if="floatingToolData.activeToolData == '标注'">
			<div class="labelItem hover" @click="labelShow('hide')">
			<img :src="hide" />
			@@ -325,15 +402,235 @@
			</div>
			</div>
			<template #reference>
			<div class="floatToolItem">
			<img :src="item.icon" alt="" />
			<div
			:class="
			floatingToolData.activeToolData == item.name
			? 'floatToolActive floatToolItem'
			: 'floatToolItem'
			"
			>
			<img
			:src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon"
			alt=""
			/>
			<div class="text">{{ item.name }}</div>
			</div>
			</template>
			</el-popover>
			<div class="floatToolItem" v-else>
			<img :src="item.icon" alt="" />
			<div
			:class="
			floatingToolData.activeToolData == item.name
			? 'floatToolActive floatToolItem'
			: 'floatToolItem'
			"
			v-else
			@click="floatItemHandle(item)"
			>
			<img
			:src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon"
			alt=""
			/>
			<div class="text">{{ item.name }}</div>
			</div>
			</div>
			</div>
			<div class="brushBox" v-if="floatingToolData.activeToolData == '画笔'">
			<div class="toolList">
			<el-popover placement="top" width="250" trigger="click">
			<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>
			<div class="lineStyle">
			<div class="lineTypeBox">
			<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="dashed"></div>
			<div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'dashed'">
			<img :src="xuanzhong" />
			</div>
			</div>
			</div>
			<div class="colorSelectBox">
			<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>
			</div>
			</div>
			</div>
			</div>
			</div>
			<template #reference>
			<div class="floatToolItem" @click="toolSelectHandle('huabi')">
			<div class="imgBox">
			<img :src="hide" alt="" />
			</div>
			<div class="text">画笔</div>
			</div>
			</template>
			</el-popover>
			<el-popover placement="top" width="250" trigger="click">
			<div class="popinnerBox">
			<div class="write">
			<div class="characters">
			<div
			:class="toolSelectData.fontSizeActive == '14' ? 'small active' : 'small'"
			@click="selectfontSize('14')"
			>
			小
			</div>
			<div
			:class="toolSelectData.fontSizeActive == '16' ? 'middle active' : 'middle'"
			@click="selectfontSize('16')"
			>
			中
			</div>
			<div
			:class="toolSelectData.fontSizeActive == '18' ? 'large active' : 'large'"
			@click="selectfontSize('18')"
			>
			大
			</div>
			</div>
			<div class="lineStyle">
			<div class="colorSelectBox">
			<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>
			</div>
			</div>
			</div>
			</div>
			</div>
			<template #reference>
			<div class="floatToolItem" @click="toolSelectHandle('wenzi')">
			<div class="imgBox">
			<img :src="wenzi2" alt="" />
			</div>
			<div class="text">文字</div>
			</div>
			</template>
			</el-popover>
			<el-popover placement="top" width="250" trigger="click">
			<div class="popinnerBox">
			<div class="write">
			<div class="characters">
			<div
			:class="floatingToolData.fontSizeActive == '14' ? 'small active' : 'small'"
			@click="selectfontSize('14')"
			>
			小
			</div>
			<div
			:class="toolSelectData.fontSizeActive == '16' ? 'middle active' : 'middle'"
			@click="selectfontSize('16')"
			>
			中
			</div>
			<div
			:class="toolSelectData.fontSizeActive == '18' ? 'large active' : 'large'"
			@click="selectfontSize('18')"
			>
			大
			</div>
			</div>
			<div class="lineStyle">
			<div class="colorSelectBox">
			<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>
			</div>
			</div>
			</div>
			</div>
			</div>
			<template #reference>
			<div class="floatToolItem" @click="toolSelectHandle('tuxing')">
			<div class="imgBox">
			<img :src="tuxing" alt="" />
			</div>
			<div class="text">图形</div>
			</div>
			</template>
			</el-popover>
			<div class="floatToolItem" @click="toolSelectHandle('xiangpi')">
			<div class="imgBox">
			<img :src="clearPrevious" alt="" />
			</div>
			<div class="text">橡皮擦</div>
			</div>
			<div class="floatToolItem" @click="toolSelectHandle('chexiao')">
			<div class="imgBox">
			<img :src="clear" alt="" />
			</div>
			<div class="text">撤销</div>
			</div>
			<div class="floatToolItem" @click="toolSelectHandle('chongzuo')">
			<div class="imgBox">
			<img :src="hide" alt="" />
			</div>
			<div class="text">重做</div>
			</div>
			<div class="floatToolItem" @click="toolSelectHandle('qingchu')">
			<div class="imgBox">
			<img :src="hide" alt="" />
			</div>
			<div class="text">清除</div>
			</div>
			<div class="floatToolItem layOutTool" @click="toolSelectHandle('tuichu')">
			<div class="imgBox">
			<img :src="tuichu" alt="" />
			</div>
			<div class="text">退出</div>
			</div>
			</div>
			</div>
			@@ -344,10 +641,7 @@
			v-show="showToolBox"
			:style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }"
			>
			<div
			class="colorSelectBox"
			v-if="toolActive == '高亮' \|\| toolActive == '划线' \|\| toolActive == '笔记'"
			>
			<div class="colorSelectBox" v-show="toolActive == '高亮' \|\| toolActive == '划线'">
			<div
			v-for="item in colorSelectList"
			:key="item.key"
			@@ -355,11 +649,11 @@
			@click="clickSelect(item)"
			>
			<div :style="{ background: item.key }" class="scribeItem">
			<img :src="xuanzhong" v-if="item.key == colorActive" />
			<img :src="xuanzhong1" v-if="item.key == colorActive" />
			</div>
			</div>
			</div>
			<div class="toolSelectBox">
			<div class="toolSelectBox" v-show="!(toolActive == '高亮' \|\| toolActive == '划线')">
			<div
			:class="item.name == toolActive ? 'dialogToolItem active' : 'dialogToolItem'"
			v-for="item in dialogToolList"
			@@ -375,45 +669,111 @@
			</div>
			</div>
			</div>
			<el-dialog title="添加笔记" v-model="addNoteVisble" width="400">
			<el-dialog title="资源" align-center v-model="resourVisble" width="845" class="resourDialog">
			<div class="videoBox" v-if="resourType == 'video'">
			<video controls object-fit="fill" :src="testVideo"></video>
			</div>
			<div class="wordBox" v-if="resourType == 'word'">
			<vue-office-docx :src="testWord" />
			</div>
			</el-dialog>
			<el-dialog
			title="添加笔记"
			align-center
			v-model="addNoteVisble"
			:before-close="handleClose"
			class="myNoteDialogs"
			>
			<div class="formBox">
			<el-form ref="form" :model="formData" label-width="80px">
			<el-form-item label="笔记标题">
			<el-input v-model="formData.name"></el-input>
			</el-form-item>
			<el-form-item label="笔记内容">
			<el-input type="textarea" v-model="formData.desc"></el-input>
			</el-form-item>
			</el-form>
			<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="clickSelect(item)"
			>
			<div :style="{ background: item.key }" class="scribeItem">
			<img :src="xuanzhong" v-if="item.key == colorActive" />
			</div>
			</div>
			</div>
			<template #footer>
			<span class="dialog-footer">
			<el-button @click="addNoteVisble = false">取消</el-button>
			<el-button @click="handleClose">取消</el-button>
			<el-button type="primary" @click="addNote">确定</el-button>
			</span>
			</template>
			</el-dialog>
			<el-dialog title="AI智能问答" v-model="wendaVisible" width="26%">
			<el-dialog
			align-center
			v-model="confirmDialog"
			width="60%"
			:closeOnClickModal="false"
			title="图片"
			class="resourDialog"
			>
			<div class="imgUrlBox">
			<img :src="imgUrl" mode="aspectFill" />
			</div>
			</el-dialog>
			<el-dialog
			title="保存截图"
			align-center
			v-model="screenshotVisble"
			:before-close="screenshotClose"
			width="400"
			class="resourDialog"
			>
			<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">确定</el-button>
			</span>
			</template>
			</el-dialog>
			<el-dialog title="百度百科" align-center v-model="baiduVisible" width="60%" class="myDialogs">
			<div class="wendabox">
			<iframe :src="'https://baike.baidu.com/item/' + selectText" frameborder="0"></iframe>
			</div>
			</el-dialog>
			<el-dialog title="AI智能问答" align-center v-model="wendaVisible" width="26%" class="myDialogs">
			<div class="wendabox">
			<iframe src="https://yiyan.baidu.com/" frameborder="0"></iframe>
			</div>
			</el-dialog>
			<el-dialog title="词典" v-model="cidianVisible" width="60%">
			<el-dialog title="词典" align-center v-model="cidianVisible" width="60%" class="myDialogs">
			<div class="wendabox">
			<iframe src="https://www.vocabulary.com/" frameborder="0"></iframe>
			<!-- <iframe src="https://www.vocabulary.com/" frameborder="0"></iframe> -->
			<dictionary :searchCon="selectText" />
			</div>
			</el-dialog>
			<el-dialog title="GGB函数工具" v-model="functionVisible" width="60%">
			<el-dialog
			title="GGB函数工具"
			align-center
			v-model="functionVisible"
			width="60%"
			class="myDialogs"
			>
			<div class="wendabox">
			<iframe src="https://www.geogebra.org/calculator" frameborder="0"></iframe>
			</div>
			</el-dialog>
			<el-dialog title="思维导图" v-model="siweiVisble" width="80%">
			<el-dialog title="思维导图" align-center v-model="siweiVisble" width="80%" class="myDialogs">
			<div class="wendabox">
			<iframe src="https://www.iodraw.com/mind" frameborder="0"></iframe>
			</div>
			</el-dialog>
			<el-dialog title="模型工具" v-model="modelToolVisble" width="80%">
			<el-dialog title="模型工具" align-center v-model="modelToolVisble" width="80%" class="myDialogs">
			<div class="wendabox">
			<iframe src="https://adjam93.github.io/threejs-model-viewer/#" frameborder="0"></iframe>
			</div>
			@@ -421,15 +781,21 @@
			</template>

			<script setup lang="ts">
			import { ref, reactive, watch, onMounted } from 'vue'
			import { ref, reactive, watch, onMounted, onBeforeMount,inject } from 'vue'
			import { ctxUrl,resourceUrl } from '@/assets/js/config'
			import { useRouter, useRoute } from 'vue-router'

			import useClipboard from 'vue-clipboard3'
			const { toClipboard } = useClipboard()
			const request = inject('request')
			const qiankunActions = inject('qiankunActions')
			//获取路由器
			let $router = useRouter()
			let router = useRouter()
			//获取当前路由的信息
			let $route = useRoute()

			import { ElMessage } from 'element-plus'
			let route = useRoute()
			import moment from 'moment'
			import dictionary from '@/views/components/dictionary.vue'
			import { ElMessage, ElMessageBox } 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'
			import ziyuan from '@/assets/images/menu/ziyuan.png'
			@@ -438,6 +804,8 @@
			import biaoqian from '@/assets/images/menu/biaoqian.png'
			import topbg from '@/assets/images/header/top-bg.png'
			import setting from '@/assets/images/operation/setting.png'
			import search from '@/assets/images/operation/search.png'
			import search1 from '@/assets/images/operation/search1.png'

			import aIzhinengwenda from '@/assets/images/menu/AIzhinengwenda.png'
			import aIyuyinyuedu from '@/assets/images/menu/AIyuyinyuedu.png'
			@@ -465,6 +833,7 @@
			import qingchu1 from '../assets/images/operation/Clearaway-b.png'
			import wenzi from '../assets/images/operation/wenzi-w.png'
			import wenzi1 from '../assets/images/operation/wenzi-b.png'
			import wenzi2 from '../assets/images/operation/wenzi.png'
			import biaoqianw from '../assets/images/operation/biaoqian-w.png'
			import biaoqian1 from '../assets/images/operation/biaoqian-b.png'
			import baiban from '../assets/images/operation/baiban-w.png'
			@@ -477,6 +846,8 @@
			import clearPrevious from '../assets/images/operation/clearPrevious.png'
			import hide from '../assets/images/operation/hide.png'
			import show from '../assets/images/operation/show.png'
			import tuichu from '../assets/images/operation/tuichu.png'
			import tuxing from '../assets/images/operation/tuxing.png'

			import gaoliang from '../assets/images/operation/gaoliang.png'
			import gaoliang1 from '../assets/images/operation/gaoliang-b.png'
			@@ -492,15 +863,213 @@
			import AIyuedu1 from '../assets/images/operation/AIyuedu-b.png'
			import cidian2 from '../assets/images/operation/cidian.png'
			import cidian1 from '../assets/images/operation/cidian-b.png'
			import baidu from '../assets/images/operation/baidu.png'
			import baidu1 from '../assets/images/operation/baidu-b.png'
			import yuyinyuedu from '../assets/images/operation/yuyinyuedu.png'
			import yuyinyuedu1 from '../assets/images/operation/yuyinyuedu-b.png'
			import xuanzhong from '../assets/images/operation/xuanzhong.png'
			import xuanzhong1 from '../assets/images/operation/xuanzhong1.png'

			import zoomIn from '../assets/images/operation/zoomIn.png'
			import zoomOut from '../assets/images/operation/zoomOut.png'
			import huabi2 from '../assets/images/operation/huabi.svg'
			import { loadMicroApp } from 'qiankun'

			import shanchu from '../assets/images/operation/delete.png'
			import bianji from '../assets/images/operation/bianji.png'
			import video from '../assets/images/content/resource.png'
			//引入VueOfficeDocx组件
			import VueOfficeDocx from '@vue-office/docx'
			//引入相关样式
			import '@vue-office/docx/lib/index.css'
			//截屏
			import ScreenShort from 'js-web-screen-shot'
			import { start } from 'qiankun'
			import axios from 'axios'
			import { fabric } from 'fabric'

			import { loadMicroApp } from 'qiankun'
			import { microApps } from '@/child.ts'
			const canvasWith = ref(1000)
			const canvasheight = ref(3000)
			const screenWidth = ref(
			window.innerWidth \|\| document.documentElement.clientWidth \|\| document.body.clientWidth
			)

			let microApp = null // 微应用实例
			const bookName = ref('')
			const bookId = ref(1)
			onMounted(() => {
			// canvasWith.value = window.innerWidth - 540
			// canvasheight.value = window.innerHeight - 110
			getCatalogueData()
			getResourceData()
			// setTimeout(() => {
			// canvasWith.value = document.getElementById('container').offsetWidth
			// canvasheight.value = document.getElementById('container').offsetHeight
			// }, 5000)
			if (screenWidth.value < 1180) {
			menuState.open = false
			toolState.open = false
			}
			window.onresize = () => {
			return (() => {
			screenWidth.value =
			window.innerWidth \|\| document.documentElement.clientWidth \|\| document.body.clientWidth
			})()
			}

			// 加载微应用
			microApp = loadMicroApp(microApps.book1, {
			sandbox: {
			// strictStyleIsolation: true,
			// experimentalStyleIsolation: true
			}
			})
			window.qiankunActions.onGlobalStateChange((state, prev) => {
			bookName.value = state.bookName
			bookId.value = state.bookId

			})

			window.qiankunActions.setGlobalState({
			state: 1, // 加载子应用
			windowSelection: (data) => {
			// 绑定子应用选择监听事件
			console.log(data, '子应用选择')
			getSelection(data)
			}
			})

			})

			watch(
			() => screenWidth.value,
			(val) => {
			screenWidth.value = val
			if (screenWidth.value < 1180) {
			menuState.open = false
			toolState.open = false
			}
			}
			)
			watch(
			() => bookId.value,
			(val) => {
			getNotesList() // 获取笔记
			getlineHeightList() //获取高亮
			getScribeList() //获取划线
			getScreenshotList() //截图
			}
			)
			//获取目录
			const catalogueData = ref([])
			const getCatalogueData = () => {
			axios
			.get(ctxUrl + '/information.json')
			.then(function (response) {
			var json = response.data
			// 处理获取到的json数据
			catalogueData.value = json
			})
			.catch(function (error) {
			console.log(error)
			})
			}
			const defaultProps = {
			children: 'children',
			label: 'label'
			}
			const handleNodeClick = (data) => {
			document.getElementById(data.id).scrollIntoView()
			}

			//获取资源
			//资源分类
			const classifySelectList = reactive([
			{
			title: '图片',
			count: 0,
			key: 'image'
			},
			{
			title: '音频',
			count: 0,
			key: 'audio'
			},
			{
			title: '视频',
			count: 0,
			key: 'video'
			},
			{
			title: '其他',
			count: 0,
			key: 'other'
			}
			])
			const activeClassify = ref('image')
			const searchShow = ref(true)
			const resourceData = ref({})
			const resourceDataList = ref([])
			const resourVisble = ref(false)
			const resourType = ref('')
			const testVideo = ref('') //视频链接
			const testWord = ref('') //word链接
			const getResourceData = () => {
			axios
			.get(ctxUrl + '/resource.json')
			.then(function (response) {
			var json = response.data
			// 处理获取到的json数据
			console.log(json, '资源')
			resourceData.value = json
			resourceDataList.value = json.imgList
			classifySelectList[0].count = json.imgList.length
			classifySelectList[1].count = json.audioList.length
			classifySelectList[2].count = json.videoList.length
			classifySelectList[3].count = json.attachmentList.length
			})
			.catch(function (error) {
			console.log(error)
			})
			}

			const goResourceDetail = (data) => {
			resourVisble.value = true
			resourType.value = data.type
			if (data.type == 'video') {
			testVideo.value = resourceUrl + '/resourceData/' + data.name
			} else if (data.type == 'word') {
			testWord.value = resourceUrl + '/resourceData/' + data.name
			}
			}

			const classifyClick = (item) => {
			activeClassify.value = item.key
			resourceDataList.value = []
			searchText.value = ''
			switch (item.key) {
			case 'image':
			resourceDataList.value = resourceData.value.imgList
			break
			case 'audio':
			resourceDataList.value = resourceData.value.audioList
			break
			case 'video':
			resourceDataList.value = resourceData.value.videoList
			break
			case 'other':
			resourceDataList.value = resourceData.value.attachmentList
			break
			}
			}
			const searchBtn = () => {
			if (searchShow.value) {
			searchShow.value = false
			} else {
			searchShow.value = true
			}
			}
			// 菜单
			const menuData = reactive([
			{
			@@ -530,26 +1099,132 @@
			])
			// 选中菜单
			const activeMenu = ref(0)

			//资源类型
			const resourceType = ref('default')
			// 菜单点击
			const menuItemClick = (index) => {
			activeMenu.value = index
			menuState.open = true
			switch (index) {
			case '0':
			break
			case '1':
			getNotesList()
			break
			case '2':
			break
			case '3':
			break
			case '4':
			break
			case '5':
			break
			}
			}
			//刷新当前页面
			const reload = () => {
			location.reload()
			// if (microApp) {
			// microApp.unmount() // 卸载微应用
			// microApp = loadMicroApp(microApps.book1, {
			// sandbox: {
			// strictStyleIsolation: true,
			// experimentalStyleIsolation: true
			// }
			// })
			// } else {
			// location.reload()
			// }
			}

			const selectResourceType = (type) => {
			resourceType.value = type
			}
			const searchText = ref<string>('') //筛选
			const menuState = reactive({
			open: true,
			notesColor: ''
			notesColor: 'all' //笔记颜色
			})

			const settingForm = reactive({
			fontSizeList: [
			{
			lable: '小',
			key: '14'
			},
			{
			lable: '中',
			key: '16'
			},

			{
			lable: '大',
			key: '20'
			}
			],
			fontSizeActive: '16',
			acoustics: false,
			animation: false
			animation: false,
			bgColorList: [
			{
			lable: '黄',
			key: '#FBF9F4'
			},
			{
			lable: '绿',
			key: '#F2FFF7'
			},
			{
			lable: '紫',
			key: '#F6F4FC'
			},
			{
			lable: '粉',
			key: '#FFFAF9'
			}
			],
			bgColorActive: '#FBF9F4'
			})
			const fontSizeSelect = (item) => {
			settingForm.fontSizeActive = item.key
			window.qiankunActions.setGlobalState({
			fontSizeNum: settingForm.fontSizeActive, // 加载子应用
			})
			}
			const bgColorSelect = (item) => {
			settingForm.bgColorActive = item.key
			window.qiankunActions.setGlobalState({
			bgColor: settingForm.bgColorActive, // 加载子应用
			})
			}
			//笔记颜色筛选
			const searchClick = (item) => {
			if (item != 'all') {
			menuState.notesColor = item.key
			} else {
			menuState.notesColor = 'all'
			}
			getNotesList()
			}
			const searchBook = async () => {
			if (activeMenu.value == 1) {
			getNotesList()
			}
			if (activeMenu.value == 2) {
			let dataList = JSON.parse(JSON.stringify(resourceDataList.value))
			if (searchText.value) {
			resourceDataList.value = []
			searchText.value = searchText.value.replace(/^\s\|\s$/g, '')
			let text = searchText.value.replace(/^\s\|\s$/g, '')
			dataList.forEach((item) => {
			if (item.name.indexOf(text) > -1) {
			let replaceStr = "<span style='background:#F5E12A'>" + text + '</span>'
			let htmlStr = item.name.split(text).join(replaceStr)
			item.name = '<p>' + htmlStr + '</p>'
			resourceDataList.value.push(item)
			}
			})
			}
			}
			}

			@@ -558,10 +1233,6 @@
			{
			name: 'AI智能问答',
			icon: aIzhinengwenda
			},
			{
			name: 'AI语音阅读',
			icon: aIyuyinyuedu
			},
			{
			name: '词典',
			@@ -604,6 +1275,7 @@
			icon: moxinggongju
			}
			])
			const baiduVisible = ref(false)
			const wendaVisible = ref(false)
			const cidianVisible = ref(false)
			const functionVisible = ref(false)
			@@ -663,50 +1335,45 @@
			const floatingToolBox = reactive([
			{
			icon: huabi,
			activeIcon: huabi1,
			name: '画笔'
			},
			{
			icon: qingchu,
			name: '清除'
			},
			{
			icon: wenzi,
			name: '文字'
			},
			{
			icon: biaozhu,
			name: '标注'
			},
			{
			icon: biaoqianw,
			name: '标签'
			},
			{
			activeIcon: baiban1,
			icon: baiban,
			name: '白板'
			},
			{
			activeIcon: biaozhu1,
			icon: biaozhu,
			name: '标注'
			},
			{
			activeIcon: biaoqian1,
			icon: biaoqianw,
			name: '标签'
			},
			{
			activeIcon: jieping1,
			icon: jieping,
			name: '截屏'
			}
			])

			const canvas = ref(null)
			const floatingToolData = reactive({
			activeToolData: '', //选中工具
			elLeft: 380,
			elLeft: 400,
			elTop: 300,
			startclientx: 0,
			startclienty: 0,
			thicknessActive: 'middle', //画笔选中粗细
			fontSizeActive: '16',
			thicknessActive: '3', //画笔选中粗细
			lineTypeActive: 'solid', //画笔选中线类型
			lineColorActive: '' //画笔选中线颜色
			lineColorActive: '#333' //画笔选中线颜色
			})

			//画布
			const canvas = ref<any>() //获取画布
			let ctx: CanvasRenderingContext2D //获取canvas操作api的入口的类型
			let painting = false
			let key = 1
			const canvasShow = ref(false)

			const floatOverHander = (item) => {
			const curIndex = floatingToolBox.findIndex((f) => f.name == item.name)
			@@ -715,22 +1382,16 @@
			floatingToolBox[0].icon = huabi1
			break
			case 1:
			floatingToolBox[1].icon = qingchu1
			floatingToolBox[1].icon = baiban1
			break
			case 2:
			floatingToolBox[2].icon = wenzi1
			floatingToolBox[2].icon = biaozhu1
			break
			case 3:
			floatingToolBox[3].icon = biaozhu1
			floatingToolBox[3].icon = biaoqian1
			break
			case 4:
			floatingToolBox[4].icon = biaoqian1
			break
			case 5:
			floatingToolBox[5].icon = baiban1
			break
			case 6:
			floatingToolBox[6].icon = jieping1
			floatingToolBox[4].icon = jieping1
			break
			}
			}
			@@ -741,32 +1402,40 @@
			floatingToolBox[0].icon = huabi
			break
			case 1:
			floatingToolBox[1].icon = qingchu
			floatingToolBox[1].icon = baiban
			break
			case 2:
			floatingToolBox[2].icon = wenzi
			floatingToolBox[2].icon = biaozhu
			break
			case 3:
			floatingToolBox[3].icon = biaozhu
			floatingToolBox[3].icon = biaoqianw
			break
			case 4:
			floatingToolBox[4].icon = biaoqianw
			break
			case 5:
			floatingToolBox[5].icon = baiban
			break
			case 6:
			floatingToolBox[6].icon = jieping
			floatingToolBox[4].icon = jieping
			break
			}
			}

			//截图事件
			const nameRef = ref()
			const imgUrl = ref()
			const confirmDialog = ref<Boolean>(false)
			const screenshotVisble = ref<Boolean>(false)
			const nameData = ref('') //截图名称
			const urlData = ref('') //截图base64
			const screenshotList = ref([])

			//浮窗工具栏点击事件
			const floatItemHandle = (item) => {
			floatingToolData.activeToolData = item.name
			// switch (item.name) {
			// case '画笔':
			// break
			// }
			switch (item.name) {
			case '画笔':
			canvasShow.value = true
			break
			case '截屏':
			jitT()
			break
			}
			}
			const dragend = (e) => {
			let x = e.clientX - floatingToolData.startclientx
			@@ -777,81 +1446,200 @@
			}
			}
			const dragstart = (e) => {
			console.log(e)
			floatingToolData.startclientx = e.clientX
			floatingToolData.startclienty = e.clientY
			}
			//画笔操作栏事件
			const toolSelectData = reactive({
			activeTool: '',
			fontSizeActive: '16',
			thicknessActive: '3', //画笔选中粗细
			lineTypeActive: 'solid', //画笔选中线类型
			lineColorActive: '#333' //画笔选中线颜色
			})
			const toolSelectHandle = (title) => {
			toolSelectData.activeTool = title
			switch (title) {
			case 'huabi':
			init()
			break
			case 'wenzi':
			break
			case 'tuichu':
			canvasShow.value = false
			floatingToolData.activeToolData = ''
			break
			}
			}

			//选中画笔粗细
			const selectThickness = (str) => {
			floatingToolData.thicknessActive = str
			toolSelectData.thicknessActive = str
			init()
			}

			const selectLineType = (str) => {
			floatingToolData.lineTypeActive = str
			toolSelectData.lineTypeActive = str
			init()
			}
			//画笔颜色选择
			const lineColorSelect = (item) => {
			floatingToolData.lineColorActive = item.key
			toolSelectData.lineColorActive = item.key
			init()
			}
			// 画线段
			const paint = (
			startX: number,
			startY: number,
			endX: number,
			endY: number,
			ctx: CanvasRenderingContext2D
			) => {
			ctx.beginPath()
			ctx.globalAlpha = 1
			ctx.lineWidth = 2
			ctx.strokeStyle = '#000'
			ctx.moveTo(startX, startY) // 画线起点
			ctx.lineTo(endX, endY) // 画线终点
			ctx.closePath()
			ctx.stroke() // 描绘线条
			}
			// 定义鼠标初始点击的位置
			let startX = 0
			let startY = 0

			// 鼠标按下
			const mousedown = (event: MouseEvent) => {
			;[startX, startY] = getOffset(event)
			painting = true // 将绘画状态改成true
			//画布属性
			const init = () => {
			canvas.value = new fabric.Canvas('canvasRef', {
			isDrawingMode: true // 启用绘画模式
			})
			canvas.value.freeDrawingBrush.color = toolSelectData.lineColorActive
			canvas.value.freeDrawingBrush.width = toolSelectData.thicknessActive
			}

			// 鼠标移动
			const mousemove = (event: MouseEvent) => {
			if (painting) {
			// 在鼠标移动的期间，获取鼠标的位置
			const [endX, endY] = getOffset(event)
			paint(startX, startY, endX, endY, ctx)
			// 下面两行代码是更新线条的起点
			startX = endX
			startY = endY
			}
			}

			// 鼠标松开
			const mouseup = (event: MouseEvent) => {
			// 松开鼠标后禁止画线条
			if (painting) painting = false
			}

			//清除上一步/全部
			const cleanUpSelect = (str) => {}
			//标签显示隐藏
			const labelShow = (str) => {}

			//文字大小
			const selectfontSize = (str) => {
			toolSelectData.fontSizeActive = str
			}

			//截图
			//截图事件
			function jitT() {
			const screenShotHandler = new ScreenShort({
			enableWebRtc: false, // 是否显示选项框
			level: 99, // 层级级别
			completeCallback: callback, //确认回调
			closeCallback: closeFn //取消回调
			} as any)
			}
			//确认回调
			const callback = (val: any) => {
			screenshotVisble.value = true
			urlData.value = val.base64
			}
			//取消回调
			const closeFn = (base64: any) => {
			console.log(base64)
			}
			const addScreenshot = () => {
			if (nameData.value) {
			screenshotList.value.push({
			createDate: new Date(),
			imgUrl: urlData.value,
			name: nameData.value
			})
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			setKeyRequests: [
			{
			domain: 'screenshot',
			key: bookId.value,
			value: JSON.stringify(screenshotList.value)
			}
			]
			}
			}).then((res) => {
			getScreenshotList()
			screenshotVisble.value = false
			})
			} else {
			ElMessage.error('截图名称不能为空!')
			}
			}
			const screenshotClose = () => {
			screenshotVisble.value = false
			}

			const getScreenshotList = () => {
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			domain: 'screenshot',
			keys: [bookId.value]
			}
			}).then((res) => {
			if (res && res.length > 0 && res[0].value) {
			screenshotList.value = JSON.parse(res[0].value)
			}
			})
			}
			const getCapture = (item) => {
			imgUrl.value = item.imgUrl
			confirmDialog.value = true
			}

			//选中文字工具栏
			const selectText = ref('') //选中文字
			const selectNode = ref(null)
			const selectPage = ref(1)
			const showToolBox = ref(false)
			const dialogToolData = reactive({
			left: 500,
			top: 300
			top: 300,
			chapter: '', //选中文字所在章节
			parentNode: null,
			lineHeight: [], //高亮
			scribeList: [], //划线
			notesList: [] //笔记
			})
			const toolActive = ref('高亮')

			///内容选中
			const isMouseDown = ref(false)
			const move = ref(false)
			const handleMouseDown = () => {
			isMouseDown.value = true
			showToolBox.value = false
			colorActive.value = ''
			toolActive.value = ''
			}
			const handleMousemove = () => {
			if (isMouseDown.value) {
			move.value = true
			}
			}

			const handleMouseUp = (e) => {
			if (move.value) {
			const txt = window.getSelection()?.toString()
			selectText.value = txt
			const node = window.getSelection()
			let html = node.anchorNode.parentNode.parentNode
			dialogToolData.chapter = html.firstChild.innerHTML
			if (txt) {
			showToolBox.value = true
			dialogToolData.top = e.y
			dialogToolData.left = e.x
			}
			isMouseDown.value = false
			}
			move.value = false
			}

			const getSelection =(data)=>{
			if (data.txt) {
			console.log(data.node,"data")
			showToolBox.value = true
			selectText.value = data.txt
			selectNode.value = data.node.innerHTML
			selectPage.value = data.page
			dialogToolData.top = data.y
			dialogToolData.left = data.x
			}
			}

			const pageScroll = (e) => {
			showToolBox.value = false
			let scroll = e.target.scrollTop
			let offsetHeight = document.getElementById('container').offsetHeight
			headerData.process = Math.round((scroll / offsetHeight) * 100)
			}

			const toolActive = ref('')
			const colorActive = ref('')
			const dialogToolList = reactive([
			{ icon: gaoliang, activeIcon: gaoliang1, name: '高亮' },
			@@ -861,42 +1649,58 @@
			{ icon: fuzhi, activeIcon: fuzhi1, name: '复制' },
			{ icon: AIyuedu, activeIcon: AIyuedu1, name: 'AI阅读' },
			{ icon: cidian2, activeIcon: cidian1, name: '词典' },
			{ icon: yuyinyuedu, activeIcon: yuyinyuedu1, name: '语音阅读' }
			{ icon: baidu, activeIcon: cidian1, name: '百科' }
			// { icon: yuyinyuedu, activeIcon: yuyinyuedu1, name: '语音阅读' }
			// { icon: cidian2, activeIcon: cidian1, name: '翻译' }
			])
			const colorSelectList = reactive([
			{
			label: '红色',
			key: '#FF0000'
			},
			{
			label: '蓝色',
			key: '#004DFF'
			label: '黄色',
			key: '#F5E12A'
			},
			{
			label: '绿色',
			key: '#01BA51'
			key: '#76F0AE'
			},
			{
			label: '黄色',
			key: '#FFF700'
			label: '蓝色',
			key: '#59CFF5'
			},
			{
			label: '澄色',
			key: '#FF8800'
			label: '紫色',
			key: '#CAA5FC'
			},
			{
			label: '粉色',
			key: '#F5A0B9'
			}
			])

			//笔记弹窗
			const addNoteVisble = ref(false)
			const formData = ref({
			name: '',
			const formData = reactive({
			desc: ''
			})
			//笔记弹窗关闭
			const handleClose = () => {
			addNoteVisble.value = false
			showToolBox.value = false
			colorActive.value = ''
			}

			//笔记，高亮，划线
			const scribeData = reactive({
			loading: false,
			scribeDataList: [], //划线菜单列表
			lineHeightList: [], //高亮菜单列表
			noteList: [] //笔记菜单列表
			})
			//词典

			const synth = window.speechSynthesis
			//工具栏方法
			const dialogOverHander = (item) => {
			// toolActive.value = item.name
			const curIndex = dialogToolList.findIndex((f) => f.name == item.name)
			switch (curIndex) {
			case 0:
			@@ -921,12 +1725,13 @@
			dialogToolList[6].icon = cidian1
			break
			case 7:
			dialogToolList[7].icon = yuyinyuedu1
			dialogToolList[7].icon = baidu1
			break
			}
			}
			const dialogOutHander = (item) => {
			const curIndex = dialogToolList.findIndex((f) => f.name == item.name)

			switch (curIndex) {
			case 0:
			dialogToolList[0].icon = gaoliang
			@@ -950,11 +1755,11 @@
			dialogToolList[6].icon = cidian2
			break
			case 7:
			dialogToolList[7].icon = yuyinyuedu
			dialogToolList[7].icon = baidu
			break
			}
			}
			const dialogToolHandle = (item) => {
			const dialogToolHandle = async (item) => {
			toolActive.value = item.name
			colorActive.value = ''
			switch (item.name) {
			@@ -968,34 +1773,387 @@
			case '高亮':
			break
			case '笔记':
			formData.value.name = ''
			formData.value.desc = ''
			formData.desc = ''
			addNoteVisble.value = true
			showToolBox.value = false
			break
			case '标注':
			break
			case '复制':
			try {
			var successful = document.execCommand('copy') //执行复制命令
			var msg = successful ? '成功' : '失败'
			ElMessage.success({
			message: '已复制文本',
			//复制
			await toClipboard(selectText.value)
			//下面可以设置复制成功的提示框等操作
			ElMessage({
			message: '复制成功',
			type: 'success'
			})
			} catch (err) {
			ElMessage.error('无法复制文本：' + err)
			}
			showToolBox.value = false
			toolActive.value = ''
			break
			case '词典':
			cidianVisible.value = true
			break
			case '百科':
			baiduVisible.value = true
			break
			}
			}

			const clickSelect = (item) => {
			colorActive.value = item.key
			if (toolActive.value == '笔记') {
			addNoteVisble.value = true
			if (toolActive.value == '高亮') {
			let lineHeightData = {
			selectNode: selectNode.value,
			selectText: selectText.value,
			selectPage: selectPage.value,
			color: colorActive.value,
			chapter: dialogToolData.chapter,
			createDate: new Date()
			}
			dialogToolData.lineHeight.push(lineHeightData)
			console.log(dialogToolData.lineHeight,"前node")
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			setKeyRequests: [
			{
			domain: 'highLight',
			key: bookId.value,
			value: JSON.stringify(dialogToolData.lineHeight)
			}
			]
			}
			}).then((res) => {
			showToolBox.value = false
			colorActive.value = ''
			toolActive.value = ''
			getlineHeightList()
			})
			}
			if (toolActive.value == '划线') {
			dialogToolData.scribeList.push({
			selectNode: selectNode.value,
			selectText: selectText.value,
			selectPage: selectPage.value,
			color: colorActive.value,
			chapter: dialogToolData.chapter,
			createDate: new Date()
			})
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			setKeyRequests: [
			{
			domain: 'underline',
			key: bookId.value,
			value: JSON.stringify(dialogToolData.scribeList)
			}
			]
			}
			}).then((res) => {
			colorActive.value = ''
			showToolBox.value = false
			toolActive.value = ''
			getScribeList()
			})
			}
			}

			const lock = ref(false)
			const addNote = () => {
			const obj = {
			desc: formData.desc
			}
			if(!colorActive.value){
			ElMessage.error('请选择笔记颜色!')
			return
			}
			if (!lock.value) {
			lock.value = true
			if (formData.desc.replace(/^\s\|\s$/g, '')) {
			dialogToolData.notesList.push({
			selectNode: selectNode.value,
			selectText: selectText.value,
			color: colorActive.value,
			selectPage: selectPage.value,
			chapter: dialogToolData.chapter,
			createDate: new Date(),
			note: formData.desc.replace(/^\s\|\s$/g, '')
			})
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			setKeyRequests: [
			{
			domain: 'notes',
			key: bookId.value,
			value: JSON.stringify(dialogToolData.notesList)
			}
			]
			}
			}).then((res) => {
			showToolBox.value = false
			addNoteVisble.value = false
			colorActive.value = ''
			toolActive.value = ''
			getNotesList()
			setTimeout(() => {
			lock.value = false
			}, 1000)
			})
			} else {
			ElMessage.error('笔记内容不能为空!')
			lock.value = false
			}
			}
			}
			//笔记
			const getNotesList = () => {
			scribeData.noteList = []
			scribeData.loading = true
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			domain: 'notes',
			keys: [bookId.value]
			}
			}).then((res) => {
			if (res && res.length > 0 && res[0].value) {
			dialogToolData.notesList = JSON.parse(res[0].value)
			let list = JSON.parse(res[0].value)
			let textDom1 = document.querySelector('.temp-book')
			if (list.length > 0) {
			list.forEach((item, index) => {
			item.createDate = moment(item.createDate).format('YYYY-MM-DD')
			if (searchText.value) {
			searchText.value = searchText.value.replace(/^\s\|\s$/g, '')
			let text = searchText.value.replace(/^\s\|\s$/g, '')
			if (item.text.indexOf(text) > -1) {
			if (menuState.notesColor == 'all') {
			scribeData.noteList.push(item)
			} else if (menuState.notesColor == item.color) {
			scribeData.noteList.push(item)
			}
			}
			} else {
			if (menuState.notesColor == 'all') {
			scribeData.noteList.push(item)
			} else if (menuState.notesColor == item.color) {
			scribeData.noteList.push(item)
			}
			}
			//页面添加笔记
			let rReg1 = new RegExp(`${item.selectText}`, 'ig')
			let text1 = textDom1.innerHTML
			let nHtmlText1 = item.selectNode

			let nHtml1 = ''
			nHtml1 = nHtmlText1.replace(
			rReg1,
			`<span style="padding-bottom:2px; border-bottom: 2px solid;border-bottom-color:${item.color}" class="underline">${item.selectText}</span><img src="${biji1}" style="cursor: pointer" onclick="notesVisbleShow('${item.selectText}')"/>`
			)
			let rHtml1 = ''
			rHtml1 = text1.replace(
			nHtmlText1,
			nHtml1
			)
			textDom1.innerHTML = rHtml1
			})
			}
			}
			scribeData.loading = false
			})
			}
			//划线
			const getScribeList = () => {
			scribeData.scribeDataList = []
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			domain: 'underline',
			keys: [bookId.value]
			}
			}).then((res) => {
			if (res && res.length > 0 && res[0].value) {
			dialogToolData.scribeList = JSON.parse(res[0].value)
			scribeData.scribeDataList = JSON.parse(res[0].value)
			let textDom1 = document.querySelector('.temp-book')
			if (scribeData.scribeDataList.length > 0) {
			for (let i = 0; i < scribeData.scribeDataList.length; i++) {
			let item = scribeData.scribeDataList[i]
			let rReg1 = new RegExp(`${item.selectText}`, 'ig')
			let text1 = textDom1.innerHTML
			let nHtmlText1 = item.selectNode

			let nHtml1 = ''
			nHtml1 = nHtmlText1.replace(
			rReg1,
			`<el-popover placement="bottom" :width="100" trigger="click"><div><el-button onclick="deleteScribeShow('${item.selectText}')">删除</el-button></div><template #reference><span style="text-decoration:underline;text-decoration-style: wavy;text-underline-thickness:2px;text-decoration-color:${item.color};cursor: pointer">${item.selectText}</span></template></el-popover>`
			)
			let rHtml1 = ''
			rHtml1 = text1.replace(
			nHtmlText1,
			nHtml1
			)
			textDom1.innerHTML = rHtml1
			}
			}
			}
			})
			}
			//高亮
			const getlineHeightList = () => {
			scribeData.lineHeightList = []
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			domain: 'highLight',
			keys: [bookId.value]
			}
			}).then((res) => {
			if (res && res.length > 0 && res[0].value) {
			dialogToolData.lineHeight = JSON.parse(res[0].value)
			scribeData.lineHeightList = JSON.parse(res[0].value)
			console.log(scribeData.lineHeightList, '高亮')
			let textDom = document.querySelector('.temp-book')
			console.log(textDom)
			if (scribeData.lineHeightList.length > 0) {
			for (let i = 0; i < scribeData.lineHeightList.length; i++) {
			let item = scribeData.lineHeightList[i]
			let rReg = new RegExp(`${item.selectText}`, 'ig')
			let text = textDom.innerHTML
			let nHtmlText = item.selectNode
			let nHtml = ''
			nHtml = nHtmlText.replace(
			rReg,
			`<span style="background: ${item.color};padding: 2px;cursor: pointer">${item.selectText}</span>`
			)
			// nHtmlText = nHtml
			let rHtml = ''
			rHtml = text.replace(
			nHtmlText,
			nHtml
			)
			textDom.innerHTML = rHtml
			}
			}
			}
			})
			}

			//正文中删除高亮，划线，笔记操作框
			window.notesVisbleShow = function (txt) {
			addNoteVisble.value = true
			let notes = dialogToolData.notesList.find((item) => item.selectText == txt)
			formData.desc = notes.note
			colorActive.value = notes.color
			selectNode.value = notes.selectNode
			selectText.value = notes.selectText
			selectPage.value = notes.selectPage
			dialogToolData.chapter = notes.chapter
			}

			window.deleteScribeShow = function (txt) {
			console.log(txt, 2)
			let list = scribeData.scribeDataList.filter((item) => item.selectText != txt)
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			setKeyRequests: [
			{
			domain: 'underline',
			key: bookId.value,
			value: JSON.stringify(list)
			}
			]
			}
			}).then((res) => {
			getScribeList()
			})
			}

			window.deletelineHeightShow = function (txt) {
			console.log(txt, 1)
			let list = scribeData.lineHeightList.filter((item) => item.selectText != txt)
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			setKeyRequests: [
			{
			domain: 'highLight',
			key: bookId.value,
			value: JSON.stringify(list)
			}
			]
			}
			}).then((res) => {
			getlineHeightList()
			})
			}

			const jumpContent = (id) => {
			document.getElementById(id).scrollIntoView()
			}

			const update = (item, type) => {
			dialogToolData.notesList.splice(
			dialogToolData.notesList.findIndex((itemData) => itemData.selectText == item.selectText),
			1
			)
			selectNode.value = item.selectNode
			selectText.value = item.selectText
			selectPage.value = item.selectPage
			colorActive.value = item.color
			dialogToolData.chapter = item.chapter
			formData.desc = item.note
			addNoteVisble.value = true
			}

			//删除
			const deleteBtn = (item, type) => {
			if (type == 'note') {
			// 移除
			let list = scribeData.noteList.filter((itemData) => itemData.selectText !== item.selectText)
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			setKeyRequests: [
			{
			domain: 'notes',
			key: bookId.value,
			value: JSON.stringify(list)
			}
			]
			}
			}).then((res) => {
			ElMessage({
			message: '删除笔记成功!',
			type: 'success'
			})
			console.log(document.querySelectorAll('.underline'))
			let list = document.querySelectorAll('.underline')
			list.forEach(itemNode =>{
			console.log(itemNode.nextSibling)
			if(itemNode.innerText == item.selectText){
			itemNode.removeAttribute('style');
			itemNode.nextSibling?.remove()
			}
			})
			getNotesList()
			})
			}
			}

			@@ -1006,9 +2164,8 @@
			seconds: 0,
			minutes: 0,
			hours: 0,
			process: '42%',
			pageSize: 100,
			brushToolShow: true
			process: 0,
			pageSize: 100
			})
			//上课时长计时器
			const timer = ref(null)
			@@ -1046,20 +2203,10 @@
			}
			}

			const brushToolShow = () => {
			console.log(headerData.brushToolShow, 123)
			if (headerData.brushToolShow) {
			ctx = canvas.value.getContext('2d') as CanvasRenderingContext2D
			}
			}

			const loadChild = () => {
			// loadMicroApp({
			// name: 'book',
			// entry: '//192.168.3.196:8080/',
			// container: document.querySelector('#container')
			// })
			// $router.push({path: "/aa"})
			const layoutBtn = () => {
			localStorage.clear()
			console.log(888)
			router.push('/login')
			}
			</script>

			@@ -1067,20 +2214,38 @@
			.homeBox {
			width: 100%;
			height: 100%;
			background: #87ccff;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			padding: 0 15px;
			.headerBox {
			height: 48px;
			background-image: url('@/assets/images/header/top-bg.png');
			// background-image: url('@/assets/images/header/top-bg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding: 0 20px;
			line-height: 48px;
			p {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.logoTxt {
			font-size: 24px;
			color: #ffffff;
			color: #333;
			letter-spacing: 2px;
			font-weight: bold;
			}
			.userInfoBox {
			display: flex;
			align-items: center;
			.layout {
			width: 69px;
			height: 30px;
			background: #0093ff;
			border-radius: 15px;
			color: #fff;
			text-align: center;
			line-height: 30px;
			}
			}
			}
			.contentBox {
			@@ -1089,19 +2254,25 @@
			display: flex;
			.menuBox {
			width: 80px;
			flex-shrink: 0;
			border-right: 1px solid #e6e7e8;
			padding-bottom: 20px;
			box-sizing: border-box;
			position: relative;
			box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.07);
			background: #fff;
			border-radius: 16px 0px 0px 0px;
			.menuItem {
			text-align: center;
			line-height: 1;
			cursor: pointer;
			padding: 10px 0;
			padding: 5px 0 10px 0;
			width: 63px;
			margin: 10px auto;
			border-radius: 10px;
			&.active,
			&:hover {
			background-color: #cfebff;
			background-color: rgba(0, 147, 255, 0.1);
			p {
			color: #0093ff;
			}
			@@ -1110,8 +2281,17 @@
			display: inline-block;
			width: 32px;
			height: 32px;
			margin-bottom: 4px;
			.name {
			text-align: center;
			line-height: 1;
			}
			}
			}
			.reload {
			width: 80px;
			position: absolute;
			bottom: 100px;
			text-align: center;
			}
			.setting {
			width: 80px;
			@@ -1121,7 +2301,8 @@
			}
			}
			.menuContent {
			width: 270px;
			width: 300px;
			flex-shrink: 0;
			height: calc(100vh - 48px);
			overflow-y: auto;
			background: #e0f2ff;
			@@ -1132,15 +2313,100 @@
			display: flex;
			justify-content: center;
			align-items: center;
			.inputBox {
			.custom-input {
			border: 1px solid #0093ff !important;
			border-radius: 50px;
			overflow: hidden;
			}
			.resourceBox {
			padding: 15px 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;
			}
			.is-focus,
			.el-input__wrapper {
			box-shadow: none !important;
			.title {
			color: #999999;
			}
			.count {
			width: 35px;
			margin: 5px auto;
			border-radius: 10px;
			background: #fff;
			color: #c8c8c8;
			}
			.activeClassify,
			.classifyItem:hover {
			.title {
			color: #0093ff;
			}
			.count {
			background: #0093ff;
			color: #fff;
			}
			}
			.showSearch {
			.imgBox {
			width: 39px;
			height: 24px;
			border-radius: 16px;
			margin: 0 auto;
			}
			.imgBox:hover,
			.activeSearch {
			border: 1px solid #0093ff;
			}
			}
			}
			.inputBox {
			margin-top: 10px;
			}
			}
			.resourceTab {
			width: 100%;
			height: 60px;
			display: flex;
			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;
			margin: 0 auto;
			background: #0093ff;
			border-radius: 3px 3px 0px 0px;
			}
			.line {
			height: 3px;
			}
			}
			.inputBox {
			.custom-input {
			border: 1px solid #0093ff !important;
			border-radius: 50px;
			overflow: hidden;
			background: #fff;
			}
			.is-focus,
			.el-input__wrapper {
			box-shadow: none !important;
			.el-input__inner {
			border: none !important;
			height: 34px !important;
			}
			}
			}
			@@ -1163,22 +2429,22 @@

			.all {
			width: 50px;
			height: 20px;
			height: 22px;
			border-radius: 17px;
			margin: 10px 10px 10px 0;
			border: 1px solid #d8d8d8;
			text-align: center;
			line-height: 17px;
			line-height: 20px;
			font-size: 12px;
			}

			.allActive {
			width: 50px;
			height: 20px;
			height: 22px;
			border-radius: 17px;
			margin: 10px 10px 10px 0;
			text-align: center;
			line-height: 17px;
			line-height: 20px;
			color: #fff;
			background: #0093ff;
			border: 1px solid #0093ff;
			@@ -1188,7 +2454,7 @@
			.scribeItem {
			width: 18px;
			height: 18px;
			border-radius: 50%;
			border-radius: 3px;
			margin: 10px auto;
			border: none;
			}
			@@ -1197,16 +2463,148 @@
			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;
			.resourceImg {
			width: 130px;
			height: 80px;
			background: #fff;
			border-radius: 5px;
			overflow: hidden;
			img {
			height: 100%;
			width: 100%;
			object-fit: contain;
			}
			}

			.rName {
			margin-top: 10px;
			height: 20px;
			line-height: 20px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #000;
			}
			}
			}
			.screenshot {
			padding: 20px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.captureItem {
			margin-bottom: 10px;
			width: 46%;
			.imgBox {
			border: 1px solid #d8d8d8;
			width: 100%;
			height: 80px;
			margin-bottom: 5px;
			}
			// .capture {
			// width: 100%;
			// }
			.captureName {
			height: 20px;
			line-height: 20px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #000;
			}
			}
			}

			.listItem {
			border-bottom: 1px solid rgba(212, 212, 212, 0.16);
			position: relative;
			margin: 10px;
			line-height: 20px;
			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;
			border-radius: 50%;
			margin-right: 5px;
			}
			}

			img {
			margin-left: 5px;
			}
			}
			.chapter {
			color: #b7b7b7;
			margin: 5px 5px 5px 14px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			border-left: 3px solid #b7b7b7;
			border-left-radius: 20px;
			padding: 0 5px;
			}
			}
			.noteText {
			margin: 10px 10px 10px 15px;
			border-radius: 3px;
			padding: 2px 5px;
			// opacity: 0.1;
			.con {
			all: initial;
			max-height: 65px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			}
			}
			}
			}
			}
			.menuStateBox {
			width: 25px;
			height: 25px;
			background: #fff;
			border-radius: 3px 0px 0px 3px;
			border: 1px solid #bce3ff;
			position: fixed;
			line-height: 22px;
			top: 50%;
			left: 325px;
			left: 370px;
			text-align: center;
			box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
			img {
			@@ -1217,7 +2615,6 @@

			.pageBox {
			flex: 1;
			overflow: auto;
			font-size: 16px;
			.pageBox-header {
			height: 57px;
			@@ -1239,6 +2636,13 @@
			border-radius: 50%;
			background: #0093ff;
			margin: 0 5px;
			}
			}
			.progress {
			text-align: center;
			.bookName {
			font-weight: bold;
			margin-bottom: 3px;
			}
			}
			.rightBox {
			@@ -1270,10 +2674,14 @@
			}
			.pageBox-content {
			height: calc(100% - 57px);
			position: relative;
			overflow-y: auto;
			background: #fbf9f4;
			.content-box {
			position: relative;
			}
			#container {
			background: #fbf9f4;
			height: 100%;
			// height: 100%;
			}
			.canvas-box {
			height: 100%;
			@@ -1281,12 +2689,16 @@
			position: absolute;
			top: 0;
			left: 0;
			z-index: 96;
			background: rgba(255, 255, 255, 0.2);
			}
			}
			}
			.toolBox {
			position: relative;
			box-shadow: -3px 0px 6px 1px rgba(0, 0, 0, 0.07);
			background: #fff;
			border-radius: 0px 16px 0px 0px;
			.toolTitle {
			height: 57px;
			line-height: 53px;
			@@ -1303,7 +2715,7 @@
			.menu {
			padding-top: 20px;
			li {
			height: 50px;
			// height: 50px;
			padding: 10px 36px;
			font-size: 16px;
			display: flex;
			@@ -1326,7 +2738,7 @@
			background: #fff;
			border-radius: 3px 0px 0px 3px;
			border: 1px solid #bce3ff;
			position: fixed;
			position: absolute;
			line-height: 22px;
			top: 50%;
			right: 50px;
			@@ -1338,7 +2750,7 @@
			}
			}
			.right {
			right: 183px !important;
			right: 184px !important;
			border-radius: 0px 3px 3px 0px !important;
			}
			.classRoomBox {
			@@ -1351,6 +2763,7 @@
			.el-tabs__item {
			flex: 1 !important;
			padding: 0 !important;
			text-align: center;
			}
			.el-tabs__active-bar {
			width: 43px !important;
			@@ -1404,10 +2817,10 @@
			width: 85px;
			background-image: linear-gradient(to bottom, #0093ff, #005dff);
			position: fixed;
			height: 430px;
			height: 310px;
			top: 300px;
			left: 400px;
			z-index: 999;
			left: 450px;
			z-index: 99;
			border-radius: 10px;
			padding: 5px;
			overflow: hidden;
			@@ -1425,10 +2838,46 @@
			margin-right: 5px;
			}
			}
			.floatToolItem:hover,
			.floatToolActive {
			background-color: #fff;
			color: #0093ff;
			}
			}
			.floatToolItem:hover {
			background-color: #fff;
			color: #0093ff;

			.brushBox {
			position: fixed;
			left: 500px;
			bottom: 20px;
			z-index: 99;
			border-radius: 5px;
			background: #fff;
			// padding: 10px;
			overflow: hidden;
			border: 1px solid #0093ff;
			.toolList {
			display: flex;
			justify-content: center;
			align-items: center;
			.floatToolItem {
			margin: 10px;
			width: 48px;
			border-radius: 5px;
			text-align: center;
			flex: 1;
			.imgBox {
			height: 22px;
			width: 22px;
			text-align: center;
			margin: 0 auto;
			margin-bottom: 5px;
			}
			}
			.layOutTool {
			padding-left: 15px;
			border-left: 1px solid #e0e0e0;
			}
			}
			}

			.dialogToolBox {
			@@ -1503,4 +2952,73 @@
			height: 100%;
			}
			}

			.myDialogs,
			.myNoteDialogs,
			.resourDialog {
			padding: 0 !important;
			border-radius: 10px !important;
			overflow: hidden;

			.el-dialog__header {
			padding: 10px;
			text-align: center;
			background: #f4f5f9;
			}

			.el-dialog__title {
			font-weight: bold;
			font-size: 16px;
			}

			.el-dialog__headerbtn {
			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 {
			width: 628px;
			}
			.myNoteDialogs {
			width: 500px !important;
			}
			.noteColorSelectBox {
			margin-top: 10px;
			width: 190px;
			display: flex;
			.flex1 {
			flex: 1;
			.scribeItem {
			width: 18px;
			height: 18px;
			border-radius: 3px;
			margin: 10px auto;
			border: none;
			display: flex;
			justify-content: center;
			align-items: center;
			}
			}
			}
			.videoBox video {
			width: 100%;
			}
			.wordBox {
			height: 600px;
			}
			.imgUrlBox {
			width: 100%;
			text-align: center;
			img {
			width: 100%;
			}
			}
			</style>