| | |
| | | <span></span> |
| | | <div class="userInfoBox"> |
| | | <div class="userName" v-if="userInfo.name">{{ userInfo.name }}</div> |
| | | <div v-if="token"><div class="layout hover" @click="layoutBtn">退出</div></div> |
| | | <div v-else><div class="layout hover" @click="goLogin">登录</div></div> |
| | | <div v-if="token"> |
| | | <div class="layout hover" @click="layoutBtn">退出</div> |
| | | </div> |
| | | <div v-else> |
| | | <div class="layout hover" @click="goLogin">登录</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="contentBox"> |
| | |
| | | @click="searchClose(index)" |
| | | v-if="searchReaultData.isShow && searchReaultData.openIndex == index" |
| | | class="hover" |
| | | ><ArrowDown |
| | | /></el-icon> |
| | | <el-icon @click="searchOpen(index)" v-else class="hover"><ArrowRight /></el-icon> |
| | | > |
| | | <ArrowDown /> |
| | | </el-icon> |
| | | <el-icon @click="searchOpen(index)" v-else class="hover"> |
| | | <ArrowRight /> |
| | | </el-icon> |
| | | <span>{{ reault.chapterName }} ({{ reault.itemList.length }})</span> |
| | | </div> |
| | | <div |
| | |
| | | @click="noteClose(index)" |
| | | v-if="scribeData.isShow && scribeData.openIndex == index" |
| | | class="hover" |
| | | ><ArrowDown |
| | | /></el-icon> |
| | | <el-icon @click="noteOpen(index)" v-else class="hover"><ArrowRight /></el-icon> |
| | | > |
| | | <ArrowDown /> |
| | | </el-icon> |
| | | <el-icon @click="noteOpen(index)" v-else class="hover"> |
| | | <ArrowRight /> |
| | | </el-icon> |
| | | <span>{{ noteItem.chapterName }}</span> |
| | | </div> |
| | | <div |
| | |
| | | size="20" |
| | | @click="JumpPosition(item)" |
| | | v-if="resourceType == 'default'" |
| | | ><LocationInformation |
| | | /></el-icon> |
| | | > |
| | | <LocationInformation /> |
| | | </el-icon> |
| | | <el-icon |
| | | @click="goPlay(item)" |
| | | size="20" |
| | | class="icon hover" |
| | | v-if="item.resourceType == '视频'" |
| | | ><VideoPlay |
| | | /></el-icon> |
| | | > |
| | | <VideoPlay /> |
| | | </el-icon> |
| | | <el-icon |
| | | @click="goPlay(item, index)" |
| | | size="20" |
| | | class="icon hover" |
| | | v-if="item.resourceType == '音频' && playIndex != index" |
| | | ><VideoPlay |
| | | /></el-icon> |
| | | > |
| | | <VideoPlay /> |
| | | </el-icon> |
| | | <el-icon |
| | | @click="goPause()" |
| | | size="20" |
| | | class="icon hover" |
| | | v-if="item.resourceType == '音频' && playIndex == index" |
| | | ><VideoPause |
| | | /></el-icon> |
| | | > |
| | | <VideoPause /> |
| | | </el-icon> |
| | | <el-icon |
| | | @click="getCapture(item, index)" |
| | | size="20" |
| | | class="icon hover" |
| | | v-if="item.resourceType == '图片'" |
| | | ><View |
| | | /></el-icon> |
| | | > |
| | | <View /> |
| | | </el-icon> |
| | | <el-icon |
| | | size="20" |
| | | class="icon hover" |
| | |
| | | item.resourceType == '图片' |
| | | ) && item.isDownload == '是' |
| | | " |
| | | ><Download |
| | | /></el-icon> |
| | | > |
| | | <Download /> |
| | | </el-icon> |
| | | <!-- 收藏按钮 --> |
| | | <img |
| | | :src=" |
| | |
| | | <img :src="item.imgUrl" class="capture hover" mode="aspectFill" /> |
| | | <div class="deleteBox" v-if="showDelete == index"> |
| | | <div class="delImg"> |
| | | <el-icon @click="getCapture(item, index)" size="18" class="icon hover" |
| | | ><View |
| | | /></el-icon> |
| | | <el-icon @click="getCapture(item, index)" size="18" class="icon hover"> |
| | | <View /> |
| | | </el-icon> |
| | | <img :src="bianji" class="icon hover" @click="updateScreenshot(item)" /> |
| | | <img :src="shanchu" class="icon hover" @click="deleteScreenshot(item)" /> |
| | | </div> |
| | |
| | | :infoType="examinationData.infoType" |
| | | /> |
| | | <!-- 计算器 --> |
| | | <el-dialog |
| | | title="计算器" |
| | | align-center |
| | | v-model="calculatorVisble" |
| | | width="550" |
| | | style="height: 548px" |
| | | > |
| | | <calculator /> |
| | | <el-dialog title="计算器" align-center v-model="calculatorVisble" width="850" class="myDialogs"> |
| | | <!-- <calculatorNew></calculatorNew> --> |
| | | <iframe src="https://www.geogebra.org/scientific" frameborder="0" class="iframe-box"></iframe> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import heart from '@/assets/images/examination/collectIcon.png' |
| | | import isHeart from '@/assets/images/examination/collectClickIcon.png' |
| | | import examination from '@/views/examination/index.vue' |
| | | import { ref, reactive, watch, onMounted, onBeforeMount, onBeforeUnmount, inject } from 'vue' |
| | | import { useRouter, useRoute } from 'vue-router' |
| | | import { ElMessage, ElMessageBox, valueEquals } from 'element-plus' |
| | | import useClipboard from 'vue-clipboard3' |
| | | import examination from '../examination/index.vue' |
| | | import calculator from '../components/calculator.vue' |
| | | const { toClipboard } = useClipboard() |
| | | const MG: any = inject('MG') |
| | | const toolClass = inject('toolClass') |
| | | const qiankunActions = inject('qiankunActions') |
| | | //获取路由器 |
| | | let router = useRouter() |
| | | //获取当前路由的信息 |
| | |
| | | import newWord from '@/views/components/newWord.vue' |
| | | import wrongQuestion from '@/views/components/wrongQuestion.vue' |
| | | import voiceReader from '@/views/components/voiceReader.vue' |
| | | import { ElMessage, ElMessageBox, valueEquals } from 'element-plus' |
| | | import logo from '@/assets/images/header/logo.png' |
| | | import mulu from '@/assets/images/menu/mulu.png' |
| | | import biji from '@/assets/images/menu/biji.png' |
| | |
| | | const bookInfo = ref() |
| | | const isBuy = ref(false) |
| | | const tryPageCount = ref(0) |
| | | const searchText = ref() |
| | | onMounted(() => { |
| | | if (token) { |
| | | getUserInfo() |
| | |
| | | window.qiankunState.initTestBook(localStorage.getItem('bookId') + '', tryPageCount.value) |
| | | } |
| | | } |
| | | |
| | | }) |
| | | |
| | | // 定义父层方法 |
| | |
| | | // if (window.qiankunState && window.qiankunState.getAnswers){ |
| | | // window.qiankunState.getAnswers(localStorage.getItem("")) |
| | | // } |
| | | |
| | | }) |
| | | |
| | | onBeforeUnmount(() => { |
| | |
| | | icon: huabi, |
| | | name: '画笔', |
| | | // isShow: bookConfig.value.textbookComponents.indexOf('800109C0') > -1 |
| | | isShow:true |
| | | isShow: true |
| | | }, |
| | | { |
| | | icon: baiban, |
| | |
| | | catalogueData.value = json.data |
| | | headerData.totlePage = json.data[json.data.length - 1].end |
| | | listLoading.value = false |
| | | if (localStorage.getItem('chapter') && localStorage.getItem('startPage')) { |
| | | let chapter = Number(localStorage.getItem('chapter')) |
| | | let start = Number(localStorage.getItem('startPage')) |
| | | |
| | | if (window.qiankunState && window.qiankunState.gotoPage) { |
| | | window.qiankunState.gotoPage(chapter,start) |
| | | localStorage.removeItem('chapter') |
| | | localStorage.removeItem('startPage') |
| | | } |
| | | } |
| | | }) |
| | | .catch(function (error) { |
| | | listLoading.value = false |
| | | console.log(error) |
| | | |
| | | }) |
| | | } |
| | | const defaultProps = { |
| | |
| | | } |
| | | |
| | | const handleNodeClick = (data) => { |
| | | console.log(data) |
| | | if (!isBuy.value) { |
| | | if (data.start < tryPageCount.value) { |
| | | headerData.process = data.start |
| | |
| | | // } |
| | | } |
| | | |
| | | const searchText = ref<string>('') //筛选 |
| | | const menuState = reactive({ |
| | | open: true, |
| | | notesColor: 'all' //笔记颜色 |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | |
| | | .logoTxt { |
| | | font-size: 24px; |
| | | color: #333; |
| | | letter-spacing: 2px; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .userInfoBox { |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .userName { |
| | | font-size: 18px; |
| | | margin-right: 15px; |
| | |
| | | border-right: 1px solid #e0e0e0; |
| | | color: #2c2c2c; |
| | | } |
| | | |
| | | .layout { |
| | | width: 69px; |
| | | height: 30px; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .contentBox { |
| | | overflow: hidden; |
| | | flex: 1; |
| | | display: flex; |
| | | position: relative; |
| | | |
| | | .menuBox { |
| | | width: 80px; |
| | | flex-shrink: 0; |
| | |
| | | width: 63px; |
| | | margin: 10px auto; |
| | | border-radius: 10px; |
| | | |
| | | &.active, |
| | | &:hover { |
| | | background-color: rgba(0, 147, 255, 0.1); |
| | | |
| | | p { |
| | | color: #0093ff; |
| | | } |
| | | } |
| | | |
| | | .menuIcon { |
| | | display: inline-block; |
| | | width: 32px; |
| | | height: 32px; |
| | | } |
| | | |
| | | .name { |
| | | text-align: center; |
| | | line-height: 1; |
| | | color: #2c3e50; |
| | | } |
| | | } |
| | | |
| | | .reload { |
| | | width: 80px; |
| | | position: absolute; |
| | | bottom: 100px; |
| | | text-align: center; |
| | | } |
| | | |
| | | .setting { |
| | | width: 80px; |
| | | position: absolute; |
| | |
| | | text-align: center; |
| | | } |
| | | } |
| | | |
| | | .menuContent { |
| | | // position: relative; |
| | | width: 300px; |
| | |
| | | -moz-user-select: none; |
| | | -khtml-user-select: none; |
| | | user-select: none; |
| | | |
| | | .searchBox { |
| | | width: 100%; |
| | | height: 60px; |
| | |
| | | align-items: center; |
| | | border-bottom: 1px solid #efefef; |
| | | } |
| | | |
| | | .resourceSearchBox { |
| | | padding: 10px 0; |
| | | margin: 0 20px; |
| | | border-bottom: 1px solid rgba(204, 204, 204, 0.32); |
| | | |
| | | .classification { |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | |
| | | .flex1 { |
| | | flex: 1; |
| | | text-align: center; |
| | | } |
| | | |
| | | .title { |
| | | color: #999999; |
| | | } |
| | | |
| | | .count { |
| | | width: 35px; |
| | | margin: 0 auto; |
| | |
| | | height: 18px; |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .activeClassify, |
| | | .classifyItem:hover { |
| | | .title { |
| | | color: #0093ff; |
| | | } |
| | | |
| | | .count { |
| | | background: #0093ff; |
| | | color: #fff; |
| | | } |
| | | } |
| | | |
| | | .showSearch { |
| | | .imgBox { |
| | | width: 39px; |
| | |
| | | border-radius: 16px; |
| | | margin: 0 auto; |
| | | } |
| | | |
| | | .imgBox:hover, |
| | | .activeSearch { |
| | | border: 1px solid #0093ff; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .inputBox { |
| | | margin-top: 10px; |
| | | width: 100% !important; |
| | | } |
| | | } |
| | | |
| | | .resourceTab { |
| | | width: 100%; |
| | | height: 60px; |
| | |
| | | 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; |
| | |
| | | background: #0093ff; |
| | | border-radius: 3px 3px 0px 0px; |
| | | } |
| | | |
| | | .line { |
| | | height: 3px; |
| | | } |
| | | } |
| | | |
| | | .inputBox { |
| | | width: 85%; |
| | | |
| | | .custom-input { |
| | | border: 1px solid #0093ff !important; |
| | | border-radius: 50px; |
| | |
| | | .is-focus, |
| | | .el-input__wrapper { |
| | | box-shadow: none !important; |
| | | |
| | | .el-input__inner { |
| | | border: none !important; |
| | | height: 34px !important; |
| | | } |
| | | } |
| | | |
| | | .el-input-group__append { |
| | | padding: 0 10px !important; |
| | | background: none !important; |
| | | } |
| | | } |
| | | |
| | | .screenBox { |
| | | display: flex; |
| | | padding: 0 10px; |
| | | |
| | | .title { |
| | | margin: 10px 0; |
| | | line-height: 40px; |
| | |
| | | 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; |
| | |
| | | align-items: center; |
| | | justify-content: center; |
| | | position: relative; |
| | | |
| | | img { |
| | | height: 100%; |
| | | width: 100%; |
| | | object-fit: contain; |
| | | } |
| | | |
| | | .handleBox { |
| | | position: absolute; |
| | | top: 0; |
| | |
| | | background: rgba(44, 44, 44, 0.6); |
| | | text-align: center; |
| | | padding: 2px; |
| | | |
| | | .delImg { |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | |
| | | .icon { |
| | | position: static; |
| | | margin: 5px; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .screenshot { |
| | | padding: 20px; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | justify-content: space-between; |
| | | |
| | | .captureItem { |
| | | margin-bottom: 10px; |
| | | width: 46%; |
| | | position: relative; |
| | | |
| | | .imgBox { |
| | | border: 1px solid #d8d8d8; |
| | | width: 100%; |
| | | height: 80px; |
| | | margin-bottom: 5px; |
| | | } |
| | | |
| | | .deleteBox { |
| | | position: absolute; |
| | | top: 0; |
| | |
| | | background: rgba(44, 44, 44, 0.6); |
| | | text-align: center; |
| | | padding: 2px; |
| | | |
| | | .delImg { |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | |
| | | .icon { |
| | | position: static; |
| | | margin: 5px; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | // .capture { |
| | | // width: 100%; |
| | | // } |
| | |
| | | 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; |
| | |
| | | margin-left: 5px; |
| | | } |
| | | } |
| | | |
| | | .chapter { |
| | | color: #b7b7b7; |
| | | margin: 5px 5px 5px 14px; |
| | |
| | | padding: 0 5px; |
| | | } |
| | | } |
| | | |
| | | .noteText { |
| | | margin: 10px 10px 10px 15px; |
| | | border-radius: 3px; |
| | | padding: 2px 5px; |
| | | |
| | | .con { |
| | | max-height: 65px; |
| | | display: -webkit-box; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .chapterName { |
| | | margin: 15px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | span { |
| | | margin-left: 5px; |
| | | } |
| | | } |
| | | |
| | | .reMarkItem { |
| | | margin: 15px; |
| | | background: #fff; |
| | |
| | | padding: 10px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | |
| | | .reMarkCon { |
| | | display: flex; |
| | | |
| | | .con { |
| | | width: 200px; |
| | | white-space: nowrap; |
| | |
| | | margin-right: 8px; |
| | | } |
| | | } |
| | | |
| | | .deleteReMarkImg { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .questionCon { |
| | | width: 240px; |
| | | white-space: nowrap; |
| | |
| | | border-radius: 10px; |
| | | padding: 10px; |
| | | display: flex; |
| | | |
| | | .index { |
| | | line-height: 24px; |
| | | margin-right: 10px; |
| | | } |
| | | |
| | | .searchCon { |
| | | flex: 1; |
| | | width: 240px; |
| | |
| | | -webkit-box-orient: vertical; |
| | | -webkit-line-clamp: 2; |
| | | text-overflow: ellipsis; |
| | | |
| | | .searchColor { |
| | | background: rgb(245, 225, 42, 0.5); |
| | | } |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .allSearch, |
| | | .notesBox, |
| | | .resourceBox, |
| | |
| | | height: calc(100% - 60px); |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .questionList { |
| | | height: 83%; |
| | | } |
| | | |
| | | .question-bottom { |
| | | position: absolute; |
| | | bottom: 0; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .menuStateBox { |
| | | width: 25px; |
| | | height: 25px; |
| | |
| | | text-align: center; |
| | | box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3); |
| | | z-index: 2; |
| | | |
| | | img { |
| | | height: 10px; |
| | | width: 18px; |
| | |
| | | flex: 1; |
| | | font-size: 16px; |
| | | position: relative; |
| | | |
| | | .pageBox-header { |
| | | height: 57px; |
| | | padding: 0 20px; |
| | |
| | | z-index: 99; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | |
| | | .classTime { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | border-radius: 20px 20px 20px 20px; |
| | | color: #0093ff; |
| | | padding: 8px; |
| | | |
| | | .qureIcon { |
| | | width: 9px; |
| | | height: 9px; |
| | |
| | | margin: 0 5px; |
| | | } |
| | | } |
| | | |
| | | .progress { |
| | | text-align: center; |
| | | |
| | | .bookName { |
| | | font-weight: 800; |
| | | margin-bottom: 5px; |
| | | color: #333; |
| | | } |
| | | } |
| | | |
| | | .rightBox { |
| | | display: flex; |
| | | |
| | | .pageSizeBox { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | padding: 5px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | img { |
| | | width: 18px; |
| | | height: 18px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .brushImgBox { |
| | | display: flex; |
| | | align-items: center; |
| | | border-left: 1px solid #d8d8d8; |
| | | |
| | | div { |
| | | padding: 5px; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .brushImg { |
| | | width: 22px; |
| | | margin-left: 20px; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .pageBox-content { |
| | | height: calc(100% - 57px); |
| | | background: #fbf9f4; |
| | | padding: 10px 0; |
| | | |
| | | .content-box { |
| | | height: 100%; |
| | | position: relative; |
| | | |
| | | #container { |
| | | background: #fbf9f4; |
| | | height: 100%; |
| | | |
| | | #__qiankun_microapp_wrapper_for_app_content__ { |
| | | height: 100%; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .canvas-box { |
| | | height: 100%; |
| | | width: 100%; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .toolBox { |
| | | position: relative; |
| | | box-shadow: -3px 0px 6px 1px rgba(0, 0, 0, 0.07); |
| | |
| | | -moz-user-select: none; |
| | | -khtml-user-select: none; |
| | | user-select: none; |
| | | |
| | | .toolTitle { |
| | | height: 57px; |
| | | line-height: 53px; |
| | | text-align: center; |
| | | border-bottom: 1px solid #efefef; |
| | | |
| | | .text { |
| | | width: 43px; |
| | | height: 3px; |
| | |
| | | border-radius: 3px 3px 0px 0px; |
| | | } |
| | | } |
| | | |
| | | .menu { |
| | | padding-top: 20px; |
| | | |
| | | li > div { |
| | | // height: 50px; |
| | | padding: 10px 36px; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .openBox { |
| | | width: 25px; |
| | | height: 25px; |
| | |
| | | width: 18px; |
| | | } |
| | | } |
| | | |
| | | .right { |
| | | right: 198px !important; |
| | | border-radius: 0px 3px 3px 0px !important; |
| | | } |
| | | |
| | | .classRoomBox { |
| | | position: absolute; |
| | | bottom: 0; |
| | | width: 100%; |
| | | |
| | | .el-tabs__nav { |
| | | width: 100% !important; |
| | | } |
| | | |
| | | .el-tabs__item { |
| | | flex: 1 !important; |
| | | padding: 0 !important; |
| | | text-align: center; |
| | | } |
| | | |
| | | .el-tabs__active-bar { |
| | | width: 43px !important; |
| | | left: 30px !important; |
| | |
| | | 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); |
| | |
| | | border-radius: 5px; |
| | | border: 2px solid #cfcfcf; |
| | | } |
| | | |
| | | .typeActive { |
| | | text-align: center; |
| | | color: #0093ff; |
| | |
| | | background: rgba(0, 147, 255, 0.13); |
| | | } |
| | | } |
| | | |
| | | .giveLessons { |
| | | color: #0093ff; |
| | | width: 90px; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | |
| | | span { |
| | | margin-left: 10px; |
| | | } |
| | |
| | | border-radius: 10px; |
| | | padding: 6px; |
| | | overflow: hidden; |
| | | |
| | | .floatToolItem { |
| | | margin: 10px 0; |
| | | height: 30px; |
| | |
| | | border-radius: 5px; |
| | | color: #fff; |
| | | cursor: pointer; |
| | | |
| | | .imgBox { |
| | | width: 24px; |
| | | height: 24px; |
| | | margin: 0 auto; |
| | | position: relative; |
| | | |
| | | img { |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | margin: auto; |
| | | } |
| | | } |
| | | |
| | | .text { |
| | | margin-right: 5px; |
| | | } |
| | | } |
| | | |
| | | .floatToolItem:hover, |
| | | .floatToolActive { |
| | | background-color: rgba(255, 255, 255, 0.3); |
| | |
| | | background: #fff; |
| | | overflow: hidden; |
| | | box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3); |
| | | |
| | | .toolList { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | |
| | | .floatToolItem { |
| | | margin: 6px 8px; |
| | | padding: 5px; |
| | |
| | | align-items: center; |
| | | // flex: 1; |
| | | font-size: 14px; |
| | | |
| | | .imgBox { |
| | | height: 18px; |
| | | width: 18px; |
| | |
| | | margin: 0 auto; |
| | | } |
| | | } |
| | | |
| | | .floatToolItem:hover { |
| | | background-color: rgba(44, 44, 44, 0.2); |
| | | } |
| | | |
| | | .layOutTool { |
| | | height: 20px; |
| | | margin-right: 5px; |
| | |
| | | .dialogToolBox { |
| | | position: fixed; |
| | | z-index: 2; |
| | | |
| | | .toolSelectBox { |
| | | height: 40px; |
| | | display: flex; |
| | |
| | | overflow: hidden; |
| | | padding: 5px; |
| | | background-color: rgba(90, 90, 90, 0.9); |
| | | |
| | | // background-image: linear-gradient(to right, #0093ff, #005dff); |
| | | .dialogToolItem { |
| | | user-select: none; |
| | |
| | | margin: 0 5px; |
| | | cursor: pointer; |
| | | text-align: center; |
| | | |
| | | span { |
| | | color: #fff; |
| | | } |
| | | } |
| | | |
| | | .dialogToolItem:hover, |
| | | .active { |
| | | background-color: rgba(255, 255, 255, 0.2); |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .colorSelectBox { |
| | | padding: 5px 10px; |
| | | width: 190px; |
| | |
| | | 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; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .lineDeleteBox { |
| | | position: fixed; |
| | | z-index: 2; |
| | |
| | | background-color: rgba(90, 90, 90, 0.9); |
| | | border-radius: 5px; |
| | | display: flex; |
| | | |
| | | .dialogToolItem { |
| | | padding: 3px; |
| | | margin: 0 5px; |
| | |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | |
| | | .dialogToolItem:hover { |
| | | background-color: rgba(255, 255, 255, 0.3); |
| | | } |
| | | } |
| | | |
| | | .noteContentBox { |
| | | max-width: 240px; |
| | | position: fixed; |
| | |
| | | padding: 10px; |
| | | border-radius: 5px; |
| | | } |
| | | |
| | | .dictionaryDataBox { |
| | | position: fixed; |
| | | z-index: 2; |
| | |
| | | padding: 5px 20px; |
| | | background: #fff; |
| | | border-radius: 5px; |
| | | |
| | | .word { |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .phone_con { |
| | | .per-phone { |
| | | align-items: center; |
| | |
| | | margin-right: 10px; |
| | | margin-top: 10px; |
| | | padding: 8px 10px; |
| | | |
| | | span { |
| | | margin: 0 10px; |
| | | flex: 1; |
| | | } |
| | | } |
| | | |
| | | .soundBtn { |
| | | width: 16px; |
| | | height: 14px; |
| | | } |
| | | } |
| | | |
| | | .trans { |
| | | padding: 20px 0; |
| | | |
| | | .itemList { |
| | | display: flex; |
| | | padding: 10px 0; |
| | | |
| | | .index { |
| | | margin-right: 15px; |
| | | } |
| | | |
| | | .pos { |
| | | margin-right: 30px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .wendabox { |
| | | width: 100%; |
| | | height: 80vh; |
| | | height: 95vh; |
| | | |
| | | iframe { |
| | | width: 100%; |
| | |
| | | top: 0px !important; |
| | | right: 0px !important; |
| | | } |
| | | |
| | | .el-dialog__body { |
| | | padding: 20px !important; |
| | | } |
| | | |
| | | .el-dialog__footer { |
| | | padding: 10px 20px 20px !important; |
| | | text-align: right; |
| | | box-sizing: border-box; |
| | | } |
| | | } |
| | | |
| | | .myDialogs { |
| | | height: 90vh; |
| | | } |
| | | |
| | | .myAnserDialogs { |
| | | width: 700px; |
| | | height: 90vh; |
| | | } |
| | | |
| | | .myNoteDialogs { |
| | | width: 500px !important; |
| | | } |
| | | |
| | | .screenshotDialog { |
| | | width: 400px !important; |
| | | } |
| | | |
| | | .baiduDialog { |
| | | width: 90vw; |
| | | height: 90vh; |
| | | } |
| | | |
| | | .noteColorSelectBox { |
| | | margin-top: 10px; |
| | | width: 190px; |
| | | display: flex; |
| | | |
| | | .flex1 { |
| | | flex: 1; |
| | | |
| | | .scribeItem { |
| | | width: 18px; |
| | | height: 18px; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .videoBox { |
| | | text-align: center; |
| | | |
| | | video { |
| | | width: 100%; |
| | | } |
| | | } |
| | | |
| | | .audioBox { |
| | | // display:none; |
| | | } |
| | |
| | | .wordBox { |
| | | height: 600px; |
| | | } |
| | | |
| | | .imgUrlBox { |
| | | width: 100%; |
| | | text-align: center; |
| | | |
| | | img { |
| | | width: 100%; |
| | | } |
| | | } |
| | | |
| | | .voice-reader { |
| | | position: absolute; |
| | | bottom: 30px; |
| | | left: 50px; |
| | | } |
| | | .iframe-box { |
| | | width:100%; |
| | | height: 800px; |
| | | } |
| | | </style> |