src/App.vue
@@ -4,9 +4,7 @@ <lifeCare v-if="activeBook.name == 'lifeCare'"></lifeCare> <embedded v-if="activeBook.name == 'embedded'"></embedded> <english v-if="activeBook.name == 'english'"></english> <sportsAndHealth v-if="activeBook.name == 'sportsAndHealth'" ></sportsAndHealth> <sportsAndHealth v-if="activeBook.name == 'sportsAndHealth'"></sportsAndHealth> <artAndDance v-if="activeBook.name == 'artAndDance'"></artAndDance> <artAndDrama v-if="activeBook.name == 'artAndDrama'"></artAndDrama> <mathBook v-if="activeBook.name == 'mathBook'"></mathBook> @@ -17,10 +15,14 @@ <aviationBasicSkills v-if="activeBook.name == 'aviationBasicSkills'"></aviationBasicSkills> <aviationSafety v-if="activeBook.name == 'aviationSafety'"></aviationSafety> <aviationEtiquette v-if="activeBook.name == 'aviationEtiquette'"></aviationEtiquette> <childcareInstitutionsManagement v-if="activeBook.name == 'childcareInstitutionsManagement'"></childcareInstitutionsManagement> <childcareInstitutionsManagement v-if="activeBook.name == 'childcareInstitutionsManagement'"> </childcareInstitutionsManagement> <toddlerGameImplementation v-if="activeBook.name == 'toddlerGameImplementation'"></toddlerGameImplementation> <preschoolGameGuidance v-if="activeBook.name == 'preschoolGameGuidance'"></preschoolGameGuidance> <kindergartenLanguageActivity v-if="activeBook.name == 'kindergartenLanguageActivity'"></kindergartenLanguageActivity> <kindergartenLanguageActivity v-if="activeBook.name == 'kindergartenLanguageActivity'"> </kindergartenLanguageActivity> <aurturingAndEducationAged0to3 v-if="activeBook.name == 'aurturingAndEducationAged0to3'"> </aurturingAndEducationAged0to3> </div> </template> <script> @@ -66,6 +68,7 @@ toddlerGameImplementation: ()=> import("./books/toddlerGameImplementation/view/index.vue"), preschoolGameGuidance: ()=> import("./books/preschoolGameGuidance/view/index.vue"), kindergartenLanguageActivity: ()=> import("./books/kindergartenLanguageActivity/view/index.vue"), aurturingAndEducationAged0to3: () => import("./books/aurturingAndEducationAged0to3/view/index.vue"), }, data() { return { @@ -112,11 +115,12 @@ // toddlerGameImplementation //婴幼儿游戏活动实施 // preschoolGameGuidance //学前游戏指导 preschoolGameGuidance // kindergartenLanguageActivity // aurturingAndEducationAged0to3 //0~3岁婴幼儿抚育与教育 this.activeBook = await this.config.getBookConfig( process.env.VUE_APP_RESOURCE_CTX + (process.env.VUE_APP_ENV == "product" ? process.env.VUE_APP_BOOK_ID : "toddlerGameImplementation") : "aurturingAndEducationAged0to3") ); // this.activeBook = await this.config.getBookConfig( src/books/aurturingAndEducationAged0to3/assets/Fonts/FZHTJW.ttfBinary files differ
src/books/aurturingAndEducationAged0to3/assets/Fonts/FZLTXIHJW.ttfBinary files differ
src/books/aurturingAndEducationAged0to3/assets/Fonts/FZLTZHJW.ttfBinary files differ
src/books/aurturingAndEducationAged0to3/assets/images/0006-1.jpg
New file @@ -0,0 +1,2318 @@ .aurtuningAndEduction { width: 100%; height: 100%; // 自定义内容 .page-box { box-sizing: border-box; min-height: 1128px; margin-bottom: 20px; box-shadow: 0 3px 6px 1px #00000029; background-color: #fff; } .foreword { line-height: 10px !important; margin-top: 0; } .c-g { color: green; } .c-r { color: red; } .t-right { text-align: right; } .mr-0 { margin: 0 !important; } .mr-9 { margin-right: 9%; } .ml-9 { margin-left: 9%; } .ml-2e { margin-left: 2em; } .mt--25 { margin-top: -25px !important; } .mt-10 { margin-top: 10px !important; } .mt-20 { margin-top: 20px !important; } .mt-30 { margin-top: 30px !important; ; } .mt-50 { margin-top: 50px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-10 { margin-bottom: 10px; } .pd-5 { padding: 0 5px; } .w100 { width: 100%; } .mk-img { height: 100%; } .w90 { width: 90%; } .w80 { width: 80%; } .b0 { border: 0; } .tal-j { display: inline-block; width: 120px; text-align-last: justify; } sup { vertical-align: super; /* 保持上标对齐方式 */ font-size: smaller; // position: relative; /* 相对于正常位置调整 */ // top: -0.2em; /* 根据需要调整这个值 */ } .fz-13 { font-size: 13px !important; } .fz-14 { font-size: 14px !important; } .fz-15 { font-size: 15px !important; } .fz-16 { font-size: 16px !important; } .fz-18 { font-size: 18px !important; } .fm-kt { font-family: "kaiti"; } .img-0 { width: 100%; } .pt-10 { padding-top: 10px; } .pt-20 { padding-top: 20px; } .td-0 { text-indent: 0em !important; } .td-1 { text-indent: 1em !important; } .td-2 { text-indent: 2em !important; } .fl { display: flex; } .ju-cn { justify-content: center; } .ju-ev { justify-content: space-evenly; } .fd-c { flex-direction: column; } .fd-r { flex-direction: row-reverse; } .al-c { align-items: center; } .al-fe { align-items: flex-end; } .ac-f { align-content: flex-end; } .jc-fe { justify-content: flex-end; } .jc-c { justify-content: center; } .jc-sa { justify-content: space-around } .mr-70 { margin-right: 70px; } .mr-45 { margin-right: 45px; } .mr-10 { margin-right: 10px; } .mr-5 { margin-right: 5px; } .ma-l { margin-left: 10%; } .ta-l { text-align: left !important; } .wh-no { white-space: nowrap; } .pad-t-55 { padding-top: 55px; } .pad-l-60 { padding-left: 60px; } .mb-25 { margin-bottom: 25px; } .mb-45 { margin-bottom: 45px; } .headerImg { width: 30px; } .headerText-bc { width: 70px; color: #fff; font-size: 12px; text-align: center; background-color: #9CDCF8; border-radius: 15px; } .headerText { font-size: 12px; padding: 0 8px; color: #00AFEF; } .headerNumber { width: 110px; color: #fff; font-size: 12px; text-align: left; position: relative; padding-bottom: 5px; span { position: absolute; top: 33%; left: 25%; } } .header-left-Number { width: 50px; color: #fff; font-size: 12px; text-align: center; border-radius: 15px; position: relative; span { position: absolute; left: 56%; top: 35%; transform: translateX(-50%); } } .header-left-text { color: #00AFEF; margin-left: 8px; margin-top: 7px; font-size: 12px; } .radioClass { margin: 0 0 0 4px !important; } .task-u2-c { width: 16%; margin-bottom: 6em; margin-top: 0; border-top: 0.7em solid #F89C1C; } .task-u3-c { width: 16%; margin-bottom: 6em; margin-top: 0; border-top: 0.7em solid #0A9CAC; } .task-u4-c { width: 16%; margin-bottom: 6em; margin-top: 0; border-top: 0.7em solid #92B03D; } .task-u5-c { width: 16%; margin-bottom: 6em; margin-top: 0; border-top: 0.7em solid #0180CD; } .p-odd { padding-right: 2%; } .p-even { padding-left: 2%; } .img-float-smaller { width: 200px; float: left; height: auto; margin: auto; margin-right: 20px; } .img-float-medium { width: 250px; float: left; height: auto; margin: auto; margin-right: 20px; } .img-float { width: 310px; float: left; height: auto; margin: auto; margin-right: 20px; p { margin: 0; } } .img-float-formula { width: 310px; float: left; height: auto; margin: auto; margin-right: 20px; p { margin: 0; } } .img-rights { width: 47%; float: right; height: auto; margin: auto; margin-left: 20px; p { margin: 0; } } .references { margin-top: 140px; hr { font-weight: bold; margin-left: 0; width: 15%; } } .w430 { width: 430px; } .w395 { width: 395px; } .w365 { width: 365px; } .w300 { width: 300px; } .w290 { width: 290px; } .w280 { width: 280px; } .w270 { width: 270px; } .w260 { width: 260px; } .w250 { width: 250px; } .w230 { width: 230px; } .w220 { width: 220px; } .w210 { width: 210px; } .w200 { width: 200px; } .w190 { width: 190px; } .w180 { width: 180px; } .w170 { width: 170px; } .w160 { width: 160px; } .w150 { width: 150px; } .w140 { width: 140px; } .w135 { width: 135px; } .w130 { width: 130px; } .w120 { width: 120px; } .w115 { width: 115px; } .w40 { width: 40% !important; } .w25 { width: 25%; } .w20 { width: 20%; } .w15 { width: 15%; } .w10 { width: 10%; } .table-th-bc { color: #00AEEF; background-color: #C6EAFA; line-height: 25px; } .table-tr-bc { background-color: #E1F4FC; line-height: 25px; p { font-family: 'Times New Roman', Times, serif; font-size: 14px; } } .jc-img { margin-bottom: -5px; cursor: pointer; } .textarea-box { width: 100%; overflow: auto; word-break: break-all; resize: none; border: 1px solid #01AFEE; border-radius: 5px; background-color: rgba(255, 255, 255, 0); } .table-title-bc { background-color: #8091BC; color: #fff; line-height: 25px; } .table-textarea { font-size: 14px; font-family: "Times New Roman", "宋体"; resize: none; width: 95%; background-color: transparent; border: none; &:focus { outline: none; } } .table-input-border { width: 80%; background-color: transparent; border: 0; &:focus { outline: none; } } .table-input-border-w20 { width: 20%; background-color: transparent; border: 0; &:focus { outline: none; } } .table-input-border-w15 { width: 15%; background-color: transparent; border: 0; &:focus { outline: none; } } .table-input-border-w10 { width: 10%; background-color: transparent; border: 0; &:focus { outline: none; } } .table-input-border-w5 { width: 5%; background-color: transparent; border: 0; &:focus { outline: none; } } .input-bottom-border { width: 11%; background-color: transparent; border: 0; border-bottom: 1px solid #000; &:focus { outline: none; } } .input-bottom-border1 { width: 33%; background-color: transparent; border: 0; border-bottom: 1px solid #000; &:focus { outline: none; } } .input-bottom-border2 { width: 21.5%; background-color: transparent; border: 0; border-bottom: 1px solid #000; &:focus { outline: none; } } // 视频 .video-box-cover { border: 1px dashed #40C7F4; padding: 2% 2%; } .video-box { margin: 20px 0 20px 0; border: 2px dashed #40C7F4; padding: 2% 2%; } .video-box-left { margin: 20px 8% 20px 0; border: 1px dashed #895B2E; padding: 2% 2%; } .videoname { display: flex; justify-content: center; } .sInput { width: 60px; border: 0; outline: none; text-align: center; } .collect-btn { cursor: pointer; width: 20px; height: 20px; margin-left: 10px; margin-top: 0.3%; } .collect-btn1 { cursor: pointer; width: 10px; height: 10px; margin-left: 10px; margin-top: 0.8%; } // 续表 .continued { text-align: right; margin: 0%; } .text-rights { width: 230px; float: right; height: auto; margin: auto; margin-left: 20px; img { width: 100%; } p { margin: 0 !important; } } .pdf-text { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; p { margin: 0; margin-right: 10px; } .pdf-con { display: flex; justify-content: flex-start; align-items: center; padding: 10px 0; box-sizing: border-box; border-radius: 10px; .pdf-view { min-width: 160px; display: flex; justify-content: center; align-items: center; border: 0.15em dashed #FAAD70; margin-right: 15px; padding: 0 15px; border-radius: 5px; span { font-size: 14px; text-align: center; font-family: 'FZLTXIHJW'; display: flex; align-items: center; justify-content: flex-start; svg { fill: #FAAD70; } } span:nth-child(2) { padding-top: 5px; box-sizing: border-box; } span:hover { color: #FAAD70; cursor: pointer; text-decoration: underline; -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* 标准语法 */ } } } .pdf-con-15 { margin-top: -20px; } } div.bk-ztgs { border: 0.15em dotted #5192c6; padding: 1.5em 0.5em; margin-bottom: 2em; margin-top: 2em; border-radius: 1em; position: relative; } p.bj1-ztgs { background-color: #5192c6; color: #ffffff; display: inline-block; font-size: 1em; padding: 0.1em 0.7em 0.12em 0.7em; font-weight: bold; border-radius: 0em; margin-left: 0em; text-align: center; text-indent: 0em; position: absolute; top: -1.2em; } .link-float { width: 120px; float: left; height: auto; margin: auto; margin-top: 12px; margin-right: 20px; } .imgBox-003 { width: 100%; height: 280px; margin-bottom: 18px; } .imgBox { display: flex !important; flex-direction: column-reverse !important; position: relative !important; .img { margin: 0 !important; font-size: 14px !important; position: absolute !important; left: 50% !important; transform: translateX(-50%); bottom: -2% !important; } img { height: 80%; } } // 题目 .textarea-box { background-color: transparent; max-width: 100%; min-width: 100%; outline: none; } .textarea-box-left { background-color: transparent; margin-left: 15%; max-width: 84%; min-width: 84%; outline: none; } .textarea-box-right { background-color: transparent; margin-left: 2em; margin-right: 9%; max-width: 95%; min-width: 95%; outline: none; } .textarea-focused { border-color: #5192c6 !important; box-shadow: #5192c6 !important; } .select-border { width: 60px; border: 0; border-bottom: 1px solid #767676; &:focus { outline: none; } } .btn-border { border-radius: 6px; border-color: #5192C6; } .btn-w { cursor: pointer; font-size: 14px; border-width: 1px; width: 80px; height: 30px; background-color: #fff; &:hover { background-color: #5192C6; color: #fff; } } .inputChoice { display: flex; align-items: center; input { margin: 0 5px; cursor: pointer; } span { cursor: pointer; } } .parimary-btn { cursor: pointer; min-width: 80px; height: 30px; font-size: 14px; margin-left: 5px; background-color: #5192C6; border-color: #5192C6; border-width: 1px; color: #fff; border-radius: 6px; &:hover { background-color: #a1afc8; border-color: #a1afc8; } } .event-header-text-bc { background-color: #D4F0FE; } // 迁移 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; } .page-box:nth-child(even) .bodystyle { font-family: 'FZLTXIHJW'; text-align: justify; margin: 0 12% 0 8%; padding-bottom: 80px; line-height: 30px; hr { font-weight: 800; margin-left: 0; margin-top: 10px; margin-bottom: 10px; width: 25%; } } .page-box:nth-child(odd) .bodystyle { font-family: 'FZLTXIHJW'; text-align: justify; margin: 0 8% 0 12%; padding-bottom: 80px; line-height: 30px; hr { font-weight: 800; margin-left: 0; margin-top: 10px; margin-bottom: 10px; width: 25%; } } 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 { height: 96%; text-align: center; } .note { margin: 0; font-size: 14px; line-height: 22px; } .block { color: #00ADEF; // font-family: "kaiti"; // margin-top: 0.2em; // margin-bottom: 0.2em !important; // text-indent: 2em; // line-height: 30px; // font-size: 14px; // text-align: justify; } .block1 { color: red; text-align: center; } .block2 { text-align: center; line-height: 25px; } .block3 { line-height: 20px; } .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: 4%; } .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'; line-height: 2em; font-weight: bold; font-size: 1.6em; margin-bottom: -0.8em; 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; } h1.jz { text-align: center; text-indent: 0em; } .front { font-family: 'FZLTZHJW'; font-weight: bold; font-size: 1.1em; color: #00ADEF; margin-top: 0.2em; margin-bottom: 0.5em; padding: 10% 0 0 0; text-indent: 0em; text-align: left; } h2 { text-align: center; font-family: 'FZHTJW'; font-weight: bold; font-size: 1.6em; margin-bottom: 0em; margin-top: 1.5em; text-indent: 2em; } .h2-zt { background-color: #3C84A5; color: #FFFFFF; border-radius: 0.2em 0em 0em 0.2em; margin-bottom: 1em; margin-top: -0.5em; padding: 0.2em 0.5em 0.2em 0.5em; } .h2-zt1 { border-radius: 0em 0.2em 0.2em 0em; padding: 0.2em 0.5em 0.2em 0.5em; background-color: #316076; color: #FFFFFF; margin-bottom: 1em; margin-top: -0.8em; } h3 { font-family: 'FZHTJW'; font-weight: bold; color: #1D668F; font-size: 1.3em; border-bottom: 4px dotted #9BC3C2; margin-bottom: 1em; margin-top: 1em; text-indent: 2em; margin-left: 1em; } .h3-zt { background-color: #9BC3C2; color: #FFFFFF; border-radius: 0.2em; margin-bottom: 0em; margin-top: -0.5em; padding: 0.1em 0.2em 0.1em 0.2em; margin-left: -3.5em; } h4 { font-family: 'FZHTJW'; font-weight: bold; color: #316076; border-radius: 1.2em; background-color: #F3F3F3; margin-bottom: 0.5em; margin-top: 1em; font-size: 1.2em; text-indent: 1em; } h5 { color: #316076; font-family: 'FZHTJW'; margin-bottom: 0.5em; margin-top: 1em; font-size: 1.15em; text-indent: 2em; } .zt-h6 { font-family: 'FZHTJW'; color: #65C097; margin-bottom: 0.5em; margin-top: 1em; font-size: 1.15em; text-indent: 2em; } .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: 1.3em; margin-bottom: -0.3em; } .inline0 { height: 3em; } .inline0-1 { height: 2em; } .inline1 { height: 3em; margin-top: 0.5em; margin-bottom: -0.5em; } .inline2 { height: 2.3em; } .inline4 { height: 2em; margin-left: -2em; margin-right: 0.5em; margin-bottom: -0.6em; } .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; } .ls1 { color: #00B1F5; } .ls2 { color: #00B1F5; font-weight: bold; font-size: 1.1em; } 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; } .h2-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: 3px solid #BBBCC0; padding: 3px 10px 3px 10px; margin-top: 1em; border-radius: 1.5em; margin-bottom: 1em; } div.bk-1 { border: 3px dotted #B2B2B2; padding: 3px 10px 3px 10px; margin-top: 2em; border-radius: 1.5em; margin-bottom: 1em; } div.bk-2 { margin-top: -2em; margin-bottom: 1.5em; margin-left: -0.5em; } div.bk2 { border: 2px dashed #B2B2B2; padding: 3px 10px 3px 10px; margin-top: 3em; margin-bottom: 1.5em; } div.bk-tp { margin-top: -3em; margin-bottom: 0.5em; margin-left: -2.7em; } div.bk-tp1 { margin-top: -2.8em; margin-bottom: 0.5em; margin-left: -2.7em; } .rwmb-3 { margin-top: 0.1em; margin-bottom: 0.5em; height: 2.5em; } .rwmb-4 { margin-top: 0.1em; margin-bottom: 0.5em; height: 2.2em; } div.bk4 { border: 2px solid #00AEED; padding: 1px 10px 1px 10px; margin-top: 2em; border-radius: 1.5em; margin-bottom: 1em; } div.bk4-1 { background: #E2F4FE; padding: 1px 10px 1px 10px; margin-top: 2em; border-radius: 1.5em; margin-bottom: 1em; } p.bj1-qjms { background-color: #fff; color: #FAAD70; font-weight: bold; border-radius: 1.5em; margin-left: 0em; text-align: center; text-indent: 0em; position: absolute; top: -19px; } span.bj1 { background-color: #FDAD6E; padding: 0.2em 1em 0.2em 1em; font-size: 1.1em; font-weight: bold; color: #FFFFFF; } div.bj1 { background-color: #CCECFB; padding: 0.2em 0.5em 0.2em 0.5em; border-radius: 1em; margin-bottom: 0.2em; margin-left: -0.6em; margin-right: -0.6em; margin-top: -1.4em; } span.bj2 { background-color: #B2B2B2; padding: 0.2em 1.5em 0.2em 1em; font-size: 1.1em; font-weight: bold; text-indent: 0em; color: #FFFFFF; border-radius: 1.5em; } div.bj2 { 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; } div.bk3 { margin-top: -2em; margin-bottom: 1.5em; margin-left: -1.2em; } .ts-1 { font-weight: bold; } .zt-h4 { background-color: #F0BD40; padding: 10px; color: #FFFFFF; margin-left: -2em; border-radius: 1.5em; } .bj4 { background-color: #FFDEB5; padding: 20px; border-radius: 0.1em; margin-bottom: 2em; margin-top: 2.5em; } span.bj4-xyx { background-color: #FA9D1A; color: #FFFFFF; border-radius: 1.5em; padding: 5px 20px 5px 20px; font-size: 1em; font-weight: bold; } div.bj4-xyx { margin-top: -3em; margin-bottom: 1.5em; margin-left: -2.5em; } .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-ht { font-weight: bold; font-size: 1.2em; font-family: "HiFont Hei GB"; } .zt-1 { color: #6F84AF; font-weight: bold; font-size: 1.1em; } .zt-2 { color: red; } .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; } .rwmb-1{ margin-left:-2.4em; margin-bottom:-0.6em; margin-top:0.5em; height:3em; } div.tp-2{ margin-bottom:0.2em; margin-top:-2.8em; margin-left:6em; } div.tp-1{ margin-bottom:0.2em; margin-top:-2.8em; margin-left:5em; } .rwmb-2{ height:1.8em; } .rwmb-7{ height:1.5em; } // 迁移结束 .frontOne { font-family: "宋体"; color: #fff; margin: 0 !important; font-size: 24px; position: absolute; width: 260px; height: 50px; line-height: 50px; } .rw-bg { width: 90%; height: 90px; position: relative; color: #00B1F5; margin-bottom: 1em; } div.bj3-xyx { position: absolute; top: -15px; left: -25px; } .f-kai { font-family: "kaiti"; } .qyls-h4 { font-family: "HiFont Hei GB"; padding: 0.2em 0; text-indent: 0em; margin-left: 0%; } div.bj6-xyx { position: absolute; top: -20px; } div.bj-1 { color: #fff; border-radius: 2em; margin-bottom: 1.5em; margin-top: 1.5em; } .bj-2-zt { color: #fff; font-weight: 400; font-size: 24px; line-height: 1.8em; } .bj-1-zt { font-family: kaiti; font-weight: 100; text-indent: 2em; color: #fff; font-size: 15px; line-height: 1.8em; } .bj-3-zt { font-size: 16px; color: #fff; font-weight: 400; line-height: 1.8em; } .rwmb-5 { width: 15%; position: absolute; top: -10px; left: -2px; } .zt-ls1 { color: #000; font-size: 16px; font-weight: bold; } .title { width: 260px; height: 50px; text-align: center; margin: 0 auto; padding-top: 5%; position: relative; } } .pdfModal { width: 100%; height: 90vh; .pdfBox-component { width: 100%; height: 100%; position: relative; .preview { width: 100%; height: 100%; .imageBox { height: calc(100% - 30px); overflow-x: hidden; overflow-y: auto; background: #ccc; box-sizing: border-box; } .imageBox:hover { cursor: zoom-in !important; } ::v-deep .el-dialog__header { background-color: rgba(0, 0, 0, 0.8); .header_title { display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: 900; font-size: 16px; font-family: 'FZLTXIHJW'; span:nth-child(2):hover { cursor: pointer; } } ::v-deep .el-dialog__title, ::v-deep .el-dialog__headerbtn .el-dialog__close { color: #fff; font-weight: 900; font-size: 16px; font-family: 'FZLTXIHJW'; } } .bottom_tool { height: 30px; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: flex-end; align-items: center; svg { margin-right: 15px; fill: #d1d1d1; } svg:hover { fill: #fff; cursor: pointer; } } } .notBox { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 30px); min-height: 300px; } } } .custom-dialog { overflow: hidden !important; .el-dialog__body { padding: 0; } .el-dialog__header { background-color: rgba(0, 0, 0, 0.8); .header_title { display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: 900; font-size: 16px; font-family: 'FZLTXIHJW'; span:nth-child(2):hover { cursor: pointer; } } .el-dialog__title, .el-dialog__headerbtn .el-dialog__close { color: #fff; font-weight: 900; font-size: 16px; font-family: 'FZLTXIHJW'; } } } .header_title { display: flex; justify-content: space-between; align-items: center; // color: #fff; font-weight: 900; font-size: 16px; font-family: 'FZLTXIHJW'; span:nth-child(2):hover { cursor: pointer; } } // 隐藏页面 .hidePage { min-height: 0 !important; height: 0 !important; box-shadow: none !important; } /* 媒体查询做基础响应式布局 */ @media screen and (max-width: 1024px) { .pdfModal { width: 100%; height: 80vh; } h1 { font-size: 1.1em; } .custom-dialog { .el-dialog { width: 90vw !important; } } .span-box { display: inline-block; width: 8px; height: 8px; background-color: #FAAD70; } .span-text { font-size: 16px; font-weight: 100; padding: 0em 0.15em 0em 0.3em; } } @media screen and (max-width: 800px) { .pdfModal { width: 100%; height: 60vh; } .custom-dialog { .el-dialog { width: 90vw !important; } } } @media (max-width: 660px) { .aurtuningAndEduction { /* 分页padding */ .padding-93 { padding: 0 20px; } .padding-102 { padding: 0 20px; } .img-float { width: 130px; } .img-rights { width: 130px; } .btn-w { width: 42px; } .pad-l-60 { padding-left: 10px; } .mr-70 { margin-right: 15px; } h1 { font-size: 1.1em; } } } @media (min-width: 660px) { .aurtuningAndEduction { .padding-93 { padding: 0 93px 0px 93px; } .padding-102 { padding: 0 102px 0 102px; } } } ::-webkit-scrollbar { width: 8px; height: 10px; } ::-webkit-scrollbar-track-piece { background-color: rgba(0, 0, 0, 0.1); -webkit-border-radius: 6px; } ::-webkit-scrollbar-thumb:vertical { height: 5px; background-color: rgba(125, 125, 125, 0.3); -webkit-border-radius: 6px; } ::-webkit-scrollbar-thumb:horizontal { width: 5px; background-color: rgba(125, 125, 125, 0.3); -webkit-border-radius: 6px; } src/books/aurturingAndEducationAged0to3/view/components/header.vue
New file @@ -0,0 +1,24 @@ <template> <div class="chapter" num="1"> <div class="page-box mt-20" page="1" style="padding-bottom: 0px"> <div v-if="showPageList.indexOf(1) > -1"> <img class="img-0" alt="" src="../../assets/images/Cover.jpg" /> </div> </div> </div> </template> <script> export default { name: "pageHeader", props: { showPageList: { type: Array, }, }, data() { return {}; }, }; </script> <style lang="less" scoped></style> src/books/aurturingAndEducationAged0to3/view/components/index.vue
New file @@ -0,0 +1,1002 @@ <template> <div class="page-main" @scroll="throttledScrollHandler"> <div id="searchDomBox" style="display: none"> <div id="searchContent"></div> </div> <div class="page-content" :style="{ fontSize: fontSize + 'px', transform: `scale(${pageZoom})`, 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> --> </div> </div> </template> <script> import pageHeader from "./header.vue"; // 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 NoteIcon from "@/assets/images/biji.png"; import _ from "lodash"; import Swiper from "swiper/bundle"; import "swiper/swiper-bundle.css"; import Viewer from "viewerjs"; import "viewerjs/dist/viewer.css"; export default { name: "pageContent", data() { return { catalogLength: 1, // 总章节数 showCatalogList: [], // 显示的章节 loadThreshold: 300, // 触发加载阈值 throttleThreshold: 100, // 节流阈值 previousScrollTop: 0, throttledScrollHandler: null, observer: null, loadPageObserver: null, loadPageList: [], questionDataMap: {}, renderSignMap: {}, highlightData: null, audioPath: "", currentTime: null, videoList: [], }; }, computed: { fontSize() { this.transformDom(this.$store.state.qiankun.fontSize); return this.$store.state.qiankun.fontSize ? this.$store.state.qiankun.fontSize : 14; }, pageZoom() { return this.$store.state.qiankun.scale ? this.$store.state.qiankun.scale / 100 : 1; }, }, 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.transformDom(this.$store.state.qiankun.fontSize); this.initSwiper(); this.initViewer(); this.closeAudio(); this.closeVideo(); }, 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(2, 10); // setTimeout(() => { // this.renderSign("Highlight", { // id: "2ACA9359", // txt: "题一学习主题一 运动", // page: "10", // type: "Highlight", // color: "#F5E12A" // }); // setTimeout(() => { // this.delSign({ // ids: ["2ACA9359"] // }); // }, 2000); }, 500); // 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: { // 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) { this.handleVideoPicture(); // 判断向上滚动还是向下滚动 if (event.target.scrollTop > this.previousScrollTop) { this.getAduio(); // 向下 const currentScrollTop = event.target.scrollTop + event.target.offsetHeight; if ( currentScrollTop >= event.target.scrollHeight - this.loadThreshold ) { console.log(1); // 到达阈值 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) { this.handleAudio(); // 向上 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) { 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; // } // console.log("题目", this.questionDataMap); // } // } // } // 渲染这一页的标记 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 }; // 遍历所有章节文件 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, () => {}); }, // 页面向下滚动，音频小窗播放功能 getAduio() { let allVideo = ( this.container ? this.container : document ).querySelectorAll(".audio"); allVideo = Array.from(allVideo); this.videoList = allVideo; if (allVideo.length) { // 查找播放状态的最后一条音频 const playAudio = allVideo .reverse() .find((item) => item.paused == false); if (playAudio) { const bottomGap = playAudio.getBoundingClientRect().bottom; if (bottomGap < 0) { playAudio.pause(); this.audioPath = playAudio.src; this.currentTime = playAudio.currentTime; } } } }, // 页面向上滚动，音频小窗回收 handleAudio() { if (!this.audioPath) return false; let allVideo = ( this.container ? this.container : document ).querySelectorAll(".audio"); allVideo = Array.from(allVideo); if (allVideo.length) { //查找与小窗播放音频同源的页面audio DOM const playAudio = allVideo.find((item) => item.src == this.audioPath); if (playAudio) { const bottomGap = playAudio.getBoundingClientRect().bottom; if (bottomGap >= 0) { if (this.$refs.audioPlayer) { const playerState = this.$refs.audioPlayer.getVideoPlayer(); this.audioPath = ""; playAudio.currentTime = playerState.currentTime; if (!playerState.paused) playAudio.play(); } } } } }, // 关闭mini video closeMiniAudio() { this.audioPath = ""; }, // 点击音频播放，关闭其他音频 closeAudio() { let allAudio = ( this.container ? this.container : document ).querySelectorAll(".audio"); for (let index = 0; index < allAudio.length; index++) { const item = allAudio[index]; item.addEventListener("play", () => { const audioList = Array.from(allAudio); for (let cindex = 0; cindex < audioList.length; cindex++) { const citem = audioList[cindex]; if (citem.currentSrc != item.src) { citem.pause(); } } this.closeMiniAudio(); }); } }, // 点击视频关闭其他 closeVideo() { let allVideo = ( this.container ? this.container : document ).querySelectorAll(".video"); for (let index = 0; index < allVideo.length; index++) { const item = allVideo[index]; item.addEventListener("playing", (item) => { const path = item.srcElement.src; const videoList = Array.from(allVideo); for (let cindex = 0; cindex < videoList.length; cindex++) { const citem = videoList[cindex]; if (citem.currentSrc != path && path) { citem.pause(); } } }); } }, // 视频小窗 handleVideoPicture() { let doms = (this.container ? this.container : document).querySelectorAll( ".video" ); doms = Array.from(doms); if (!doms.length) return false; const playVudio = doms.reverse().find((item) => item.paused == false); if (playVudio) { const bottomGap = playVudio.getBoundingClientRect().bottom; const topGap = playVudio.getBoundingClientRect().top; if (bottomGap < 0 || topGap > window.innerHeight) { try { if (playVudio.readyState) playVudio.requestPictureInPicture(); } catch (error) { console.log(error, "小窗错误error"); } } } }, //其他类名下字体大小变化 transformDom(fs) { if (!fs) return; let doms = (this.container ? this.container : document).querySelectorAll( ".block" ); if (!doms.length) return; for (let index = 0; index < doms.length; index++) { const dom = doms[index]; dom.style.fontSize = fs + "px"; } }, }, components: { pageHeader, // chapterOne, // chapterTwo, // chapterThree, // chapterFour, // chapterFive, // chapterSix, // chapterSeven }, }; </script> <style lang="less" scoped> .page-main { width: 100% !important; height: 100% !important; overflow: auto; .page-content { max-width: 816px; min-width: 375px; margin: 0 auto; padding-bottom: 100px; } } </style>
New file @@ -0,0 +1,80 @@ <template> <div class="aurtuningAndEduction" @mouseup="handleMouseUp"> <pageContent></pageContent> </div> </template> <script> import pageContent from "./components/index.vue"; export default { name: "aurtuningAndEduction", components: { pageContent, }, computed: { fontSize() { return this.$store.state.qiankun.fontSize; }, pageZoom() { return this.$store.state.qiankun.scale / 100; }, }, 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 "../assets/main.less"; </style> src/books/aviationEtiquette/assets/main.less
@@ -990,7 +990,7 @@ margin: 15px; } .bodystyle:nth-of-type(odd) { .page-box:nth-child(odd) .bodystyle { font-family: 'FZLTXIHJW'; text-align: justify; margin: 0 11% 0 9%; @@ -998,7 +998,7 @@ line-height: 30px; } .bodystyle:nth-of-type(even) { .page-box:nth-child(even) .bodystyle { font-family: 'FZLTXIHJW'; text-align: justify; margin: 0 9% 0 11%; src/books/toddlerGameImplementation/assets/main.less
@@ -1107,27 +1107,34 @@ } .page-box:nth-child(odd) .bodystyle { font-family: 'FZLTXIHJW'; text-align: justify; margin: 0 11% 0 9%; padding-bottom: 80px; line-height: 30px; // hr { // font-weight: 800; // margin-left: 0; // margin-top: 10px; // margin-bottom: 10px; // width: 25%; // } } .page-box:nth-child(even) .bodystyle { font-family: 'FZLTXIHJW'; text-align: justify; margin: 0 9% 0 11%; margin: 0 12% 0 8%; padding-bottom: 80px; line-height: 30px; hr { font-weight: 800; margin-left: 0; margin-top: 10px; margin-bottom: 10px; width: 25%; } } .page-box:nth-child(odd) .bodystyle { font-family: 'FZLTXIHJW'; text-align: justify; margin: 0 8% 0 12%; padding-bottom: 80px; line-height: 30px; hr { font-weight: 800; margin-left: 0; margin-top: 10px; margin-bottom: 10px; width: 25%; } } @@ -1221,10 +1228,11 @@ .img { font-family: 'FZLTXIHJW'; text-align: center; font-size: 12px; margin: 15px 0 !important; font-size: 14px; font-weight: bold; margin: 5px 0 0 0 !important; text-indent: 0em; color: #00AFEF; color: #000; } .img1 { @@ -1369,7 +1377,7 @@ font-size: 1.6em; margin-bottom: 0em; margin-top: 0.3em; text-indent: 2em; text-indent: 3em; line-height: 1.3em; } @@ -1379,7 +1387,7 @@ font-weight: 400; font-size: 1.4em; margin-top: 0em; text-indent: 2.2em; text-indent: 3.3em; padding: 10px 0; } @@ -1555,8 +1563,8 @@ .ls2 { color: #00B1F5; font-weight: 500; font-size: 1.1em; font-weight: bold; font-size: 1em; line-height: 30px; }
@@ -37,7 +37,7 @@ <div class="bj4"> <div class="bj5"> <h2 id="b001">学习任务一</h2> <p class="h2-zt">托育机构的发展及现状</p> <p class="h2-zt">0~3岁婴幼儿发展概况</p> </div> </div> </div> @@ -1172,9 +1172,9 @@ <p>人们说起婴幼儿游戏时，有着许许多多不一样的印象。有人说：“婴幼儿的游戏就是小朋友拿着玩具摆弄两下。”也有人说：“婴幼儿的游戏他们自己就能玩，不需要成人的陪伴。”还有人甚至说：“婴幼儿玩多了游戏不好，以后学习就静不下来了，会耽误他们的时间。”有些家长觉得婴幼儿不需要过多的游戏，甚至觉得有这个游戏的时间还不如多学习一点儿知识。 </p> <p><b>想一想：</b></p> <p>1.为什么有的家长会不支持和不理解游戏？</p> <p>2.游戏对于婴幼儿的发展价值有哪些？</p> <p>3.怎样能够促使家长更多地接受婴幼儿的游戏并参与其中？</p> <p class="f-kaiti">1.为什么有的家长会不支持和不理解游戏？</p> <p class="f-kaiti">2.游戏对于婴幼儿的发展价值有哪些？</p> <p class="f-kaiti">3.怎样能够促使家长更多地接受婴幼儿的游戏并参与其中？</p> <h3 id="c011">一、婴幼儿游戏的价值</h3> <p>每个婴幼儿的童年都离不开游戏的点缀。可以说，游戏在婴幼儿的成长道路上占据了十分重要的地位。它不仅是婴幼儿生活的方式，也是婴幼儿学习知识、积累技能的主要手段，对于婴幼儿的发展价值是不言而喻的。 </p>
