From 39a97e8e27d52ca0729cb6b0294a37717d063d0a Mon Sep 17 00:00:00 2001 From: litian <2804272236@qq.com> Date: 星期四, 22 八月 2024 16:57:55 +0800 Subject: [PATCH] 试读页 --- src/views/readerPages/webHome.vue | 539 ++++++++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 472 insertions(+), 67 deletions(-) diff --git a/src/views/readerPages/webHome.vue b/src/views/readerPages/webHome.vue index 8009c57..ebbb875 100644 --- a/src/views/readerPages/webHome.vue +++ b/src/views/readerPages/webHome.vue @@ -117,27 +117,48 @@ <div>鏁欏笀璧勬簮</div> <div :class="resourceType == 'teacher' ? 'text' : 'line'"></div> </div> + <hr class="hr" /> + <div class="tabItem hover" @click="selectResourceType('collect')"> + <div>鏀惰棌璧勬簮</div> + <div :class="resourceType == 'collect' ? 'text' : 'line'"></div> + </div> </div> <div v-if="activeMenu == '棰樺簱'" class="resourceTab"> - <div class="tabItem hover" @click="selectExercisesType('exercises')" v-if="bookConfig.textbookComponents.indexOf('3D3B4F55') > -1"> + <div + class="tabItem hover" + @click="selectExercisesType('exercises')" + v-if="bookConfig.textbookComponents.indexOf('3D3B4F55') > -1" + > <div>涔犻</div> <div :class="exercisesType == 'exercises' ? 'text' : 'line'"></div> </div> - <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1"/> - <div class="tabItem hover" @click="selectExercisesType('additional')" v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1"> + <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1" /> + <div + class="tabItem hover" + @click="selectExercisesType('additional')" + v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1" + > <div>闄勫姞棰�</div> <div :class="exercisesType == 'additional' ? 'text' : 'line'"></div> </div> - <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1"/> - <div class="tabItem hover" @click="selectExercisesType('wrong')" v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1"> + <!-- <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1" /> + <div + class="tabItem hover" + @click="selectExercisesType('wrong')" + v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1" + > <div>閿欓鏈�</div> <div :class="exercisesType == 'wrong' ? 'text' : 'line'"></div> - </div> - <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1"/> - <div class="tabItem hover" @click="selectExercisesType('collection')" v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1"> + </div> --> + <!-- <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1" /> + <div + class="tabItem hover" + @click="selectExercisesType('collection')" + v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1" + > <div>鏀惰棌澶�</div> <div :class="exercisesType == 'collection' ? 'text' : 'line'"></div> - </div> + </div> --> </div> </div> <!-- 鐩綍 --> @@ -342,14 +363,23 @@ v-else-if="item.icon && activeClassify != 'image'" /> <!-- <el-icon v-else-if="activeClassify == 'image'" size="30"></el-icon> --> - <el-icon v-else-if="activeClassify == 'audio'" size="30"><Headset /></el-icon> - <el-icon v-else-if="activeClassify == 'video'" size="30" + <!-- <el-icon v-else-if="activeClassify == 'audio'" size="30"><Headset /></el-icon> --> + <!-- <el-icon v-else-if="activeClassify == 'video'" size="30" ><VideoCamera - /></el-icon> - <el-icon v-else-if="activeClassify == 'other'" size="30"><Files /></el-icon> - <el-icon v-else-if="activeClassify == 'exercises'" size="30" - ><Tickets - /></el-icon> + /></el-icon> --> + <!-- <el-icon v-else-if="activeClassify == 'other'" size="30"><Files /></el-icon> --> + <img + src="@/assets/images/resource/yp-mr.png" + v-else-if="activeClassify == 'audio'" + /> + <img + src="@/assets/images/resource/sp-mr.png" + v-else-if="activeClassify == 'video'" + /> + <img + src="@/assets/images/resource/qt-mr.png" + v-else-if="activeClassify == 'other'" + /> <div class="handleBox" v-if="showHandle == index"> <div class="delImg"> <el-icon @@ -401,6 +431,26 @@ " ><Download /></el-icon> + <!-- 鏀惰棌鎸夐挳 --> + <img + :src=" + collectResourceList.findIndex((citem) => citem.id == item.id) > -1 + ? isHeart + : heart + " + class="icon hover" + style="width: 15px" + @click=" + handleCollectResource( + item.id, + item.md5 ? item.md5 : '', + item.resourcePath ? item.resourcePath : '', + item.resourceType, + item.resourceType == '瑙嗛' || '闊抽' ? 'bits' : 'json', + item.resourceName + ) + " + /> </div> </div> </div> @@ -466,7 +516,10 @@ </div> </div> <div class="questionList" v-if="activeMenu == '棰樺簱'" v-loading="listLoading"> - <div class="resourceSearchBox" v-if="exercisesType !== 'collection' && exercisesType !=='wrong'"> + <div + class="resourceSearchBox" + v-if="exercisesType !== 'collection' && exercisesType !== 'wrong'" + > <div class="inputBox"> <el-input class="custom-input" @@ -487,18 +540,29 @@ <div v-for="(item, index) in questionList" :key="index" class="reMarkItem"> <div class="questionCon hover" - @click="clickQuestion(exercisesType,item)" + @click="clickQuestion(exercisesType, item)" :title="item.resourceName" > {{ item.resourceName }} </div> </div> </div> - <div v-if="questionList.length == 0 && (exercisesType !== 'collection' && exercisesType !=='wrong')"> + <div + v-if=" + questionList.length == 0 && + exercisesType !== 'collection' && + exercisesType !== 'wrong' + " + > <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> </div> </div> </div> + <!-- 棰樺簱搴曢儴鏀惰棌澶瑰拰閿欓闆� --> + <ul class="question-bottom" v-if="activeMenu == '棰樺簱'"> + <li @click="selectExercisesType('collection')">鏀惰棌澶�</li> + <li @click="selectExercisesType('wrong')">閿欓鏈�</li> + </ul> <!-- 鑿滃崟鍐呭鏀惰捣 --> <div class="menuStateBox" v-if="menuState.open"> <svg @@ -774,6 +838,10 @@ </div> </div> </div> + <!-- 璇煶闃呰缁勪欢 --> + <!-- <div class="voice-reader"> + <voiceReader /> + </div> --> </div> <!-- 鏁欏缁勪欢 --> <div class="toolBox"> @@ -1182,20 +1250,45 @@ <newWord :resourceUrl="resourceUrl" /> </div> </el-dialog> - <el-dialog title="閿欓鏈�" align-center v-model="wrongQuestionVisble" width="800" class="myDialogs"> + <el-dialog + title="閿欓鏈�" + align-center + v-model="wrongQuestionVisble" + width="800" + class="myDialogs" + > <div class="wendabox"> - <wrongQuestion /> + <wrongQuestion /> </div> </el-dialog> <!-- 绛旈鍣� --> - <examination ref="examinationRef" :activeBook="bookConfig" :info="examinationData.info" :type="examinationData.type" :infoType="examinationData.infoType" /> + <examination + ref="examinationRef" + :activeBook="bookConfig" + :info="examinationData.info" + :type="examinationData.type" + :infoType="examinationData.infoType" + /> + <!-- 璁$畻鍣� --> + <el-dialog + title="璁$畻鍣�" + align-center + v-model="calculatorVisble" + width="550" + style="height: 548px" + > + <calculator /> + </el-dialog> </template> <script setup lang="ts"> +import heart from '@/assets/images/examination/collectIcon.png' +import isHeart from '@/assets/images/examination/collectClickIcon.png' import { ref, reactive, watch, onMounted, onBeforeMount, onBeforeUnmount, inject } from 'vue' import { useRouter, useRoute } from 'vue-router' 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') @@ -1208,6 +1301,7 @@ import dictionary from '@/views/components/dictionary.vue' 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' @@ -1317,9 +1411,15 @@ const bookConfig = ref({}) const activeCatalog = ref() const reMarResult = ref() +const bookInfo = ref() +const isBuy = ref(false) +const tryPageCount = ref(0) onMounted(() => { if (token) { getUserInfo() + } + if (localStorage.getItem('bookId')) { + getBookInfo() } setTimeout(() => { canvasWith.value = document.querySelector('.content-box').offsetWidth @@ -1350,12 +1450,14 @@ window.qiankunActions.onGlobalStateChange((state, prev) => { console.log('鐖跺眰state鍙樺寲', state) window.qiankunState = state - - if (window.qiankunState && window.qiankunState.initTestBook) { - window.qiankunState.initTestBook( - localStorage.getItem('bookId') + '', - localStorage.getItem('tryPageCount') - ) + if (isBuy.value) { + if (window.qiankunState && window.qiankunState.initTestBook) { + window.qiankunState.initTestBook(localStorage.getItem('bookId') + '') + } + } else { + if (window.qiankunState && window.qiankunState.initTestBook) { + window.qiankunState.initTestBook(localStorage.getItem('bookId') + '', tryPageCount.value) + } } }) @@ -1468,6 +1570,44 @@ // } // ) +//鏍规嵁refcode鑾峰彇鍥句功淇℃伅 + +const getBookInfo = () => { + const obj = { + storeInfo: 'jsek_digitalTextbooks', + path: '*', + queryType: '*', + coverSize: { + width: 150 + }, + paging: { + start: 0, + size: 6 + }, + filterList: [ + { + value: 'Normal', + field: 'state' + } + ], + fields: { + author: [], + RefCodes: [localStorage.getItem('bookId')], + probationPage: [] + } + } + MG.store.getProductList(obj).then((res) => { + console.log(res.datas, '鍥句功淇℃伅') + bookInfo.value = res.datas[0] + if (res.datas[0].purchasedSaleMethodIdList.includes(res.datas[0].defaultSaleMethodId)) { + isBuy.value = true + } else { + isBuy.value = false + } + tryPageCount.value = Number(res.datas[0].probationPage) + }) +} + const getUserInfo = () => { MG.identity.getCurrentAppUser().then((res) => { console.log(res, '鐢ㄦ埛淇℃伅') @@ -1552,7 +1692,11 @@ { name: '棰樺簱', icon: question, - isShow: bookConfig.value.textbookComponents.indexOf('3D3B4F55') > -1 || bookConfig.value.textbookComponents.indexOf('AFC1A288') > -1 || bookConfig.value.textbookComponents.indexOf('A434F2C0') > -1 || bookConfig.value.textbookComponents.indexOf('A4821F71') > -1 + isShow: + bookConfig.value.textbookComponents.indexOf('3D3B4F55') > -1 || + bookConfig.value.textbookComponents.indexOf('AFC1A288') > -1 || + bookConfig.value.textbookComponents.indexOf('A434F2C0') > -1 || + bookConfig.value.textbookComponents.indexOf('A4821F71') > -1 } ] teachToolsMenuData = [ @@ -1631,7 +1775,8 @@ { icon: huabi, name: '鐢荤瑪', - isShow: bookConfig.value.textbookComponents.indexOf('800109C0') > -1 + // isShow: bookConfig.value.textbookComponents.indexOf('800109C0') > -1 + isShow:true }, { icon: baiban, @@ -1732,8 +1877,8 @@ const handleNodeClick = (data) => { console.log(data) - if (localStorage.getItem('tryPageCount')) { - if (data.start < localStorage.getItem('tryPageCount')) { + if (!isBuy.value) { + if (data.start < tryPageCount.value) { headerData.process = data.start if (window.qiankunState && window.qiankunState.gotoPage) window.qiankunState.gotoPage(data.chapter, data.start) @@ -1768,6 +1913,7 @@ const showHandle = ref(null) const playIndex = ref(null) //闊抽鎾斁 const audioPlayer = ref(null) +const collectResourceList = ref([]) const getResourceData = () => { if (token) { imgPreviewList.value = [] @@ -1952,6 +2098,8 @@ }) .catch(function (error) { console.log(error) + resourceDataList.value = [] + classifySelectList.value = [] listLoading.value = false }) } else { @@ -1962,7 +2110,13 @@ type: 'warning' }) .then(() => { - router.push('/login') + if (sessionStorage.getItem('loginCtx')) { + window.open(sessionStorage.getItem('loginCtx')) + } else { + router.replace({ + path: '/login' + }) + } }) .catch(() => {}) } @@ -2024,14 +2178,22 @@ const selectResourceType = (type) => { resourceType.value = type searchText.value = '' - getResourceData() + if (type == 'collect') { + getCollectResource() + } else { + getResourceData() + } } //璧勬簮绫诲瀷鍥剧墖/瑙嗛/闊抽/涔犻/鍏朵粬 const classifyClick = (item) => { activeClassify.value = item.key resourceDataList.value = [] searchText.value = '' - getResourceData() + if (resourceType.value == 'collect') { + getCollectResource() + } else { + getResourceData() + } } const searchBtn = () => { if (searchShow.value) { @@ -2041,14 +2203,150 @@ } } +// 鑾峰彇鏀惰棌鐨勮祫婧� +const getCollectResource = () => { + if (token) { + MG.identity + .getUserKey({ + domain: 'collectResource', + keys: [bookConfig.value.bookId] + }) + .then((res) => { + if (res.length) { + collectResourceList.value = JSON.parse(res[0].value) + console.log('鏀惰棌璧勬簮鍒楄〃', collectResourceList.value) + if (collectResourceList.value.length > 0) { + let imgCount = 0 + let audioCount = 0 + let videoCount = 0 + let exercisesCount = 0 + let otherCount = 0 + resourceDataList.value = [] + collectResourceList.value.forEach((resItem) => { + if (resItem.resourceType == '鍥剧墖') { + if (resItem.resourcePath) { + resItem.resourcePath = bookConfig.value.resourceUrl + '/' + resItem.resourcePath + } else { + resItem.resourcePath = + bookConfig.value.requestCtx + '/file/GetPreViewImage?md5=' + resItem.md5 + } + + imgPreviewList.value.push(resItem.resourcePath) + if (activeClassify.value == 'image') { + resourceDataList.value.push(resItem) + } + imgCount++ + } else if (resItem.resourceType == '闊抽') { + if (activeClassify.value == 'audio') { + resourceDataList.value.push(resItem) + } + audioCount++ + } else if (resItem.resourceType == '瑙嗛') { + if (activeClassify.value == 'video') { + resourceDataList.value.push(resItem) + } + videoCount++ + } else { + if (activeClassify.value == 'other') { + resourceDataList.value.push(resItem) + } + otherCount++ + } + }) + classifySelectList.value = [] + if (imgCount > 0) { + classifySelectList.value.push({ + title: '鍥剧墖', + count: imgCount, + key: 'image' + }) + } + if (audioCount > 0) { + classifySelectList.value.push({ + title: '闊抽', + count: audioCount, + key: 'audio' + }) + } + if (videoCount > 0) { + classifySelectList.value.push({ + title: '瑙嗛', + count: videoCount, + key: 'video' + }) + } + if (otherCount > 0) { + classifySelectList.value.push({ + title: '鍏朵粬', + count: otherCount, + key: 'other' + }) + } + if (!activeClassify.value) { + activeClassify.value = classifySelectList.value[0].key + collectResourceList.value.forEach((resItem1) => { + if (resItem1.resourceType == classifySelectList.value[0].title) { + resourceDataList.value.push(resItem1) + } + }) + } + } + } else { + resourceDataList.value = [] + } + }) + } else { + ElMessageBox.confirm('璇峰厛鐧诲綍锛�', { + confirmButtonText: '鍘荤櫥褰�', + cancelButtonText: '鍙栨秷', + autofocus: false, + type: 'warning' + }) + .then(() => { + if (sessionStorage.getItem('loginCtx')) { + window.open(sessionStorage.getItem('loginCtx')) + } else { + router.replace({ + path: '/login' + }) + } + }) + .catch(() => {}) + } +} +// 鏀惰棌鎸夐挳 +const handleCollectResource = (id, md5, resourcePath, resourceType, source, resourceName) => { + if (collectResourceList.value.findIndex((item) => item.id == id) > -1) { + collectResourceList.value = collectResourceList.value.filter((item) => item.id != id) + } else { + collectResourceList.value.push({ + id, + md5, + resourcePath: resourcePath.replace(bookConfig.value.resourceUrl + '/', ''), + resourceType, + source, + resourceName + }) + } + MG.identity.setUserKey({ + setKeyRequests: [ + { + domain: 'collectResource', + key: bookConfig.value.bookId, + value: JSON.stringify(collectResourceList.value) + } + ] + }) +} + //涔犻 const exercisesType = ref('exercises') //涔犻绫诲瀷 const questionList = ref([]) const examinationRef = ref() // 绛旈鍣ㄥ疄渚� const examinationData = reactive({ - type:"", // 绛旈绫诲瀷 option 娴嬭瘯 - infoType:"", // 鏁版嵁鏉ユ簮 bits 姣旂壒鍚庡彴 json 鍋囨暟鎹� - info:{}, // 杩欏棰樼殑淇℃伅 + type: '', // 绛旈绫诲瀷 option 娴嬭瘯 + infoType: '', // 鏁版嵁鏉ユ簮 bits 姣旂壒鍚庡彴 json 鍋囨暟鎹� + info: {} // 杩欏棰樼殑淇℃伅 }) // 鑾峰彇涔犻 const getExercisesList = () => { @@ -2087,7 +2385,13 @@ type: 'warning' }) .then(() => { - router.push('/login') + if (sessionStorage.getItem('loginCtx')) { + window.open(sessionStorage.getItem('loginCtx')) + } else { + router.replace({ + path: '/login' + }) + } }) .catch(() => {}) } @@ -2128,40 +2432,39 @@ //閿欓鏈� const wrongQuestionVisble = ref(false) const selectExercisesType = (type) => { - exercisesType.value = type - searchText.value = '' if (type == 'exercises') { getExercisesList() - } else if(type == 'additional') { + exercisesType.value = type + searchText.value = '' + } else if (type == 'additional') { getAdditionalList() - } else if(type == 'wrong'){ - openExaminationDialog(true,{},'errorQuestion') - questionList.value = [] - }else{ - openExaminationDialog(true,{},'collectQuestion') - questionList.value = [] + exercisesType.value = type + searchText.value = '' + } else if (type == 'wrong') { + openExaminationDialog(true, {}, 'errorQuestion') + } else { + openExaminationDialog(true, {}, 'collectQuestion') } } // 棰樺垪琛ㄧ偣鍑� -const clickQuestion = (type:string,data:any) => { +const clickQuestion = (type: string, data: any) => { switch (type) { case 'exercises': JumpPosition(data) - break; + break case 'additional': - openExaminationDialog(true,data,'option') - break; + openExaminationDialog(true, data, 'option') + break default: - break; + break } } -const openExaminationDialog = (isSHow:boolean,data:any,type:string) => { - if(examinationRef.value) { +const openExaminationDialog = (isSHow: boolean, data: any, type: string) => { + if (examinationRef.value) { examinationRef.value.handleExaminationDialog(isSHow) examinationData.type = type examinationData.info = data } - } // 閫変腑鑿滃崟 @@ -2479,6 +2782,7 @@ const siweiVisble = ref(false) const modelToolVisble = ref(false) const shengciVisble = ref(false) +const calculatorVisble = ref(false) const activeTool = ref(0) const toolState = reactive({ open: true @@ -2507,6 +2811,10 @@ case '鐢熻瘝鍗$墖': resourceUrl.value = bookConfig.value.resourceUrl shengciVisble.value = true + break + case '璁$畻鍣�': + calculatorVisble.value = true + break } } else { ElMessageBox.confirm('璇峰厛鐧诲綍锛�', { @@ -2516,7 +2824,13 @@ type: 'warning' }) .then(() => { - router.push('/login') + if (sessionStorage.getItem('loginCtx')) { + window.open(sessionStorage.getItem('loginCtx')) + } else { + router.replace({ + path: '/login' + }) + } }) .catch(() => {}) } @@ -2755,7 +3069,13 @@ type: 'warning' }) .then(() => { - router.push('/login') + if (sessionStorage.getItem('loginCtx')) { + window.open(sessionStorage.getItem('loginCtx')) + } else { + router.replace({ + path: '/login' + }) + } }) .catch(() => {}) } @@ -2795,7 +3115,13 @@ type: 'warning' }) .then(() => { - router.push('/login') + if (sessionStorage.getItem('loginCtx')) { + window.open(sessionStorage.getItem('loginCtx')) + } else { + router.replace({ + path: '/login' + }) + } }) .catch(() => {}) } @@ -2869,7 +3195,13 @@ type: 'warning' }) .then(() => { - router.push('/login') + if (sessionStorage.getItem('loginCtx')) { + window.open(sessionStorage.getItem('loginCtx')) + } else { + router.replace({ + path: '/login' + }) + } }) .catch(() => {}) } @@ -2974,7 +3306,13 @@ type: 'warning' }) .then(() => { - router.push('/login') + if (sessionStorage.getItem('loginCtx')) { + window.open(sessionStorage.getItem('loginCtx')) + } else { + router.replace({ + path: '/login' + }) + } }) .catch(() => {}) } @@ -3175,7 +3513,13 @@ type: 'warning' }) .then(() => { - router.push('/login') + if (sessionStorage.getItem('loginCtx')) { + window.open(sessionStorage.getItem('loginCtx')) + } else { + router.replace({ + path: '/login' + }) + } }) .catch(() => { showToolBox.value = false @@ -3275,7 +3619,13 @@ type: 'warning' }) .then(() => { - router.push('/login') + if (sessionStorage.getItem('loginCtx')) { + window.open(sessionStorage.getItem('loginCtx')) + } else { + router.replace({ + path: '/login' + }) + } }) .catch(() => {}) } @@ -3359,7 +3709,13 @@ type: 'warning' }) .then(() => { - router.push('/login') + if (sessionStorage.getItem('loginCtx')) { + window.open(sessionStorage.getItem('loginCtx')) + } else { + router.replace({ + path: '/login' + }) + } }) .catch(() => {}) } @@ -3440,7 +3796,13 @@ type: 'warning' }) .then(() => { - router.push('/login') + if (sessionStorage.getItem('loginCtx')) { + window.open(sessionStorage.getItem('loginCtx')) + } else { + router.replace({ + path: '/login' + }) + } }) .catch(() => {}) } @@ -3720,11 +4082,25 @@ const layoutBtn = () => { localStorage.removeItem('token') localStorage.removeItem('userInfo') - router.push('/login') + // router.push('/login') + if (sessionStorage.getItem('loginCtx')) { + window.open(sessionStorage.getItem('loginCtx')) + } else { + router.replace({ + path: '/login' + }) + } } const goLogin = () => { localStorage.removeItem('userInfo') - router.push('/login') + // router.push('/login') + if (sessionStorage.getItem('loginCtx')) { + window.open(sessionStorage.getItem('loginCtx')) + } else { + router.replace({ + path: '/login' + }) + } } </script> @@ -3833,6 +4209,7 @@ } } .menuContent { + // position: relative; width: 300px; flex-shrink: 0; height: calc(100vh - 48px); @@ -4252,6 +4629,29 @@ .screenshotList { height: calc(100% - 60px); overflow-y: auto; + } + .questionList { + height: 83%; + } + .question-bottom { + position: absolute; + bottom: 0; + display: flex; + justify-content: space-evenly; + width: 300px; + padding: 20px 0; + background-color: #fff; + li { + cursor: pointer; + width: 65px; + height: 65px; + border: 1px solid #cfcfcf; + border-radius: 10px; + background-color: #f9f9f9; + display: flex; + justify-content: center; + align-items: center; + } } } .menuStateBox { @@ -4818,4 +5218,9 @@ width: 100%; } } +.voice-reader { + position: absolute; + bottom: 30px; + left: 50px; +} </style> -- Gitblit v1.9.1