src/App.vue
@@ -4,43 +4,86 @@ <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> <botany v-if="activeBook.name == 'botany'"></botany> <civilAviation v-if="activeBook.name == 'civilAviation'"></civilAviation> <civilServices v-if="activeBook.name == 'civilServices'"></civilServices> <meetingPlanners v-if="activeBook.name == 'meetingPlanners'"></meetingPlanners> <aviationBasicSkills v-if="activeBook.name == 'aviationBasicSkills'"></aviationBasicSkills> <meetingPlanners v-if="activeBook.name == 'meetingPlanners'" ></meetingPlanners> <aviationBasicSkills v-if="activeBook.name == 'aviationBasicSkills'" ></aviationBasicSkills> <aviationSafety v-if="activeBook.name == 'aviationSafety'"></aviationSafety> <aviationEtiquette v-if="activeBook.name == 'aviationEtiquette'"></aviationEtiquette> <preschoolGameGuidance v-if="activeBook.name == 'preschoolGameGuidance'"></preschoolGameGuidance> <kindergartenLanguageActivity v-if="activeBook.name == 'kindergartenLanguageActivity'"> <aviationEtiquette v-if="activeBook.name == 'aviationEtiquette'" ></aviationEtiquette> <preschoolGameGuidance v-if="activeBook.name == 'preschoolGameGuidance'" ></preschoolGameGuidance> <kindergartenLanguageActivity v-if="activeBook.name == 'kindergartenLanguageActivity'" > </kindergartenLanguageActivity> <kindergartenActivitiesDesignGuidance v-if="activeBook.name == 'kindergartenActivitiesDesignGuidance'"> <kindergartenActivitiesDesignGuidance v-if="activeBook.name == 'kindergartenActivitiesDesignGuidance'" > </kindergartenActivitiesDesignGuidance> <childcareInstitutionsManagement v-if="activeBook.name == 'childcareInstitutionsManagement'"> <childcareInstitutionsManagement v-if="activeBook.name == 'childcareInstitutionsManagement'" > </childcareInstitutionsManagement> <toddlerGameImplementation v-if="activeBook.name == 'toddlerGameImplementation'"></toddlerGameImplementation> <aurturingAndEducationAged0to3 v-if="activeBook.name == 'aurturingAndEducationAged0to3'"> <toddlerGameImplementation v-if="activeBook.name == 'toddlerGameImplementation'" ></toddlerGameImplementation> <aurturingAndEducationAged0to3 v-if="activeBook.name == 'aurturingAndEducationAged0to3'" > </aurturingAndEducationAged0to3> <preschoolEvaluation v-if="activeBook.name == 'preschoolEvaluation'"> </preschoolEvaluation> <preschoolBasicKnowledge v-if="activeBook.name == 'preschoolBasicKnowledge'"></preschoolBasicKnowledge> <behaviorObserveAndGuid v-if="activeBook.name == 'behaviorObserveAndGuid'"></behaviorObserveAndGuid> <policiesAndRegulations v-if="activeBook.name == 'policiesAndRegulations'"></policiesAndRegulations> <OralAndBroadcasting v-if="activeBook.name == 'OralAndBroadcasting'"></OralAndBroadcasting> <practicalCareChildrenManual v-if="activeBook.name == 'practicalCareChildrenManual'"></practicalCareChildrenManual> <childIllnessPreventionCare v-if="activeBook.name == 'childIllnessPreventionCare'"></childIllnessPreventionCare> <artInitiationForAges0to3 v-if="activeBook.name == 'artInitiationForAges0to3'"></artInitiationForAges0to3> <toddlerSportsSafetyProtection v-if="activeBook.name == 'toddlerSportsSafetyProtection'"> <preschoolBasicKnowledge v-if="activeBook.name == 'preschoolBasicKnowledge'" ></preschoolBasicKnowledge> <behaviorObserveAndGuid v-if="activeBook.name == 'behaviorObserveAndGuid'" ></behaviorObserveAndGuid> <policiesAndRegulations v-if="activeBook.name == 'policiesAndRegulations'" ></policiesAndRegulations> <OralAndBroadcasting v-if="activeBook.name == 'OralAndBroadcasting'" ></OralAndBroadcasting> <practicalCareChildrenManual v-if="activeBook.name == 'practicalCareChildrenManual'" ></practicalCareChildrenManual> <childIllnessPreventionCare v-if="activeBook.name == 'childIllnessPreventionCare'" ></childIllnessPreventionCare> <artInitiationForAges0to3 v-if="activeBook.name == 'artInitiationForAges0to3'" ></artInitiationForAges0to3> <toddlerSportsSafetyProtection v-if="activeBook.name == 'toddlerSportsSafetyProtection'" > </toddlerSportsSafetyProtection> <cognitiveLanDevEduAges0to3 v-if="activeBook.name == 'cognitiveLanDevEduAges0to3'"></cognitiveLanDevEduAges0to3> <aviationPassengerTransport6th v-if="activeBook.name == 'aviationPassengerTransport6th'"> <cognitiveLanDevEduAges0to3 v-if="activeBook.name == 'cognitiveLanDevEduAges0to3'" ></cognitiveLanDevEduAges0to3> <aviationPassengerTransport6th v-if="activeBook.name == 'aviationPassengerTransport6th'" > </aviationPassengerTransport6th> <hotelEnglishTrainingBrochure2nd v-if="activeBook.name == 'hotelEnglishTrainingBrochure2nd'"> <hotelEnglishTrainingBrochure2nd v-if="activeBook.name == 'hotelEnglishTrainingBrochure2nd'" > </hotelEnglishTrainingBrochure2nd> <MMVRTCMP v-if="activeBook.name == 'MMVRTCMP'"></MMVRTCMP> </div> </template> <script> @@ -119,6 +162,7 @@ import("./books/aviationPassengerTransport6th/view/index.vue"), hotelEnglishTrainingBrochure2nd: () => import("./books/hotelEnglishTrainingBrochure2nd/view/index.vue"), MMVRTCMP: () => import("./books/MMVRTCMP/view/index.vue"), }, data() { return { @@ -179,12 +223,13 @@ // cognitiveLanDevEduAges0to3 // 0～3岁婴幼儿认知与语言发展及教育 // aviationPassengerTransport6th // 民航旅客运输第6版(旅游社) // hotelEnglishTrainingBrochure2nd // 酒店英语实训活页教程（第2版）（旅游社） // MMVRTCMP // 视觉手册 // console.log("debugger", process.env); this.activeBook = await this.config.getBookConfig( process.env.VUE_APP_RESOURCE_CTX + (process.env.VUE_APP_ENV == "product" ? process.env.VUE_APP_BOOK_ID : "hotelEnglishTrainingBrochure2nd") (process.env.VUE_APP_ENV == "product" ? process.env.VUE_APP_BOOK_ID : "MMVRTCMP") ); // 测试试读30页 src/books/MMVRTCMP/css/default.less
New file @@ -0,0 +1,1047 @@ .temp-bookInnerContentSports { width: 100%; height: 100%; overflow: auto; .page-main { width: 100%; height: 100%; overflow: auto; .public-MMVRTCMP { font-family: '宋体'; max-width: 816px; min-width: 375px; margin: 0 auto; border-color: #f49a4c; height: 100%; font-size: 18px; .page-box { box-sizing: border-box; min-height: 1150px; margin-bottom: 20px; box-shadow: 0 3px 6px 1px #00000029; background-color: #fff; position: relative; z-index: 1; } .notIndent { text-indent: 0 !important; } .imgWidth { width: 430px; height: 360px; border: 3px solid rgb(114, 174, 84); margin-bottom: 50px; padding: 30px; box-sizing: border-box; border-radius: 20px; position: relative; z-index: 999; .itemImage { height: 186px; position: absolute; left: 204px; top: 122px; z-index: -1; } .itemImage2 { height: 112px; position: absolute; left: 225px; top: 147px; z-index: -1; } .itemImage3 { height: 149px; position: absolute; left: 276px; top: 112px; z-index: -1; } .itemImage4 { height: 111px; position: absolute; left: 221px; top: 153px; z-index: -1; } .itemImage5 { height: 115px; position: absolute; left: 304px; top: 71px; z-index: -1; } .itemImage6 { height: 212px; position: absolute; left: 206px; top: 76px; z-index: -1; } .itemImage7 { height: 180px; position: absolute; left: 219px; top: 81px; z-index: -1; } .itemImage8 { height: 175px; position: absolute; left: 284px; top: 52px; z-index: -1; } } .titleImage { width: 110px; height: 40px; margin: 20px 0; background-image: url(../images/tips.png); background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; justify-content: center; align-items: center; } .titleBack-2 { background-image: url(../images/tips-2.png); } .chapter { position: relative; .page-header-box { width: 70px; position: absolute; .evenBox { width: 100%; display: flex; flex-direction: column; align-items: flex-end; .vertical { width: 30px; background: #7acab4; text-align: center; } } } .videoBox { width: 100%; border: 1px solid #7acab4; display: flex; flex-direction: column; align-items: center; justify-content: center; .videoTitle { width: 100%; height: 50px; border-bottom: 1px solid #7acab4; display: flex; justify-content: flex-start; align-items: center; color: #7acab4; .iconBox { width: 100px; height: 50px; display: flex; justify-content: center; align-items: center; border-right: 1px solid #7acab4; cursor: pointer; svg { margin-right: 5px; } } .title { padding-left: 20px; } } .videoItem { width: 100%; padding: 2px; box-sizing: border-box; video { width: 100%; } } } .pdfBox { width: 100%; height: 50px; border: 1px solid #7acab4; display: flex; align-items: center; justify-content: flex-start; margin: 10px 0; color: #7acab4; .iconBox { width: 100px; height: 50px; display: flex; justify-content: center; align-items: center; border-right: 1px solid #7acab4; } .title { padding-left: 20px; cursor: pointer; &:hover { text-decoration: underline; } } } .bk-xyx { textarea { width: 100%; max-width: 630px; border: 1px solid #7acab4; border-radius: 5px; font-size: 16px; font-family: '宋体'; line-height: 30px; padding: 10px; box-sizing: border-box; } textarea:focus { outline: none; border-color: #000; } } img { max-width: 100%; } .customImg { display: flex; justify-content: space-around; align-items: center; } /* 页面背景色*/ body.bodybg-color { background-color: #77582c; } /* 垂直居中*/ div.bodystyle { font-family: '宋体'; font-size: 18px; text-align: justify; padding: 10% 12%; box-sizing: border-box; line-height: 30px; } div.bodystyle p { padding-left: 2em; } /*章标居左*/ .sub-Title-l { text-align: left; font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; margin: auto auto 1em auto; font-size: 1.1em; text-indent: 0em; color: #888888; } /*章标居右*/ .sub-Title-r { text-align: left; font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; margin: auto auto -0.5em auto; font-size: 1.1em; text-indent: 0em; color: #888888; } /*<h1>篇章页居左一级标题*/ h1.firstTitle-l { font-size: 1.6em; line-height: 1.2em; text-indent: 0em; text-align: left; color: #77582c; margin: 0.3em auto 5em auto; } /*篇章页副标题居左*/ .subHead-l { text-align: left; line-height: 1.2em; font-size: 1.1em; text-align: left; color: #6b6441; margin: -2.5em auto 2.5em auto; } /*<h1>篇章页居右一级标题*/ h1.firstTitle-r { font-size: 1.6em; line-height: 1.2em; text-indent: 0em; text-align: left; color: #77582c; margin: 0.3em auto 1.8em auto; } /*篇章页副标题居右*/ .subHead-r { font-size: 1.1em; line-height: 1.2em; text-align: left; color: #6b6441; margin: -2.5em auto 2.5em auto; } /*章文内容*/ .quotation-1 { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 1em; line-height: 1.1em; margin: 1em auto; text-indent: 2em; color: #5A5A5A; } /*<h1>一级标题*/ h1.firstTitle { font-size: 1.5em; line-height: 1.2em; text-indent: 0em; text-align: left; margin: 25% auto 2em auto; color: #77582c; } /*<h1>带副标一级标题*/ h1.firstTitle-3 { font-size: 1.5em; line-height: 1.2em; text-indent: 0em; text-align: left; margin: 25% auto 0em auto; color: #77582c; } /*<h1>带章标一级标题*/ h1.firstTitle-2 { font-size: 1.5em; line-height: 1.2em; text-indent: 0em; text-align: left; margin: 0em auto 2em auto; color: #77582c; } /*<h1>带章标及副标一级标题*/ h1.firstTitle-1 { font-size: 1.5em; line-height: 1.2em; text-indent: 0em; text-align: left; margin: 0em auto 0em auto; color: #77582c; } /*<h2>二级标题*/ h2.secondTitle { font-size: 1.35em; line-height: 1.3em; text-indent: 0em; color: #77582c; margin: 25% auto 2em auto; } /*<h2>带章标二级标题*/ h2.secondTitle-2 { width: 500px; font-size: 1.35em; line-height: 1.3em; padding: 5px; border-radius: 20px; text-indent: 0em; color: #77582c; margin: 3em 0 2em 0; background-color: #7acab4; color: #fff; text-align: center; } /*<h2>带副标二级标题*/ h2.secondTitle-3 { font-size: 1.35em; line-height: 1.3em; text-indent: 0em; color: #77582c; margin: 25% auto 0em auto; } /*<h2>带章标及副标二级标题*/ h2.secondTitle-1 { font-size: 1.35em; line-height: 1.3em; text-indent: 0em; color: #77582c; margin: 0em auto 0em auto; } /*<h3>三级标题*/ h3.thirdTitle { font-size: 1.2em; line-height: 1.3em; text-indent: 0em; margin-top: 1em; color: #77582c; } /*<h4>四级标题*/ h4.fourthTitle { font-size: 1.1em; line-height: 1.3em; text-indent: 0em; margin-top: 1em; color: #77582c; } /*<h5>五级标题*/ h5.fifthTitle { font-size: 1em; line-height: 1.3em; text-indent: 0em; margin-top: 1em; color: #77582c; } /*<h6>六级标题*/ h6.sixthTitle { font-size: 1em; line-height: 1.3em; text-indent: 0em; margin-top: 1em; color: #77582c; } /*标题作者居中*/ .author { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: center; text-indent: 0em; font-weight: bold; color: #5A5A5A; margin: -2em auto 3em auto; } /*标题作者居左*/ .author-l { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: left; text-indent: 0em; font-weight: bold; color: #5A5A5A; margin: 0em auto 3em auto; } /*副标题*/ .subHead { text-align: left; line-height: 1.2em; text-indent: 0em; font-size: 1.1em; margin: 0em auto 2.5em auto; } /*一级标题章标*/ .subHead-1 { text-align: left; line-height: 1.2em; font-size: 1.1em; text-indent: 0em; margin: 20% auto 0.3em auto; color: #888888; } /*一级标题章标*/ .subHead-2 { text-align: left; line-height: 1.2em; font-size: 1.1em; text-indent: 0em; margin: 20% auto 0.3em auto; color: #888888; } /*二级标题章标*/ .secondsubHead-1 { text-align: left; line-height: 1.1em; font-size: 1em; text-indent: 0em; margin: 20% auto 0.3em auto; color: #888888; } /*二级标题章标*/ .secondsubHead-2 { text-align: left; line-height: 1.1em; font-size: 1em; text-indent: 0em; margin: 20% auto 0.3em auto; color: #fff; background-color: #7acab4; } /*版权标题*/ .copyright-title { font-size: 1.5em; line-height: 1.2em; text-align: center; text-indent: 0em; margin: 0.5em auto 2em auto; color: #c1a173; } /*版权内容*/ .copyright-text { font-size: 1em; text-indent: 0em; line-height: 1.8em; } /*文前*/ .preface { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; margin: 0.3em auto; text-indent: 2em; color: #5A5A5A; } /*文前-top*/ .preface-top { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-indent: 2em; color: #5A5A5A; margin: 25% auto 0.3em auto; } /*正文内容*/ .content { font-size: 1em; text-indent: 2em; } /*正文内容居左*/ .left { font-size: 1em; text-indent: 0em; text-align: left; } /*正文内容居中*/ .center { font-size: 1em; text-indent: 0em; text-align: center; } /*正文内容居右*/ .right { font-size: 1em; text-indent: 0em; text-align: right; } /*正文内容-TOP*/ .content-top { font-size: 1em; text-indent: 2em; // margin-top: 25%; } /*案例标题居中（引文、诗歌等）*/ .titleQuot-c { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 1.05em; line-height: 1.3em; margin: 1em auto; text-align: center; color: #7acab4; font-weight: bold; } /*案例标题居左（引文、诗歌等）*/ .titleQuot-l { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 1.05em; line-height: 1.3em; margin: 1em auto; text-align: left; text-indent: 0em; color: #7acab4; font-weight: bold; } /*案例标题*/ .titleQuot-1 { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 1.05em; line-height: 1.3em; margin: 1em auto; color: #7acab4; // text-indent: 2em; font-weight: bold; } /*引文内容居左(引文、诗歌、诗词、书信、书信称谓、居右署名)*/ .quotation { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: left; text-indent: 2em; margin: 0.3em auto; color: #5A5A5A; } /*引文内容-top*/ .quotation-top { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: left; text-indent: 2em; color: #5A5A5A; margin: 25% auto 0.3em auto; } /*引文内容span*/ .quotation-s { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; color: #5A5A5A; } /*诗词标题*/ .poemtitle { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 1em; line-height: 1.3em; text-align: center; text-indent: 0em; font-weight: bold; color: #5A5A5A; margin: 1em auto; } /*诗词标题*/ .poemtitle-l { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 1em; line-height: 1.3em; text-align: left; text-indent: 2em; font-weight: bold; color: #333; margin: 1em auto; } /*诗词作者*/ .poemtitle-author-c { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; margin-bottom: 1em; text-align: center; text-indent: 0em; color: #5A5A5A; } /*诗词作者居左（引文、诗歌等）*/ .poemtitle-author-l { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; margin-bottom: 1em; text-indent: 2em; color: #5A5A5A; } /*诗词的内容*/ .poem { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: center; text-indent: 0em; margin: 0.3em auto; color: #5A5A5A; } /*诗词的内容*/ .poem-l { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: left; text-indent: 2em; margin: 0.3em auto; color: #5A5A5A; } /*右下角说明*/ .right-info { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: right; margin-bottom: 0.5em; color: #5A5A5A; } /*书信称谓*/ .letters { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: left; text-indent: 0em; margin: 0.3em auto; color: #5A5A5A; } /*书信内容*/ .text-letters { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: left; text-indent: 2em; margin: 0.3em auto; color: #5A5A5A; } /*粗体*/ span.bold { font-weight: bold; } /*斜体*/ .italic { font-style: italic; } /*红色*/ .color-red { color: #FB0830; } /*橙色*/ .color-orange { color: #F78413; } /*黄色*/ .color-yellow { color: #E8D60B; } /*绿色*/ .color-green { color: #07D007; } /*青色*/ .color-cyan { color: #599CA9; } /*蓝色*/ .color-blue { color: #4756E5; } /*紫色*/ .color-purple { color: #B046DC; } /*下划线*/ span.underline { text-decoration: underline; } /*着重强调*/ span.emphasis { text-decoration: underline; } /*删除线*/ span.linethrough { text-decoration: line-through; } /*数字上标*/ span.super { font-size: 0.7em; vertical-align: super; } /*数字下标*/ span.sub { font-size: 0.7em; vertical-align: sub; } /*首字下沉，需配合.ftext 一并使用*/ span.fDropContent { font-family: "汉仪旗黑50S", "HYQiHei-50s"; font-size: 1em; text-indent: 0em; } /*被设为大写字的 Class 首字大写，需被包裹在.fDropContent 内*/ .ftext { float: left; font-size: 1.6em; color: #5A5A5A; } /*边框*/ .border { border: 1px solid #77582c; border-radius: 0.25em; padding: 0.25em; margin: 1em auto; } /*边框底色*/ .border bgColor { border: 1px solid #77582c; background: #D2D2D2; border-radius: 0.25em; padding: 0.25em; margin: 1em auto; } /*底色*/ .bgColor { background: #c9ebe0; padding: 1em; border-radius: 0.25em; margin: 1em auto; border: 1px solid #7acab4; box-sizing: border-box; border-radius: 20px; } /*插图、表格截图（不含图片标题或图片说明）*/ .bodyPic { text-align: center; margin: 1em auto; } /*插图、表格截图（含图片标题或图片说明）*/ .qrbodyPic { font-size: 0.95em; text-align: center; margin: 0 1em; } .bodyPic-l { float: left; margin-left: 4em; } /*表格表头*/ .imgtitle { font-family: "汉仪旗黑55S", "HYQiHei-55s"; font-size: 0.95em; margin: 1em auto -0.8em auto; text-align: center; text-indent: 0; color: #7acab4; } /*图片说明居中*/ .imgdescript { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; margin: 0.3em auto; text-align: center; text-indent: 0em; color: #7acab4; } /*图片说明居左*/ .imgdescript-l { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; margin: 0.3em auto; text-align: left; text-indent: 2em; color: #7acab4; } /*图片说明居中加粗*/ .imgdescript-b { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; margin: 0.3em auto; text-align: center; text-indent: 0em; color: #5A5A5A; font-weight: bold; } /*图片说明居左加粗*/ .imgdescript-l-b { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; margin: 0.3em auto; text-align: left; text-indent: 2em; color: #5A5A5A; font-weight: bold; } /*环绕图片*/ .floatPic-1 { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; float: right; text-align: center; width: 45%; margin-left: 1em; margin-bottom: 0.5em; margin-top: 0.5em; } /*环绕图片*/ .floatPic { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; float: left; text-align: center; width: 45%; margin-right: 1em; margin-bottom: 0.5em; margin-top: 0.5em; } /*公式图*/ .g-pic { height: 2em; vertical-align: middle; } /*行内图*/ .h-pic { height: 1.5em; vertical-align: middle; } /*生僻字截图*/ .s-pic { height: 1em; vertical-align: middle; } /*签名图片*/ .signImg { text-align: right; width: 30%; margin: 1em 0em 1em 70%; } /*全屏图*/ .qqreader-fullimg { qrfullpage: 1; } /*注标图*/ .qqreader-footnote { width: 1em; margin-left: 0.1em; margin-right: 0.1em; } /*分页*/ .pagebreak { page-break-after: always; } /*结束*/ } } } } src/books/MMVRTCMP/images/002-1.png
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/MMVRTCMP/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>`; // }); // }
New file @@ -0,0 +1,345 @@ <template> <div class="chapter" num="1"> <div class="page-box" page="1"> <div v-if="showPageList.indexOf(1) > -1"> <pageHeader page="002" /> <div class="bodystyle"> <div class="openImgBox imgWidth"> <img src="../../images/002-1.png" alt="" /> </div> <div class="openImgBox imgWidth"> <img src="../../images/002-2.png" alt="" /> <img class="itemImage" src="../../images/002-3.png" alt="" /> </div> </div> </div> </div> <div class="page-box" page="2"> <div v-if="showPageList.indexOf(2) > -1"> <pageHeader page="002" name="白茅根" /> <div class="bodystyle"> <div class="titleImage">来源</div> <p> 禾本科植物白茅Imperata cylindrica Beauv. var. major (Nees) C. E. Hubb.的干燥根茎。 </p> <div class="titleImage">产地</div> <p>我国大部分地区均有出产，以华北地区为主。</p> <div class="titleImage">性状</div> <p> 圆柱形的段。外表皮黄白色或淡黄色，微有光泽，具纵皱纹，有的可见稍隆起的节。切面皮部白色，多有裂隙，放射状排列，中柱淡黄色或中空。质硬而韧。气微。味微甜。 </p> <div class="titleImage">品质</div> <p>以直径粗、色白、味甜者为佳。</p> <div class="titleImage titleBack-2" style="width: 290px"> <span>性味归经与功能主治</span> </div> <p> 甘，寒。归肺、胃、膀胱经。凉血止血，清热利尿。用于血热吐血，衄血，尿血，热病烦渴，湿热黄疸，水肿尿少，热淋涩痛。 </p> </div> </div> </div> <div class="page-box" page="3"> <div v-if="showPageList.indexOf(3) > -1"> <pageHeader page="003" /> <div class="bodystyle"> <div class="openImgBox imgWidth"> <img src="../../images/003-1.png" alt="" /> </div> <div class="openImgBox imgWidth"> <img src="../../images/003-2.png" alt="" /> <img class="itemImage2" src="../../images/003-3.png" alt="" /> </div> </div> </div> </div> <div class="page-box" page="4"> <div v-if="showPageList.indexOf(4) > -1"> <pageHeader page="003" name="白前" /> <div class="bodystyle"> <div class="titleImage">来源</div> <p> 萝藦科植物柳叶白前Cynanchum stauntonii (Decne.) Schltr. ex Levl.或芫花叶白前Cynanchum glaucescens (Decne.) Hand.-Mazz.的干燥根茎和根。 </p> <div class="titleImage">产地</div> <p>主产于浙江、安徽、福建、江西、湖南、湖北、广东等地。</p> <div class="titleImage">性状</div> <p> 根茎呈细圆柱形的段，节处簇生纤细根。表面黄白色或黄棕色，节明显。质脆。气微。味微甜。 </p> <div class="titleImage">品质</div> <p>以根茎粗者为佳。</p> <div class="titleImage titleBack-2" style="width: 290px"> <span>性味归经与功能主治</span> </div> <p> 辛、苦，微温。归肺经。降气，消痰，止咳。用于肺气壅实，咳嗽痰多，胸满喘急。 </p> </div> </div> </div> <div class="page-box" page="5"> <div v-if="showPageList.indexOf(5) > -1"> <pageHeader page="004" /> <div class="bodystyle"> <div class="openImgBox imgWidth"> <img src="../../images/004-1.png" alt="" /> </div> <div class="openImgBox imgWidth"> <img src="../../images/004-2.png" alt="" /> <img class="itemImage3" src="../../images/004-3.png" alt="" /> </div> </div> </div> </div> <div class="page-box" page="6"> <div v-if="showPageList.indexOf(6) > -1"> <pageHeader page="004" name="白芍" /> <div class="bodystyle"> <div class="titleImage">来源</div> <p>毛茛科植物芍药Paeonia lactiflora Pall.的干燥根。</p> <div class="titleImage">产地</div> <p>主产于安徽、浙江、河南、四川、山东、贵州等地。</p> <div class="titleImage">性状</div> <p> 类圆形的薄片。表面淡棕红色或类白色。切面类白色或微带棕红色，形成层环明显，可见稍隆起的筋脉纹呈放射状排列。质硬脆。气微。味微苦、酸。 </p> <div class="titleImage">品质</div> <p>以直径粗、坚实、粉性足、无白心或裂隙者为佳。</p> <div class="titleImage titleBack-2" style="width: 290px"> <span>性味归经与功能主治</span> </div> <p> 苦、酸，微寒。归肝、脾经。养血调经，敛阴止汗，柔肝止痛，平抑肝阳。用于血虚萎黄，月经不调，自汗，盗汗，胁痛，腹痛，四肢挛痛，头痛眩晕。 </p> </div> </div> </div> <div class="page-box" page="7"> <div v-if="showPageList.indexOf(7) > -1"> <pageHeader page="005" /> <div class="bodystyle"> <div class="openImgBox imgWidth"> <img src="../../images/005-1.png" alt="" /> </div> <div class="openImgBox imgWidth"> <img src="../../images/005-2.png" alt="" /> <img class="itemImage4" src="../../images/005-3.png" alt="" /> </div> </div> </div> </div> <div class="page-box" page="8"> <div v-if="showPageList.indexOf(8) > -1"> <pageHeader page="005" name="白头翁" /> <div class="bodystyle"> <div class="titleImage">来源</div> <p>毛茛科植物白头翁Pulsatilla chinensis (Bge.) Regel的干燥根。</p> <div class="titleImage">产地</div> <p> 主产于河北、山西、内蒙古、辽宁、吉林、黑龙江，以及山东、山西、宁夏等地。 </p> <div class="titleImage">性状</div> <p> 类圆形片。外表皮黄棕色或棕褐色，具不规则纵皱纹或纵沟，近根头部有白色绒毛。切面皮部黄白色或淡黄棕色，木部淡黄色。质硬脆。气微。味微苦涩。 </p> <div class="titleImage">品质</div> <p>以片大整齐、质坚实、根头有白色毛茸者为佳。</p> <div class="titleImage titleBack-2" style="width: 290px"> <span>性味归经与功能主治</span> </div> <p> 苦，寒。归胃、大肠经。清热解毒，凉血止痢。用于热毒血痢，阴痒带下。 </p> </div> </div> </div> <div class="page-box" page="9"> <div v-if="showPageList.indexOf(9) > -1"> <pageHeader page="006" /> <div class="bodystyle"> <div class="openImgBox imgWidth"> <img src="../../images/006-1.png" alt="" /> </div> <div class="openImgBox imgWidth"> <img src="../../images/006-2.png" alt="" /> <img class="itemImage5" src="../../images/006-3.png" alt="" /> </div> </div> </div> </div> <div class="page-box" page="10"> <div v-if="showPageList.indexOf(10) > -1"> <pageHeader page="006" name="白鲜皮" /> <div class="bodystyle"> <div class="titleImage">来源</div> <p>芸香科植物白鲜 Dictamnus dasycarpus Turcz. 的干燥根皮。</p> <div class="titleImage">产地</div> <p>主产于东北等地。</p> <div class="titleImage">性状</div> <p> 不规则厚片。外表面灰白色或淡灰黄色，具细纵皱纹及细根痕， 常有突起的颗粒状小点；内表面类白色，有细纵纹。切面类白 色，略呈层片状。质脆。有羊膻气。味微苦。 </p> <div class="titleImage">品质</div> <p>以肉厚、色灰白者为佳。</p> <div class="titleImage titleBack-2" style="width: 290px"> <span>性味归经与功能主治</span> </div> <p> 苦，寒。归脾、胃、膀胱经。清热燥湿，祛风解毒。用于湿热疮 毒，黄水淋漓，湿疹，风疹，疥癣疮癞，风湿热痹，黄疸尿赤。 </p> </div> </div> </div> <div class="page-box" page="11"> <div v-if="showPageList.indexOf(11) > -1"> <pageHeader page="007" /> <div class="bodystyle"> <div class="openImgBox imgWidth"> <img src="../../images/007-1.png" alt="" /> </div> <div class="openImgBox imgWidth"> <img src="../../images/007-2.png" alt="" /> <img class="itemImage6" src="../../images/007-3.png" alt="" /> </div> </div> </div> </div> <div class="page-box" page="12"> <div v-if="showPageList.indexOf(12) > -1"> <pageHeader page="007" name="百部" /> <div class="bodystyle"> <div class="titleImage">来源</div> <p> 百部科植物直立百部 Stemona sessilifolia (Miq.) Miq.、蔓生百部 Stemona japonica (Bl.) Miq. 或对叶百部 Stemona tuberosa Lour. 的 干燥块根。 </p> <div class="titleImage">产地</div> <p>主产于浙江、江苏、安徽、四川、重庆、贵州、广西等地。</p> <div class="titleImage">性状</div> <p> 不规则厚片或不规则条形斜片。表面灰白色或棕黄色，有深纵皱 纹；切面灰白色、淡黄棕色或黄白色，角质样；皮部较厚，中柱 扁缩。角质样，质韧软。气微。味甘、苦。 </p> <div class="titleImage">品质</div> <p>以片大、质坚实、断面角质样者为佳。</p> <div class="titleImage titleBack-2" style="width: 290px"> <span>性味归经与功能主治</span> </div> <p> 甘、苦，微温。归肺经。润肺下气止咳，杀虫灭虱。用于新久咳 嗽，肺痨咳嗽，顿咳；外用于头虱，体虱，蛲虫病，阴痒。 </p> </div> </div> </div> <div class="page-box" page="13"> <div v-if="showPageList.indexOf(13) > -1"> <pageHeader page="008" /> <div class="bodystyle"> <div class="openImgBox imgWidth"> <img src="../../images/008-1.png" alt="" /> </div> <div class="openImgBox imgWidth"> <img src="../../images/008-2.png" alt="" /> <img class="itemImage7" src="../../images/008-3.png" alt="" /> </div> </div> </div> </div> <div class="page-box" page="14"> <div v-if="showPageList.indexOf(14) > -1"> <pageHeader page="008" name="百合" /> <div class="bodystyle"> <div class="titleImage">来源</div> <p> 为百合科植物卷丹 Lilium landfolium Thunb.、百合 Lilium brownii F. E. Brown var. viridulum Baker 或细叶百合 Lilium pumilum DC. 的 干燥肉质鳞叶。 </p> <div class="titleImage">产地</div> <p>主产于湖南、甘肃、江苏、浙江等地。</p> <div class="titleImage">性状</div> <p> 鳞叶呈长椭圆形，顶端较尖，基部较宽，边缘薄微呈波状，常向 内卷曲。表面黄白色或淡棕黄色，有数条纵直平行的白色维管 束。质硬而脆，断面较平坦，角质样。气微，味微苦。 </p> <div class="titleImage">品质</div> <p>以肉厚、色白、质坚、味苦者为佳。</p> <div class="titleImage titleBack-2" style="width: 290px"> <span>性味归经与功能主治</span> </div> <p> 甘，寒。归心、肺经。养阴润肺，清心安神。用于阴虚燥咳，劳 嗽咳血，虚烦惊悸，失眠多梦，精神恍惚。 </p> </div> </div> </div> <div class="page-box" page="15"> <div v-if="showPageList.indexOf(15) > -1"> <pageHeader page="010" /> <div class="bodystyle"> <div class="openImgBox imgWidth"> <img src="../../images/010-1.png" alt="" /> </div> <div class="openImgBox imgWidth"> <img src="../../images/010-2.png" alt="" /> <img class="itemImage8" src="../../images/010-3.png" alt="" /> </div> </div> </div> </div> <div class="page-box" page="16"> <div v-if="showPageList.indexOf(16) > -1"> <pageHeader page="010" name="败酱草" /> <div class="bodystyle"> <div class="titleImage">来源</div> <p>菊科植物苣荬菜 Sonchus brachyotus DC. 的干燥全草。</p> <div class="titleImage">产地</div> <p>主产于河北、东北等地。</p> <div class="titleImage">性状</div> <p> 不规则中段。茎圆柱形，叶皱缩。茎表面淡黄棕色，有纵棱。叶 灰绿色，边缘有稀疏缺刻。质脆。气微。味微苦。 </p> <div class="titleImage">品质</div> <p>以叶多、色绿者为佳。</p> <div class="titleImage titleBack-2" style="width: 290px"> <span>性味归经与功能主治</span> </div> <p> 辛、苦，微寒。归胃、大肠、肝经。清热解毒，消痈排脓，破血 行瘀。用于肠痈腹痛，肺痈吐脓，痈肿疮毒，产后瘀血腹痛。 </p> </div> </div> </div> </div> </template> <script> export default { name: "chapter001", props: { showPageList: { type: Array, default: () => [], }, }, components: { pageHeader: () => import("../components/pageHeader.vue"), }, data() { return {}; }, }; </script> src/books/MMVRTCMP/view/components/index.vue
New file @@ -0,0 +1,915 @@ <!-- @format --> <template> <div class="page-main" @scroll="throttledScrollHandler"> <div id="searchDomBox" style="display: none"> <div id="searchContent"></div> </div> <div class="public-MMVRTCMP" :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(1) > -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: 1, // 总章节数 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, 1); // 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: { 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/MMVRTCMP/view/components/pageHeader.vue
New file @@ -0,0 +1,48 @@ <template> <div class="pageHeader-box"> <div class="page-num"> <span>{{ page }}</span> <span>{{ name }}</span> </div> </div> </template> <script> export default { name: "pageHeader", props: { page: { type: Number, default: 0, }, name: { type: String, default: "", }, }, }; </script> <style lang="less" scoped> .pageHeader-box { width: 100%; padding-top: 100px; .page-num { width: 48%; height: 52px; background-image: url(../../images/page.png); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; display: flex; justify-content: center; align-items: center; span { color: #333; font-size: 28px; font-weight: 700; margin: 0 20px; } } } </style> src/books/MMVRTCMP/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>
