src/books/preschoolGameGuidance/Fonts/FZHTJW.ttfBinary files differ
src/books/preschoolGameGuidance/Fonts/FZLTXIHJW.ttfBinary files differ
src/books/preschoolGameGuidance/Fonts/FZLTZHJW.ttfBinary files differ
src/books/preschoolGameGuidance/css/default.less
New file @@ -0,0 +1,999 @@ ul { list-style-type:none; } li { list-style-type:none; } @font-face{ font-family:'FZLTZHJW'; src:url('Fonts/FZLTZHJW.ttf'); } @font-face{ font-family:'FZLTXIHJW'; src:url('Fonts/FZLTXIHJW.ttf'); } @font-face{ font-family:'FZHTJW'; src:url('Fonts/FZHTJW.ttf'); } .custom_tag2{ background-color:#F1BE49; color: #FFFFFF; display: inline-block; padding:0.5px; border-radius:1.5em; font-size: 1.1em; padding: 2px 10px 2px 10px; font-weight: bold; margin: 0; text-indent: 0em; margin-bottom:0.5em; } .custom_tag1{ background-color:#35ACD6; color: #FFFFFF; display: inline-block; padding:1px; font-size: 1.1em; padding: 3px 10px 3px 10px; font-weight: bold; box-shadow: 15px 0px 0px 0px #F5D83E, -15px 0px 0px 0px #F5D83E; margin: 0; text-indent: 0em; margin-bottom:0.5em; } .custom_tag{ background-color:#35509F; color: #FFFFFF; display: inline-block; padding:1px; border-radius:1.5em; font-size: 1.1em; padding: 10px 20px 10px 20px; font-weight: bold; box-shadow: 30px 0px 0px 0px #F5D83E; margin: 0; text-indent: 0em; margin-bottom:0.5em; } span.under1{ border-bottom:2px solid #F0BD4A; border-width: 2px; } div.bodycontent-div-center { font-family: "DK-HEITI", "方正兰亭黑简体", "黑体"; margin: 1em 1em 1em 1em; font-weight: normal; border-width: 1.5px; border-color: #dfb27d; padding: 1em; } img.bodycontent-divcenter-image { float:center; clear:both;height:140px; margin: 15px; } .module_block{ display: flex; font-size: 1.1em; position: relative; padding-left: 90px; justify-content: center; align-items: center; margin-right:91px; } .module_block .custom1{ background-color:#9ACC77; padding: 10px 20px; color: #FFFFFF; /* position: absolute; */ /* left:0; */ /* top: 50%; */ border-radius:0.5em 0em 0em 0.5em; /* transform: translateY(-50%); */ } .module_block .custom2{ background-color:#E9F3E0; padding: 10px 20px; color: #75A64E; font-weight: bold; border-radius:0em 0.5em 0.5em 0em; } div.bodycontent-div-left1 { font-family: "DK-HEITI", "方正兰亭黑简体", "黑体"; margin: 1em 1em 1em 1em; font-weight: normal; border-width: 1.5px; border-color: #dfb27d; padding: 1em; background-color: #F0F8FF; } div.bodycontent-div-left { font-family: "DK-HEITI", "方正兰亭黑简体", "黑体"; margin: 1em 1em 1em 1em; font-weight: normal; border-width: 1.5px; border-color: #dfb27d; padding: 1em; } img.bodycontent-divright-image { float:right; clear:both;height:140px; margin: 15px; } img.bodycontent-divleft-image { float:left; clear:both;height:110px; margin: 15px; } div.bodystyle { font-family:'FZLTXIHJW'; font-size: 18px; text-align: justify; margin:10%; line-height:30px; } span.zt-0 { color:#0087AF; } p.pzt-0 { color:#0087AF; font-size:18px; } p.pzt-0-right { font-size:18px; color:#0087AF; text-align:right; } p.pzt-1 { font-weight: bold; color:#0087AF; font-size:18px; } div.sgc-toc-title { font-size: 2em; font-weight: bold; margin-bottom: 1em; text-align: center; } div.sgc-toc-level-1 { margin-left: 0em; } div.sgc-toc-level-2 { margin-left: 2em; } div.sgc-toc-level-3 { margin-left: 2em; } div.sgc-toc-level-4 { margin-left: 2em; } div.sgc-toc-level-5 { margin-left: 2em; } div.sgc-toc-level-6 { margin-left: 2em; } .imz{ width:100%; text-align:center; } .note{ font-size: 0.85em; } .block { color:#00ADEF; } .block1 { text-align: center; } .img{ font-weight: bold; font-family:'FZLTXIHJW'; text-align: center; font-size:0.85em; margin-left: 0%; margin-right: 0%; text-indent: 0em; } .img1{ font-family:'FZLTXIHJW'; text-align: right; font-size:0.85em; margin-left: 0%; margin-right: 2em; text-indent: 0em; } p { margin-top: 1em; text-indent:2em; line-height:30px; font-size: 18px; text-align:justify; font-family:'msyh'; } .cover { width:100%; padding:0px; } .center { text-align: center; margin-left: 0%; margin-right: 0%; text-indent:0em; } .center-ss { text-align: center; color:#EF8472; font-weight: bold; margin-left: 0%; margin-right: 0%; text-indent:0em; } .left { text-indent: 0em; margin-left: 0%; margin-right: 0%; } .left2 { font-size:1.3em; text-indent: 0em; font-weight: bold; margin-left: 0%; margin-right: 0%; } .right { text-align: right; margin-left: 0%; margin-right: 0%; } .left1 { text-indent:0em; margin-left:0%; margin-right:0%; } .center1 { text-align:center; margin-left:0%; margin-right:0%; font-size:1.2em; text-indent:0em; font-weight:bold; } .right1 { text-align:right; margin-left:0%; margin-right:0%; } .quote { margin-top: 0%; margin-bottom: 0%; margin-left: 1em; margin-right: 1em; text-align: justify; font-family:"cnepub", serif; } h1 { font-family:'FZLTZHJW'; color:#01AFEE; font-weight:bold; font-size:1.8em; text-align:center; margin-bottom:1em; margin-top:1em; text-indent:0em; } .h1-zt{ font-family:'FZLTZHJW'; line-height:2em; color:#01AFEE; font-weight:bold; font-size:1.9em; margin-bottom:1em; margin-top:-0.5em; text-indent:0em; } .h1-bk{ box-shadow:0em 0.1em 0em 0em #C3C2C0; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:none; padding:0.1em 0.8em 0.1em 0.5em; font-weight:bold; color: #000000; margin-bottom:1em; margin-top:1em; } .front { font-family:'FZLTZHJW'; font-weight:bold; font-size:1.8em; color:#00ADEF; margin-top: 0.5em; margin-bottom:0.5em; text-indent:0em; text-align:center; } .zt-2{ font-size:1.3em; font-weight:bold; background-color:#6DCFF6; border:1px solid #00ADF2; } .zt-4{ font-family:'FZLTZHJW'; color:#01AFEE; font-size:1.8em; color:#00ADEF; margin-top: 0.5em; margin-bottom:0.5em; text-indent:0em; text-align:right; } .zt-3{ font-size:1.3em; font-weight:bold; border:1px solid #00ADF2; } .left1{ text-indent:3em; } h2 { font-family:'FZHTJW'; color:#00ADEF; font-weight:bold; text-align:center; font-size:1.6em; margin-bottom:0em; margin-top:1.5em; text-indent:2em; } .h2-zt{ font-family:'FZHTJW'; color:#00ADEF; font-weight:bold; font-size:1.4em; margin-bottom:1em; margin-top:0em; text-indent:2.2em; } h3 { font-family:'FZHTJW'; color:#03AFED; font-weight:bold; font-size:1.3em; margin-bottom:1em; margin-top:1em; text-indent:0em; } h4 { font-family:'FZHTJW'; font-weight:bold; color:#03AFED; margin-bottom:0.5em; margin-top:1em; font-size:1.2em; text-indent:1em; } h5 { font-family:'FZHTJW'; color:#03AFED; margin-bottom:0.5em; margin-top:1em; font-size:1.15em; text-indent:2em; } h6 { font-family:'FZHTJW'; color:#00ADEF; margin-bottom:0.5em; margin-top:1em; font-size:1.2em; text-indent:0em; border-bottom:2px solid #00ADEF; } .h6-zt{ margin-bottom:0em; margin-top:-5em; margin-left:0em; } .bb { font-family:"cnepub", serif; font-family:'FZHTJW'; color: #66CCCC; font-size:1.1em; margin-top:10px; text-indent:2em; margin-bottom:10px; border-bottom:5px dotted #F4C388; margin-left:2em; margin-bottom:0.5em; text-indent:0em; } .u { text-decoration: underline; } .img-0{ width:100%; } .img-a{ width:95%; } .img-b{ width:70%; } .img-c{ width:60%; } .img-d{ width:50%; } .img-e{ width:45%; } .img-f{ width:40%; } .img-g{ width:30%; } .img-h{ width:20%; } .img-i{ width:10%; } .img-j{ width:5%; } .img-zt{ height:6em; margin-top:-1.5em; margin-bottom:-0.4em; margin-left:15%; } .inline{ height:2.5em; margin-bottom:-0.3em; } .inline0{ height:3em; } .inline0-1{ height:2em; } .inline1{ height:2.2em; margin-top:0.5em; margin-bottom:-0.5em; } .inline2{ height:2.3em; } .img-qj{ height:7.5em; margin-bottom:-3.4em; margin-right:0.5em; } .bk-bwh{ background-color:#DFEBF7; font-size:1.2em; padding:25px; border:4px dotted #197ABF; } div.bj{ margin-bottom:0em; margin-top:-0.5em; margin-left:-2.8em; } .un1{ border-bottom:2px solid #00ADEF; } .zt-1{ font-weight: bold; font-size:1.2em; text-indent:0em; } .zt-ls1{ color:#00ADEF; font-weight: bold; font-size:1.2em; text-indent:0em; } .zt-ls2{ color:#00ADEF; font-weight: bold; text-align:center; text-indent:0em; } .zt-ls{ color:#00ADEF; text-indent:0em; font-weight: bold; } span.lsyq-1{ background-color:#0082D4; padding:0.2em 0.4em 0.2em 0.4em; border-radius:1.2em; margin-right:0.5em; color:#FFFFFF; font-weight: bold; font-size:1.3em; } span.hsyq-1 { background-color:#FFB7D4; padding:0.2em 0.4em 0.2em 0.4em; border-radius:1.2em; margin-right:0.5em; color:#FFFFFF; font-weight: bold; font-size:1.3em; } .zt-hs1{ font-weight: bold; color:#F0855B; font-size:1.2em; } .h1-zt1{ padding:5px 25px 5px 25px; border-radius:10px 0px 0px 10px; background-color:#5392C7; font-size:1.2em; color:#FFFFFF; } .h1-zt2{ padding:10px; background-color:#B1DDE0; margin-right:2em; color:#FFFFFF; padding:5px 50px 5px 25px; border-radius:0px 5px 80px 0px; font-size:1.2em; } div.bk{ border:2px solid #00ADEF; padding:3px 10px 3px 10px; margin-top:2em; border-radius:1.5em; margin-bottom:1em; } div.bk1{ margin-top:-2em; margin-bottom:1.5em; margin-left:-0.5em; } div.bk-1{ margin-top:-3em; margin-bottom:1.5em; margin-left:-2.5em; } div.bk2{ background:#8DD8F8; border:2px solid #00ADEF; padding:3px 10px 3px 10px; margin-top:2em; margin-bottom:1em; } div.bk3{ border:2px solid #00ADEF; border-radius:1.5em; padding:3px 10px 3px 10px; margin-top:2em; margin-bottom:1em; } p.bj1-qjms{ background-color:#5392C7; color:#FFFFFF; display:inline-block; font-size:1em; padding:0.1em 0.7em 0.12em 0.7em; font-weight:bold; border-radius:1.5em; margin-left:0em; text-align:center; text-indent:0em; position:absolute; top:-2em; } span.bj1{ background-color:#00ADEF; padding:0.2em 1em 0.2em 1em; font-size:1em; font-weight: bold; color:#FFFFFF; } div.tp{ margin-bottom:0.2em; margin-top:-3em; margin-left:5.5em; } div.tp-1{ margin-bottom:0.2em; margin-top:-2.7em; margin-left:6.9em; } div.tp-2{ margin-bottom:0.2em; margin-top:-2.8em; margin-left:17.2em; } div.tp-3{ margin-bottom:0.2em; margin-top:-2.9em; margin-left:6em; } div.tp-4{ margin-bottom:0.2em; margin-top:-2.9em; margin-left:5em; } div.tp-5{ margin-bottom:0.2em; margin-top:-2.9em; margin-left:4em; } div.tp-6{ margin-bottom:0.2em; margin-top:-2.7em; margin-left:5em; } div.tp-7{ margin-bottom:0.2em; margin-top:-2.8em; margin-left:6em; } div.tp-8{ margin-bottom:0.2em; margin-top:-2.9em; margin-left:-1.2em; } div.tp-9{ margin-bottom:0.2em; margin-top:-2.9em; margin-left:-2.2em; } div.tp-10{ margin-bottom:0.2em; margin-top:-2.9em; margin-left:-1.8em; } .rwmb-1{ height:1.6em; } .rwmb-4{ height:2em; } .rwmb-5{ height:2em; } .rwmb-2{ height:2em; } .rwmb-3{ height:2em; } .rwmb-6{ height:2em; } span.bj2{ background-color:#00ADEF; padding:0.2em 1.5em 0.2em 1em; font-size:1.1em; font-weight: bold; text-indent:0em; color:#FFFFFF; border-radius:1.5em; } span.bj3{ background-color:#00ADEF; padding:0.2em 1.5em 0.2em 1em; font-size:1.1em; font-weight: bold; margin-left:-0.8em; color:#FFFFFF; border-radius:1.5em; } span.bj4{ background-color:#6DCFF6; padding:0.2em 1.5em 0.2em 1em; box-shadow: 0.2em 0.2em 0px 0px #00ADEF; font-size:1.1em; font-weight: bold; margin-left:0em; border-radius:1.5em; } div.bj1{ background-color:#AAE0FA; padding:0.2em 0.5em 0.2em 0.5em; border-radius:1em; margin-bottom:0.5em; margin-left:-0.6em; margin-right:-0.6em; margin-top:0.5em; } div.bj2-1{ background-color:#9ADBF9; padding:0.1px 0.5px 0.1px 0.5px; border-radius:1.5em; margin-bottom:0.2em; margin-left:-0.6em; margin-right:-0.6em; margin-top:-1.4em; } div.bj3{ background-color:#C7EAFD; padding:0.8em 1.8em 0.5em 0.1em; border-radius:1.5em; margin-bottom:0.2em; margin-left:-0.6em; margin-right:-0.6em; margin-top:-1.4em; } span.bj3-xyx{ background-color:#92B03E; color:#FFFFFF; border-radius:1.5em; padding:5px 20px 5px 20px; font-size:1em; font-weight: bold; } .ts-1{ font-weight: bold; } .zt-h4{ background-color:#F0BD40; padding:10px; color:#FFFFFF; margin-left:-2em; border-radius:1.5em; } .qyls-h4{ font-family: "HiFont Hei GB"; color:#6CB26C; font-weight: bold; padding:0.2em; text-indent: 0em; margin-left: 0%; } span.bj4-xyx{ background-color:#FA9D1A; color:#FFFFFF; border-radius:1.5em; padding:5px 20px 5px 20px; font-size:1em; font-weight: bold; } .bj5{ background-color:#CFCBDC; padding:20px; border-radius:1em; margin-bottom:1em; margin-top:2.5em; } span.bj5-xyx{ background-color:#FFFFFF; color:#7D719F; border-radius:0.5em 0.5em 0em 0em; padding:5px 20px 5px 20px; font-size:1em; font-weight: bold; } div.bj5-xyx{ margin-top:-4em; margin-bottom:1.5em; margin-left:-1.5em; } div.bj6{ margin-top:1.6em; margin-bottom:-2.2em; margin-left:-1.3em; } span.bj6-xyx{ background-color:#7B72A1; border-radius:0.5em 0.5em 0em 0em; padding:10px 20px 10px 20px; font-size:1em; font-weight: bold; } .zt-lvs1{ color:#95B321; } .zt-cs{ color:#FCA01B; } .zysx{ margin-top:-2.2em; margin-left:-2em; } .zt-zysx{ font-family: "DK-HEITI", "方正兰亭黑简体", "黑体"; background-color:#24b8bc; border-radius:1.5em; color:#FFFFFF; font-weight: bold; padding:4px; font-size:1.2em; box-shadow: 0.2em 0.2em 0px 0px #c1e3e4; } .zt-zysx1{ font-family: "DK-HEITI", "方正兰亭黑简体", "黑体"; background-color:#96A7D5; border-radius:1.5em; color:#FFFFFF; font-weight: bold; padding:6px; font-size:1.2em; } .zt-zysx2{ font-family: "DK-HEITI", "方正兰亭黑简体", "黑体"; background-color:#0071BD; font-size:1.2em; }
New file @@ -0,0 +1,28 @@ const testData = { 2: { 15: [66984, 66985, 66986], }, 3: { 29: [67015, 67016, 67017, 67018, 67019, 67020, 67021], }, 4: { 54: [67022, 67023, 67024, 67025, 67026, 67027, 67028, 67029, 67030], }, 5: { 70: [67031, 67032, 67033, 67034, 67035, 67036, 67037, 67038, 67039], }, 6: { 99: [67040, 67041, 67042, 67043, 67044, 67045, 67046, 67047], }, 7: { 113: [67048, 67049, 67050, 67051, 67052, 67053, 67054, 67055], }, 8: { 136: [67056, 67057, 67058, 67059, 67060, 67061], }, 9: { 146: [67062, 67063, 67064, 67065, 67066, 67067], }, }; export default testData; src/books/preschoolGameGuidance/js/tool.js
New file @@ -0,0 +1,57 @@ import SparkMD5 from "spark-md5"; export function getFileMd5(file, chunkSize) { return new Promise((resolve, reject) => { let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice; let chunks = Math.ceil(file.size / chunkSize); let currentChunk = 0; let spark = new SparkMD5.ArrayBuffer(); let fileReader = new FileReader(); fileReader.onload = function (e) { spark.append(e.target.result); currentChunk++; if (currentChunk < chunks) { loadNext(); } else { const md5 = spark.end(); resolve(md5); } }; fileReader.onerror = function (e) { reject(e); }; function loadNext() { let start = currentChunk * chunkSize; let end = start + chunkSize; if (end > file.size) { end = file.size; } fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); } loadNext(); }); } // 获取不受保护的图片 export function getPublicImage(md5, width, height) { let src = null; if (md5) { src = process.env.VUE_APP_API_URL + `/file/GetPreViewImage?md5=${md5}`; } else { return ""; } if (width) src += `&width=${width}`; if (height) src += `&height=${height}`; return src; } // export function ForTable() { // const head = ["健康状况", "标志", "心理方面", "肉体方面", "社会方面"]; // return head?.map((item) => { // return `<tr>${"<th>" + item + "</th>"}</tr>`; // }); // }
src/books/preschoolGameGuidance/view/components/index.vue
New file @@ -0,0 +1,906 @@ <!-- @format --> <template> <div class="page-main" @scroll="throttledScrollHandler"> <div id="searchDomBox" style="display: none"> <div id="searchContent"></div> </div> <div class="public-sportsAndHealth" :style="{ fontSize: fontSize ? fontSize + 'px' : '16px', transform: `scale(${pageZoom ? pageZoom : 1})`, transformOrigin: 'center top', }"> <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader> <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList"></chapterOne> <!-- <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo> <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree> <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList"></chapterFour> <chapterfive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterfive> <chapterSix v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList"></chapterSix> <chapterSeven v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList"></chapterSeven> <chapterEight v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList"></chapterEight> <chapterNine v-if="showCatalogList.indexOf(10) > -1" :showPageList="loadPageList"></chapterNine> --> </div> </div> </template> <script> import Vue from 'vue' import pageHeader from './front001' import chapterOne from './chapter001.vue' // import chapterTwo from './chapter002.vue' // import chapterThree from './chapter003.vue' // import chapterFour from './chapter004.vue' // import chapterfive from './chapter005.vue' // import chapterSix from './chapter006.vue' // import chapterSeven from './chapter007.vue' // import chapterEight from './chapter008.vue' // import chapterNine from './chapter009.vue' import NoteIcon from '@/assets/images/biji.png' import _ from 'lodash' import getQuestionList from '@/assets/methods/examination' import testData from '../../js/examinationList' import Swiper from 'swiper/bundle' import 'swiper/swiper-bundle.css' import Viewer from 'viewerjs' import 'viewerjs/dist/viewer.css' export default { data() { return { catalogLength: 10, // 总章节数 showCatalogList: [], // 显示的章节 loadThreshold: 300, // 触发加载阈值 throttleThreshold: 100, // 节流阈值 previousScrollTop: 0, throttledScrollHandler: null, observer: null, loadPageObserver: null, loadPageList: [], questionDataMap: {}, renderSignMap: {}, highlightData: null, } }, computed: { fontSize() { return this.$store.state.qiankun.fontSize }, pageZoom() { return this.$store.state.qiankun.scale / 100 }, }, watch: { showCatalogList: { handler(newVal, oldVal) { if ( this.$store.state.qiankun && this.$store.state.qiankun.catalogChange ) { // 调用父层方法 this.$store.state.qiankun.catalogChange({ showCatalogList: newVal, }) } // 启动页码观察 setTimeout(() => { this.initObservation() this.initThemeColor() }, 500) }, }, loadPageList: { handler(newVal, oldVal) { setTimeout(() => { this.initSwiper() this.initViewer() // this.readText() }, 200) }, }, pageZoom: { handler(newVal, oldVal) { const scrollBox = ( this.container ? this.container : document ).querySelector('.page-main') scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal }, }, }, mounted() { // 默认加载章节 this.showCatalogList = [1] // 滚动监听节流 this.throttledScrollHandler = _.throttle( this.scrollFun, this.throttleThreshold, { leading: true, trailing: false } ) // 定义子层方法 if (this.setGlobalState) { // 提供页面跳转功能 this.setGlobalState({ gotoPage: (catalog, page) => { this.gotoPage(catalog, page) }, // 渲染笔记、高亮、划线 renderSign: (type, data) => { // 因为调整为页面懒加载，所以渲染标记也需要按照页面进行处理，先储存数据，页面加载完成再渲染对应的标记； this.handelSignData(type, data) // this.renderSign(type, data); }, // 删除笔记、高亮、划线 delSign: (data) => { this.delSign(data) }, // 全文检索 searchBookByKeyword: (keyword) => { return this.searchTextByPage(keyword) }, // 跳转检索结果位置 jumpSearchItem: (data) => { this.searchItemLocation(data) }, }) } // 创建一个新的 Intersection Observer 实例，用于观察目标元素和执行相应的回调函数。 // new IntersectionObserver(callback, options)：使用之前定义的 callback 回调函数和 options 配置选项来初始化 Intersection Observer 实例。 this.observer = new IntersectionObserver(this.pageChangeCallback, { root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。 rootMargin: '0px', // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合 threshold: 0.5, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。 }) this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, { root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。 rootMargin: '0px', // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合 threshold: 0, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。 }) // 启动页码观察 setTimeout(() => { this.initObservation() this.initThemeColor() }, 500) // 测试页面跳转 // setTimeout(() => { // this.gotoPage(1, 41) // setTimeout(() => { // this.renderSign("Highlight", { // id: "2ACA9359", // txt: "题一学习主题一 运动", // page: "10", // type: "Highlight", // color: "#F5E12A" // }); // setTimeout(() => { // this.delSign({ // ids: ["2ACA9359"] // }); // }, 2000); //}, 5000); // const pageDom = (this.container ? this.container : document) // .querySelector("#app") // .querySelectorAll(".page-box"); // 检索 // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage"); // 检索跳转 // this.searchItemLocation({ // catalog: 2, // page: 10, // txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ", // txtIndex: 57 // }); // }, 500) }, methods: { swdtChange(data) { console.log('子应用pdf', data) if (this.$store.state.qiankun && this.$store.state.qiankun.openPDF) { if (data.type == 'pdf') { this.$store.state.qiankun.openPDF({ data: data.data, }) } else { this.$store.state.qiankun.chooseWords({ type: data.type, data: data.data, }) } } }, changeDomViewer() { this.initViewer() }, // setZoom1() { // let scale = this.$store.state.qiankun.scale + 10; // const scrollBox = ( // this.container ? this.container : document // ).querySelector(".page-main"); // this.$store.commit("setZoom", scale); // }, // setZoom2() { // let scale = this.$store.state.qiankun.scale - 10; // const scrollBox = ( // this.container ? this.container : document // ).querySelector(".page-main"); // this.$store.commit("setZoom", scale); // }, // 滚动监听 scrollFun(event) { // 判断向上滚动还是向下滚动 if (event.target.scrollTop > this.previousScrollTop) { // 向下 const currentScrollTop = event.target.scrollTop + event.target.offsetHeight if ( currentScrollTop >= event.target.scrollHeight - this.loadThreshold ) { // 到达阈值 if ( this.showCatalogList[this.showCatalogList.length - 1] < this.catalogLength ) { // 加载下一章 this.showCatalogList.push( this.showCatalogList[this.showCatalogList.length - 1] + 1 ) if (this.showCatalogList.length > 3) { // 超过三章隐藏顶部一章 this.showCatalogList.shift() } } } } else if (event.target.scrollTop < this.previousScrollTop) { // 向上 const currentScrollTop = event.target.scrollTop if (currentScrollTop <= this.loadThreshold) { // 到达阈值 if (this.showCatalogList[0] > 0) { // 加载上一章 this.showCatalogList.unshift(this.showCatalogList[0] - 1) if (this.showCatalogList.length > 3) { // 超过三章隐藏底部一章 this.showCatalogList.pop() } } } } // showCatalogList 当前显示的三个章节，watch监听传递给主应用 // 更新上一次滚动的位置 this.previousScrollTop = event.target.scrollTop }, // 章节、页面跳转 gotoPage(catalog, page) { if (catalog >= 0 && catalog <= this.catalogLength) { // 处理渲染章节 if (catalog == 0) { this.showCatalogList = [0, 1] } else if (catalog == this.catalogLength) { this.showCatalogList = [ this.catalogLength - 2, this.catalogLength - 1, this.catalogLength, ] } else { this.showCatalogList = [catalog - 1, catalog, catalog + 1] } setTimeout(() => { // 跳转页码 const pageDom = ( this.container ? this.container : document ).querySelector(`[page="${page}"]`) if (pageDom) { pageDom.scrollIntoView() } else { console.log('页码错误！') } }, 500) } else { console.log('章节错误！') } }, // 处理标记数据 handelSignData(type, data) { if (this.loadPageList.indexOf(Number(data.page)) > -1) { // 立即渲染 this.renderSign(type, data) } // 储存数据 if (!this.renderSignMap[type]) this.renderSignMap[type] = {} if (!this.renderSignMap[type][data.page]) this.renderSignMap[type][data.page] = [] this.renderSignMap[type][data.page].push(data) }, // 渲染标记 renderSign(type, data) { // 父层设置禁止渲染标记时不再进行渲染 if (this.$store.state.qiankun.disableSign) { return false } const existence = ( this.container ? this.container : document ).querySelector(`[dataid="${data.id}"]`) // 去重 if (!existence) { const pageDom = ( this.container ? this.container : document ).querySelector(`[page="${data.page}"]`) // 创建 createTreeWalker 迭代器，用于遍历文本节点，保存到一个数组 const treeWalker = document.createTreeWalker( pageDom, NodeFilter.SHOW_TEXT ) const allTextNodes = [] let currentNode = treeWalker.nextNode() while (currentNode) { allTextNodes.push(currentNode) currentNode = treeWalker.nextNode() } for (let i = 0; i < allTextNodes.length; i++) { const textDom = allTextNodes[i] if (textDom.textContent.indexOf(data.txt) > -1) { let reg = new RegExp(`${data.txt}`, 'ig') switch (type) { case 'Highlight': // 高亮 textDom.parentNode.innerHTML = textDom.parentNode.innerHTML.replace( reg, `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>` ) break case 'Dashing': // 划线 textDom.parentNode.innerHTML = textDom.parentNode.innerHTML.replace( reg, `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>` ) break case 'Note': // 笔记 textDom.parentNode.innerHTML = textDom.parentNode.innerHTML.replace( reg, `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>` ) break } } } } }, // 删除标记渲染 delSign({ ids, type }) { if (ids && ids.length) { for (let i = 0; i < ids.length; i++) { const id = ids[i] const dom = ( this.container ? this.container : document ).querySelector(`[dataid="${id}"]`) dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace( dom.outerHTML, dom.outerText ) } } if (type) { const doms = ( this.container ? this.container : document ).querySelectorAll(`[datatype="${type}"]`) for (let i = 0; i < doms.length; i++) { const dom = doms[i] dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace( dom.outerHTML, dom.outerText ) } } }, initObservation() { const sections = ( this.container ? this.container : document ).querySelectorAll('.page-box') sections.forEach((section) => { if (this.config.activeBook && this.config.activeBook.tryPageCount) { const page = section.getAttribute('page') if (Number(page) > this.config.activeBook.tryPageCount) { let chapterDom = this.getParentWithClass(section, 'chapter') const chapterNum = chapterDom.getAttribute('num') this.catalogLength = Number(chapterNum) - 1 section.remove() return false } } // observer 观察每个元素，以便在它们进入或离开视窗时触发回调函数。 const isObserver = section.getAttribute('observer') const isLoadObserver = section.getAttribute('loadObserver') if (!isObserver) { this.observer.observe(section) section.setAttribute('observer', '1') } if (!isLoadObserver) { this.loadPageObserver.observe(section) section.setAttribute('loadObserver', '1') } }) }, initThemeColor() { // 获取各种需要主题色的节点 const colorDom = ( this.container ? this.container : document ).querySelectorAll('.theme-color') const backgroundColorDom = ( this.container ? this.container : document ).querySelectorAll('.theme-back') const borderColorDom = ( this.container ? this.container : document ).querySelectorAll('.theme-border') // 获取配置的主题色 const bookThemeColor = this.config.activeBook && this.config.activeBook.bookThemeColor ? this.config.activeBook.bookThemeColor : null const chapterThemeColor = this.config.activeBook && this.config.activeBook.chapterThemeColor ? this.config.activeBook.chapterThemeColor : null const pageThemeColor = this.config.activeBook && this.config.activeBook.pageThemeColor ? this.config.activeBook.pageThemeColor : null colorDom.forEach((domItem) => { // 获取章节、页码 let pageDom = this.getParentWithClass(domItem, 'page-box') let chapterDom = this.getParentWithClass(domItem, 'chapter') let page, chapterNum if (pageDom) page = pageDom.getAttribute('page') if (chapterDom) chapterNum = chapterDom.getAttribute('num') // 向上匹配主题色 const themeColor = page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor if (themeColor) { domItem.style.color = themeColor } }) backgroundColorDom.forEach((domItem) => { // 获取章节、页码 let pageDom = this.getParentWithClass(domItem, 'page-box') let chapterDom = this.getParentWithClass(domItem, 'chapter') let page, chapterNum if (pageDom) page = pageDom.getAttribute('page') if (chapterDom) chapterNum = chapterDom.getAttribute('num') // 向上匹配主题色 const themeColor = page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor if (themeColor) { domItem.style.backgroundColor = themeColor } }) borderColorDom.forEach((domItem) => { // 获取章节、页码 let pageDom = this.getParentWithClass(domItem, 'page-box') let chapterDom = this.getParentWithClass(domItem, 'chapter') let page, chapterNum if (pageDom) page = pageDom.getAttribute('page') if (chapterDom) chapterNum = chapterDom.getAttribute('num') // 向上匹配主题色 const themeColor = page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor if (themeColor) { domItem.style.borderColor = themeColor } }) }, getParentWithClass(element, className) { console.log(element, className, 'element, className') while (element.parentElement) { element = element.parentElement if (element.classList.contains(className)) { return element } } }, pageChangeCallback(entries, observer) { //entries：代表观察到的目标元素的集合。 observer：代表观察者对象。 entries.forEach((entry) => { //entry.isIntersecting：检查当前目标元素是否与根元素相交。 if (entry.isIntersecting) { const target = entry.target //entry.target：获取当前目标元素 const page = target.getAttribute('page') const catalogDom = this.tool.getParentNodeByClassName( target, 'chapter' ) const catalog = catalogDom.getAttribute('num') let text = null if (target.querySelector('p')) { text = target.querySelector('p').textContent.substring(0, 50) } // 返回页码和章节信息 if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange) this.$store.state.qiankun.pageChange({ page: page, catalog: catalog, text, }) // const sections = Array.from(document.querySelectorAll(".section")); //sections：获取所有具有 .section 类名的元素，并转换为数组。 // let index = sections.findIndex((section) => section === target) + 1; //index：查找当前目标元素在 sections 数组中的索引，并加 1，用于确定当前页码。 } }) }, loadPageCallback(entries, observer) { entries.forEach(async (entry) => { if (entry.isIntersecting) { const target = entry.target const page = target.getAttribute('page') if (this.loadPageList.indexOf(Number(page)) == -1) { const catalogDom = this.tool.getParentNodeByClassName( target, 'chapter' ) // 添加页码 this.loadPageList.push(Number(page)) const catalog = catalogDom.getAttribute('num') if (!this.questionDataMap[page]) { if (testData && testData[catalog]) { if (testData[catalog][page]) { if (Array.isArray(testData[catalog][page])) { this.questionDataMap[page] = await getQuestionList( page, testData[catalog][page], this.config.activeBook ) } else { const obj = {} for (let key in testData[catalog][page]) { obj[key] = await getQuestionList( [], testData[catalog][page][key], this.config.activeBook ) } this.questionDataMap[page] = obj } } } } // 渲染这一页的标记 for (const key in this.renderSignMap) { if (this.renderSignMap[key][page]) { this.renderSignMap[key][page].forEach((item) => { this.renderSign(key, item) }) } } // 处理高亮 if (this.highlightData) { // 高亮行 setTimeout(() => { // 获取页面所有text节点 const pageTextList = document.createTreeWalker( target, NodeFilter.SHOW_TEXT ) // 匹配关键字 const allPageTextNodes = [] let currentNode = pageTextList.nextNode() while (currentNode) { allPageTextNodes.push(currentNode) currentNode = pageTextList.nextNode() } for (let i = 0; i < allPageTextNodes.length; i++) { const textDom = allPageTextNodes[i] let txtIndex = textDom.textContent.indexOf( this.highlightData.txt ) if (txtIndex > -1) { textDom.parentNode.style.transition = 'background-color 0.8s' textDom.parentNode.scrollIntoView() textDom.parentNode.style.backgroundColor = '#79bbf0' setTimeout(() => { textDom.parentNode.style.backgroundColor = '' }, 1000) } } }, 100) } if (this.loadPageList.length > 5) { // 超过5页 this.loadPageList.shift() } } } }) }, initSwiper() { const doms = ( this.container ? this.container : document ).querySelectorAll('.swiper-img') for (let i = 0; i < doms.length; i++) { const dom = doms[i] new Swiper(dom, { loop: false, // 无缝 autoplay: { //自动开始 delay: 3000, //时间间隔 disableOnInteraction: false, //*手动操作轮播图后不会暂停* }, paginationClickable: true, slidesPerView: 1, // 一组三个 spaceBetween: 30, // 间隔 // 如果需要前进后退按钮 navigation: { nextEl: dom.querySelector('.swiper-button-next'), prevEl: dom.querySelector('.swiper-button-prev'), }, // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 observer: true, observeParents: true, // // 如果需要分页器 // pagination: { // el: (this.container ? this.container : document).querySelector( // ".swiper-pagination" // ), // clickable: true // 分页器可以点击 // } }) } const pptDoms = ( this.container ? this.container : document ).querySelectorAll('.swiper_ppt') for (let i = 0; i < pptDoms.length; i++) { const dom = pptDoms[i] new Swiper(dom, { loop: false, // 无缝 autoplay: false, paginationClickable: true, slidesPerView: 1, // 一组三个 spaceBetween: 30, // 间隔 // 如果需要前进后退按钮 navigation: { nextEl: dom.querySelector('.swiper-button-next'), prevEl: dom.querySelector('.swiper-button-prev'), }, // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 observer: true, observeParents: true, on: { init: (value) => { let currentPage = value.activeIndex + 1 // 获取当前页（从1开始计数） let totalPages = value.slides.length // 获取总页数 var paginationInfoEl = dom.querySelector('.pageBox') if (paginationInfoEl) paginationInfoEl.textContent = currentPage + '/' + totalPages }, slideChange: (value) => { let currentPage = value.activeIndex + 1 // 获取当前页（从1开始计数） let totalPages = value.slides.length // 获取总页数 var paginationInfoEl = dom.querySelector('.pageBox') if (paginationInfoEl) paginationInfoEl.textContent = currentPage + '/' + totalPages }, }, }) } }, initViewer() { const doms = ( this.container ? this.container : document ).querySelectorAll('.openImgBox') for (let i = 0; i < doms.length; i++) { const dom = doms[i] new Viewer(dom, { container: this.container ? this.container.querySelector('#app') : 'body', navbar: true, // 显示导航栏 toolbar: true, // 显示工具栏 title: true, // 显示标题 }) } }, // 根据关键字全文检索 searchTextByPage(keyword) { const searchResult = [] let catalogIndex = 0 // 所有章节组件（每本书制作时单独配置） const pageData = { pageHeader, chapterOne, chapterTwo, chapterThree, chapterFour, chapterfive, chapterSix, chapterSeven, chapterEight, chapterNine // assemblyOne, // assemblyTwo, } // 遍历所有章节文件 for (const key in pageData) { catalogIndex++ let pageComponent, pageExample // 先渲染一次当前章节文件（这时页面的内容为空），获取页码信息 pageComponent = Vue.extend(pageData[key]) pageExample = new pageComponent({ propsData: { showPageList: [], questionData: {}, isSearch: true, }, }) pageExample.$mount( (this.container ? this.container : document).querySelector( '#searchContent' ) ) // 获取页码 const pageDom = (this.container ? this.container : document) .querySelector('#searchDomBox') .querySelectorAll('.page-box') const pages = [] for (let i = 0; i < pageDom.length; i++) { const pageDomItem = pageDom[i] pages.push(Number(pageDomItem.getAttribute('page'))) } // 获取页面结束，卸载销毁 pageExample.$destroy() ; (this.container ? this.container : document).querySelector( '#searchDomBox' ).innerHTML = '<div id="searchContent"></div>' // 遍历页码 if (pages.length) { for (let i = 0; i < pages.length; i++) { const pageNum = pages[i] // 动态渲染对应章节的页码 pageComponent = Vue.extend(pageData[key]) pageExample = new pageComponent({ propsData: { showPageList: [pageNum], questionData: {}, isSearch: true, }, }) pageExample.$mount( (this.container ? this.container : document).querySelector( '#searchContent' ) ) // 获取对应页面dom const thisPageDom = (this.container ? this.container : document) .querySelector('#searchDomBox') .querySelector(`[page="${pageNum}"]`) if (thisPageDom) { // 获取页面所有text节点 const pageTextList = document.createTreeWalker( thisPageDom, NodeFilter.SHOW_TEXT ) // 匹配关键字 const allPageTextNodes = [] let currentNode = pageTextList.nextNode() while (currentNode) { allPageTextNodes.push(currentNode) currentNode = pageTextList.nextNode() } for (let i = 0; i < allPageTextNodes.length; i++) { const textDom = allPageTextNodes[i] let txtIndex = textDom.textContent.indexOf(keyword) if (txtIndex > -1) { // 记录关键字所在页码、章节以及匹配到的段落 searchResult.push({ page: pageNum, catalog: catalogIndex, txt: textDom.textContent, txtIndex: txtIndex, }) } } // 结束，卸载销毁 pageExample.$destroy() ; (this.container ? this.container : document).querySelector( '#searchDomBox' ).innerHTML = '<div id="searchContent"></div>' } } } } // 输出搜索结果 console.log(searchResult) return searchResult }, // 根据检索结果跳转对应位置并高亮 searchItemLocation(data) { // 记录高亮信息 this.highlightData = data // 跳转 this.gotoPage(data.catalog, data.page, () => { }) }, // readText() { // const doms = ( // this.container ? this.container : document // ).querySelectorAll('.read-aloud') // for (let index = 0; index < doms.length; index++) { // const dom = doms[index] // let id = null // dom.addEventListener('click', (e) => { // if (e.srcElement.nodeName == 'svg') { // id = dom.getAttribute('readId') // } else if (e.srcElement.nodeName == 'g') { // const svgDom = e.srcElement.parentNode // id = svgDom.getAttribute('readId') // } else { // const svgDom = e.srcElement.parentNode.parentNode // id = svgDom.getAttribute('readId') // } // const item = ( // this.container ? this.container : document // ).querySelector('#' + id).innerText // console.log(item, 233) // }) // } // }, }, components: { pageHeader, chapterOne, // chapterTwo, // chapterThree, // chapterFour, // chapterfive, // chapterSix, // chapterSeven, // chapterEight, // chapterNine // assemblyOne, // assemblyTwo, // ChapterFour, // ChapterFive, // chapterSix, // chapterSeven, // chapterEight, // chapterNine, // chapter010, // chapter011, // chapter012, // chapter013, // chapter014, // chapter015, // chapter016, // chapter017, // chapter018, }, } </script> src/books/preschoolGameGuidance/view/index.vue
New file @@ -0,0 +1,76 @@ <template> <div class="temp-bookInnerContentSports" @mouseup="handleMouseUp"> <pageContent></pageContent> </div> </template> <script> import pageContent from "./components/index.vue"; export default { components: { pageContent, }, data() { return {}; }, mounted() { }, methods: { getParentWithClass(element, className) { while (element.parentElement) { element = element.parentElement; if (element.classList.contains(className)) { return element; } } }, handleMouseUp(e) { const selection = ( this.container ? this.container : window ).getSelection(); const txt = selection.toString(); if (selection.type != "none" && txt) { let node = selection.anchorNode.parentNode; let pageHtml = this.getParentWithClass( selection.anchorNode, "page-box" ); let chapterDom = this.getParentWithClass( selection.anchorNode, "chapter" ); let chapterNum; if (chapterDom) chapterNum = chapterDom.getAttribute("num"); if (pageHtml) { const page = pageHtml.getAttribute("page"); // 监听选中文本事件，并触发父层方法 if (this.$store.state.qiankun.windowSelection) { this.$store.state.qiankun.windowSelection({ chapterNum, txt, page, x: e.x, y: e.y, }); } } } else { if (this.$store.state.qiankun.windowSelection) { this.$store.state.qiankun.windowSelection({ chapterNum: "", txt: "", page: "", x: e.x, y: e.y, }); } } }, }, }; </script> <style lang="less"> @import "../css/default.less"; </style>
