From 53c1b899eda759f171761b2831ee37af7e919b2b Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期三, 29 五月 2024 21:21:24 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/books/sportsAndHealth/css/default.less | 7
src/books/sportsAndHealth/view/chapter002.vue | 345 ++++++++++++++++++++++++++++++++++---------
src/books/lifeCare/index.vue | 87 +++++++---
src/App.vue | 4
src/books/sportsAndHealth/index.vue | 1
5 files changed, 343 insertions(+), 101 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index f09d3e3..cb3b1a5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -63,7 +63,9 @@
} else {
this.activeBook = await this.config.getBookConfig(
// childHealth
- this.config.resourceCtx + "english"
+ // lifeCare
+ // sportsAndHealth
+ this.config.resourceCtx + "sportsAndHealth"
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
diff --git a/src/books/lifeCare/index.vue b/src/books/lifeCare/index.vue
index aae3725..ec8e4f1 100644
--- a/src/books/lifeCare/index.vue
+++ b/src/books/lifeCare/index.vue
@@ -135,6 +135,7 @@
loadPageObserver: null,
loadPageList: [],
questionData: {},
+ renderSignMap: {}
};
},
computed: {
@@ -301,7 +302,7 @@
this.showCatalogList = [
this.catalogLength - 2,
this.catalogLength - 1,
- this.catalogLength,
+ this.catalogLength
];
} else {
this.showCatalogList = [catalog - 1, catalog, catalog + 1];
@@ -322,6 +323,14 @@
}
},
+ // 澶勭悊鏍囪鏁版嵁
+ handelSignData(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) {
const existence = (
@@ -332,29 +341,48 @@
const pageDom = (
this.container ? this.container : document
).querySelector(`[page="${data.page}"]`);
- let reg = new RegExp(`${data.txt}`, "ig");
- switch (type) {
- case "Highlight":
- // 楂樹寒
- pageDom.innerHTML = pageDom.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":
- // 鍒掔嚎
- pageDom.innerHTML = pageDom.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":
- // 绗旇
- 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}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>`
- );
- break;
+ // 鍒涘缓 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;
+ }
+ }
}
}
},
@@ -536,7 +564,7 @@
if (entry.isIntersecting) {
const target = entry.target;
const page = target.getAttribute("page");
- if (this.loadPageList.indexOf(page) == -1) {
+ if (this.loadPageList.indexOf(Number(page)) == -1) {
const catalogDom = this.tool.getParentNodeByClassName(
target,
"chapter"
@@ -565,7 +593,16 @@
}
}
}
+ // 娣诲姞椤电爜
this.loadPageList.push(Number(page));
+ // 娓叉煋杩欎竴椤电殑鏍囪
+ for (const key in this.renderSignMap) {
+ if (this.renderSignMap[key][page]) {
+ this.renderSignMap[key][page].forEach((item) => {
+ this.renderSign(key, item);
+ });
+ }
+ }
if (this.loadPageList.length > 5) {
// 瓒呰繃5椤�
this.loadPageList.shift();
diff --git a/src/books/sportsAndHealth/css/default.less b/src/books/sportsAndHealth/css/default.less
index 79e1aea..2918561 100644
--- a/src/books/sportsAndHealth/css/default.less
+++ b/src/books/sportsAndHealth/css/default.less
@@ -42,13 +42,13 @@
justify-content: center;
table {
- border: 1px solid #0aa2e9;
+ border: 1px solid #95b2dc;
border-collapse: collapse;
padding: 0;
margin: 0;
tr th {
- border: 1px solid #0aa2e9;
+ border: 1px solid #95b2dc;
background-color: #b0a3cf;
color: #f49a4c;
text-align: center;
@@ -57,10 +57,11 @@
}
tr td {
- border: 1px solid #0aa2e9;
+ border: 1px solid #95b2dc;
text-align: center;
padding: 3px 10px;
font-size: 14px;
+ line-height: 25px;
input {
cursor: pointer;
diff --git a/src/books/sportsAndHealth/index.vue b/src/books/sportsAndHealth/index.vue
index 8a48f5d..f574d62 100644
--- a/src/books/sportsAndHealth/index.vue
+++ b/src/books/sportsAndHealth/index.vue
@@ -73,6 +73,7 @@
loadPageObserver: null,
loadPageList: [],
questionData: {},
+ renderSignMap: {}
};
},
computed: {
diff --git a/src/books/sportsAndHealth/view/chapter002.vue b/src/books/sportsAndHealth/view/chapter002.vue
index 11a8ae0..69e0899 100644
--- a/src/books/sportsAndHealth/view/chapter002.vue
+++ b/src/books/sportsAndHealth/view/chapter002.vue
@@ -94,49 +94,235 @@
</thead>
<tbody>
<tr>
- <td>1. 鎴戞劅瑙夊揩涔愶紝蹇冩儏鑸掔晠</td>
- <td><input :value="chapter002.tablexyx1.text1" type="checkbox" />5</td>
- <td><input :value="chapter002.tablexyx1.text2" type="checkbox" />4</td>
- <td><input :value="chapter002.tablexyx1.text3" type="checkbox" />3</td>
- <td><input :value="chapter002.tablexyx1.text4" type="checkbox" />2</td>
- <td><input :value="chapter002.tablexyx1.text5" type="checkbox" />1</td>
- <td><input :value="chapter002.tablexyx1.text6" type="checkbox" />0</td>
+ <td style="text-align: left">1. 鎴戞劅瑙夊揩涔愶紝蹇冩儏鑸掔晠</td>
+ <td>
+ <input
+ @change="changeBox($event, 'text1')"
+ :checked="chapter002.tablexyx1.text1"
+ type="checkbox"
+ />5
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text2')"
+ :checked="chapter002.tablexyx1.text2"
+ type="checkbox"
+ />4
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text3')"
+ :checked="chapter002.tablexyx1.text3"
+ type="checkbox"
+ />3
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text4')"
+ :checked="chapter002.tablexyx1.text4"
+ type="checkbox"
+ />2
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text5')"
+ :checked="chapter002.tablexyx1.text5"
+ type="checkbox"
+ />1
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text6')"
+ :checked="chapter002.tablexyx1.text6"
+ type="checkbox"
+ />0
+ </td>
</tr>
<tr>
- <td>2. 鎴戞劅瑙夊畞闈欏拰鏀炬澗</td>
- <td><input :value="chapter002.tablexyx1.text7" type="checkbox" />5</td>
- <td><input :value="chapter002.tablexyx1.text8" type="checkbox" />4</td>
- <td><input :value="chapter002.tablexyx1.text9" type="checkbox" />3</td>
- <td><input :value="chapter002.tablexyx1.text10" type="checkbox" />2</td>
- <td><input :value="chapter002.tablexyx1.text11" type="checkbox" />1</td>
- <td><input :value="chapter002.tablexyx1.text12" type="checkbox" />0</td>
+ <td style="text-align: left">2. 鎴戞劅瑙夊畞闈欏拰鏀炬澗</td>
+ <td>
+ <input
+ @change="changeBox($event, 'text7')"
+ :checked="chapter002.tablexyx1.text7"
+ type="checkbox"
+ />5
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text8')"
+ :checked="chapter002.tablexyx1.text8"
+ type="checkbox"
+ />4
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text9')"
+ :checked="chapter002.tablexyx1.text9"
+ type="checkbox"
+ />3
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text10')"
+ :checked="chapter002.tablexyx1.text10"
+ type="checkbox"
+ />2
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text11')"
+ :checked="chapter002.tablexyx1.text11"
+ type="checkbox"
+ />1
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text12')"
+ :checked="chapter002.tablexyx1.text12"
+ type="checkbox"
+ />0
+ </td>
</tr>
<tr>
- <td>3. 鎴戞劅瑙夊厖婊℃椿鍔涳紝绮惧姏鍏呮矝</td>
- <td>5</td>
- <td>4</td>
- <td>3</td>
- <td>2</td>
- <td>1</td>
- <td>0</td>
+ <td style="text-align: left">
+ 3. 鎴戞劅瑙夊厖婊℃椿鍔涳紝绮惧姏鍏呮矝
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text13')"
+ :checked="chapter002.tablexyx1.text13"
+ type="checkbox"
+ />5
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text14')"
+ :checked="chapter002.tablexyx1.text14"
+ type="checkbox"
+ />4
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text15')"
+ :checked="chapter002.tablexyx1.text15"
+ type="checkbox"
+ />3
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text16')"
+ :checked="chapter002.tablexyx1.text16"
+ type="checkbox"
+ />2
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text17')"
+ :checked="chapter002.tablexyx1.text17"
+ type="checkbox"
+ />1
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text18')"
+ :checked="chapter002.tablexyx1.text18"
+ type="checkbox"
+ />0
+ </td>
</tr>
<tr>
- <td>4. 鎴戠潯閱掓椂鎰熷埌娓呴啋锛屽緱鍒颁簡瓒冲浼戞伅</td>
- <td>5</td>
- <td>4</td>
- <td>3</td>
- <td>2</td>
- <td>1</td>
- <td>0</td>
+ <td style="text-align: left">
+ 4. 鎴戠潯閱掓椂鎰熷埌娓呴啋锛屽緱鍒颁簡瓒冲浼戞伅
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text19')"
+ :checked="chapter002.tablexyx1.text19"
+ type="checkbox"
+ />5
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text20')"
+ :checked="chapter002.tablexyx1.text20"
+ type="checkbox"
+ />4
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text21')"
+ :checked="chapter002.tablexyx1.text21"
+ type="checkbox"
+ />3
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text22')"
+ :checked="chapter002.tablexyx1.text22"
+ type="checkbox"
+ />2
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text23')"
+ :checked="chapter002.tablexyx1.text23"
+ type="checkbox"
+ />1
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text24')"
+ :checked="chapter002.tablexyx1.text24"
+ type="checkbox"
+ />0
+ </td>
</tr>
<tr>
- <td>5. 鎴戞瘡澶╃殑鐢熸椿鍏呮弧浜嗘湁瓒ｇ殑浜嬫儏</td>
- <td>5</td>
- <td>4</td>
- <td>3</td>
- <td>2</td>
- <td>1</td>
- <td>0</td>
+ <td style="text-align: left">
+ 5. 鎴戞瘡澶╃殑鐢熸椿鍏呮弧浜嗘湁瓒ｇ殑浜嬫儏
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text25')"
+ :checked="chapter002.tablexyx1.text25"
+ type="checkbox"
+ />5
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text26')"
+ :checked="chapter002.tablexyx1.text26"
+ type="checkbox"
+ />4
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text27')"
+ :checked="chapter002.tablexyx1.text27"
+ type="checkbox"
+ />3
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text28')"
+ :checked="chapter002.tablexyx1.text28"
+ type="checkbox"
+ />2
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text29')"
+ :checked="chapter002.tablexyx1.text29"
+ type="checkbox"
+ />1
+ </td>
+ <td>
+ <input
+ @change="changeBox($event, 'text30')"
+ :checked="chapter002.tablexyx1.text30"
+ type="checkbox"
+ />0
+ </td>
</tr>
</tbody>
</table>
@@ -200,59 +386,59 @@
<tbody>
<tr>
<td>1</td>
- <td>姝ｅ父鍋ュ悍</td>
- <td>鍋ュ悍</td>
- <td>鍋ュ悍</td>
- <td>鍋ュ悍</td>
+ <td><input @change="changeByb($event,'text1')" type="checkbox" :checked="chapter002.tablebyb1.text1" />姝ｅ父鍋ュ悍</td>
+ <td><input @change="changeByb($event,'text2')" type="checkbox" :checked="chapter002.tablebyb1.text2" />鍋ュ悍</td>
+ <td><input @change="changeByb($event,'text2')" type="checkbox" :checked="chapter002.tablebyb1.text2" />鍋ュ悍</td>
+ <td><input @change="changeByb($event,'text4')" type="checkbox" :checked="chapter002.tablebyb1.text4" />鍋ュ悍</td>
</tr>
<tr>
<td>2</td>
- <td>鎮茶</td>
- <td>涓嶅仴搴�</td>
- <td>鍋ュ悍</td>
- <td>鍋ュ悍</td>
+ <td><input @change="changeByb($event,'text5')" type="checkbox" :checked="chapter002.tablebyb1.text5" />鎮茶</td>
+ <td><input @change="changeByb($event,'text6')" type="checkbox" :checked="chapter002.tablebyb1.text6" />涓嶅仴搴�</td>
+ <td><input @change="changeByb($event,'text7')" type="checkbox" :checked="chapter002.tablebyb1.text7" />鍋ュ悍</td>
+ <td><input @change="changeByb($event,'text8')" type="checkbox" :checked="chapter002.tablebyb1.text8" />鍋ュ悍</td>
</tr>
<tr>
<td>3</td>
- <td>绀句細鏂归潰涓嶅仴搴�</td>
- <td>鍋ュ悍</td>
- <td>鍋ュ悍</td>
- <td>涓嶅仴搴�</td>
+ <td><input @change="changeByb($event,'text9')" type="checkbox" :checked="chapter002.tablebyb1.text9" />绀句細鏂归潰涓嶅仴搴�</td>
+ <td><input @change="changeByb($event,'text10')" type="checkbox" :checked="chapter002.tablebyb1.text10" />鍋ュ悍</td>
+ <td><input @change="changeByb($event,'text11')" type="checkbox" :checked="chapter002.tablebyb1.text11" />鍋ュ悍</td>
+ <td><input @change="changeByb($event,'text12')" type="checkbox" :checked="chapter002.tablebyb1.text12" />涓嶅仴搴�</td>
</tr>
<tr>
<td>4</td>
- <td>鎮ｇ枒鐥呯棁</td>
- <td>涓嶅仴搴�</td>
- <td>鍋ュ悍</td>
- <td>鍋ュ悍</td>
+ <td><input @change="changeByb($event,'text13')" type="checkbox" :checked="chapter002.tablebyb1.text13" />鎮ｇ枒鐥呯棁</td>
+ <td><input @change="changeByb($event,'text14')" type="checkbox" :checked="chapter002.tablebyb1.text14" />涓嶅仴搴�</td>
+ <td><input @change="changeByb($event,'text15')" type="checkbox" :checked="chapter002.tablebyb1.text15" />鍋ュ悍</td>
+ <td><input @change="changeByb($event,'text16')" type="checkbox" :checked="chapter002.tablebyb1.text16" />鍋ュ悍</td>
</tr>
<tr>
<td>5</td>
- <td>韬綋涓嶅仴搴�</td>
- <td>鍋ュ悍</td>
- <td>涓嶅仴搴�</td>
- <td>鍋ュ悍</td>
+ <td><input @change="changeByb($event,'text17')" type="checkbox" :checked="chapter002.tablebyb1.text17" />韬綋涓嶅仴搴�</td>
+ <td><input @change="changeByb($event,'text18')" type="checkbox" :checked="chapter002.tablebyb1.text18" />鍋ュ悍</td>
+ <td><input @change="changeByb($event,'text19')" type="checkbox" :checked="chapter002.tablebyb1.text19" />涓嶅仴搴�</td>
+ <td><input @change="changeByb($event,'text20')" type="checkbox" :checked="chapter002.tablebyb1.text20" />鍋ュ悍</td>
</tr>
<tr>
<td>6</td>
- <td>闀挎湡鍙楃梾鎶樼（</td>
- <td>涓嶅仴搴�</td>
- <td>涓嶅仴搴�</td>
- <td>鍋ュ悍</td>
+ <td><input @change="changeByb($event,'text21')" type="checkbox" :checked="chapter002.tablebyb1.text21" />闀挎湡鍙楃梾鎶樼（</td>
+ <td><input @change="changeByb($event,'text22')" type="checkbox" :checked="chapter002.tablebyb1.text22" />涓嶅仴搴�</td>
+ <td><input @change="changeByb($event,'text23')" type="checkbox" :checked="chapter002.tablebyb1.text23" />涓嶅仴搴�</td>
+ <td><input @change="changeByb($event,'text24')" type="checkbox" :checked="chapter002.tablebyb1.text24" />鍋ュ悍</td>
</tr>
<tr>
- <td>7</td>
- <td>涔愯</td>
- <td>鍋ュ悍</td>
- <td>涓嶅仴搴�</td>
- <td>鍋ュ悍</td>
+ <td>7</td>
+ <td><input @change="changeByb($event,'text25')" type="checkbox" :checked="chapter002.tablebyb1.text25" />涔愯</td>
+ <td><input @change="changeByb($event,'text26')" type="checkbox" :checked="chapter002.tablebyb1.text26" />鍋ュ悍</td>
+ <td><input @change="changeByb($event,'text27')" type="checkbox" :checked="chapter002.tablebyb1.text27" />涓嶅仴搴�</td>
+ <td><input @change="changeByb($event,'text28')" type="checkbox" :checked="chapter002.tablebyb1.text28" />鍋ュ悍</td>
</tr>
<tr>
<td>8</td>
- <td>鎮ｇ梾涓ラ噸</td>
- <td>涓嶅仴搴�</td>
- <td>涓嶅仴搴�</td>
- <td>涓嶅仴搴�</td>
+ <td><input @change="changeByb($event,'text29')" type="checkbox" :checked="chapter002.tablebyb1.text29" />鎮ｇ梾涓ラ噸</td>
+ <td><input @change="changeByb($event,'text30')" type="checkbox" :checked="chapter002.tablebyb1.text30" />涓嶅仴搴�</td>
+ <td><input @change="changeByb($event,'text31')" type="checkbox" :checked="chapter002.tablebyb1.text31" />涓嶅仴搴�</td>
+ <td><input @change="changeByb($event,'text32')" type="checkbox" :checked="chapter002.tablebyb1.text32" />涓嶅仴搴�</td>
</tr>
</tbody>
</table>
@@ -1020,13 +1206,28 @@
},
data() {
return {
- chapter002:{
- tablexyx1:{},
-
- }
+ chapter002: {
+ tablexyx1: {},
+ tablebyb1:{}
+ },
};
},
created() {
+ const localData = JSON.parse(localStorage.getItem("chapter002"));
+ if (localData) {
+ this.chapter002 = { ...Object.assign(this.chapter002, localData) };
+ console.log(this.chapter002);
+ }
+ },
+ methods: {
+ changeBox(e, val) {
+ this.chapter002.tablexyx1[val] = e.target.checked;
+ localStorage.setItem("chapter002", JSON.stringify(this.chapter002));
+ },
+ changeByb(e, val) {
+ this.chapter002.tablebyb1[val] = e.target.checked;
+ localStorage.setItem("chapter002", JSON.stringify(this.chapter002));
+ },
},
};
</script>
--
Gitblit v1.9.1