| | |
| | | <template> |
| | | <div class="page-main" @scroll="throttledScrollHandler"> |
| | | <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 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> |
| | | <chapterEight v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList"></chapterEight> |
| | | <chapterNine v-if="showCatalogList.indexOf(10) > -1" :showPageList="loadPageList"></chapterNine> |
| | | <chapterTen v-if="showCatalogList.indexOf(11) > -1" :showPageList="loadPageList"></chapterTen> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import Vue from "vue"; |
| | | 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 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 chapterTen from "./chapter010.vue" |
| | | import NoteIcon from "@/assets/images/biji.png"; |
| | | import _ from "lodash"; |
| | | import Swiper from "swiper/bundle"; |
| | |
| | | name: "pageContent", |
| | | data() { |
| | | return { |
| | | catalogLength: 2, // 总章节数 |
| | | catalogLength: 11, // 总章节数 |
| | | showCatalogList: [], // 显示的章节 |
| | | loadThreshold: 300, // 触发加载阈值 |
| | | throttleThreshold: 100, // 节流阈值 |
| | |
| | | }, 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); |
| | | setTimeout(() => { |
| | | this.gotoPage(2, 18); |
| | | // 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") |
| | |
| | | page && pageThemeColor && pageThemeColor[page] |
| | | ? pageThemeColor[page] |
| | | : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] |
| | | ? chapterThemeColor[chapterNum] |
| | | : bookThemeColor; |
| | | ? chapterThemeColor[chapterNum] |
| | | : bookThemeColor; |
| | | if (themeColor) { |
| | | domItem.style.color = themeColor; |
| | | } |
| | |
| | | page && pageThemeColor && pageThemeColor[page] |
| | | ? pageThemeColor[page] |
| | | : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] |
| | | ? chapterThemeColor[chapterNum] |
| | | : bookThemeColor; |
| | | ? chapterThemeColor[chapterNum] |
| | | : bookThemeColor; |
| | | if (themeColor) { |
| | | domItem.style.backgroundColor = themeColor; |
| | | } |
| | |
| | | page && pageThemeColor && pageThemeColor[page] |
| | | ? pageThemeColor[page] |
| | | : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] |
| | | ? chapterThemeColor[chapterNum] |
| | | : bookThemeColor; |
| | | ? chapterThemeColor[chapterNum] |
| | | : bookThemeColor; |
| | | if (themeColor) { |
| | | domItem.style.borderColor = themeColor; |
| | | } |
| | |
| | | const pageData = { |
| | | pageHeader, |
| | | chapterOne, |
| | | // chapterTwo, |
| | | // chapterThree, |
| | | // chapterFour, |
| | | // chapterFive, |
| | | // chapterSix, |
| | | // chapterSeven |
| | | chapterTwo, |
| | | chapterThree, |
| | | chapterFour, |
| | | chapterFive, |
| | | chapterSix, |
| | | chapterSeven, |
| | | chapterEight, |
| | | chapterNine, |
| | | chapterTen |
| | | }; |
| | | // 遍历所有章节文件 |
| | | for (const key in pageData) { |
| | |
| | | // 记录高亮信息 |
| | | this.highlightData = data; |
| | | // 跳转 |
| | | this.gotoPage(data.catalog, data.page, () => {}); |
| | | this.gotoPage(data.catalog, data.page, () => { }); |
| | | }, |
| | | // 页面向下滚动,音频小窗播放功能 |
| | | getAduio() { |
| | |
| | | const topGap = playVudio.getBoundingClientRect().top; |
| | | if (bottomGap < 0 || topGap > window.innerHeight) { |
| | | try { |
| | | if (playVudio.readyState) playVudio.requestPictureInPicture(); |
| | | if (playVudio.readyState) { |
| | | setTimeout(()=>{ |
| | | playVudio.requestPictureInPicture(); |
| | | },0) |
| | | } |
| | | } catch (error) { |
| | | console.log(error, "小窗错误error"); |
| | | } |
| | |
| | | components: { |
| | | pageHeader, |
| | | chapterOne, |
| | | // chapterTwo, |
| | | // chapterThree, |
| | | // chapterFour, |
| | | // chapterFive, |
| | | // chapterSix, |
| | | // chapterSeven |
| | | chapterTwo, |
| | | chapterThree, |
| | | chapterFour, |
| | | chapterFive, |
| | | chapterSix, |
| | | chapterSeven, |
| | | chapterEight, |
| | | chapterNine, |
| | | chapterTen |
| | | }, |
| | | }; |
| | | </script> |