| | |
|---|
| | | <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"> |
|---|
| | | <!-- 菜单 --> |
|---|
| | | <div class="menuBox"> |
|---|
| | | <div |
|---|
| | | :class="['menuItem', activeMenu == index ? 'active' : '']" |
|---|
| | |
|---|
| | | <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="300" trigger="click"> |
|---|
| | | <div class="settingBox"> |
|---|
| | | <el-form :model="settingForm" label-width="auto" style="max-width: 400px"> |
|---|
| | | <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> |
|---|
| | | <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> |
|---|
| | | <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" |
|---|
| | | v-if="catalogueData.length > 0" |
|---|
| | | @node-click="handleNodeClick" |
|---|
| | | /> |
|---|
| | | <div v-if="catalogueData.length == 0"> |
|---|
| | | <el-empty :image-size="60" description="暂无数据" /> |
|---|
| | | </div> |
|---|
| | | </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"> |
|---|
| | | <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 123456" |
|---|
| | | @click="jumpContent(item)" |
|---|
| | | :style="{ |
|---|
| | | background: |
|---|
| | | item.color == '#F5E12A' |
|---|
| | | ? 'rgba(255,234,41,0.1)' |
|---|
| | | : item.color == '#76F0AE' |
|---|
| | | ? 'rgba(83,255,162,0.1)' |
|---|
| | | : item.color == '#59CFF5' |
|---|
| | | ? 'rgba(93,216,255,0.1)' |
|---|
| | | : item.color == '#CAA5FC' |
|---|
| | | ? 'rgba(205,167,255,0.1)' |
|---|
| | | : item.color == '#F5A0B9' |
|---|
| | | ? 'rgba(255,167,193,0.1)' |
|---|
| | | : item.color |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <div class="con hover"> |
|---|
| | | {{ item.note }} |
|---|
| | | </div> |
|---|
| | | </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 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="item.icon" mode="" v-if="item.icon" /> |
|---|
| | | <el-icon v-else-if="activeClassify == 'image'" size="30"><Picture /></el-icon> |
|---|
| | | <el-icon v-else-if="activeClassify == 'audio'" size="30"><Headset /></el-icon> |
|---|
| | | <el-icon v-else-if="activeClassify == 'video'" size="30" |
|---|
| | | ><VideoCamera |
|---|
| | | /></el-icon> |
|---|
| | | <el-icon |
|---|
| | | v-else-if="activeClassify == 'other' && item.fileType == 'PDF'" |
|---|
| | | size="30" |
|---|
| | | ><Files |
|---|
| | | /></el-icon> |
|---|
| | | <el-icon |
|---|
| | | v-else-if="activeClassify == 'other' && item.fileType == ''" |
|---|
| | | size="30" |
|---|
| | | ><Tickets |
|---|
| | | /></el-icon> |
|---|
| | | </div> |
|---|
| | | <div class="rName" v-if="searchText != ''" v-html="item.name"></div> |
|---|
| | | <div class="rName" v-else :title="item.resourceName"> |
|---|
| | | {{ item.resourceName }} |
|---|
| | | </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"> |
|---|
| | | <div class="imgBox"> |
|---|
| | | <img |
|---|
| | | :src="item.imgUrl" |
|---|
| | | class="capture" |
|---|
| | | mode="aspectFill" |
|---|
| | | @click="getCapture(item)" |
|---|
| | | /> |
|---|
| | | <div class="deleteBox hover" @click="deleteScreenshot(item, 'capture')"> |
|---|
| | | <img :src="shanchu" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="captureName" :title="item.name">{{ item.name }}</div> |
|---|
| | | </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> |
|---|
| | | <div class="pageBox"></div> |
|---|
| | | <!-- 菜单内容收起 --> |
|---|
| | | <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">{{ 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 @click="jumpContent('note' + index)"> |
|---|
| | | <img :src="huabi2" class="brushImg" />画笔 |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- 微应用盒子 --> |
|---|
| | | <div class="pageBox-content"> |
|---|
| | | <div class="content-box"> |
|---|
| | | <div |
|---|
| | | id="container" |
|---|
| | | @mousedown="handleMouseDown" |
|---|
| | | @mousemove="handleMousemove" |
|---|
| | | :style="{ background: settingForm.bgColorActive }" |
|---|
| | | ></div> |
|---|
| | | <!-- 画笔画布 --> |
|---|
| | | <div class="canvas-box" v-show="canvasShow"> |
|---|
| | | <canvas id="canvasRef" :width="canvasWith" :height="canvasheight"></canvas> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- 教学组件 --> |
|---|
| | | <div class="toolBox"> |
|---|
| | | <el-menu default-active="2" :collapse="isCollapse" @open="handleOpen" @close="handleClose"> |
|---|
| | | <el-sub-menu index="1"> |
|---|
| | | <template #title> |
|---|
| | | <el-icon><location /></el-icon> |
|---|
| | | <span>Navigator One</span> |
|---|
| | | <div class="toolTitle"> |
|---|
| | | <span>{{ toolState.open ? '教学组件' : '组件' }}</span> |
|---|
| | | <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="120" |
|---|
| | | trigger="click" |
|---|
| | | v-if="floatingToolData.activeToolData == '标注'" |
|---|
| | | > |
|---|
| | | <div class="popinnerBox"> |
|---|
| | | <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=" |
|---|
| | | 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-menu-item-group> |
|---|
| | | <template #title><span>Group One</span></template> |
|---|
| | | <el-menu-item index="1-1">item one</el-menu-item> |
|---|
| | | <el-menu-item index="1-2">item two</el-menu-item> |
|---|
| | | </el-menu-item-group> |
|---|
| | | <el-menu-item-group title="Group Two"> |
|---|
| | | <el-menu-item index="1-3">item three</el-menu-item> |
|---|
| | | </el-menu-item-group> |
|---|
| | | <el-sub-menu index="1-4"> |
|---|
| | | <template #title><span>item four</span></template> |
|---|
| | | <el-menu-item index="1-4-1">item one</el-menu-item> |
|---|
| | | </el-sub-menu> |
|---|
| | | </el-sub-menu> |
|---|
| | | <el-menu-item index="2"> |
|---|
| | | <el-icon><icon-menu /></el-icon> |
|---|
| | | <template #title>Navigator Two</template> |
|---|
| | | </el-menu-item> |
|---|
| | | <el-menu-item index="3" disabled> |
|---|
| | | <el-icon><document /></el-icon> |
|---|
| | | <template #title>Navigator Three</template> |
|---|
| | | </el-menu-item> |
|---|
| | | <el-menu-item index="4"> |
|---|
| | | <el-icon><setting /></el-icon> |
|---|
| | | <template #title>Navigator Four</template> |
|---|
| | | </el-menu-item> |
|---|
| | | </el-menu> |
|---|
| | | </el-popover> |
|---|
| | | <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> |
|---|
| | | <!-- 选中工具栏 --> |
|---|
| | | <div |
|---|
| | | class="dialogToolBox" |
|---|
| | | id="dialogToolBox" |
|---|
| | | v-show="showToolBox" |
|---|
| | | :style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }" |
|---|
| | | > |
|---|
| | | <div class="colorSelectBox" v-show="toolActive == '高亮' || toolActive == '划线'"> |
|---|
| | | <div |
|---|
| | | v-for="item in colorSelectList" |
|---|
| | | :key="item.key" |
|---|
| | | class="flex1 hover" |
|---|
| | | @click="clickSelect(item)" |
|---|
| | | > |
|---|
| | | <div :style="{ background: item.key }" class="scribeItem"> |
|---|
| | | <img :src="xuanzhong1" v-if="item.key == colorActive" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="toolSelectBox" v-show="!(toolActive == '高亮' || toolActive == '划线')"> |
|---|
| | | <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> |
|---|
| | | <!-- 划线，高亮删除 --> |
|---|
| | | <div |
|---|
| | | class="lineDeleteBox" |
|---|
| | | v-show="lineDelete.showLineDelete" |
|---|
| | | :style="{ top: `${lineDelete.top}px`, left: `${lineDelete.left}px` }" |
|---|
| | | > |
|---|
| | | <el-button @click="lineDeleteBtn">删除</el-button> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <el-dialog title="资源" align-center v-model="resourVisble" width="845" class="resourDialog"> |
|---|
| | | <div class="videoBox" v-if="resourType == '视频'"> |
|---|
| | | <video controls controlslist="nodownload" :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-input |
|---|
| | | type="textarea" |
|---|
| | | :rows="4" |
|---|
| | | v-model="formData.desc" |
|---|
| | | placeholder="请输入笔记内容" |
|---|
| | | ></el-input> |
|---|
| | | </div> |
|---|
| | | <div class="noteColorSelectBox"> |
|---|
| | | <div |
|---|
| | | v-for="item in colorSelectList" |
|---|
| | | :key="item.key" |
|---|
| | | class="flex1 hover" |
|---|
| | | @click="clickSelectColor(item)" |
|---|
| | | > |
|---|
| | | <div :style="{ background: item.key }" class="scribeItem"> |
|---|
| | | <img :src="xuanzhong" v-if="item.key == noteColorActive" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <template #footer> |
|---|
| | | <span class="dialog-footer"> |
|---|
| | | <el-button @click="handleClose">取 消</el-button> |
|---|
| | | <el-button type="primary" @click="addUserKey">确 定</el-button> |
|---|
| | | </span> |
|---|
| | | </template> |
|---|
| | | </el-dialog> |
|---|
| | | <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 screenshotDialog" |
|---|
| | | > |
|---|
| | | <div class="formBox"> |
|---|
| | | <el-input v-model="nameData" placeholder="请输入截图名称"></el-input> |
|---|
| | | </div> |
|---|
| | | <template #footer> |
|---|
| | | <span class="dialog-footer"> |
|---|
| | | <el-button @click="screenshotClose">取 消</el-button> |
|---|
| | | <el-button type="primary" @click="addScreenshot" :loading="screenshotLoading">确 定</el-button> |
|---|
| | | </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="词典" align-center v-model="cidianVisible" width="60%" class="myDialogs"> |
|---|
| | | <div class="wendabox"> |
|---|
| | | <!-- <iframe src="https://www.vocabulary.com/" frameborder="0"></iframe> --> |
|---|
| | | <dictionary :searchCon="selectText" /> |
|---|
| | | </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, watch } from 'vue' |
|---|
| | | import { ref, reactive, watch, onMounted, onBeforeMount, inject } from 'vue' |
|---|
| | | import { ctxUrl, resourceUrl, requestCtx } from '@/assets/js/config' |
|---|
| | | import { useRouter, useRoute } from 'vue-router' |
|---|
| | | import useClipboard from 'vue-clipboard3' |
|---|
| | | const { toClipboard } = useClipboard() |
|---|
| | | const request = inject('request') |
|---|
| | | const toolClass = inject('toolClass') |
|---|
| | | const qiankunActions = inject('qiankunActions') |
|---|
| | | //获取路由器 |
|---|
| | | let router = useRouter() |
|---|
| | | //获取当前路由的信息 |
|---|
| | | let route = useRoute() |
|---|
| | | import moment from 'moment' |
|---|
| | | import dictionary from '@/views/components/dictionary.vue' |
|---|
| | | import { ElMessage, ElMessageBox, valueEquals } from 'element-plus' |
|---|
| | | import logo from '@/assets/images/header/logo.png' |
|---|
| | | import mulu from '@/assets/images/menu/mulu.png' |
|---|
| | | import biji from '@/assets/images/menu/biji.png' |
|---|
| | | import ziyuan from '@/assets/images/menu/ziyuan.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' |
|---|
| | | |
|---|
| | | 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' |
|---|
| | | |
|---|
| | | 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 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' |
|---|
| | | 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 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' |
|---|
| | | 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 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 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) |
|---|
| | | const activeCatalog = ref() |
|---|
| | | onMounted(() => { |
|---|
| | | getCatalogueData() |
|---|
| | | getResourceData() |
|---|
| | | setTimeout(() => { |
|---|
| | | canvasWith.value = document.querySelector('.content-box').offsetWidth |
|---|
| | | canvasheight.value = document.querySelector('.content-box').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 |
|---|
| | | }, |
|---|
| | | singular: true |
|---|
| | | }) |
|---|
| | | |
|---|
| | | window.qiankunActions.onGlobalStateChange((state, prev) => { |
|---|
| | | console.log('父层state变化', state) |
|---|
| | | bookName.value = state.bookName |
|---|
| | | bookId.value = state.bookId |
|---|
| | | window.qiankunState = state |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 定义父层方法 |
|---|
| | | console.log(window.qiankunActions) |
|---|
| | | window.qiankunActions.setGlobalState({ |
|---|
| | | state: 1, // 加载子应用 |
|---|
| | | windowSelection: (data) => { |
|---|
| | | // 绑定子应用选择监听事件 |
|---|
| | | console.log(data, '子应用选择') |
|---|
| | | getSelection(data) |
|---|
| | | }, |
|---|
| | | catalogChange: (data) => { |
|---|
| | | activeCatalog.value = data.showCatalogList |
|---|
| | | getSignData() |
|---|
| | | console.log(data, '章节切换：目前显示的三个章节') |
|---|
| | | }, |
|---|
| | | pageChange: (data) => { |
|---|
| | | // { |
|---|
| | | // page: 100, |
|---|
| | | // catalog: 5, |
|---|
| | | // catalogId: "", |
|---|
| | | // catalogName: "", |
|---|
| | | // } |
|---|
| | | console.log(data, '页面切换：目前显示页面和对应的章节信息') |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 调用子层方法 |
|---|
| | | // if (window.qiankunState && window.qiankunState.aa) window.qiankunState.aa(1) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | 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 + '/catalog.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 resourceImgList = ref([]) |
|---|
| | | const resourceVideoList = ref([]) |
|---|
| | | const resourceAudioList = ref([]) |
|---|
| | | const resourceDocList = 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数据 |
|---|
| | | if (json.length > 0) { |
|---|
| | | json.forEach((item) => { |
|---|
| | | if (item.fileType == '图片') { |
|---|
| | | resourceImgList.value.push(item) |
|---|
| | | } else if (item.fileType == '视频') { |
|---|
| | | resourceVideoList.value.push(item) |
|---|
| | | } else if (item.fileType == '音频') { |
|---|
| | | resourceAudioList.value.push(item) |
|---|
| | | } else { |
|---|
| | | resourceDocList.value.push(item) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | resourceDataList.value = resourceImgList.value |
|---|
| | | classifySelectList[0].count = resourceImgList.value.length |
|---|
| | | classifySelectList[1].count = resourceAudioList.value.length |
|---|
| | | classifySelectList[2].count = resourceVideoList.value.length |
|---|
| | | classifySelectList[3].count = resourceDocList.value.length |
|---|
| | | }) |
|---|
| | | .catch(function (error) { |
|---|
| | | console.log(error) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | const goResourceDetail = (data) => { |
|---|
| | | resourType.value = data.fileType |
|---|
| | | if (data.fileType == '视频') { |
|---|
| | | resourVisble.value = true |
|---|
| | | testVideo.value = requestCtx + '/file/api/ApiDownload?md5=' + data.md5 |
|---|
| | | } else if (data.fileType == 'PDF') { |
|---|
| | | window.open(requestCtx + '/file/api/ApiDownload?md5=' + data.md5) |
|---|
| | | // testWord.value = resourceUrl + '/resourceData/' + data.name |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | const classifyClick = (item) => { |
|---|
| | | activeClassify.value = item.key |
|---|
| | | resourceDataList.value = [] |
|---|
| | | searchText.value = '' |
|---|
| | | switch (item.key) { |
|---|
| | | case 'image': |
|---|
| | | resourceDataList.value = resourceImgList.value |
|---|
| | | break |
|---|
| | | case 'audio': |
|---|
| | | resourceDataList.value = resourceAudioList.value |
|---|
| | | break |
|---|
| | | case 'video': |
|---|
| | | resourceDataList.value = resourceVideoList.value |
|---|
| | | break |
|---|
| | | case 'other': |
|---|
| | | resourceDataList.value = resourceDocList.value |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | const searchBtn = () => { |
|---|
| | | if (searchShow.value) { |
|---|
| | | searchShow.value = false |
|---|
| | | } else { |
|---|
| | | searchShow.value = true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // 菜单 |
|---|
| | | const menuData = reactive([ |
|---|
| | | { |
|---|
| | |
|---|
| | | icon: biaoqian |
|---|
| | | } |
|---|
| | | ]) |
|---|
| | | |
|---|
| | | // 选中菜单 |
|---|
| | | const activeMenu = ref(0) |
|---|
| | | |
|---|
| | | // // 监听路由变化，默认选中菜单 |
|---|
| | | // watch( |
|---|
| | | // () => router.currentRoute.value, |
|---|
| | | // (newRoute) => { |
|---|
| | | // console.log(newRoute.path) |
|---|
| | | |
|---|
| | | // const index = menuData.findIndex((item) => item.router == newRoute.path) |
|---|
| | | // activeMenu.value = index > -1 ? index : 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: 'all' //笔记颜色 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const settingForm = reactive({ |
|---|
| | | fontSizeList: [ |
|---|
| | | { |
|---|
| | | lable: '小', |
|---|
| | | key: '14' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | lable: '中', |
|---|
| | | key: '16' |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | lable: '大', |
|---|
| | | key: '18' |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | fontSizeActive: '16', |
|---|
| | | acoustics: 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 |
|---|
| | | document.getElementById('app').style.fontSize = item.key + 'px' |
|---|
| | | } |
|---|
| | | const bgColorSelect = (item) => { |
|---|
| | | settingForm.bgColorActive = item.key |
|---|
| | | } |
|---|
| | | //笔记颜色筛选 |
|---|
| | | 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) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 右侧工具 |
|---|
| | | const isCollapse = ref(false) |
|---|
| | | 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 baiduVisible = ref(false) |
|---|
| | | 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 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 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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 { |
|---|
| | | selectType.value = type |
|---|
| | | } |
|---|
| | | } |
|---|
| | | const classStart = ref(true) |
|---|
| | | const giveLessonsClick = () => { |
|---|
| | | if (classStart.value) { |
|---|
| | | classStart.value = false |
|---|
| | | // 启动计时器 |
|---|
| | | updateTimer() |
|---|
| | | } else { |
|---|
| | | classStart.value = true |
|---|
| | | stopTimer() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | //画布悬浮操作 |
|---|
| | | const floatingToolBox = reactive([ |
|---|
| | | { |
|---|
| | | icon: huabi, |
|---|
| | | activeIcon: huabi1, |
|---|
| | | name: '画笔' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | activeIcon: baiban1, |
|---|
| | | icon: baiban, |
|---|
| | | name: '白板' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | activeIcon: biaozhu1, |
|---|
| | | icon: biaozhu, |
|---|
| | | name: '标注' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | activeIcon: biaoqian1, |
|---|
| | | icon: biaoqianw, |
|---|
| | | name: '标签' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | activeIcon: jieping1, |
|---|
| | | icon: jieping, |
|---|
| | | name: '截屏' |
|---|
| | | } |
|---|
| | | ]) |
|---|
| | | let canvas = null |
|---|
| | | const floatingToolData = reactive({ |
|---|
| | | activeToolData: '', //选中工具 |
|---|
| | | elLeft: 400, |
|---|
| | | 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 = baiban1 |
|---|
| | | break |
|---|
| | | case 2: |
|---|
| | | floatingToolBox[2].icon = biaozhu1 |
|---|
| | | break |
|---|
| | | case 3: |
|---|
| | | floatingToolBox[3].icon = biaoqian1 |
|---|
| | | break |
|---|
| | | case 4: |
|---|
| | | floatingToolBox[4].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 = baiban |
|---|
| | | break |
|---|
| | | case 2: |
|---|
| | | floatingToolBox[2].icon = biaozhu |
|---|
| | | break |
|---|
| | | case 3: |
|---|
| | | floatingToolBox[3].icon = biaoqianw |
|---|
| | | break |
|---|
| | | case 4: |
|---|
| | | 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 screenshotLoading = ref(false) |
|---|
| | | const urlData = ref('') //截图base64 |
|---|
| | | const screenshotList = ref([]) |
|---|
| | | const screenshotData = ref([]) |
|---|
| | | |
|---|
| | | //浮窗工具栏点击事件 |
|---|
| | | const floatItemHandle = (item) => { |
|---|
| | | floatingToolData.activeToolData = item.name |
|---|
| | | switch (item.name) { |
|---|
| | | case '画笔': |
|---|
| | | canvasShow.value = true |
|---|
| | | toolSelectData.activeTool = 'huabi' |
|---|
| | | break |
|---|
| | | case '标注': |
|---|
| | | break |
|---|
| | | case '标签': |
|---|
| | | reMark() |
|---|
| | | 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) => { |
|---|
| | | 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 |
|---|
| | | case 'qingchu': |
|---|
| | | canvas.clear() |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | //选中画笔粗细 |
|---|
| | | const selectThickness = (str) => { |
|---|
| | | toolSelectData.thicknessActive = str |
|---|
| | | canvas.freeDrawingBrush.color = toolSelectData.thicknessActive |
|---|
| | | } |
|---|
| | | |
|---|
| | | const selectLineType = (str) => { |
|---|
| | | toolSelectData.lineTypeActive = str |
|---|
| | | init() |
|---|
| | | } |
|---|
| | | //画笔颜色选择 |
|---|
| | | const lineColorSelect = (item) => { |
|---|
| | | toolSelectData.lineColorActive = item.key |
|---|
| | | canvas.freeDrawingBrush.color = item.key |
|---|
| | | } |
|---|
| | | //画布属性 |
|---|
| | | const isDrawing = ref(true) // 是否开启绘图，true 开启；false 关闭 |
|---|
| | | const init = () => { |
|---|
| | | canvas = new fabric.Canvas('canvasRef', { |
|---|
| | | isDrawingMode: isDrawing.value // 启用绘画模式 |
|---|
| | | }) |
|---|
| | | canvas.freeDrawingBrush.color = toolSelectData.lineColorActive |
|---|
| | | canvas.freeDrawingBrush.width = toolSelectData.thicknessActive |
|---|
| | | } |
|---|
| | | |
|---|
| | | //文字大小 |
|---|
| | | const selectfontSize = (str) => { |
|---|
| | | toolSelectData.fontSizeActive = str |
|---|
| | | } |
|---|
| | | |
|---|
| | | //标注显示隐藏 |
|---|
| | | const labelShow = (str) => {} |
|---|
| | | |
|---|
| | | //标签 |
|---|
| | | const reMark =() => { |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | //截图 |
|---|
| | | //截图事件 |
|---|
| | | 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) |
|---|
| | | floatingToolData.activeToolData = '' |
|---|
| | | } |
|---|
| | | //保存截图 |
|---|
| | | const addScreenshot = () => { |
|---|
| | | if (nameData.value) { |
|---|
| | | screenshotData.value.push({ |
|---|
| | | createDate: new Date(), |
|---|
| | | imgUrl: urlData.value, |
|---|
| | | name: nameData.value |
|---|
| | | }) |
|---|
| | | screenshotLoading.value = true |
|---|
| | | request({ |
|---|
| | | url: '/identity/api/ApiAppUserSetKey', |
|---|
| | | method: 'post', |
|---|
| | | data: { |
|---|
| | | setKeyRequests: [ |
|---|
| | | { |
|---|
| | | domain: 'screenshot', |
|---|
| | | key: bookId.value, |
|---|
| | | value: JSON.stringify(screenshotData.value) |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | }).then((res) => { |
|---|
| | | screenshotLoading.value = false |
|---|
| | | getScreenshotList() |
|---|
| | | nameData.value = '' |
|---|
| | | urlData.value = '' |
|---|
| | | floatingToolData.activeToolData = '' |
|---|
| | | screenshotVisble.value = false |
|---|
| | | }).catch(function (error) { |
|---|
| | | screenshotLoading.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) |
|---|
| | | screenshotData.value = JSON.parse(res[0].value) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | //查看截图 |
|---|
| | | const getCapture = (item) => { |
|---|
| | | imgUrl.value = item.imgUrl |
|---|
| | | confirmDialog.value = true |
|---|
| | | } |
|---|
| | | //删除截图 |
|---|
| | | const deleteScreenshot = (item) => { |
|---|
| | | let list = screenshotList.value.filter((itemData) => itemData.imgUrl !== item.imgUrl) |
|---|
| | | request({ |
|---|
| | | url: '/identity/api/ApiAppUserSetKey', |
|---|
| | | method: 'post', |
|---|
| | | data: { |
|---|
| | | setKeyRequests: [ |
|---|
| | | { |
|---|
| | | domain: 'screenshot', |
|---|
| | | key: bookId.value, |
|---|
| | | value: JSON.stringify(list) |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | }).then((res) => { |
|---|
| | | ElMessage({ |
|---|
| | | message: '删除截图成功!', |
|---|
| | | type: 'success' |
|---|
| | | }) |
|---|
| | | getScreenshotList() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | //选中文字工具栏 |
|---|
| | | const selectText = ref('') //选中文字 |
|---|
| | | const showToolBox = ref(false) |
|---|
| | | const dialogToolData = reactive({ |
|---|
| | | left: 500, |
|---|
| | | top: 300, |
|---|
| | | txt: '', |
|---|
| | | page: '', |
|---|
| | | chapter: '', //选中文字所在章节 |
|---|
| | | lineHeight: [], //高亮 |
|---|
| | | scribeList: [], //划线 |
|---|
| | | notesList: [] //笔记 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | ///内容选中 |
|---|
| | | const getSelection = (data) => { |
|---|
| | | if (data.txt) { |
|---|
| | | dialogToolData.txt = data.txt |
|---|
| | | dialogToolData.page = data.page |
|---|
| | | dialogToolData.chapter = data.chapterNum |
|---|
| | | dialogToolData.left = data.x |
|---|
| | | dialogToolData.top = data.y |
|---|
| | | showToolBox.value = true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | const toolActive = ref('') |
|---|
| | | const colorActive = ref('') |
|---|
| | | const noteColorActive = 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: baidu, 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({ |
|---|
| | | 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 = baidu1 |
|---|
| | | 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 = baidu |
|---|
| | | 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.desc = '' |
|---|
| | | addNoteVisble.value = true |
|---|
| | | showToolBox.value = false |
|---|
| | | 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 |
|---|
| | | case '百科': |
|---|
| | | baiduVisible.value = true |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | const clickSelect = (item) => { |
|---|
| | | colorActive.value = item.key |
|---|
| | | addUserKey() |
|---|
| | | } |
|---|
| | | //笔记选颜色 |
|---|
| | | const clickSelectColor = (item) => { |
|---|
| | | noteColorActive.value = item.key |
|---|
| | | } |
|---|
| | | |
|---|
| | | const addUserKey = () => { |
|---|
| | | let dom = '' |
|---|
| | | let data = null |
|---|
| | | switch (toolActive.value) { |
|---|
| | | case '高亮': |
|---|
| | | dom = 'highLightData-' + bookId.value |
|---|
| | | data = dialogToolData.lineHeight[dialogToolData.chapter] |
|---|
| | | data.push({ |
|---|
| | | id: toolClass.uuid(8), |
|---|
| | | txt: dialogToolData.txt, |
|---|
| | | page: dialogToolData.page, |
|---|
| | | type: 'Highlight', |
|---|
| | | color: colorActive.value |
|---|
| | | }) |
|---|
| | | break |
|---|
| | | case '划线': |
|---|
| | | dom = 'underline-' + bookId.value |
|---|
| | | data = dialogToolData.scribeList[dialogToolData.chapter] |
|---|
| | | data.push({ |
|---|
| | | id: toolClass.uuid(8), |
|---|
| | | txt: dialogToolData.txt, |
|---|
| | | page: dialogToolData.page, |
|---|
| | | type: 'Dashing', |
|---|
| | | color: colorActive.value |
|---|
| | | }) |
|---|
| | | break |
|---|
| | | case '笔记': |
|---|
| | | if (!formData.desc.replace(/^\s*|\s*$/g, '')) { |
|---|
| | | ElMessage.error('笔记内容不能为空!') |
|---|
| | | return |
|---|
| | | } |
|---|
| | | if (!noteColorActive.value) { |
|---|
| | | ElMessage.error('请选择笔记颜色!') |
|---|
| | | return |
|---|
| | | } |
|---|
| | | dom = 'notes-' + bookId.value |
|---|
| | | data = dialogToolData.notesList.length != 0 ? dialogToolData.notesList[dialogToolData.chapter] : [] |
|---|
| | | data.push({ |
|---|
| | | id: toolClass.uuid(8), |
|---|
| | | txt: dialogToolData.txt, |
|---|
| | | page: dialogToolData.page, |
|---|
| | | type: 'Note', |
|---|
| | | color: noteColorActive.value, |
|---|
| | | createDate: new Date(), |
|---|
| | | note: formData.desc.replace(/^\s*|\s*$/g, '') |
|---|
| | | }) |
|---|
| | | |
|---|
| | | break |
|---|
| | | } |
|---|
| | | request({ |
|---|
| | | url: '/identity/api/ApiAppUserSetKey', |
|---|
| | | method: 'post', |
|---|
| | | data: { |
|---|
| | | setKeyRequests: [ |
|---|
| | | { |
|---|
| | | domain: dom, |
|---|
| | | key: dialogToolData.chapter, |
|---|
| | | value: JSON.stringify(data) |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | }).then((res) => { |
|---|
| | | showToolBox.value = false |
|---|
| | | colorActive.value = '' |
|---|
| | | noteColorActive.value = '' |
|---|
| | | toolActive.value = '' |
|---|
| | | getSignData() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | const delUserKey = (type, ids) => { |
|---|
| | | switch (type) { |
|---|
| | | case 'Highlight': |
|---|
| | | dom = 'highLightData-' + bookId.value |
|---|
| | | data = dialogToolData.lineHeight |
|---|
| | | break |
|---|
| | | case 'Dashing': |
|---|
| | | dom = 'underline-' + bookId.value |
|---|
| | | data = dialogToolData.scribeList |
|---|
| | | break |
|---|
| | | } |
|---|
| | | data = data.filter((item) => ids.indexOf(item.id) == -1) |
|---|
| | | request({ |
|---|
| | | url: '/identity/api/ApiAppUserSetKey', |
|---|
| | | method: 'post', |
|---|
| | | data: { |
|---|
| | | setKeyRequests: [ |
|---|
| | | { |
|---|
| | | domain: dom, |
|---|
| | | key: '', |
|---|
| | | value: JSON.stringify(data) |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | }).then((res) => {}) |
|---|
| | | } |
|---|
| | | |
|---|
| | | const getSignData = () => { |
|---|
| | | request({ |
|---|
| | | url: '/identity/api/ApiGetAppUserKey', |
|---|
| | | method: 'post', |
|---|
| | | data: { |
|---|
| | | domain: 'highLightData-' + bookId.value, |
|---|
| | | keys: activeCatalog.value.map((item) => item + '') |
|---|
| | | } |
|---|
| | | }).then((res) => { |
|---|
| | | if (res && res.length > 0) { |
|---|
| | | for (let i = 0; i < res.length; i++) { |
|---|
| | | const item = res[i] |
|---|
| | | const data = JSON.parse(item.value) |
|---|
| | | // 储值 |
|---|
| | | dialogToolData.lineHeight[item.key] = data |
|---|
| | | // 渲染 |
|---|
| | | for (let j = 0; j < data.length; j++) { |
|---|
| | | const citem = data[j] |
|---|
| | | if (window.qiankunState && window.qiankunState.renderSign) |
|---|
| | | window.qiankunState.renderSign(citem.type, citem) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | request({ |
|---|
| | | url: '/identity/api/ApiGetAppUserKey', |
|---|
| | | method: 'post', |
|---|
| | | data: { |
|---|
| | | domain: 'underline-' + bookId.value, |
|---|
| | | keys: activeCatalog.value.map((item) => item + '') |
|---|
| | | } |
|---|
| | | }).then((res) => { |
|---|
| | | if (res && res.length > 0) { |
|---|
| | | for (let i = 0; i < res.length; i++) { |
|---|
| | | const item = res[i] |
|---|
| | | const data = JSON.parse(item.value) |
|---|
| | | // 储值 |
|---|
| | | dialogToolData.scribeList[item.key] = data |
|---|
| | | // 渲染 |
|---|
| | | for (let j = 0; j < data.length; j++) { |
|---|
| | | const citem = data[j] |
|---|
| | | if (window.qiankunState && window.qiankunState.renderSign) |
|---|
| | | window.qiankunState.renderSign(citem.type, citem) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | request({ |
|---|
| | | url: '/identity/api/ApiGetAppUserKey', |
|---|
| | | method: 'post', |
|---|
| | | data: { |
|---|
| | | domain: 'note-' + bookId.value, |
|---|
| | | keys: activeCatalog.value.map((item) => item + '') |
|---|
| | | } |
|---|
| | | }).then((res) => { |
|---|
| | | if (res && res.length > 0) { |
|---|
| | | for (let i = 0; i < res.length; i++) { |
|---|
| | | const item = res[i] |
|---|
| | | const data = JSON.parse(item.value) |
|---|
| | | // 储值 |
|---|
| | | dialogToolData.notesList[item.key] = data |
|---|
| | | // 渲染 |
|---|
| | | for (let j = 0; j < data.length; j++) { |
|---|
| | | const citem = data[j] |
|---|
| | | if (window.qiankunState && window.qiankunState.renderSign) |
|---|
| | | window.qiankunState.renderSign(citem.type, citem) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | //正文中删除高亮，划线，笔记操作框 |
|---|
| | | const lineDelete = reactive({ |
|---|
| | | showLineDelete: false, |
|---|
| | | top: 0, |
|---|
| | | left: 0, |
|---|
| | | deleteType: '', |
|---|
| | | deleteTxt: '' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | 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) { |
|---|
| | | let lines = scribeData.scribeDataList.find((item) => item.selectText == txt) |
|---|
| | | lineDelete.deleteType = 'underline' |
|---|
| | | lineDelete.deleteTxt = txt |
|---|
| | | lineDelete.top = event.screenY |
|---|
| | | lineDelete.left = event.screenX |
|---|
| | | lineDelete.showLineDelete = true |
|---|
| | | } |
|---|
| | | |
|---|
| | | window.deletelineHeightShow = function (txt) { |
|---|
| | | let lines = scribeData.lineHeightList.find((item) => item.selectText == txt) |
|---|
| | | lineDelete.deleteType = 'highLight' |
|---|
| | | lineDelete.deleteTxt = txt |
|---|
| | | lineDelete.top = event.screenY |
|---|
| | | lineDelete.left = event.screenX |
|---|
| | | lineDelete.showLineDelete = true |
|---|
| | | } |
|---|
| | | |
|---|
| | | const lineDeleteBtn = () => { |
|---|
| | | if (lineDelete.deleteType == 'underline') { |
|---|
| | | let list = scribeData.scribeDataList.filter((item) => item.selectText != lineDelete.deleteTxt) |
|---|
| | | request({ |
|---|
| | | url: '/identity/api/ApiAppUserSetKey', |
|---|
| | | method: 'post', |
|---|
| | | data: { |
|---|
| | | setKeyRequests: [ |
|---|
| | | { |
|---|
| | | domain: 'underline', |
|---|
| | | key: bookId.value, |
|---|
| | | value: JSON.stringify(list) |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | }).then((res) => { |
|---|
| | | lineDelete.showLineDelete = false |
|---|
| | | let list = document.querySelectorAll('.underline') |
|---|
| | | list.forEach((itemNode) => { |
|---|
| | | if (itemNode.innerText == lineDelete.deleteTxt) { |
|---|
| | | itemNode.removeAttribute('style') |
|---|
| | | itemNode.className = '' |
|---|
| | | itemNode.removeAttribute('onclick') |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | getScribeList() |
|---|
| | | }) |
|---|
| | | } else if (lineDelete.deleteType == 'highLight') { |
|---|
| | | let list = scribeData.lineHeightList.filter((item) => item.selectText != lineDelete.deleteTxt) |
|---|
| | | request({ |
|---|
| | | url: '/identity/api/ApiAppUserSetKey', |
|---|
| | | method: 'post', |
|---|
| | | data: { |
|---|
| | | setKeyRequests: [ |
|---|
| | | { |
|---|
| | | domain: 'highLight', |
|---|
| | | key: bookId.value, |
|---|
| | | value: JSON.stringify(list) |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | }).then((res) => { |
|---|
| | | lineDelete.showLineDelete = false |
|---|
| | | let list = document.querySelectorAll('.highLight') |
|---|
| | | list.forEach((itemNode) => { |
|---|
| | | if (itemNode.innerText == lineDelete.deleteTxt) { |
|---|
| | | itemNode.removeAttribute('style') |
|---|
| | | itemNode.className = '' |
|---|
| | | itemNode.removeAttribute('onclick') |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | getlineHeightList() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | //笔记跳转 |
|---|
| | | const jumpContent = (item) => { |
|---|
| | | console.log(item) |
|---|
| | | if (window.qiankunState && window.qiankunState.gotoPage) window.qiankunState.gotoPage(5, 100) |
|---|
| | | } |
|---|
| | | |
|---|
| | | //笔记编辑 |
|---|
| | | const update = (item, type) => { |
|---|
| | | dialogToolData.notesList.splice( |
|---|
| | | dialogToolData.notesList.findIndex((itemData) => itemData.selectText == item.selectText), |
|---|
| | | 1 |
|---|
| | | ) |
|---|
| | | dialogToolData.txt = item.txt |
|---|
| | | dialogToolData.page = item.page |
|---|
| | | dialogToolData.chapter = item.chapterNum |
|---|
| | | noteColorActive.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('.notesline')) |
|---|
| | | let list = document.querySelectorAll('.notesline') |
|---|
| | | list.forEach((itemNode) => { |
|---|
| | | if (itemNode.innerText == item.selectText) { |
|---|
| | | console.log(itemNode.nextSibling) |
|---|
| | | itemNode.removeAttribute('style') |
|---|
| | | itemNode.nextSibling?.remove() |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | 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 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | const layoutBtn = () => { |
|---|
| | | localStorage.clear() |
|---|
| | | console.log(888) |
|---|
| | | router.push('/login') |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="less"> |
|---|
| | | .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 { |
|---|
| | |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | |
|---|
| | | 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; |
|---|
| | | 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: 22px; |
|---|
| | | border-radius: 17px; |
|---|
| | | margin: 10px 10px 10px 0; |
|---|
| | | border: 1px solid #d8d8d8; |
|---|
| | | text-align: center; |
|---|
| | | line-height: 20px; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .allActive { |
|---|
| | | width: 50px; |
|---|
| | | height: 22px; |
|---|
| | | border-radius: 17px; |
|---|
| | | margin: 10px 10px 10px 0; |
|---|
| | | text-align: center; |
|---|
| | | line-height: 20px; |
|---|
| | | color: #fff; |
|---|
| | | background: #0093ff; |
|---|
| | | border: 1px solid #0093ff; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .scribeItem { |
|---|
| | | width: 18px; |
|---|
| | | height: 18px; |
|---|
| | | border-radius: 3px; |
|---|
| | | 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; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | 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%; |
|---|
| | | position: relative; |
|---|
| | | .imgBox { |
|---|
| | | border: 1px solid #d8d8d8; |
|---|
| | | width: 100%; |
|---|
| | | height: 80px; |
|---|
| | | margin-bottom: 5px; |
|---|
| | | } |
|---|
| | | .deleteBox { |
|---|
| | | position: absolute; |
|---|
| | | top: 2px; |
|---|
| | | right: 2px; |
|---|
| | | width: 20px; |
|---|
| | | height: 20px; |
|---|
| | | background: rgba(44, 44, 44, 0.3); |
|---|
| | | text-align: center; |
|---|
| | | padding: 2px; |
|---|
| | | } |
|---|
| | | // .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; |
|---|
| | | .con { |
|---|
| | | 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: 370px; |
|---|
| | | text-align: center; |
|---|
| | | box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16); |
|---|
| | | img { |
|---|
| | | height: 10px; |
|---|
| | | width: 18px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .pageBox { |
|---|
| | | flex: 1; |
|---|
| | | overflow: auto; |
|---|
| | | 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); |
|---|
| | | background: #fbf9f4; |
|---|
| | | .content-box { |
|---|
| | | height: 100%; |
|---|
| | | position: relative; |
|---|
| | | #container { |
|---|
| | | background: #fbf9f4; |
|---|
| | | height: 100%; |
|---|
| | | #__qiankun_microapp_wrapper_for_app_content__ { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .canvas-box { |
|---|
| | | height: 100%; |
|---|
| | | width: 100%; |
|---|
| | | 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: 50px; |
|---|
| | | text-align: center; |
|---|
| | | box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16); |
|---|
| | | img { |
|---|
| | | height: 10px; |
|---|
| | | width: 18px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .right { |
|---|
| | | right: 184px !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: 310px; |
|---|
| | | top: 300px; |
|---|
| | | left: 450px; |
|---|
| | | 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, |
|---|
| | | .floatToolActive { |
|---|
| | | 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 { |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .lineDeleteBox { |
|---|
| | | position: fixed; |
|---|
| | | z-index: 2; |
|---|
| | | border: 1px solid #0093ff; |
|---|
| | | padding: 20px 8px; |
|---|
| | | background: #fff; |
|---|
| | | border-radius: 5px; |
|---|
| | | } |
|---|
| | | .wendabox { |
|---|
| | | width: 100%; |
|---|
| | | height: 700px; |
|---|
| | | iframe { |
|---|
| | | width: 100%; |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | .screenshotDialog { |
|---|
| | | width: 400px !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> |
|---|
