| | |
| | | <template> |
| | | <div class="homeBox"> |
| | | <div class="herderBox"> |
| | | <p>文件</p> |
| | | <div class="viewChangeBox"> |
| | | <el-icon :size="16" v-if="viewMode == 0" @click="setViewMode"><Calendar /></el-icon> |
| | | <el-icon :size="16" v-if="viewMode == 1" @click="setViewMode"><Menu /></el-icon> |
| | | </div> |
| | | <div class="search"> |
| | | <el-input v-model="searchKey" size="small" placeholder="关键字搜索"> |
| | | <template #append> |
| | | <el-button :icon="Search" /> |
| | | </template> |
| | | </el-input> |
| | | <div class="headerBox"> |
| | | <div><p>数字教材平台</p></div> |
| | | <div class="userInfoBox"> |
| | | <div></div> |
| | | <div></div> |
| | | <div><div class="layout">退出</div></div> |
| | | </div> |
| | | </div> |
| | | <div class="toolBox"> |
| | | <div class="checkBox" v-if="viewMode == 0"> |
| | | <el-checkbox |
| | | v-model="checkBoxState.check" |
| | | :indeterminate="checkBoxState.indeterminate" |
| | | @change="handleCheckAllChange" |
| | | /> |
| | | <span class="checkText">{{ |
| | | checkBoxState.selectCount > 0 |
| | | ? `已选 ${checkBoxState.selectCount} 项` |
| | | : `共 ${checkBoxState.totalCount} 项` |
| | | }}</span> |
| | | </div> |
| | | <div class="sortBox" v-if="viewMode == 0"> |
| | | <el-dropdown trigger="click" @command="sortChange"> |
| | | <span class="sortText"> |
| | | <el-icon :size="16"><Sort /></el-icon> |
| | | <span> |
| | | 按{{ sortState.fields[sortState.selectFieldIndex].name |
| | | }}{{ sortState.types[sortState.selectTypeIndex].name }}排序 |
| | | </span> |
| | | </span> |
| | | <template #dropdown> |
| | | <el-dropdown-menu> |
| | | <el-dropdown-item |
| | | v-for="(item, index) in sortState.fields" |
| | | :key="item.value" |
| | | :command="'fields.' + item.value" |
| | | > |
| | | <p> |
| | | <span> |
| | | <el-icon v-if="sortState.selectFieldIndex == index" :size="16" color="#409EFF"> |
| | | <Check /> |
| | | </el-icon> |
| | | </span> |
| | | <span>{{ item.name }}</span> |
| | | </p> |
| | | </el-dropdown-item> |
| | | <el-dropdown-item |
| | | v-for="(item, index) in sortState.types" |
| | | :key="item.value" |
| | | :divided="index == 0" |
| | | :command="'types.' + item.value" |
| | | > |
| | | <p> |
| | | <span> |
| | | <el-icon v-if="sortState.selectTypeIndex == index" :size="16" color="#409EFF"> |
| | | <Check /> |
| | | </el-icon> |
| | | </span> |
| | | <span>{{ item.name }}</span> |
| | | </p> |
| | | </el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </template> |
| | | </el-dropdown> |
| | | </div> |
| | | </div> |
| | | <div class="fileList"> |
| | | <div v-if="viewMode == 0" class="blockBox"> |
| | | <div class="fileItem" v-for="item in tableData"> |
| | | <div class="iconBox"> |
| | | <img :src="item.img" alt="" /> |
| | | <div class="contentBox"> |
| | | <!-- 菜单 --> |
| | | <div class="menuBox"> |
| | | <div |
| | | :class="['menuItem', activeMenu == index ? 'active' : '']" |
| | | v-for="(item, index) in menuData" |
| | | :key="index" |
| | | @click="menuItemClick(index)" |
| | | > |
| | | <div class="menuIcon imgBox"> |
| | | <img :src="item.icon" /> |
| | | </div> |
| | | <p class="name">{{ item.name }}</p> |
| | | <p class="time">{{ item.createDate }}</p> |
| | | <div class="name">{{ item.name }}</div> |
| | | </div> |
| | | <div class="reload hover" @click="reload()">刷新</div> |
| | | <!-- 设置 --> |
| | | <el-popover placement="right" :width="200" 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> |
| | | <el-form-item label="答题动画"> |
| | | <el-switch v-model="settingForm.animation" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <template #reference> |
| | | <div class="setting hover"> |
| | | <img :src="setting" /> |
| | | <div>设置</div> |
| | | </div> |
| | | </template> |
| | | </el-popover> |
| | | </div> |
| | | <!-- 菜单内容 --> |
| | | <div class="menuContent" v-if="menuState.open"> |
| | | <div class="searchBox"> |
| | | <div class="inputBox" v-if="activeMenu !== 2"> |
| | | <el-input class="custom-input" placeholder="请输入内容" v-model="searchText"> |
| | | <template #prefix> |
| | | <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="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"> |
| | | <div class="title">筛选</div> |
| | | <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> |
| | | </div> |
| | | <div class="list-box" v-loading="scribeData.loading"> |
| | | <div v-if="scribeData.noteList.length > 0 && !scribeData.loading"> |
| | | <div v-for="(item, index) in scribeData.noteList" :key="item.key" class="listItem"> |
| | | <div class="itemBox noteStyle"> |
| | | <div class="textBox"> |
| | | <div class="title"> |
| | | <div class="title-con"> |
| | | <div class="round" :style="{ background: item.color }"></div> |
| | | <span>{{ item.name }}</span> |
| | | </div> |
| | | <div> |
| | | <el-icon size="18" color="#0093ff" @click="jumpContent('note' + index)" |
| | | ><LocationInformation |
| | | /></el-icon> |
| | | <img :src="bianji" @click="update(item, 'note')" /> |
| | | <img :src="shanchu" @click="deleteBtn(item, 'note')" /> |
| | | </div> |
| | | </div> |
| | | <div class="noteText"> |
| | | <div class="con">{{ item.note }}</div> |
| | | </div> |
| | | <div class="chapter"> |
| | | <span class="createDate">{{ item.createDate }}</span> |
| | | <span class="chapterName">{{ item.chapter }}</span> |
| | | </div> |
| | | </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 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"><Search /></el-icon> |
| | | </template> |
| | | </el-input> |
| | | </div> |
| | | </div> |
| | | <div class="list-box"> |
| | | <div v-if="resourceData.length > 0" class="resourceList"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12" v-for="(item, index) in resourceData" :key="item"> |
| | | <div class="resourceItem hover"> |
| | | <div class="resourceImg"> |
| | | <img :src="video" mode="" /> |
| | | </div> |
| | | <div class="rName" @click="goResourceDetail(item)">{{ 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 class="list-box"> |
| | | <div> |
| | | <el-empty :image-size="60" description="暂无数据" /> |
| | | </div> |
| | | </div> |
| | | </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)" |
| | | > |
| | | <img :src="item.imgUrl" class="capture" mode="aspectFill" /> |
| | | </div> |
| | | </div> |
| | | <div v-else> |
| | | <el-empty :image-size="60" description="暂无数据" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 标签 --> |
| | | <div class="" v-if="activeMenu == 5"> |
| | | <div class="list-box"> |
| | | <div> |
| | | <el-empty :image-size="60" description="暂无数据" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-table v-if="viewMode == 1" :data="tableData" style="width: 100%"> |
| | | <el-table-column type="selection" width="55" /> |
| | | <el-table-column type="index" width="80" /> |
| | | <el-table-column prop="name" label="名称" sortable /> |
| | | <el-table-column prop="createDate" label="创建时间" width="200" sortable /> |
| | | <el-table-column prop="size" label="大小" width="200" sortable /> |
| | | </el-table> |
| | | <!-- 菜单内容收起 --> |
| | | <div class="menuStateBox" v-if="menuState.open"> |
| | | <img :src="shouqiL" @click="menuState.open = false" /> |
| | | </div> |
| | | <!-- 中间内容 --> |
| | | <div class="pageBox"> |
| | | <!-- 头部显示 --> |
| | | <div class="pageBox-header"> |
| | | <div class="classTime"> |
| | | <div class="qureIcon"></div> |
| | | <div class="">已上课:{{ headerData.classTime }}</div> |
| | | </div> |
| | | <div class="progress"> |
| | | <div class="bookName">学前儿童卫生与保健(第三版)</div> |
| | | <div>{{ headerData.process }}%</div> |
| | | </div> |
| | | <div class="rightBox"> |
| | | <div class="pageSizeBox"> |
| | | <div><img :src="zoomIn" @click="changePageSize('add')" /></div> |
| | | <div>{{ headerData.pageSize }}%</div> |
| | | <div><img :src="zoomOut" @click="changePageSize('reduce')" /></div> |
| | | </div> |
| | | <div class="brushImgBox"> |
| | | <div><img :src="huabi2" class="brushImg" />画笔</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 微应用盒子 --> |
| | | <div class="pageBox-content" @scroll="pageScroll"> |
| | | <div class="content-box"> |
| | | <div |
| | | id="container" |
| | | @mousedown="handleMouseDown" |
| | | @mousemove="handleMousemove" |
| | | @mouseup="handleMouseUp" |
| | | ></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"> |
| | | 教学组件 |
| | | <div class="text"></div> |
| | | </div> |
| | | <div class="menuList"> |
| | | <ul class="menu"> |
| | | <li |
| | | v-for="item in teachToolsMenuData" |
| | | :key="item.key" |
| | | :class="item.name === activeTool ? 'activeItem hover' : 'menuItem hover'" |
| | | :style="!toolState.open ? 'padding:10px 15px' : ''" |
| | | @click="selectTeachTools(item)" |
| | | > |
| | | <img :src="item.icon" alt="" /> |
| | | <span v-if="toolState.open">{{ item.name }}</span> |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | <div :class="['openBox', toolState.open ? 'right' : '']"> |
| | | <img :src="shouqiR" v-if="toolState.open" @click="toolState.open = false" /> |
| | | <img :src="shouqiL" v-if="!toolState.open" @click="toolState.open = true" /> |
| | | </div> |
| | | <div class="classRoomBox" v-if="toolState.open"> |
| | | <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
| | | <el-tab-pane label="备课组件" name="first"> |
| | | <div class="tabBox"> |
| | | <div class="insertSelect"> |
| | | <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')" |
| | | > |
| | | <img :src="selectType == 'answer' ? dati_charu_blue : dati_charu" /> |
| | | <div>插入答题</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="上课组件" name="second"> |
| | | <div class="tabBox"> |
| | | <div class="giveLessons hover" @click="giveLessonsClick()"> |
| | | <img :src="xiake" /> |
| | | <span>{{ classStart ? '上课' : '下课' }}</span> |
| | | </div> |
| | | </div> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </div> |
| | | </div> |
| | | <!-- 画笔工具栏 --> |
| | | <div |
| | | draggable="true" |
| | | class="draggableBox" |
| | | @dragstart="dragstart($event)" |
| | | @dragend="dragend($event)" |
| | | :style="`left:${floatingToolData.elLeft}px;top:${floatingToolData.elTop}px`" |
| | | > |
| | | <div |
| | | class="hover" |
| | | v-for="item in floatingToolBox" |
| | | :key="item.name" |
| | | @click="floatItemHandle(item)" |
| | | @mouseover="floatOverHander(item)" |
| | | @mouseout="floatOutHander(item)" |
| | | > |
| | | <el-popover |
| | | placement="right" |
| | | :width=" |
| | | floatingToolData.activeToolData == '标注' |
| | | ? 120 |
| | | : floatingToolData.activeToolData == '清除' |
| | | ? 200 |
| | | : 250 |
| | | " |
| | | trigger="click" |
| | | v-if=" |
| | | floatingToolData.activeToolData == '画笔' || |
| | | floatingToolData.activeToolData == '清除' || |
| | | floatingToolData.activeToolData == '文字' || |
| | | floatingToolData.activeToolData == '标注' |
| | | " |
| | | > |
| | | <div class="popinnerBox"> |
| | | <div class="brush" v-if="floatingToolData.activeToolData == '画笔'"> |
| | | <div class="thickness"> |
| | | <div |
| | | :class="floatingToolData.thicknessActive == '1' ? 'small active' : 'small'" |
| | | @click="selectThickness('1')" |
| | | ></div> |
| | | <div |
| | | :class="floatingToolData.thicknessActive == '3' ? 'middle active' : 'middle'" |
| | | @click="selectThickness('3')" |
| | | ></div> |
| | | <div |
| | | :class="floatingToolData.thicknessActive == '5' ? 'large active' : 'large'" |
| | | @click="selectThickness('5')" |
| | | ></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="characters"> |
| | | <div |
| | | :class="floatingToolData.fontSizeActive == '14' ? 'small active' : 'small'" |
| | | @click="selectfontSize('14')" |
| | | > |
| | | 小 |
| | | </div> |
| | | <div |
| | | :class="floatingToolData.fontSizeActive == '16' ? 'middle active' : 'middle'" |
| | | @click="selectfontSize('16')" |
| | | > |
| | | 中 |
| | | </div> |
| | | <div |
| | | :class="floatingToolData.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 == floatingToolData.lineColorActive" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="label" v-if="floatingToolData.activeToolData == '标注'"> |
| | | <div class="labelItem hover" @click="labelShow('hide')"> |
| | | <img :src="hide" /> |
| | | <div>隐藏</div> |
| | | </div> |
| | | <div class="labelItem hover" @click="labelShow('show')"> |
| | | <img :src="show" /> |
| | | <div>显示</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <template #reference> |
| | | <div class="floatToolItem"> |
| | | <img :src="item.icon" alt="" /> |
| | | <div class="text">{{ item.name }}</div> |
| | | </div> |
| | | </template> |
| | | </el-popover> |
| | | <div class="floatToolItem" v-else @click="floatItemHandle(item)"> |
| | | <img :src="item.icon" alt="" /> |
| | | <div class="text">{{ item.name }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 选中工具栏 --> |
| | | <div |
| | | class="dialogToolBox" |
| | | id="dialogToolBox" |
| | | v-show="showToolBox" |
| | | :style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }" |
| | | > |
| | | <div |
| | | class="colorSelectBox" |
| | | v-show="toolActive == '高亮' || toolActive == '划线' || toolActive == '笔记'" |
| | | > |
| | | <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> |
| | | <div class="toolSelectBox"> |
| | | <div |
| | | :class="item.name == toolActive ? 'dialogToolItem active' : 'dialogToolItem'" |
| | | v-for="item in dialogToolList" |
| | | :key="item.icon" |
| | | @click="dialogToolHandle(item)" |
| | | @mouseover="dialogOverHander(item)" |
| | | @mouseout="dialogOutHander(item)" |
| | | > |
| | | <img :src="item.name == toolActive ? item.activeIcon : item.icon" alt="" /> |
| | | <span>{{ item.name }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-dialog title="资源" align-center v-model="resourVisble" width="840"> |
| | | <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> |
| | | </div> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="handleClose">取 消</el-button> |
| | | <el-button type="primary" @click="addNote">确 定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <el-dialog |
| | | align-center |
| | | v-model="confirmDialog" |
| | | width="60%" |
| | | :closeOnClickModal="false" |
| | | title="图片" |
| | | > |
| | | <div class="imgUrlBox"> |
| | | <img :src="imgUrl" mode="aspectFill" /> |
| | | </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="词典" align-center v-model="cidianVisible" width="60%" class="myDialogs"> |
| | | <div class="wendabox"> |
| | | <iframe src="https://www.vocabulary.com/" frameborder="0"></iframe> |
| | | </div> |
| | | </el-dialog> |
| | | <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="思维导图" 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="模型工具" 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> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { ref, reactive } from 'vue' |
| | | import { Search, Check } from '@element-plus/icons-vue' |
| | | import { useRouter, RouterView } from 'vue-router' |
| | | const router = useRouter() |
| | | import { ref, reactive, watch, onMounted, inject } from 'vue' |
| | | import { useRouter, useRoute } from 'vue-router' |
| | | import useClipboard from 'vue-clipboard3' |
| | | const { toClipboard } = useClipboard() |
| | | const request = inject('request') |
| | | //获取路由器 |
| | | let $router = useRouter() |
| | | //获取当前路由的信息 |
| | | let $route = useRoute() |
| | | import moment from 'moment' |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import mulu from '@/assets/images/menu/mulu.png' |
| | | import biji from '@/assets/images/menu/biji.png' |
| | | import ziyuan from '@/assets/images/menu/ziyuan.png' |
| | | import zhishitupu from '@/assets/images/menu/zhishitupu.png' |
| | | import jietu from '@/assets/images/menu/jietu.png' |
| | | 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' |
| | | |
| | | // 搜索 |
| | | const searchKey = ref('') |
| | | import aIzhinengwenda from '@/assets/images/menu/AIzhinengwenda.png' |
| | | import aIyuyinyuedu from '@/assets/images/menu/AIyuyinyuedu.png' |
| | | import cidian from '@/assets/images/menu/cidian.png' |
| | | import shengzikapian from '@/assets/images/menu/shengzikapian.png' |
| | | import hudongwenda from '@/assets/images/menu/hudongwenda.png' |
| | | import siweidaotu from '@/assets/images/menu/siweidaotu.png' |
| | | import GGB from '@/assets/images/menu/GGB.png' |
| | | import jihe from '@/assets/images/menu/jihe.png' |
| | | import python from '@/assets/images/menu/python.png' |
| | | import cjiajia from '@/assets/images/menu/C++.png' |
| | | import javascript from '@/assets/images/menu/Javascript.png' |
| | | import moxinggongju from '@/assets/images/menu/moxinggongju.png' |
| | | import shouqiR from '@/assets/images/menu/shouqi-R.png' |
| | | import shouqiL from '@/assets/images/menu/shouqi-L.png' |
| | | import charuziyuan from '../assets/images/operation/charuziyuan.png' |
| | | import charuziyuan_blue from '../assets/images/operation/charuziyuan_blue.png' |
| | | import dati_charu from '../assets/images/operation/dati_charu.png' |
| | | import dati_charu_blue from '../assets/images/operation/dati_charu_blue.png' |
| | | import xiake from '../assets/images/operation/xiake.png' |
| | | |
| | | // 选择框 |
| | | const checkBoxState = reactive({ |
| | | selectCount: 0, |
| | | totalCount: 0, |
| | | check: false, |
| | | indeterminate: false |
| | | import huabi from '../assets/images/operation/huabi-w.png' |
| | | import huabi1 from '../assets/images/operation/huabi-b.png' |
| | | import qingchu from '../assets/images/operation/Clearaway-w.png' |
| | | 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 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' |
| | | import baiban1 from '../assets/images/operation/baiban-b.png' |
| | | import biaozhu from '../assets/images/operation/biaozhu-w.png' |
| | | import biaozhu1 from '../assets/images/operation/biaozhu-b.png' |
| | | import jieping from '../assets/images/operation/screenshot-w.png' |
| | | import jieping1 from '../assets/images/operation/screenshot-b.png' |
| | | import clear from '../assets/images/operation/clear.png' |
| | | 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 gaoliang from '../assets/images/operation/gaoliang.png' |
| | | import gaoliang1 from '../assets/images/operation/gaoliang-b.png' |
| | | import huaxian from '../assets/images/operation/huaxian.png' |
| | | import huaxian1 from '../assets/images/operation/huaxian1.png' |
| | | import biji2 from '../assets/images/operation/biji.png' |
| | | import biji1 from '../assets/images/operation/biji-b.png' |
| | | import biaozhu2 from '../assets/images/operation/biaozhu.png' |
| | | import biaozhu3 from '../assets/images/operation/biaozhu1.png' |
| | | import fuzhi from '../assets/images/operation/fuzhi.png' |
| | | import fuzhi1 from '../assets/images/operation/fuzhi-b.png' |
| | | import AIyuedu from '../assets/images/operation/AIyuedu.png' |
| | | 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 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 zoomIn from '../assets/images/operation/zoomIn.png' |
| | | import zoomOut from '../assets/images/operation/zoomOut.png' |
| | | import huabi2 from '../assets/images/operation/huabi.svg' |
| | | |
| | | 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' |
| | | const canvasWith = ref(1000) |
| | | const canvasheight = ref(3000) |
| | | |
| | | onMounted(() => { |
| | | // canvasWith.value = window.innerWidth - 540 |
| | | // canvasheight.value = window.innerHeight - 110 |
| | | getNotesList() // 获取高亮 |
| | | getlineHeightList() //获取高亮 |
| | | getScribeList() //获取划线 |
| | | getCatalogueData() |
| | | getResourceData() |
| | | getScreenshotList() |
| | | // setTimeout(() => { |
| | | // canvasWith.value = document.getElementById('container').offsetWidth |
| | | // canvasheight.value = document.getElementById('container').offsetHeight |
| | | // }, 5000) |
| | | }) |
| | | //获取目录 |
| | | const catalogueData = ref([]) |
| | | const getCatalogueData = () => { |
| | | axios |
| | | .get('http://182.92.203.7:3007/books/test/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) => { |
| | | console.log(data.id, 12) |
| | | 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(false) |
| | | const resourceData = ref([]) |
| | | const resourVisble = ref(false) |
| | | const resourType = ref('') |
| | | const testVideo = ref('') //视频链接 |
| | | const testWord = ref('') //word链接 |
| | | const getResourceData = () => { |
| | | axios |
| | | .get('http://182.92.203.7:3007/books/test/resource.json') |
| | | .then(function (response) { |
| | | var json = response.data |
| | | // 处理获取到的json数据 |
| | | console.log(json, '资源') |
| | | resourceData.value = json |
| | | }) |
| | | .catch(function (error) { |
| | | console.log(error) |
| | | }) |
| | | } |
| | | |
| | | const goResourceDetail = (data) => { |
| | | console.log(data, 23) |
| | | resourVisble.value = true |
| | | resourType.value = data.type |
| | | if (data.type == 'video') { |
| | | testVideo.value = 'http://182.92.203.7:3007/books/test/resourceData/' + data.name |
| | | } else if (data.type == 'word') { |
| | | testWord.value = 'http://182.92.203.7:3007/books/test/resourceData/' + data.name |
| | | } |
| | | } |
| | | |
| | | const classifyClick = (item) => { |
| | | activeClassify.value = item.key |
| | | } |
| | | const searchBtn = () => { |
| | | if (searchShow.value) { |
| | | searchShow.value = false |
| | | } else { |
| | | searchShow.value = true |
| | | } |
| | | } |
| | | // 菜单 |
| | | const menuData = reactive([ |
| | | { |
| | | name: '目录', |
| | | icon: mulu |
| | | }, |
| | | { |
| | | name: '笔记', |
| | | icon: biji |
| | | }, |
| | | { |
| | | name: '资源', |
| | | icon: ziyuan |
| | | }, |
| | | { |
| | | name: '知识图谱', |
| | | icon: zhishitupu |
| | | }, |
| | | { |
| | | name: '截图', |
| | | icon: jietu |
| | | }, |
| | | { |
| | | name: '标签', |
| | | icon: biaoqian |
| | | } |
| | | ]) |
| | | // 选中菜单 |
| | | 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() |
| | | } |
| | | |
| | | const selectResourceType = (type) => { |
| | | resourceType.value = type |
| | | } |
| | | const searchText = ref<string>('') //筛选 |
| | | const menuState = reactive({ |
| | | open: true, |
| | | notesColor: 'all' //笔记颜色 |
| | | }) |
| | | |
| | | const handleCheckAllChange = (val) => { |
| | | if (val) { |
| | | checkBoxState.check = true |
| | | const settingForm = reactive({ |
| | | acoustics: false, |
| | | animation: false |
| | | }) |
| | | //笔记颜色筛选 |
| | | const searchClick = (item) => { |
| | | if (item != 'all') { |
| | | menuState.notesColor = item.key |
| | | } else { |
| | | checkBoxState.check = false |
| | | menuState.notesColor = 'all' |
| | | } |
| | | checkBoxState.indeterminate = false |
| | | getNotesList() |
| | | } |
| | | const searchBook = async () => { |
| | | if (activeMenu.value == 1) { |
| | | getNotesList() |
| | | } |
| | | } |
| | | |
| | | // 排序 |
| | | const sortState = reactive({ |
| | | fields: [ |
| | | { |
| | | name: '名称', |
| | | value: 'Name' |
| | | }, |
| | | { |
| | | name: '创建时间', |
| | | value: 'CreateDate' |
| | | }, |
| | | { |
| | | name: '文件大小', |
| | | value: 'Size' |
| | | } |
| | | ], |
| | | types: [ |
| | | { |
| | | name: '升序', |
| | | value: 'Asc' |
| | | }, |
| | | { |
| | | name: '降序', |
| | | value: 'Desc' |
| | | } |
| | | ], |
| | | selectFieldIndex: 1, |
| | | selectTypeIndex: 1 |
| | | // 右侧工具 |
| | | const teachToolsMenuData = reactive([ |
| | | { |
| | | name: 'AI智能问答', |
| | | icon: aIzhinengwenda |
| | | }, |
| | | { |
| | | name: '词典', |
| | | icon: cidian |
| | | }, |
| | | { |
| | | name: '生字卡片', |
| | | icon: shengzikapian |
| | | }, |
| | | { |
| | | name: '互动问答', |
| | | icon: hudongwenda |
| | | }, |
| | | { |
| | | name: '思维导图', |
| | | icon: siweidaotu |
| | | }, |
| | | { |
| | | name: 'GGB函数工具', |
| | | icon: GGB |
| | | }, |
| | | { |
| | | name: '几何工具', |
| | | icon: jihe |
| | | }, |
| | | { |
| | | name: 'Python', |
| | | icon: python |
| | | }, |
| | | { |
| | | name: 'C++', |
| | | icon: cjiajia |
| | | }, |
| | | { |
| | | name: 'Javascript', |
| | | icon: javascript |
| | | }, |
| | | { |
| | | name: '模型工具', |
| | | icon: moxinggongju |
| | | } |
| | | ]) |
| | | const wendaVisible = ref(false) |
| | | const cidianVisible = ref(false) |
| | | const functionVisible = ref(false) |
| | | const siweiVisble = ref(false) |
| | | const modelToolVisble = ref(false) |
| | | const activeTool = ref(0) |
| | | const toolState = reactive({ |
| | | open: true |
| | | }) |
| | | |
| | | const sortChange = (command) => { |
| | | const type = command.split('.')[0] |
| | | const data = command.split('.')[1] |
| | | if (type == 'fields') { |
| | | sortState.selectFieldIndex = sortState.fields.findIndex((item) => item.value == data) |
| | | } else { |
| | | sortState.selectTypeIndex = sortState.types.findIndex((item) => item.value == data) |
| | | const selectTeachTools = (item) => { |
| | | activeTool.value = item.name |
| | | switch (item.name) { |
| | | case 'AI智能问答': |
| | | wendaVisible.value = true |
| | | break |
| | | case 'GGB函数工具': |
| | | functionVisible.value = true |
| | | break |
| | | case '思维导图': |
| | | siweiVisble.value = true |
| | | break |
| | | case '模型工具': |
| | | modelToolVisble.value = true |
| | | break |
| | | case '词典': |
| | | cidianVisible.value = true |
| | | break |
| | | } |
| | | } |
| | | |
| | | // 视图模式 0:块状视图 1:表格视图 |
| | | const viewMode = ref(0) |
| | | const setViewMode = () => { |
| | | if (viewMode.value == 0) { |
| | | viewMode.value = 1 |
| | | const activeName = ref('first') |
| | | const handleClick = (tab: TabsPaneContext, event: Event) => { |
| | | console.log(tab, event) |
| | | } |
| | | const selectType = ref('') |
| | | const selectTypeClick = (type) => { |
| | | if (selectType.value == 'resource' || selectType.value == 'answer') { |
| | | selectType.value = '' |
| | | } else { |
| | | viewMode.value = 0 |
| | | selectType.value = type |
| | | } |
| | | } |
| | | const classStart = ref(true) |
| | | const giveLessonsClick = () => { |
| | | if (classStart.value) { |
| | | classStart.value = false |
| | | // 启动计时器 |
| | | updateTimer() |
| | | } else { |
| | | classStart.value = true |
| | | stopTimer() |
| | | } |
| | | } |
| | | |
| | | // 文件列表 |
| | | const tableData = ref([]) |
| | | //画布悬浮操作 |
| | | const floatingToolBox = reactive([ |
| | | { |
| | | icon: huabi, |
| | | name: '画笔' |
| | | }, |
| | | { |
| | | icon: qingchu, |
| | | name: '清除' |
| | | }, |
| | | { |
| | | icon: wenzi, |
| | | name: '文字' |
| | | }, |
| | | { |
| | | icon: biaozhu, |
| | | name: '标注' |
| | | }, |
| | | { |
| | | icon: biaoqianw, |
| | | name: '标签' |
| | | }, |
| | | { |
| | | icon: baiban, |
| | | name: '白板' |
| | | }, |
| | | { |
| | | icon: jieping, |
| | | name: '截屏' |
| | | } |
| | | ]) |
| | | const canvas = ref(null) |
| | | const floatingToolData = reactive({ |
| | | activeToolData: '', //选中工具 |
| | | elLeft: 380, |
| | | elTop: 300, |
| | | startclientx: 0, |
| | | startclienty: 0, |
| | | fontSizeActive: '16', |
| | | thicknessActive: '3', //画笔选中粗细 |
| | | lineTypeActive: 'solid', //画笔选中线类型 |
| | | lineColorActive: '#333' //画笔选中线颜色 |
| | | }) |
| | | |
| | | //画布 |
| | | const canvasShow = ref(false) |
| | | |
| | | const floatOverHander = (item) => { |
| | | const curIndex = floatingToolBox.findIndex((f) => f.name == item.name) |
| | | switch (curIndex) { |
| | | case 0: |
| | | floatingToolBox[0].icon = huabi1 |
| | | break |
| | | case 1: |
| | | floatingToolBox[1].icon = qingchu1 |
| | | break |
| | | case 2: |
| | | floatingToolBox[2].icon = wenzi1 |
| | | break |
| | | case 3: |
| | | floatingToolBox[3].icon = biaozhu1 |
| | | break |
| | | case 4: |
| | | floatingToolBox[4].icon = biaoqian1 |
| | | break |
| | | case 5: |
| | | floatingToolBox[5].icon = baiban1 |
| | | break |
| | | case 6: |
| | | floatingToolBox[6].icon = jieping1 |
| | | break |
| | | } |
| | | } |
| | | const floatOutHander = (item) => { |
| | | const curIndex = floatingToolBox.findIndex((f) => f.name == item.name) |
| | | switch (curIndex) { |
| | | case 0: |
| | | floatingToolBox[0].icon = huabi |
| | | break |
| | | case 1: |
| | | floatingToolBox[1].icon = qingchu |
| | | break |
| | | case 2: |
| | | floatingToolBox[2].icon = wenzi |
| | | break |
| | | case 3: |
| | | floatingToolBox[3].icon = biaozhu |
| | | break |
| | | case 4: |
| | | floatingToolBox[4].icon = biaoqianw |
| | | break |
| | | case 5: |
| | | floatingToolBox[5].icon = baiban |
| | | break |
| | | case 6: |
| | | floatingToolBox[6].icon = jieping |
| | | break |
| | | } |
| | | } |
| | | |
| | | //截图事件 |
| | | const nameRef = ref() |
| | | const imgUrl = ref() |
| | | const confirmDialog = ref<Boolean>(false) |
| | | const nameData = ref({ name: '' }) |
| | | const screenshotList = ref([]) |
| | | |
| | | //浮窗工具栏点击事件 |
| | | const floatItemHandle = (item) => { |
| | | floatingToolData.activeToolData = item.name |
| | | switch (item.name) { |
| | | case '画笔': |
| | | canvasShow.value = true |
| | | init() |
| | | break |
| | | case '截屏': |
| | | jitT() |
| | | break |
| | | } |
| | | } |
| | | const dragend = (e) => { |
| | | let x = e.clientX - floatingToolData.startclientx |
| | | let y = e.clientY - floatingToolData.startclienty |
| | | if (floatingToolData.elLeft + x > 0 || floatingToolData.elTop + y > 0) { |
| | | floatingToolData.elLeft = e.x - 40 |
| | | floatingToolData.elTop = e.y - 60 |
| | | } |
| | | } |
| | | const dragstart = (e) => { |
| | | console.log(e) |
| | | floatingToolData.startclientx = e.clientX |
| | | floatingToolData.startclienty = e.clientY |
| | | } |
| | | |
| | | //选中画笔粗细 |
| | | const selectThickness = (str) => { |
| | | floatingToolData.thicknessActive = str |
| | | init() |
| | | } |
| | | |
| | | const selectLineType = (str) => { |
| | | floatingToolData.lineTypeActive = str |
| | | init() |
| | | } |
| | | //画笔颜色选择 |
| | | const lineColorSelect = (item) => { |
| | | floatingToolData.lineColorActive = item.key |
| | | init() |
| | | } |
| | | //画布属性 |
| | | const init = () => { |
| | | canvas.value = new fabric.Canvas('canvasRef', { |
| | | isDrawingMode: true // 启用绘画模式 |
| | | }) |
| | | canvas.value.freeDrawingBrush.color = floatingToolData.lineColorActive |
| | | canvas.value.freeDrawingBrush.width = floatingToolData.thicknessActive |
| | | } |
| | | |
| | | //清除上一步/全部 |
| | | const cleanUpSelect = (str) => { |
| | | if (str == 'all') { |
| | | canvasShow.value = false |
| | | } else { |
| | | console.log(history.value) |
| | | } |
| | | } |
| | | //标签显示隐藏 |
| | | const labelShow = (str) => {} |
| | | |
| | | //文字大小 |
| | | const selectfontSize = (str) => { |
| | | floatingToolData.fontSizeActive = str |
| | | } |
| | | |
| | | //截图 |
| | | //截图事件 |
| | | function jitT() { |
| | | const screenShotHandler = new ScreenShort({ |
| | | enableWebRtc: false, // 是否显示选项框 |
| | | level: 99, // 层级级别 |
| | | completeCallback: callback, //确认回调 |
| | | closeCallback: closeFn //取消回调 |
| | | } as any) |
| | | } |
| | | //确认回调 |
| | | const callback = (val: any) => { |
| | | ElMessageBox.confirm('确认要保存截图?', '提示', { |
| | | confirmButtonText: '确认', |
| | | cancelButtonText: '取消' |
| | | }) |
| | | .then(() => { |
| | | screenshotList.value.push({ |
| | | createDate: new Date(), |
| | | imgUrl: val.base64 |
| | | }) |
| | | request({ |
| | | url: '/identity/api/ApiAppUserSetKey', |
| | | method: 'post', |
| | | data: { |
| | | setKeyRequests: [ |
| | | { |
| | | domain: 'screenshot', |
| | | key: '1', |
| | | value: JSON.stringify(screenshotList.value) |
| | | } |
| | | ] |
| | | } |
| | | }).then((res) => { |
| | | getScreenshotList() |
| | | }) |
| | | }) |
| | | .catch(() => {}) |
| | | } |
| | | //取消回调 |
| | | const closeFn = (base64: any) => { |
| | | console.log(base64) |
| | | } |
| | | |
| | | const getScreenshotList = () => { |
| | | request({ |
| | | url: '/identity/api/ApiGetAppUserKey', |
| | | method: 'post', |
| | | data: { |
| | | domain: 'screenshot', |
| | | keys: ['1'] |
| | | } |
| | | }).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 showToolBox = ref(false) |
| | | const dialogToolData = reactive({ |
| | | left: 500, |
| | | top: 300, |
| | | chapter: '', //选中文字所在章节 |
| | | parentNode: null, |
| | | lineHeight: [], //高亮 |
| | | scribeList: [], //划线 |
| | | notesList: [] //笔记 |
| | | }) |
| | | |
| | | ///内容选中 |
| | | 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 |
| | | console.log(dialogToolData.chapter) |
| | | if (txt) { |
| | | showToolBox.value = true |
| | | dialogToolData.top = e.y |
| | | dialogToolData.left = e.x |
| | | } |
| | | isMouseDown.value = false |
| | | } |
| | | move.value = false |
| | | } |
| | | |
| | | 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: '高亮' }, |
| | | { icon: huaxian, activeIcon: huaxian1, name: '划线' }, |
| | | { icon: biji2, activeIcon: biji1, name: '笔记' }, |
| | | { icon: biaozhu2, activeIcon: biaozhu3, name: '标注' }, |
| | | { icon: fuzhi, activeIcon: fuzhi1, name: '复制' }, |
| | | { icon: AIyuedu, activeIcon: AIyuedu1, name: 'AI阅读' } |
| | | // { icon: cidian2, activeIcon: cidian1, name: '词典' }, |
| | | // { icon: yuyinyuedu, activeIcon: yuyinyuedu1, name: '语音阅读' } |
| | | // { icon: cidian2, activeIcon: cidian1, name: '翻译' } |
| | | ]) |
| | | const colorSelectList = reactive([ |
| | | { |
| | | label: '黄色', |
| | | key: '#F5E12A' |
| | | }, |
| | | { |
| | | label: '绿色', |
| | | key: '#76F0AE' |
| | | }, |
| | | { |
| | | label: '蓝色', |
| | | key: '#59CFF5' |
| | | }, |
| | | { |
| | | label: '紫色', |
| | | key: '#CAA5FC ' |
| | | }, |
| | | { |
| | | label: '粉色', |
| | | key: '#F5A0B9' |
| | | } |
| | | ]) |
| | | |
| | | //笔记弹窗 |
| | | const addNoteVisble = ref(false) |
| | | const formData = reactive({ |
| | | name: '', |
| | | 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: |
| | | dialogToolList[0].icon = gaoliang1 |
| | | break |
| | | case 1: |
| | | dialogToolList[1].icon = huaxian1 |
| | | break |
| | | case 2: |
| | | dialogToolList[2].icon = biji1 |
| | | break |
| | | case 3: |
| | | dialogToolList[3].icon = biaozhu3 |
| | | break |
| | | case 4: |
| | | dialogToolList[4].icon = fuzhi1 |
| | | break |
| | | case 5: |
| | | dialogToolList[5].icon = AIyuedu1 |
| | | break |
| | | case 6: |
| | | dialogToolList[6].icon = cidian1 |
| | | break |
| | | case 7: |
| | | dialogToolList[7].icon = yuyinyuedu1 |
| | | break |
| | | } |
| | | } |
| | | const dialogOutHander = (item) => { |
| | | const curIndex = dialogToolList.findIndex((f) => f.name == item.name) |
| | | |
| | | switch (curIndex) { |
| | | case 0: |
| | | dialogToolList[0].icon = gaoliang |
| | | break |
| | | case 1: |
| | | dialogToolList[1].icon = huaxian |
| | | break |
| | | case 2: |
| | | dialogToolList[2].icon = biji2 |
| | | break |
| | | case 3: |
| | | dialogToolList[3].icon = biaozhu2 |
| | | break |
| | | case 4: |
| | | dialogToolList[4].icon = fuzhi |
| | | break |
| | | case 5: |
| | | dialogToolList[5].icon = AIyuedu |
| | | break |
| | | case 6: |
| | | dialogToolList[6].icon = cidian2 |
| | | break |
| | | case 7: |
| | | dialogToolList[7].icon = yuyinyuedu |
| | | break |
| | | } |
| | | } |
| | | const dialogToolHandle = async (item) => { |
| | | toolActive.value = item.name |
| | | colorActive.value = '' |
| | | switch (item.name) { |
| | | case 'AI阅读': |
| | | const utterance = new SpeechSynthesisUtterance(selectText.value) |
| | | utterance.lang = 'zh-CN' // 设置语言为中文 |
| | | synth.speak(utterance) |
| | | break |
| | | case '划线': |
| | | break |
| | | case '高亮': |
| | | break |
| | | case '笔记': |
| | | formData.name = '' |
| | | formData.desc = '' |
| | | break |
| | | case '标注': |
| | | break |
| | | case '复制': |
| | | try { |
| | | //复制 |
| | | await toClipboard(selectText.value) |
| | | //下面可以设置复制成功的提示框等操作 |
| | | ElMessage({ |
| | | message: '复制成功', |
| | | type: 'success' |
| | | }) |
| | | } catch (err) { |
| | | ElMessage.error('无法复制文本:' + err) |
| | | } |
| | | showToolBox.value = false |
| | | toolActive.value = '' |
| | | break |
| | | case '词典': |
| | | cidianVisible.value = true |
| | | break |
| | | } |
| | | } |
| | | |
| | | const clickSelect = (item) => { |
| | | colorActive.value = item.key |
| | | if (toolActive.value == '笔记') { |
| | | addNoteVisble.value = true |
| | | } |
| | | if (toolActive.value == '高亮') { |
| | | dialogToolData.lineHeight.push({ |
| | | selectNode: selectNode.value, |
| | | selectText: selectText.value, |
| | | color: colorActive.value, |
| | | chapter: dialogToolData.chapter, |
| | | color: item.key, |
| | | createDate: new Date() |
| | | }) |
| | | request({ |
| | | url: '/identity/api/ApiAppUserSetKey', |
| | | method: 'post', |
| | | data: { |
| | | setKeyRequests: [ |
| | | { |
| | | domain: 'highLight', |
| | | key: '1', |
| | | 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, |
| | | color: colorActive.value, |
| | | chapter: dialogToolData.chapter, |
| | | color: item.key, |
| | | createDate: new Date() |
| | | }) |
| | | request({ |
| | | url: '/identity/api/ApiAppUserSetKey', |
| | | method: 'post', |
| | | data: { |
| | | setKeyRequests: [ |
| | | { |
| | | domain: 'underline', |
| | | key: '1', |
| | | value: JSON.stringify(dialogToolData.scribeList) |
| | | } |
| | | ] |
| | | } |
| | | }).then((res) => { |
| | | colorActive.value = '' |
| | | showToolBox.value = false |
| | | toolActive.value = '' |
| | | getScribeList() |
| | | }) |
| | | } |
| | | } |
| | | |
| | | const lock = ref(false) |
| | | const addNote = () => { |
| | | const obj = { |
| | | name: formData.name, |
| | | desc: formData.desc |
| | | } |
| | | if (!lock.value) { |
| | | lock.value = true |
| | | if (formData.desc.replace(/^\s*|\s*$/g, '')) { |
| | | if (formData.name.replace(/^\s*|\s*$/g, '')) { |
| | | dialogToolData.notesList.push({ |
| | | selectText: selectText.value, |
| | | color: colorActive.value, |
| | | chapter: dialogToolData.chapter, |
| | | createDate: new Date(), |
| | | name: formData.name.replace(/^\s*|\s*$/g, ''), |
| | | note: formData.desc.replace(/^\s*|\s*$/g, '') |
| | | }) |
| | | request({ |
| | | url: '/identity/api/ApiAppUserSetKey', |
| | | method: 'post', |
| | | data: { |
| | | setKeyRequests: [ |
| | | { |
| | | domain: 'notes', |
| | | key: '1', |
| | | 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 |
| | | } |
| | | } else { |
| | | ElMessage.error('笔记内容不能为空!') |
| | | lock.value = false |
| | | } |
| | | } |
| | | } |
| | | //笔记 |
| | | const getNotesList = () => { |
| | | scribeData.noteList = [] |
| | | scribeData.loading = true |
| | | request({ |
| | | url: '/identity/api/ApiGetAppUserKey', |
| | | method: 'post', |
| | | data: { |
| | | domain: 'notes', |
| | | keys: ['1'] |
| | | } |
| | | }).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.getElementById('container') |
| | | console.log(list, '笔记') |
| | | 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 containerElement = document.createElement('span') |
| | | containerElement.style.textDecoration = 'underline' |
| | | containerElement.innerText = item.selectText |
| | | let rReg1 = new RegExp(`${item.selectText}`, 'ig') |
| | | let text1 = textDom1.innerHTML |
| | | let rHtml1 = '' |
| | | rHtml1 = text1.replace( |
| | | rReg1, |
| | | `<span style="text-decoration:underline;text-underline-thickness:2px;text-underline-offset:4px;text-decoration-color:${item.color}" class="underline">${item.selectText}</span><img src="${biji1}" style="cursor: pointer" onclick="notesVisbleShow('${item.selectText}')"/>` |
| | | ) |
| | | textDom1.innerHTML = rHtml1 |
| | | }) |
| | | } |
| | | scribeData.loading = false |
| | | } |
| | | }) |
| | | } |
| | | //划线 |
| | | const getScribeList = () => { |
| | | scribeData.scribeDataList = [] |
| | | request({ |
| | | url: '/identity/api/ApiGetAppUserKey', |
| | | method: 'post', |
| | | data: { |
| | | domain: 'underline', |
| | | keys: ['1'] |
| | | } |
| | | }).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.getElementById('container') |
| | | console.log(scribeData.scribeDataList, '划线') |
| | | if (scribeData.scribeDataList.length > 0) { |
| | | for (let i = 0; i < scribeData.scribeDataList.length; i++) { |
| | | let item = scribeData.scribeDataList[i] |
| | | let containerElement = document.createElement('span') |
| | | containerElement.style.textDecoration = 'underline' |
| | | containerElement.innerText = item.selectText |
| | | let rReg1 = new RegExp(`${item.selectText}`, 'ig') |
| | | let text1 = textDom1.innerHTML |
| | | let rHtml1 = '' |
| | | rHtml1 = text1.replace( |
| | | rReg1, |
| | | `<span style="text-decoration:underline;text-decoration-style: wavy;text-underline-thickness:2px;text-decoration-color:${item.color};cursor: pointer">${item.selectText}</span>` |
| | | ) |
| | | textDom1.innerHTML = rHtml1 |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | //高亮 |
| | | const getlineHeightList = () => { |
| | | scribeData.lineHeightList = [] |
| | | request({ |
| | | url: '/identity/api/ApiGetAppUserKey', |
| | | method: 'post', |
| | | data: { |
| | | domain: 'highLight', |
| | | keys: ['1'] |
| | | } |
| | | }).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.getElementById('container') |
| | | if (scribeData.lineHeightList.length > 0) { |
| | | for (let i = 0; i < scribeData.lineHeightList.length; i++) { |
| | | let item = scribeData.lineHeightList[i] |
| | | let heightLightElement = document.createElement('i') |
| | | heightLightElement.style.backgroundColor = item.color |
| | | heightLightElement.innerText = item.selectText |
| | | let rReg = new RegExp(`${item.selectText}`, 'ig') |
| | | let text = textDom.innerHTML |
| | | let rHtml = '' |
| | | rHtml = text.replace( |
| | | rReg, |
| | | `<span style="background: ${item.color};padding: 2px;cursor: pointer">${item.selectText}</span>` |
| | | ) |
| | | textDom.innerHTML = rHtml |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | //正文中删除高亮,划线,笔记操作框 |
| | | window.notesVisbleShow = function (txt) { |
| | | addNoteVisble.value = true |
| | | let notes = dialogToolData.notesList.find((item) => item.selectText == txt) |
| | | formData.name = notes.name |
| | | formData.desc = notes.note |
| | | } |
| | | 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: '1', |
| | | 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: '1', |
| | | 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 |
| | | ) |
| | | selectText.value = item.selectText |
| | | colorActive.value = item.color |
| | | dialogToolData.chapter = item.chapter |
| | | formData.name = item.name |
| | | 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: '1', |
| | | value: JSON.stringify(list) |
| | | } |
| | | ] |
| | | } |
| | | }).then((res) => { |
| | | ElMessage({ |
| | | message: '删除笔记成功!', |
| | | type: 'success' |
| | | }) |
| | | getNotesList() |
| | | }) |
| | | } |
| | | } |
| | | |
| | | //内容区域顶部显示 |
| | | |
| | | const headerData = reactive({ |
| | | classTime: '00:00:00', |
| | | seconds: 0, |
| | | minutes: 0, |
| | | hours: 0, |
| | | process: 0, |
| | | pageSize: 100 |
| | | }) |
| | | //上课时长计时器 |
| | | const timer = ref(null) |
| | | const updateTimer = () => { |
| | | // 清除之前的定时器,防止多个定时器同时运行 |
| | | stopTimer() |
| | | timer.value = setInterval(() => { |
| | | headerData.seconds++ |
| | | if (headerData.seconds === 60) { |
| | | headerData.seconds = 0 |
| | | headerData.minutes++ |
| | | } |
| | | if (headerData.minutes === 60) { |
| | | headerData.minutes = 0 |
| | | headerData.hours++ |
| | | } |
| | | // 格式化时间 |
| | | const formattedTime = `${headerData.hours.toString().padStart(2, '0')}:${headerData.minutes.toString().padStart(2, '0')}:${headerData.seconds.toString().padStart(2, '0')}` |
| | | headerData.classTime = formattedTime |
| | | }, 1000) // 间隔1秒 |
| | | } |
| | | const stopTimer = () => { |
| | | if (timer.value) { |
| | | clearInterval(timer.value) |
| | | timer.value = null |
| | | headerData.classTime = '00:00:00' |
| | | } |
| | | } |
| | | |
| | | const changePageSize = (str) => { |
| | | if (str == 'add') { |
| | | headerData.pageSize = Number(headerData.pageSize) + 5 |
| | | } else { |
| | | headerData.pageSize = Number(headerData.pageSize) - 5 |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less"> |
| | | .homeBox { |
| | | width: 100%; |
| | | height: 100%; |
| | | padding: 50px; |
| | | box-sizing: border-box; |
| | | background:#C6C6C6; |
| | | border-radius: 10px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | .herderBox { |
| | | overflow: hidden; |
| | | margin-bottom: 20px; |
| | | padding:0 15px; |
| | | .headerBox { |
| | | height: 48px; |
| | | // background-image: url('@/assets/images/header/top-bg.png'); |
| | | background-size: 100% 100%; |
| | | background-repeat: no-repeat; |
| | | padding: 0 20px; |
| | | display:flex; |
| | | justify-content: space-between; |
| | | p { |
| | | float: left; |
| | | font-size: 20px; |
| | | font-size: 24px; |
| | | color: #ffffff; |
| | | letter-spacing: 2px; |
| | | font-weight: bold; |
| | | line-height: 32px; |
| | | } |
| | | .search { |
| | | float: right; |
| | | margin-right: 20px; |
| | | } |
| | | .viewChangeBox { |
| | | float: right; |
| | | line-height: 32px; |
| | | i { |
| | | cursor: pointer; |
| | | vertical-align: sub; |
| | | .userInfoBox{ |
| | | display:flex; |
| | | align-items: center; |
| | | .layout{ |
| | | width: 69px; |
| | | height: 30px; |
| | | background: #0093FF; |
| | | border-radius: 15px; |
| | | color:#fff; |
| | | text-align:center; |
| | | line-height:30px; |
| | | |
| | | } |
| | | } |
| | | } |
| | | .toolBox { |
| | | .contentBox { |
| | | overflow: hidden; |
| | | margin-bottom: 10px; |
| | | line-height: 32px; |
| | | .checkBox { |
| | | float: left; |
| | | .checkText { |
| | | display: inline-block; |
| | | line-height: 32px; |
| | | vertical-align: top; |
| | | margin-left: 8px; |
| | | } |
| | | } |
| | | .sortBox { |
| | | float: right; |
| | | .sortText { |
| | | width: 150px; |
| | | line-height: 32px; |
| | | cursor: pointer; |
| | | i, |
| | | span { |
| | | vertical-align: middle; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .fileList { |
| | | flex: 1; |
| | | overflow: auto; |
| | | .blockBox { |
| | | overflow: hidden; |
| | | .fileItem { |
| | | width: 140px; |
| | | float: left; |
| | | margin: 20px; |
| | | padding: 15px; |
| | | 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: 5px 0 10px 0; |
| | | width:63px; |
| | | margin: 10px auto; |
| | | border-radius: 10px; |
| | | cursor: context-menu; |
| | | &.active, |
| | | &:hover { |
| | | background-color: #f1f1f1; |
| | | } |
| | | .iconBox { |
| | | width: 100%; |
| | | height: 140px; |
| | | margin-bottom: 10px; |
| | | position: relative; |
| | | img { |
| | | width: auto; |
| | | height: auto; |
| | | max-width: 100%; |
| | | max-height: 100%; |
| | | position: absolute; |
| | | top: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | left: 0; |
| | | margin: auto; |
| | | border-radius: 6px; |
| | | background-color: rgba(0, 147, 255, 0.1); |
| | | p { |
| | | color: #0093ff; |
| | | } |
| | | } |
| | | .name { |
| | | display: -webkit-box; |
| | | -webkit-box-orient: vertical; |
| | | -webkit-line-clamp: 2; |
| | | overflow: hidden; |
| | | margin-bottom: 8px; |
| | | .menuIcon { |
| | | display: inline-block; |
| | | width: 32px; |
| | | height: 32px; |
| | | .name { |
| | | text-align: center; |
| | | line-height: 1; |
| | | } |
| | | } |
| | | .time { |
| | | } |
| | | .reload { |
| | | width: 80px; |
| | | position: absolute; |
| | | bottom: 100px; |
| | | text-align: center; |
| | | } |
| | | .setting { |
| | | width: 80px; |
| | | position: absolute; |
| | | bottom: 30px; |
| | | text-align: center; |
| | | } |
| | | } |
| | | .menuContent { |
| | | width: 300px; |
| | | flex-shrink: 0; |
| | | height: calc(100vh - 48px); |
| | | overflow-y: auto; |
| | | background: #e0f2ff; |
| | | .searchBox { |
| | | width: 100%; |
| | | height: 60px; |
| | | background: #ffffff; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | .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; |
| | | } |
| | | .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; |
| | | } |
| | | } |
| | | } |
| | | .screenBox { |
| | | display: flex; |
| | | padding: 0 10px; |
| | | .title { |
| | | margin: 10px 0; |
| | | line-height: 40px; |
| | | padding: 0 10px; |
| | | border: none; |
| | | } |
| | | |
| | | .flex1 { |
| | | flex: 1; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .all { |
| | | width: 50px; |
| | | height: 20px; |
| | | border-radius: 17px; |
| | | margin: 10px 10px 10px 0; |
| | | border: 1px solid #d8d8d8; |
| | | text-align: center; |
| | | line-height: 17px; |
| | | font-size: 12px; |
| | | color: #999; |
| | | } |
| | | |
| | | .allActive { |
| | | width: 50px; |
| | | height: 20px; |
| | | border-radius: 17px; |
| | | margin: 10px 10px 10px 0; |
| | | text-align: center; |
| | | line-height: 17px; |
| | | color: #fff; |
| | | background: #0093ff; |
| | | border: 1px solid #0093ff; |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .scribeItem { |
| | | width: 18px; |
| | | height: 18px; |
| | | border-radius: 50%; |
| | | margin: 10px auto; |
| | | border: none; |
| | | } |
| | | |
| | | .activeScribe { |
| | | 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 { |
| | | border: 1px solid #d8d8d8; |
| | | margin-bottom: 10px; |
| | | width: 46%; |
| | | .capture { |
| | | width: 100%; |
| | | height: 80px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .listItem { |
| | | border-bottom: 1px solid rgba(212, 212, 212, 0.16); |
| | | position: relative; |
| | | margin: 10px; |
| | | line-height: 20px; |
| | | .textBox { |
| | | padding: 0 5px 10px 5px; |
| | | .title { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | .title-con { |
| | | display: flex; |
| | | align-items: center; |
| | | .round { |
| | | width: 10px; |
| | | height: 10px; |
| | | border-radius: 50%; |
| | | margin-right: 5px; |
| | | } |
| | | } |
| | | |
| | | img { |
| | | margin-left: 5px; |
| | | } |
| | | } |
| | | .chapter { |
| | | color: #b7b7b7; |
| | | margin-top: 5px; |
| | | } |
| | | .chapterName { |
| | | float: right; |
| | | width: 150px; |
| | | overflow: hidden; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | text-align: right; |
| | | } |
| | | } |
| | | .noteText { |
| | | text-indent: 2ch; |
| | | margin-top: 5px; |
| | | .label { |
| | | width: 40px; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | .con { |
| | | max-height: 65px; |
| | | display: -webkit-box; |
| | | -webkit-box-orient: vertical; |
| | | -webkit-line-clamp: 3; |
| | | overflow: hidden; |
| | | } |
| | | } |
| | | .deleteBox { |
| | | position: absolute; |
| | | right: 0; |
| | | top: 0; |
| | | height: 100%; |
| | | width: 70px; |
| | | background-color: #0093ff; |
| | | color: #fff; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | span { |
| | | margin: 0 auto; |
| | | } |
| | | |
| | | .el-icon { |
| | | margin-right: 5px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .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: 370px; |
| | | text-align: center; |
| | | box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16); |
| | | img { |
| | | height: 10px; |
| | | width: 18px; |
| | | } |
| | | } |
| | | |
| | | .pageBox { |
| | | flex: 1; |
| | | font-size: 16px; |
| | | .pageBox-header { |
| | | height: 57px; |
| | | padding: 0 20px; |
| | | background: #fff; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | .classTime { |
| | | display: flex; |
| | | align-items: center; |
| | | background: rgba(0, 147, 255, 0.1); |
| | | border-radius: 20px 20px 20px 20px; |
| | | color: #0093ff; |
| | | padding: 8px; |
| | | .qureIcon { |
| | | width: 9px; |
| | | height: 9px; |
| | | border-radius: 50%; |
| | | background: #0093ff; |
| | | margin: 0 5px; |
| | | } |
| | | } |
| | | .progress{ |
| | | text-align:center; |
| | | .bookName{ |
| | | font-weight:bold; |
| | | margin-bottom:3px; |
| | | } |
| | | |
| | | } |
| | | .rightBox { |
| | | display: flex; |
| | | .pageSizeBox { |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 0 20px; |
| | | border-right: 1px solid #d8d8d8; |
| | | div { |
| | | padding: 5px; |
| | | } |
| | | } |
| | | .brushImgBox { |
| | | display: flex; |
| | | align-items: center; |
| | | div { |
| | | padding: 5px; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | .brushImg { |
| | | width: 22px; |
| | | margin-left: 20px; |
| | | margin-right: 5px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .pageBox-content { |
| | | height: calc(100% - 57px); |
| | | overflow-y: auto; |
| | | background: #fbf9f4; |
| | | .content-box { |
| | | position: relative; |
| | | } |
| | | #container { |
| | | background: #fbf9f4; |
| | | // height: 100%; |
| | | } |
| | | .canvas-box { |
| | | height: 100%; |
| | | width: 100%; |
| | | 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; |
| | | text-align: center; |
| | | border-bottom: 1px solid #efefef; |
| | | .text { |
| | | width: 43px; |
| | | height: 3px; |
| | | margin: 0 auto; |
| | | background: #0093ff; |
| | | border-radius: 3px 3px 0px 0px; |
| | | } |
| | | } |
| | | .menu { |
| | | padding-top: 20px; |
| | | li { |
| | | // height: 50px; |
| | | padding: 10px 36px; |
| | | font-size: 16px; |
| | | display: flex; |
| | | align-items: center; |
| | | color: #333; |
| | | |
| | | img { |
| | | width: 29px; |
| | | height: 29px; |
| | | } |
| | | |
| | | span { |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | | } |
| | | .openBox { |
| | | width: 25px; |
| | | height: 25px; |
| | | background: #fff; |
| | | border-radius: 3px 0px 0px 3px; |
| | | border: 1px solid #bce3ff; |
| | | position: absolute; |
| | | line-height: 22px; |
| | | top: 50%; |
| | | right: 65px; |
| | | text-align: center; |
| | | box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16); |
| | | img { |
| | | height: 10px; |
| | | width: 18px; |
| | | } |
| | | } |
| | | .right { |
| | | right: 174px !important; |
| | | border-radius: 0px 3px 3px 0px !important; |
| | | } |
| | | .classRoomBox { |
| | | position: absolute; |
| | | bottom: 0; |
| | | width: 100%; |
| | | .el-tabs__nav { |
| | | width: 100% !important; |
| | | } |
| | | .el-tabs__item { |
| | | flex: 1 !important; |
| | | padding: 0 !important; |
| | | text-align: center; |
| | | } |
| | | .el-tabs__active-bar { |
| | | width: 43px !important; |
| | | left: 30px !important; |
| | | height: 3px; |
| | | bottom: 1px; |
| | | border-radius: 3px 3px 0px 0px; |
| | | } |
| | | .tabBox { |
| | | height: 100px; |
| | | padding: 10px 17px; |
| | | text-align: center; |
| | | .insertSelect { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | .selectItem { |
| | | text-align: center; |
| | | background: rgba(207, 207, 207, 0.13); |
| | | padding: 10px; |
| | | border-radius: 5px; |
| | | border: 2px solid #cfcfcf; |
| | | } |
| | | .typeActive { |
| | | text-align: center; |
| | | color: #0093ff; |
| | | border: 2px solid #0093ff; |
| | | padding: 10px; |
| | | border-radius: 5px; |
| | | background: rgba(0, 147, 255, 0.13); |
| | | } |
| | | } |
| | | .giveLessons { |
| | | color: #0093ff; |
| | | width: 90px; |
| | | margin: 10px auto; |
| | | padding: 5px; |
| | | border-radius: 20px; |
| | | border: 1px solid #0093ff; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | span { |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .draggableBox { |
| | | width: 85px; |
| | | background-image: linear-gradient(to bottom, #0093ff, #005dff); |
| | | position: fixed; |
| | | height: 430px; |
| | | top: 300px; |
| | | left: 400px; |
| | | z-index: 99; |
| | | border-radius: 10px; |
| | | padding: 5px; |
| | | overflow: hidden; |
| | | .floatToolItem { |
| | | height: 60px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | border-radius: 5px; |
| | | color: #fff; |
| | | img { |
| | | margin-right: 8px; |
| | | } |
| | | .text { |
| | | margin-right: 5px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .floatToolItem:hover { |
| | | background-color: #fff; |
| | | color: #0093ff; |
| | | } |
| | | |
| | | .dialogToolBox { |
| | | position: fixed; |
| | | z-index: 2; |
| | | |
| | | .toolSelectBox { |
| | | height: 57px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | border-radius: 12px; |
| | | overflow: hidden; |
| | | padding: 5px; |
| | | background-image: linear-gradient(to right, #0093ff, #005dff); |
| | | .dialogToolItem { |
| | | user-select: none; |
| | | width: 60px; |
| | | font-size: 12px; |
| | | border-radius: 5px; |
| | | padding: 5px 0; |
| | | cursor: pointer; |
| | | text-align: center; |
| | | img { |
| | | margin: 0 auto; |
| | | display: block; |
| | | margin-bottom: 5px; |
| | | height: 16px; |
| | | } |
| | | span { |
| | | color: #fff; |
| | | } |
| | | } |
| | | .dialogToolItem:hover, |
| | | .active { |
| | | background-color: #fff; |
| | | span { |
| | | color: #0093ff; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .colorSelectBox { |
| | | padding: 5px 10px; |
| | | width: 190px; |
| | | display: flex; |
| | | background: #ffffff; |
| | | box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16); |
| | | border-radius: 5px; |
| | | margin-bottom: 10px; |
| | | .flex1 { |
| | | flex: 1; |
| | | .scribeItem { |
| | | width: 18px; |
| | | height: 18px; |
| | | border-radius: 3px; |
| | | margin: 10px auto; |
| | | border: none; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .wendabox { |
| | | width: 100%; |
| | | height: 700px; |
| | | iframe { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | .myNoteDialogs { |
| | | width: 400px !important; |
| | | } |
| | | .myDialogs { |
| | | width: 628px; |
| | | |
| | | .el-dialog__header { |
| | | padding: 15px; |
| | | margin-right: 0; |
| | | border-bottom: 1px solid #f4f4f4; |
| | | } |
| | | |
| | | .el-dialog__title { |
| | | font-weight: bold; |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .el-dialog__headerbtn { |
| | | top: 6px; |
| | | right: 6px; |
| | | } |
| | | |
| | | .el-dialog__footer { |
| | | padding: 15px; |
| | | border-top: 1px solid #f4f4f4; |
| | | } |
| | | |
| | | .myDialogs-footer { |
| | | .el-button { |
| | | padding: 0 20px; |
| | | } |
| | | } |
| | | } |
| | | .videoBox video { |
| | | width: 100%; |
| | | } |
| | | .wordBox { |
| | | height: 600px; |
| | | } |
| | | .imgUrlBox { |
| | | width: 100%; |
| | | text-align: center; |
| | | } |
| | | </style> |