From ae2a92ba254050e8d9bdbe43193fa5bc7674438f Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期五, 24 五月 2024 15:53:13 +0800 Subject: [PATCH] 英语完善 --- src/books/childHealth/view/content/index.vue | 110 ++++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 93 insertions(+), 17 deletions(-) diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue index 908f46b..0821c6a 100644 --- a/src/books/childHealth/view/content/index.vue +++ b/src/books/childHealth/view/content/index.vue @@ -1,12 +1,6 @@ <template> <div class="page-main" @scroll="throttledScrollHandler"> - <div - class="page-content" - :style="{ - fontSize: fontSize ? fontSize + 'px' : '16px', - transform: `scale(${pageZoom ? pageZoom : 1})` - }" - > + <div class="page-content"> <pageHeader v-if="showCatalogList.indexOf(0) > -1"></pageHeader> <chapterOne v-if="showCatalogList.indexOf(1) > -1"></chapterOne> <chapterTwo v-if="showCatalogList.indexOf(2) > -1"></chapterTwo> @@ -56,14 +50,6 @@ observer: null }; }, - computed: { - fontSize() { - return this.$store.state.qiankun.fontSize; - }, - pageZoom() { - return this.$store.state.qiankun.scale / 100; - } - }, watch: { showCatalogList: { handler(newVal, oldVal) { @@ -79,6 +65,7 @@ // 鍚姩椤电爜瑙傚療 setTimeout(() => { this.initObservation(); + this.initThemeColor(); }, 500); } } @@ -121,6 +108,7 @@ // 鍚姩椤电爜瑙傚療 setTimeout(() => { this.initObservation(); + this.initThemeColor(); }, 500); // 娴嬭瘯椤甸潰璺宠浆 @@ -218,6 +206,7 @@ console.log("绔犺妭閿欒锛�"); } }, + // 娓叉煋鏍囪 renderSign(type, data) { const existence = ( @@ -248,7 +237,7 @@ // 绗旇 pageDom.innerHTML = pageDom.innerHTML.replace( reg, - `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')">${data.txt}<img src="${NoteIcon}" style="cursor: pointer" /></span>` + `<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}')">${data.txt}<img src="${NoteIcon}" style="cursor: pointer" /></span>` ); break; } @@ -285,8 +274,8 @@ const sections = ( this.container ? this.container : document ).querySelectorAll(".page-box"); - //observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般�� sections.forEach((section) => { + //observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般�� const isObserver = section.getAttribute("observer"); if (!isObserver) { this.observer.observe(section); @@ -294,6 +283,93 @@ } }); }, + 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) => { -- Gitblit v1.9.1