From 88c89a86c370f9824e975d8958bfd057013aa9fd Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期五, 14 六月 2024 18:10:15 +0800
Subject: [PATCH] 艺术戏剧（优化）
---
src/books/artAndDrama/view/components/chapter004.vue | 290 +++++
src/books/artAndDrama/view/components/chapter005.vue | 260 ++++
src/books/artAndDrama/assets/main.less | 17
src/books/artAndDrama/view/components/chapter003.vue | 396 ++++++
src/books/artAndDrama/view/components/chapter002.vue | 743 +++---------
src/books/artAndDrama/view/components/chapter001.vue | 32
src/books/artAndDrama/view/components/index.vue | 1623 ++++++++++++++--------------
7 files changed, 1,977 insertions(+), 1,384 deletions(-)
diff --git a/src/books/artAndDrama/assets/main.less b/src/books/artAndDrama/assets/main.less
index b30b770..4aa7c90 100644
--- a/src/books/artAndDrama/assets/main.less
+++ b/src/books/artAndDrama/assets/main.less
@@ -595,20 +595,13 @@
}
}
/* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */
-@media (max-width: 430px) {
- .ans-drama {
- .page-box {
- min-height: 750px;
- }
- .pg-mh {
- min-height: 815px !important;
- }
- }
- }
@media (max-width: 660px) {
.ans-drama {
- /* 鍒嗛〉padding */
- .page-padding {
+ .pg-mh {
+ min-height: 815px !important;
+ }
+ /* 鍒嗛〉padding */
+ .page-padding {
padding: 104px 20px;
}
.padding-96 {
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index 0de2d1b..babd03a 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -3,7 +3,6 @@
<div class="page-box" page="4">
<div v-if="showPageList.indexOf(4) > -1">
<h1 id="a004">
- <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
<img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
<audio :src="auidoPathOne" class="audio" controls></audio>
</h1>
@@ -14,20 +13,18 @@
<img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
</p>
</div>
-
<p class="block">
鍦ㄦ晠浜嬨�婁竴鍧楀ザ閰�嬩腑锛岃殏铓佸搴殑姣忎竴浣嶆垚鍛橀兘涓轰簡鍏卞悓鐨勭洰鏍囧垎宸ュ崗浣溿�佸姫鍔涘鏂楋紝鍦ㄩ潰瀵硅鎯戝拰鎸戞垬鏃舵洿鏄弗浜庡緥宸便�侀伒瀹堝洟闃熺邯寰嬨�傛湰鍗曞厓锛岃鎴戜滑璇讳竴璇汇�婁竴鍧楀ザ閰�嬬殑鏁呬簨锛屽涔犺殏铓佷滑鐨勪紭绉�鍝佹牸鍚э紒
</p>
</div>
</div>
<p><br /></p>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
<img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
<div class="page-footer-number-right">1</div>
</div>
</div>
- </div>
+ </div>
<div class="page-box" page="5">
<div v-if="showPageList.indexOf(5) > -1">
<h1>
@@ -49,8 +46,8 @@
<audio :src="auidoPathTwo" class="audio" controls></audio>
</h1>
<p>灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
- <!-- 杩炵嚎棰� -->
- <matching :rawData="rawData" :item="question"></matching>
+ <!-- 杩炵嚎棰� -->
+ <matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'"></matching>
</div>
<p><br /></p>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -351,7 +348,7 @@
controlslist="nodownload" class="w100"
style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
<h2>瑙嗛: 鎴戜滑鏄竴瀹朵汉</h2>
- </p>
+ </p>
</div>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -373,6 +370,10 @@
showPageList: {
type: Array,
},
+ primaryColor:{
+ type:String,
+ default:"red"
+ }
},
//鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
mounted() {
@@ -385,9 +386,6 @@
data() {
return {
videoPathOne: "",
- videoPathTwo: "",
- videoPathThree: "",
- videoPathFour: "",
auidoPathOne: "",
auidoPathTwo: "",
auidoPathThree: "",
@@ -530,21 +528,11 @@
},
};
},
-
methods: {
//瑙嗛鍜岄煶棰戠殑MD5鍦板潃
async getVidoePath() {
this.videoPathOne = await getResourcePath(
"691cbd2c13198d04afc7800d0f2cafb0"
- );
- this.videoPathTwo = await getResourcePath(
- "a3c9b55ac8227e4c885384ff2fc6c0e7"
- );
- this.videoPathThree = await getResourcePath(
- "dd44a1e31b4304f50d10b2481a148411"
- );
- this.videoPathFour = await getResourcePath(
- "09de7704eeaaf3a210b8c6af0a94d545"
);
// this.auidoPathOne = await getResourcePath(
// "2c5f6c69b0f9f7a3c03e473cb8c977f5"
@@ -591,4 +579,8 @@
height: 100%;
background-color: red;
}
+.macthing{
+ background-color: rgb(188, 220, 164);
+ padding: 5% 5%;
+}
</style>
\ No newline at end of file
diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue
index 64b2132..c9c21d4 100644
--- a/src/books/artAndDrama/view/components/chapter002.vue
+++ b/src/books/artAndDrama/view/components/chapter002.vue
@@ -1,6 +1,6 @@
<template>
<div class="chapter" num="3">
- <!-- <div class="page-box" page="14" style="min-height: auto">
+ <div class="page-box" page="14">
<div v-if="showPageList.indexOf(14) > -1">
<h1 id="a004">
<img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
@@ -13,24 +13,23 @@
<img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
</p>
</div>
-
<p class="block">
鎴忓墽琛ㄦ紨涓殑鍔ㄤ綔銆佷綋鎬併�佺溂绁炪�佸０闊冲湪濉戦�犺鑹叉椂璧峰埌浜嗛噸瑕佺殑浣滅敤銆傛湰鍗曞厓鎴戜滑灏嗙户缁涔犮�婁竴鍧楀ザ閰�嬬殑鏁呬簨锛屽苟浠ュ伓鍓х殑褰㈠紡杩涜琛ㄦ紨銆�
</p>
</div>
</div>
<p><br /></p>
- <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">11</div>
+ </div>
</div>
</div>
- <div class="page-box" page="15" style="min-height: auto">
+ <div class="page-box" page="15">
<div v-if="showPageList.indexOf(15) > -1">
<h1>
- <img
- src="../../assets/images/header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
<div class="bodystyle">
<img src="../../assets/images/page5.png" alt="" />
@@ -45,539 +44,228 @@
</p>
<p><span class="hs1">鈼�</span>鍡呰澶у啋闄�</p>
<p>
- 浣犳渶鐖卞悆鐨勯鐗╂槸_________銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
+ 浣犳渶鐖卞悆鐨勯鐗╂槸 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%" />銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
</p>
<p>
- 浣犳渶涓嶇埍鍚冪殑椋熺墿鏄痏________銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
+ 浣犳渶涓嶇埍鍚冪殑椋熺墿鏄� <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%"/>銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
</p>
- <h3 class="lefth3" id="c012">
+ <h3 class="lefth3 openImgBox" id="c012">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
<p>
- <span class="hs1">鈼�</span
- >浠ュ皬缁勪负鍗曚綅锛屼娇鐢ㄦ墜鍋堕亾鍏疯〃婕旈檮褰曚腑鐨勫墽鏈�夋2銆�
+ <span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛屼娇鐢ㄦ墜鍋堕亾鍏疯〃婕旈檮褰曚腑鐨勫墽鏈�夋2銆�
</p>
- <p class="center">
- <img class="img-e" alt="" src="../../assets/images/0016-2.jpg" />
+ <p class="center openImgBox">
+ <img class="img-e" alt="" src="../../assets/images/2-1.gif" />
</p>
</div>
<p><br /></p>
- <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">12</div>
+ </div>
</div>
- </div> -->
- <!--<div class="page-box" page="16" style="min-height: auto">
- <div v-if="showPageList.indexOf(16) > -1">
- <h1>
- <img
- src="../../assets/images/page6-header-green.png"
- alt=""
- style="height: auto; width: 100%"
- />
- </h1>
- <div class="bodystyle">
- <h1 class="lefth3" id="c002">
- <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
- </h1>
- <p><span class="hs1">鈼�</span>璇烽�夊嚭浣犺涓烘纭殑绛旀銆�</p>
- <p class="center">
- <img class="img-e" alt="" src="../../assets/images/1-2铓傝殎涓惧ぇ鏍�.gif" />
- </p>
- <p>铓傝殎鏄吀鍨嬬殑锛堛��銆�锛夋槅铏�傦紙澶氶�夛級</p>
- <p>A.缇ゅ眳</p>
- <p>B.绀句細鎬�</p>
- <p>C.鐙眳</p>
- <p>铓傝殎鍐呴儴鏈夛紙銆�銆�锛夊垎宸ャ�傦紙澶氶�夛級</p>
- <p>A.鏄庣‘鐨�</p>
- <p>B.濂囨�殑</p>
- <p>C.鏈夊簭鐨�</p>
- <p>涓�涓紙銆�銆�锛夌兢浣撳皯涓嶄簡榛樺鐨勯厤鍚堛�傦紙澶氶�夛級</p>
- <p>A.鍥㈢粨鐨�</p>
- <p>B.浼樼鐨�</p>
- <p>C.鏉炬暎鐨�</p>
- <video
- :src="videoPathOne"
- webkit-playsinline="true"
- x-webkit-airplay="true"
- playsinline="true"
- x5-video-orientation="h5"
- x5-video-player-fullscreen="true"
- x5-playsinline=""
- controls
- controlslist="nodownload"
- class="w100"
- style="margin-top: 40px"
- ></video>
- </div>
-
+ </div>
+ <div class="page-box" page="16">
+ <div v-if="showPageList.indexOf(16) > -1">
+ <h1>
+ <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b007">绗簩璇俱��鏄庡療绉嬫</h2>
+ <h3 class="lefth3" id="c013"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鎴戜滑鐨勪笘鐣屼簲褰╂枒鏂撱�傝浣犲～涓�濉紝鎻愬埌杩欎簺棰滆壊锛屼綘鎯冲埌浜嗗摢浜涗簨鐗╋紵</p>
+ <p>榛勮壊锛氭煚妾��<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%"/>銆�<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%"/>銆�</p>
+ <p>绾㈣壊锛氶灜鐐��<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%"/>銆�<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%"/>銆�</p>
+ <p>缁胯壊锛氬彾瀛愩��<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%"/>銆�<input v-model="questionData.warnUp.eight" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%"/>銆�</p>
+ <p>榛戣壊锛氶粦鏉裤��<input v-model="questionData.warnUp.nine" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%"/>銆�<input v-model="questionData.warnUp.ten" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%"/>銆�</p>
+ <p>钃濊壊锛氬ぇ娴枫��<input v-model="questionData.warnUp.eleven" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%"/>銆�<input v-model="questionData.warnUp.twelve" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%"/>銆�</p>
+ <h3 class="lefth3" id="c014"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>闃呰涓嬮潰鐨勬枃瀛楋紝涓哄皬铓傝殎閫夋嫨涓�绉嶆�ф牸鍚с��</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-2.gif" /></p>
+ <p>铓傝殎闃熼暱璧拌矾鏄傞鎸鸿兏銆佹浼愬潥瀹氾紝瀹冩槸涓�鍙紙銆�銆�锛夎殏铓侊紱灏忚殏铓佽蛋璧疯矾鏉ュ皬蹇冪考缈硷紝鐪肩椋樺拷涓嶅畾锛屽畠鏄竴鍙紙銆�銆�锛夎殏铓侊紱铓傝殎灏忓闈㈠甫寰瑧锛屾椂鍒绘効鎰忓府鍔╁ぇ瀹讹紝瀹冩槸涓�鍙紙銆�銆�锛夎殏铓併��</p>
+ <p>A.鑳嗗皬鐨�</p>
+ <p>B.鍠勮壇鐨�</p>
+ <p>C.娌夌ǔ鐨�</p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">13</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="17">
+ <div v-if="showPageList.indexOf(17) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b008">绗笁璇俱��闂诲０璇嗕汉</h2>
+ <h3 class="lefth3" id="c015"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p>甯歌█閬擄細鑹█涓�鍙ヤ笁鍐殩锛屾伓璇激浜哄叚鏈堝瘨銆傝瑷�鍦ㄤ汉涓庝汉鐨勪氦寰�涓捣鐫�閲嶈鐨勪綔鐢紝鏈夌潃鏃犵┓鐨勫姏閲忋��</p>
+ <p><span class="hs1">鈼�</span>濡傛灉鏈嬪弸蹇冩儏涓嶅ソ锛屼綘璇ユ�庝箞瀹夋叞浠�/濂瑰憿锛�</p>
+ <p>鈥�<input v-model="questionData.warnUp.thirteen" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 50%"/>鈥�</p>
+ <p><span class="hs1">鈼�</span>濡傛灉浣犻個璇峰ソ鏈嬪弸鏉ュ閲屽仛瀹紝浣犺璇翠粈涔堟潵娆㈣繋浠�/濂瑰憿锛�</p>
+ <p>鈥�<input v-model="questionData.warnUp.fourteen" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 50%"/>鈥�</p>
+ <h3 class="lefth3" id="c016"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>璇锋牴鎹彁绀鸿鍑哄彞瀛愶紝娉ㄦ剰澹伴煶鍜岃姘旂殑鍙樺寲銆�</p>
+ <p><span class="hs">杩欎竴澶у潡濂堕叒閮芥槸鎴戠殑浜嗭紒</span>锛堜竴鍙嫛鐚剧殑铓傝殎锛屾兂瑕佹妸濂堕叒鍋峰伔鍦板崰涓哄繁鏈夛級</p>
+ <p><span class="hs">杩欎竴澶у潡濂堕叒閮芥槸鎴戠殑浜嗭紒</span>锛堜竴鍙杽鑹殑铓傝殎锛屽湪甯姪浠栦汉鍚庡緱鍒颁簡濂栧姳锛�</p>
+ <p><span class="hs">杩欏潡濂堕叒澶矇浜嗭紝鎴戜滑浼戞伅涓�涓嬪惂锛�</span>锛堜弗鑲冪殑铓傝殎闃熼暱锛屽悜闃熶紞鍙戝嚭鍛戒护锛�</p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">14</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="18">
+ <div v-if="showPageList.indexOf(18) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <p><span class="hs">杩欏潡濂堕叒澶矇浜嗭紝鎴戜滑浼戞伅涓�涓嬪惂锛�</span>锛堜竴鍙急灏忕殑铓傝殎锛屽湪鍚戣殏铓侀槦闀胯姹備紤鎭級</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-3.gif" /></p>
+ </div>
+ </div>
+ <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">15</div>
+ </div>
+ </div>
+ <div class="page-box" page="19">
+ <div v-if="showPageList.indexOf(19) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b009">绗洓璇俱��鐪熷惉鐪熺湅鐪熸劅鍙�</h2>
+ <h3 class="lefth3" id="c017"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p>寰呬汉鎺ョ墿鏈夌ぜ鏈夎妭銆佽唉鍗戞伃鏁紝鍦ㄨ浠栦汉鎰熷埌濡傛矏鏄ラ鐨勫悓鏃讹紝涔熶細璁╄嚜宸卞彈鍒颁粬浜虹殑灏婇噸鍜岀悊瑙ｃ�傝璇翠竴璇达紝鍦ㄤ笅闈㈣繖浜涘満鏅腑浣犲簲璇ュ浣曞仛锛�</p>
+ <p><span class="hs1">鈼�</span>浣犵湅鍒板濡堢殑姘存澂娌℃按浜嗐��</p>
+ <p><span class="hs1">鈼�</span>鐢垫閲岋紝浣犵珯鍦ㄦ渶鍓嶆帓锛屽悗闈㈢殑浜洪渶瑕佷笅鐢垫銆�</p>
+ <h3 class="lefth3" id="c018"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p>浣犵煡閬撳悧锛熸棤瀹炵墿璁粌鏄竴绉嶈缁冩紨鍛樼殑鏈夋晥鏂规硶锛屼笉浠呰兘澶熷煿鍏绘紨鍛樿壇濂界殑鎯宠薄鑳藉姏锛屾洿鑳藉鍩瑰吇鍏惰鍔ㄧ殑閫昏緫鎬у拰鎯呮櫙閫傚簲鎬э紝鏈�缁堟彁楂樺叾濉戦�犱汉鐗╁舰璞＄殑鑳藉姏銆�</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-4.gif" /></p>
+ <p><span class="hs1">鈼�</span>璇疯瘯鐫�鐢ㄦ棤瀹炵墿琛ㄦ紨鐨勬柟寮忔妸涓嬮潰鐨勬儏鏅〃婕斿嚭鏉ュ惂锛�</p>
+ <p class="center"><img class="img-0" alt="" src="../../assets/images/0020-2.jpg" /></p>
+ </div>
+ </div>
+ <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">16</div>
+ </div>
+ </div>
+ <div class="page-box" page="20">
+ <div v-if="showPageList.indexOf(20) > -1">
+ <h1>
+ <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b010">鍗曞厓娲诲姩浠诲姟</h2>
+ <h3 class="lefth3" id="c019"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鍚圭焊缁冧範</p>
+ <p class="center"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" /></p>
+ <p>鎵句竴寮犵焊宸撅紝灏嗗畠鎸夊湪澧欎笂銆傜Щ寮�鍙屾墜锛屽姫鍔涚敤姘旀伅灏嗙焊鈥滈拤鈥濆湪澧欓潰涓婏紝涓嶈璁╁畠鍚戜笅婊戣惤銆�</p>
+ <p><span class="hs1">鈼�</span>鍚圭瑪缁冧範</p>
+ <p>灏嗕竴鏀瑪绔嬩簬妗岄潰锛岀湅鐪嬩綘鑳戒笉鑳界敤涓�鍙ｆ皵灏嗗畠鍚瑰�掋��</p>
+ <p><span class="hs1">鈼�</span>鍚硅瀛愮粌涔�</p>
+ <p>灏嗕竴鍙鏂欒鎶涜嚦绌轰腑锛屽拰浣犵殑灏忎紮浼翠竴璧疯疆娴佸惞姘旓紝閬垮厤濉戞枡琚嬭惤鍦般��</p>
+ </div>
+ </div>
+ <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">17</div>
+ </div>
+ </div>
+ <div class="page-box" page="21">
+ <div v-if="showPageList.indexOf(21) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <p><span class="hs1">鈼�</span>鍚逛箳涔撶悆缁冧範</p>
+ <p>鐢ㄦ皵鎭皢妗岄潰涓婄殑涔掍箵鐞冧粠鈥滆捣鐐光�濊繍閫佽嚦鈥滅粓鐐光�濓紝杩愰�佽繃绋嬩腑閬垮厤涔掍箵鐞冭Е纰伴殰纰嶇墿銆�</p>
+ <h3 class="lefth3" id="c020"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>璇疯蛋杩涘墽鍦鸿鐪嬩笉鍚屽墽绉嶇殑鐜板満婕斿嚭锛屾劅鍙楁垙鍓х殑榄呭姏鍚э紒</p>
<p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
+ <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
+ x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
+ controlslist="nodownload" class="w100"
+ style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
+ <h2>瑙嗛: 鎯熷鎯熻倴鐨勪汉鐗�</h2></p>
</div>
</div>
- <div class="page-box" page="17" style="min-height: auto">
- <div v-if="showPageList.indexOf(17) > -1">
- <h1>
- <img
- src="../../assets/images/header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
- </h1>
- <div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
- <h2 id="b002">绗簩璇俱��娲ユ触涔愰亾</h2>
- <h3 class="lefth3" id="c003">
- <img class="img-gn1" alt="" src="image/rhybx.jpg" />
- </h3>
- <p>
- <span class="hs1">鈼�</span
- >璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
- </p>
- <audio :src="auidoPathThree" controls></audio>
- <div class="bj3">
- <p class="center">
- <span class="hs"
- >鏄�<a id="w1"></a><a href="chapter003.html#m1"><sup>[1]</sup></a
- >锛堣妭閫夛級</span
- >
- </p>
- <p class="center">鏈辫嚜娓�</p>
- <p class="block">
- 鐩兼湜鐫�锛�<span class="un1">鐩兼湜鐫�</span>锛屼笢椋庢潵浜嗭紝鏄ュぉ鐨勮剼姝�<span
- class="un1"
- >杩�</span
- >浜嗐��
- </p>
- <p class="block">
- 涓�鍒囬兘鍍�<span class="un1">鍒氱潯閱�</span>鐨勬牱瀛愶紝娆ｆ鐒�<span
- class="un1"
- >寮犲紑</span
- >浜嗙溂銆傚北<span class="un1">鏈楁鼎</span>璧锋潵浜嗭紝姘�<span class="un1"
- >娑�</span
- >璧锋潵浜嗭紝澶槼鐨勮劯<span class="un1">绾�</span>璧锋潵浜嗐��
- </p>
- </div>
- <h3 class="lefth3" id="c004">
- <img class="img-gn1" alt="" src="image/czysj.jpg" />
- </h3>
- <p>
- <span class="hs1">鈼�</span
- >鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝灏忚殏铓佷滑閮芥湁鍚勮嚜鐨勭珛鍦猴紝浣犺兘鐞嗚В浠栦滑鐨勬兂娉曞悧锛熻浣犲拰鍚屼即鏍规嵁鏁呬簨鍐呭璁ㄨ涓�涓嬨��
- </p>
- <hr />
- <p class="note">
- <a id="m1"></a><a href="chapter003.html#w1">[1]</a>
- 鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
- 涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
- </p>
- </div>
-
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
- </div>
+ <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">18</div>
</div>
- <div class="page-box" page="18" style="min-height: auto">
- <div v-if="showPageList.indexOf(18) > -1">
- <h1>
- <img
- src="../../assets/images/header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
- </h1>
- <div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
- <h2 id="b003">绗笁璇俱��鍐呭績鐨勫０闊�</h2>
- <h1 class="lefth3" id="c005">
- <img
- class="img-gn1"
- alt=""
- src="../../assets/images/1-3.gif"
- style="height: auto; width: 50%"
- />
- </h1>
- <p>
- <span class="hs1">鈼�</span
- >璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
- </p>
- <p class="center">
- <img class="img-e" alt="" src="image/0009-1.jpg" />
- </p>
- <audio :src="auidoPathTwo" controls></audio>
- <div class="bj3">
- <p class="center">
- <span class="hs"
- >鏄�<a id="w1"></a><a href="chapter004.html#m1"><sup>[1]</sup></a
- >锛堣妭閫夛級</span
- >
- </p>
- <p class="center">鏈辫嚜娓�</p>
- <p class="block">
- 灏忚崏鍋峰伔鍦颁粠鍦熼噷<span class="un1">閽诲嚭鏉�</span>锛�<span class="un1"
- >瀚╁鐨�</span
- >锛�<span class="un1">缁跨豢鐨�</span>銆傚洯瀛愰噷锛岀敯閲庨噷锛�<span
- class="un1"
- >鐬�</span
- >鍘伙紝涓�澶х墖涓�澶х墖婊℃槸鐨勩��<span class="un1">鍧�</span>鐫�锛�<span
- class="un1"
- >韬�</span
- >鐫�锛�<span class="un1">鎵�</span>涓や釜<span class="un1">婊�</span
- >鍎匡紝<span class="un1">韪�</span>鍑犺剼<span class="un1">鐞�</span
- >锛�<span class="un1">璧�</span>鍑犺稛<span class="un1">璺�</span
- >锛�<span class="un1">鎹�</span>鍑犲洖<span class="un1">杩疯棌</span
- >銆傞<span class="un1">杞绘倓鎮�</span>鐨勶紝鑽�<span class="un1"
- >杞坏缁�</span
- >鐨勩��
- </p>
- </div>
- <h3 class="lefth3" id="c006">
- <img class="img-gn1" alt="" src="image/czysj.jpg" />
- </h3>
- <p class="center">
- <img class="img-e" alt="" src="image/0010-1.jpg" />
- </p>
- <hr />
- <p class="note">
- <a id="m1"></a><a href="chapter004.html#w1">[1]</a>
- 鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
- 涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
- </p>
- </div>
- </div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
- </div>
- <div class="page-box" page="19" style="min-height: auto">
- <div v-if="showPageList.indexOf(19) > -1">
- <h1>
- <img
- src="../../assets/images/header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
- </h1>
- <div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
- <h3 class="lefth3" id="c006">
- <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
- </h3>
- <h1 class="center">
- <img
- class="img-e"
- alt=""
- src="../../assets/images/1-4.gif"
- style="height: auto; width: 50%"
- />
- </h1>
- <p>
- <span class="hs1">鈼�</span
- >鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫０闊冲嚭鐜帮細涓�涓０闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓０闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓ｇ殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
- </p>
- <p>姝ｄ箟闃熼暱锛氣�淿________________________________銆傗��</p>
- <p>榛戞殫闃熼暱锛氣�淿________________________________銆傗��</p>
- </div>
- </div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
- </div>
- <div class="page-box" page="20" style="min-height: auto">
- <div v-if="showPageList.indexOf(20) > -1">
- <h1>
- <img
- src="../../assets/images/page6-header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
- </h1>
- <div class="bodystyle">
- <h2 id="b004">绗洓璇俱��韬复鍏跺</h2>
- <h3 class="lefth3" id="c007">
- <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
- </h3>
- <p>
- <span class="hs1">鈼�</span
- >璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
- </p>
- <audio :src="auidoPathTwo" controls></audio>
- <div class="bj3">
- <p class="center">
- <span class="hs"
- >鏄�<a id="w1"></a><a href="chapter005.html#m1"><sup>[1]</sup></a
- >锛堣妭閫夛級</span
- >
- </p>
- <p class="center">鏈辫嚜娓�</p>
- <p class="block">
- <span class="un1">妗�</span>鏍戙��<span class="un1">鏉�</span
- >鏍戙��<span class="un1">姊�</span
- >鏍戯紝浣犱笉璁╂垜锛屾垜涓嶈浣狅紝閮藉紑婊′簡鑺辫刀瓒熷効銆傜孩鐨勫儚<span class="un1"
- >鐏�</span
- >锛岀矇鐨勫儚<span class="un1">闇�</span>锛岀櫧鐨勫儚<span class="un1"
- >闆�</span
- >銆傝姳閲屽甫鐫�鐢滃懗鍎库�︹��
- </p>
- </div>
- <h3 class="lefth3" id="c008">
- <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
- </h3>
- <p>
- <span class="hs1">鈼�</span
- >鍋囧浣犳槸鎼繍濂堕叒鐨勮殏铓侊紝浣犺鎬庝箞鎼繍涓嶅悓褰㈢姸銆佸ぇ灏忕殑濂堕叒鍛紵璇峰厛涓鸿嚜宸辫璁′竴涓墽鏈惂锛�
- </p>
- <p>
- 鎴戞槸铓傝殎_________锛堝悕瀛楋級锛屼粖澶╂槸_________锛堝ぉ姘旓級锛屾垜鐨勫ザ閰壒鍒玙________锛堣交/閲嶏級锛屾垜鎰熻濂絖________锛堣韩浣撴劅瑙夛級鍟婏紒
- </p>
- <hr />
- <p class="note">
- <a id="m1"></a><a href="chapter003.html#w1">[1]</a>
- 鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
- 涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
- </p>
- </div>
- </div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
- </div>
- <div class="page-box" page="21" style="min-height: auto">
- <div v-if="showPageList.indexOf(21) > -1">
- <h1>
- <img
- src="../../assets/images/header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
- </h1>
- <div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
- <p class="center">
- <img class="img-e" alt="" src="../../assets/images/1-5.gif" />
- </p>
- <p>
- <span class="hs1">鈼�</span
- >铓傝殎闃熼暱鎶婂ザ閰福鐣欑粰浜嗗勾榫勬渶灏忕殑铓傝殎锛岃耽寰椾簡澶у鐨勮鍙�傚湪鐢熸椿涓紝浣犳浘缁忓儚鈥滆殏铓侀槦闀库�濅竴鏍风埍鎶ゅ急灏忓悧锛熸垨鑰呭儚鈥滃皬铓傝殎鈥濅竴鏍峰緱鍒拌繃鍝ュ摜濮愬浠殑鍏崇埍鍚楋紵
- </p>
- </div>
- </div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
- </div>
- <div class="page-box" page="22" style="min-height: auto">
- <div v-if="showPageList.indexOf(22) > -1">
- <h1>
- <img
- src="../../assets/images/page6-header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
- </h1>
- <div class="bodystyle">
- <h2 id="b005">鍗曞厓娲诲姩浠诲姟</h2>
- <h3 class="lefth3" id="c009">
- <img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
- </h3>
- <p><span class="hs1">鈼�</span>鏀惧ぇ缂╁皬</p>
- <p>
- 璇蜂綘浜ゆ浛鈥滄斁澶р�濆拰鈥滅缉灏忊�濅簲瀹樸�傚湪鈥滄斁澶р�濇椂锛屾兂璞′簲瀹樿椋炲埌澶栧お绌猴紱鍦ㄢ�滅缉灏忊�濇椂锛屾兂璞′簲瀹樺叏閮ㄧ缉灏忓埌浜嗛蓟灏栦笂銆�
- </p>
- <p><span class="hs1">鈼�</span>鎻愬崌鑻规灉鑲�</p>
- <p>
- 鎯宠薄浣犲湪涓�涓檶鐢熺殑鍦版柟锛岃皝閮戒笉璁よ瘑锛岀獊鐒堕亣瑙佷簡濂芥湅鍙嬶紝浣犲緢楂樺叴锛屼笂鍓嶅拰浠�/濂规墦鎷涘懠銆傚仛涓�鍋氫綘姝ゆ椂鐨勮〃鎯呭惂銆�
- </p>
- <p><span class="hs1">鈼�</span>寰瑧璇粹�渁ng鈥�</p>
- <p>
- 璇蜂綘璇曚竴璇曞湪鎻愬崌鑻规灉鑲岀殑鍩虹涓婏紝鍙戝嚭鈥渁ng鈥濈殑闊炽�傚０闊宠灏藉彲鑳芥媺闀裤�佷繚鎸佺ǔ瀹氾紝骞跺悜杩滈�併��
- </p>
- <p><span class="hs1">鈼�</span>鍚戣繙灞卞枈鈥滈樋姣涒��</p>
- <p>
- 鎯宠薄鑷繁绔欏湪涓�搴ч珮灞变笂锛屽ソ鏈嬪弸鈥滈樋姣涒�濈珯鍦ㄥ闈㈢殑楂樺北涓婏紝浣犺濡備綍鍠婁粬鍛紵
- </p>
- </div>
- </div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
- </div>
- <div class="page-box" page="23" style="min-height: auto">
- <div v-if="showPageList.indexOf(23) > -1">
- <h1>
- <img
- src="../../assets/images/page6-header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
- </h1>
- <div class="bodystyle">
- <h3 class="lefth3" id="c010">
- <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
- </h3>
- <p><span class="hs1">鈼�</span>鎺掍竴鎺捖锋紨涓�婕旓細瀛旇瀺璁╂ⅷ</p>
- <p>
- 瀛旇瀺鍥涘瞾灏辨噦绀艰矊銆佺煡璋﹁锛屾槸鎴戜滑瀛︿範鐨勫ソ姒滄牱锛岃鎴戜滑杩愮敤鏈崟鍏冪殑鎴忓墽鐭ヨ瘑锛屾妸浠栫殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒
- </p>
- <p class="center">
- <video
- :src="videoPathOne"
- webkit-playsinline="true"
- x-webkit-airplay="true"
- playsinline="true"
- x5-video-orientation="h5"
- x5-video-player-fullscreen="true"
- x5-playsinline=""
- controls
- controlslist="nodownload"
- class="w100"
- style="margin-top: 40px"
- ></video>
- </p>
- </div>
- </div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
- </div> -->
+ </div>
</div>
</template>
-
- <script>
-//import matching from "@/components/matching/matching.vue";
+
+<script>
+
import { getResourcePath } from "@/assets/methods/resources";
export default {
name: "chapterTwo",
- //components: { matching },
props: {
showPageList: {
type: Array,
},
- },
- //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
+ },
+ //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
mounted() {
this.getVidoePath();
+ const bookQuestion = localStorage.getItem("artAndDrama-book-question-two");
+ if (bookQuestion) {
+ this.questionData = JSON.parse(bookQuestion);
+ }
},
data() {
return {
videoPathOne: "",
- videoPathTwo: "",
- videoPathThree: "",
- videoPathFour: "",
auidoPathOne: "",
- auidoPathTwo: "",
- auidoPathThree: "",
- rawData: {
- left: [
- {
- oldId: "FB34",
- txt: "鎴戣浣犲悆鑻规灉鍚э紒",
- },
- {
- oldId: "64D6",
- txt: "鎴戣浣犲悆鑻规灉鍚э紒",
- },
- {
- oldId: "2ED4",
- txt: "鎴戣浣犲悆鑻规灉鍚э紒",
- },
- {
- oldId: "44DE",
- txt: "鎴戣浣犲悆鑻规灉鍚э紒",
- },
- ],
- right: [
- {
- oldId: "64D6",
- txt: "寮鸿皟鏄瀹�",
- },
- {
- oldId: "FB34",
- txt: "寮鸿皟璇风殑鏄�滀綘鈥�",
- },
- {
- oldId: "2ED4",
- txt: "寮鸿皟鍚冪殑涓滆タ鏄�滆嫻鏋溾��",
- },
- {
- oldId: "44DE",
- txt: "寮鸿皟璇峰鐨勪汉鏄�滄垜鈥�",
- },
- ],
- },
- question: {
- KnowledgePoint: "123",
- analysis: "123",
- answer: [
- {
- id: "FB34",
- linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
- value: "寮鸿皟鏄瀹�",
- },
- {
- id: "64D6",
- linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
- value: "寮鸿皟璇风殑鏄�滀綘鈥�",
- },
- {
- id: "2ED4",
- linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
- value: "寮鸿皟鍚冪殑涓滆タ鏄�滆嫻鏋溾��",
- },
- {
- id: "44DE",
- linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
- value: "寮鸿皟璇峰鐨勪汉鏄�滄垜鈥�",
- },
- ],
- optionStyle: undefined,
- id: 489306,
- options: {
- linkValues: [
- {
- oldId: "64D6",
- txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
- },
- {
- oldId: "44DE",
- txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
- },
- {
- oldId: "FB34",
- txt: "The clothing material is quite popular among Roman women inancient times.",
- },
- {
- oldId: "2ED4",
- txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
- },
- ],
- values: [
- {
- oldId: "FB34",
- txt: "Martin Silk",
- },
- {
- oldId: "64D6",
- txt: "The Great Wall",
- },
- {
- oldId: "2ED4",
- txt: "Chinese Food",
- },
- {
- oldId: "44DE",
- txt: "Chinese Tea",
- },
- ],
+ questionData: {
+ warnUp: {
+ one: "",
+ two: "",
+ three: "",
+ four: "",
+ five: "",
+ six: "",
+ seven:"",
+ eight:"",
+ nine:"",
+ ten:"",
+ eleven:"",
+ twelve:"",
+ thirteen:"",
+ fourteen:"",
},
- questionType: "matching",
- stem: {
- stemTxt: "鎸夐『搴忚繛绾�",
+ reading: {
+ one: "",
+ two: "",
},
- stemStyle: undefined,
- titleDescription: "1",
- userChoise: [],
- value: [],
+ table: {
+ one: "",
+ two: "",
+ three: "",
+ four: "",
+ five: "",
+ six: "",
+ seven: "",
+ enight: "",
+ nine: "",
+ },
},
};
},
@@ -587,50 +275,45 @@
//瑙嗛鍜岄煶棰戠殑MD5鍦板潃
async getVidoePath() {
this.videoPathOne = await getResourcePath(
- "691cbd2c13198d04afc7800d0f2cafb0"
- );
- this.videoPathTwo = await getResourcePath(
"a3c9b55ac8227e4c885384ff2fc6c0e7"
);
- this.videoPathThree = await getResourcePath(
- "dd44a1e31b4304f50d10b2481a148411"
- );
- this.videoPathFour = await getResourcePath(
- "09de7704eeaaf3a210b8c6af0a94d545"
- );
- this.auidoPathOne = await getResourcePath(
- "2c5f6c69b0f9f7a3c03e473cb8c977f5"
- );
- this.auidoPathTwo = await getResourcePath(
- "e93c0fdde08be5a4386c8c863892a287"
- );
- this.auidoPathThree = await getResourcePath(
- "e93c0fdde08be5a4386c8c863892a287"
+ // this.auidoPathOne = await getResourcePath(
+ // "2c5f6c69b0f9f7a3c03e473cb8c977f5"
+ // );
+ },
+ setBookQuestion() {
+ console.log("淇濆瓨");
+ localStorage.setItem(
+ "artAndDrama-book-question-two",
+ JSON.stringify(this.questionData)
);
},
},
};
</script>
-
- <style lang="less" scoped>
+
+<style lang="less" scoped>
.w70 {
width: 78%;
}
+
.fw-400 {
font-weight: 400 !important;
}
+
.fz-26 {
font-size: 26px !important;
}
+
.cover-img {
position: absolute;
top: 33%;
left: 23%;
}
+
.division-line {
width: 2px;
height: 100%;
background-color: red;
}
-</style>
-
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/books/artAndDrama/view/components/chapter003.vue b/src/books/artAndDrama/view/components/chapter003.vue
new file mode 100644
index 0000000..9754452
--- /dev/null
+++ b/src/books/artAndDrama/view/components/chapter003.vue
@@ -0,0 +1,396 @@
+<template>
+ <div class="chapter" num="4">
+ <div class="page-box" page="22">
+ <div v-if="showPageList.indexOf(22) > -1">
+ <h1 id="a004">
+ <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
+ <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
+ <audio :src="auidoPathOne" class="audio" controls></audio>
+ </h1>
+ <div class="bodystyle">
+ <div class="bk">
+ <div class="bj1">
+ <p class="left"><img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /></p>
+ </div>
+ <p>姣忎釜浜虹殑蹇冧腑閮芥湁涓�涓垶鍙帮紝婕旂粠鐫�鐢熸椿鐨勯吀鐢滆嫤杈ｏ紝璁板綍鐫�鎴愰暱鐨勭偣鐐规淮婊淬�傘�婁竴鍧楀ザ閰�嬩腑鐨勬瘡鍙皬铓傝殎涔熸湁寰堝蹇冮噷璇濊琛ㄨ揪锛岃鎴戜滑涓�璧锋紨缁庡嚭鏉ュ惂锛�</p>
+ </div>
+ </div>
+ <p><br /></p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">19</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="23">
+ <div v-if="showPageList.indexOf(23) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%;" />
+ </h1>
+ <div class="bodystyle">
+ <img src="../../assets/images/page5.png" alt="" />
+ <h2 id="b011">绗竴璇俱��鍚瑰搷鍔冲姩鐨勯泦缁撳彿</h2>
+ <h3 class="lefth3" id="c021"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p>瀵掓潵鏆戝線锛岀鏀跺啲钘忋�備竴骞村洓瀛ｏ紝鍔崇濂斿繖銆�</p>
+ <p>鍥㈢粨涓�蹇冿紝鍚瑰搷鍙疯銆傚垢绂忕敓娲伙紝鍔冲姩鍒涢�犮��</p>
+ <p><span class="hs1">鈼�</span>璇翠竴璇翠綘浼氬仛鍝簺瀹跺姟锛�</p>
+ <p><span class="hs1">鈼�</span>鍜屽皬浼欎即璁ㄨ鍔冲姩鍦ㄧ敓娲讳腑鐨勪綔鐢ㄣ��</p>
+ <p><span class="hs1">鈼�</span>琛ㄦ紨涓�绉嶅鍔″姵鍔紝璇峰皬浼欎即鐚滀竴鐚溿��</p>
+ <h3 class="lefth3" id="c022"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>閭�璇峰皬浼欎即鍒嗚鑹叉湕璇甸檮褰曚腑鐨勫墽鏈�夋1锝�2锛岄噸璇诲姞鐐规枃瀛椼��</p>
+ <p class="center"><img class="img-e" alt="" src="../../assets/images/0024-1.jpg" /></p>
+ </div>
+ <p><br /></p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">20</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="24">
+ <div v-if="showPageList.indexOf(24) > -1">
+ <h1>
+ <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b012">绗簩璇俱��鎰忓鍙戠敓浜嗭紒</h2>
+ <h3 class="lefth3" id="c023"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>褰撲笂鍗婂満姣旇禌澶卞埄锛屼腑鍦轰紤鎭椂锛屼綘浼氭�庝箞鍋氾紵褰撳埆浜哄じ璧炰綘鐨勬椂鍊欙紝浣犱細鎬庝箞鍋氾紵璇蜂綘鍜屾湅鍙嬩竴璧锋紨涓�婕斿惂銆�</p>
+ <h3 class="lefth3" id="c024"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-2.gif" /></p>
+ <p><span class="hs1">鈼�</span>璇锋妸铓傝殎闃熼暱鐨勫彴璇嶅拰浠栫殑鍐呭績鐙櫧杩炶捣鏉ュ惂锛�</p>
+ <!-- 杩炵嚎棰� -->
+ <matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'">
+ </matching>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">21</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="25">
+ <div v-if="showPageList.indexOf(25) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b013">绗笁璇俱��鎴戣鎬庝箞鍔烇紵</h2>
+ <h3 class="lefth3" id="c025"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝铓傝殎闃熼暱涔熻捣杩囪椽蹇冿紝浣嗕粬鏈�缁堟垚鍔熷厠鏈嶄簡璐績锛屼綘璁や负浠栨槸鎬庝箞鍋氬埌鐨勫憿锛�</p>
+ <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 90%"/></p>
+ <h3 class="lefth3" id="c026"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>闃呰闄勫綍涓殑鍓ф湰閫夋5锛屼负鑷繁鐨勮〃婕旇璁″姩浣滃惂锛�</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-3.gif" /></p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">22</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="26">
+ <div v-if="showPageList.indexOf(26) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <img src="../../assets/images/page5.png" alt="" />
+ <h2 id="b014">绗洓璇俱��鐨嗗ぇ娆㈠枩</h2>
+ <h3 class="lefth3" id="c027"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>璇锋寜鐓т簨浠跺叚瑕佺礌鐨勭粨鏋勭粰澶у鍒嗕韩涓�浠跺揩涔愮殑浜嬪惂锛�</p>
+ <p>鏃堕棿锛�<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
+ <p>鍦扮偣锛�<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
+ <p>浜虹墿锛�<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
+ <p>璧峰洜锛�<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
+ <p>缁忚繃锛�<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
+ <p>缁撴灉锛�<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
+ <p><span class="hs1">鈼�</span>浣犳湁鐑︽伡鍚楋紵璇翠竴璇存槸浠�涔堬紝浣犳槸鎬庝箞澶勭悊瀹冪殑锛�</p>
+ <p><input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">23</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="27">
+ <div v-if="showPageList.indexOf(27) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <img src="../../assets/images/page5.png" alt="" />
+ <h3 class="lefth3" id="c028"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>杩愮敤閲嶉煶銆佸唴蹇冪嫭鐧藉拰鍔ㄤ綔璁捐绛夎〃鐜版柟寮忥紝灏嗐�婁竴鍧楀ザ閰�嬬殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒锛堝墽鏈闄勫綍锛�</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-3.gif" /></p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">24</div>
+ </div>
+ </div>
+ <div class="page-box" page="28">
+ <div v-if="showPageList.indexOf(28) > -1">
+ <h1>
+ <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b015">鍗曞厓娲诲姩浠诲姟</h2>
+ <h3 class="lefth3" id="c029"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鍠樻皵缁冧範</p>
+ <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傛垨鍙夎叞锛屽弻鑴氬垎寮�锛屼笌鑲╁悓瀹姐�傛ā浠垮皬鐙楀枠姘旓紝鎰熷彈鑵归儴鐨勨�滃懠鍚糕�濈姸鎬侊紝鎯宠薄鑷繁鐨勮吂閮ㄦ槸涓�涓皵鐞冿紝鍦ㄥ惛姘旀椂鑵归儴鍚戝鎵╁紶锛屽悙姘旀椂鑵归儴鍚戝唴鏀剁缉銆�</p>
+ <p><span class="hs1">鈼�</span>鈥滃樁鈥濆０缁冧範</p>
+ <p>鍦ㄢ�滃枠姘旂粌涔犫�濈殑鍩虹涓婏紝鍙戝嚭鈥滃樁鈥濋煶锛屾瘡缁�4鐭�1闀裤��</p>
+ <p><span class="hs1">鈼�</span>鈥滃槦鈥濋煶缁冧範</p>
+ <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�傛斁鏉惧弻鍞囷紝娣卞惛姘旓紝鍚瑰嚭姘旀祦甯﹀姩鍢村攪鎶栧姩锛屽彂鍑衡�滃槦鈥濈殑澹伴煶锛屽０闊宠秺闀胯秺濂姐��</p>
+ <p><span class="hs1">鈼�</span>鈥滄垜浠禐缇庨暱姹熲�濇皵澹扮粌涔�</p>
+ <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�備互璇存倓鎮勮瘽鐨勬劅瑙夛紝璇村嚭鈥滄垜浠禐缇庨暱姹熲�濓紝骞堕�愭澧炲姞姘斿０鐨勫姏搴︼紝鎵惧埌鍦ㄨ垶鍙颁笂璇存倓鎮勮瘽鐨勬劅瑙夈��</p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">25</div>
+ </div>
+ </div>
+ <div class="page-box" page="29">
+ <div v-if="showPageList.indexOf(29) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <h3 class="lefth3" id="c030"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鍔冲姩鏈�鍏夎崳锛佽涓哄涓暱杈堝仛涓�浠跺姏鎵�鑳藉強鐨勪簨鎯咃紝鐢ㄥ疄闄呰鍔ㄨ〃杈句綘鐨勭埍鎰忥紒浣撻獙杩囩▼涓璁颁綇姣忎竴涓姩浣滅殑缁嗚妭锛屽啀灏濊瘯浠ユ棤瀹炵墿琛ㄦ紨鐨勬柟寮忚繘琛屽睍绀恒��
+ </p>
+ <p class="center">
+ <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
+ x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
+ controlslist="nodownload" class="w100"
+ style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
+ <h2>瑙嗛: 蹇冩湁澶氬ぇ锛岃垶鍙板氨鏈夊澶�</h2>
+ </p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">26</div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import matching from "@/components/matching/matching.vue";
+import { getResourcePath } from "@/assets/methods/resources";
+export default {
+ name: "chapterThree",
+ components: { matching },
+ props: {
+ showPageList: {
+ type: Array,
+ },
+
+ },
+ //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
+ mounted() {
+ this.getVidoePath();
+ const bookQuestion = localStorage.getItem("artAndDrama-book-question-three");
+ if (bookQuestion) {
+ this.questionData = JSON.parse(bookQuestion);
+ }
+ },
+ data() {
+ return {
+ videoPathOne: "",
+ auidoPathOne: "",
+ rawData: {
+ left: [
+ {
+ oldId: "FB34",
+ txt: "鈥滄帀浜嗕竴涓锛岃繖璇ユ�庝箞鍔烇紒鈥�",
+ },
+ {
+ oldId: "64D6",
+ txt: "鈥滀涪鎺夛紝瀹炲湪澶彲鎯滐紒鈥�",
+ },
+ {
+ oldId: "2ED4",
+ txt: "鈥滄垜瑕佹槸鍋峰槾璋佷篃鐪嬩笉瑙併�傗��",
+ },
+ ],
+ right: [
+ {
+ oldId: "64D6",
+ txt: "涓嶈兘涓㈡帀鍟婏紝濡傛灉鑳界粰鎴戝悆灏卞お濂戒簡锛�",
+ },
+ {
+ oldId: "FB34",
+ txt: "瑕佷笉鎴戞妸濂堕叒鍋峰伔鍚冧簡鍚с��",
+ },
+ {
+ oldId: "2ED4",
+ txt: "濂藉彲鎯滃晩锛岃繖涔堢編鍛崇殑濂堕叒锛�",
+ },
+ ],
+ },
+ question: {
+ KnowledgePoint: "123",
+ analysis: "123",
+ answer: [
+ {
+ id: "FB34",
+ linkValue: "鈥滄帀浜嗕竴涓锛岃繖璇ユ�庝箞鍔烇紒鈥�",
+ value: "瑕佷笉鎴戞妸濂堕叒鍋峰伔鍚冧簡鍚с��",
+ },
+ {
+ id: "64D6",
+ linkValue: "鈥滀涪鎺夛紝瀹炲湪澶彲鎯滐紒鈥�",
+ value: "涓嶈兘涓㈡帀鍟婏紝濡傛灉鑳界粰鎴戝悆灏卞お濂戒簡锛�",
+ },
+ {
+ id: "2ED4",
+ linkValue: "鈥滄垜瑕佹槸鍋峰槾璋佷篃鐪嬩笉瑙併�傗��",
+ value: "濂藉彲鎯滃晩锛岃繖涔堢編鍛崇殑濂堕叒锛�",
+ },
+ ],
+ optionStyle: undefined,
+ id: 489306,
+ options: {
+ linkValues: [
+ {
+ oldId: "64D6",
+ txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
+ },
+ {
+ oldId: "44DE",
+ txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
+ },
+ {
+ oldId: "FB34",
+ txt: "The clothing material is quite popular among Roman women inancient times.",
+ },
+ {
+ oldId: "2ED4",
+ txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
+ },
+ ],
+ values: [
+ {
+ oldId: "FB34",
+ txt: "Martin Silk",
+ },
+ {
+ oldId: "64D6",
+ txt: "The Great Wall",
+ },
+ {
+ oldId: "2ED4",
+ txt: "Chinese Food",
+ },
+ {
+ oldId: "44DE",
+ txt: "Chinese Tea",
+ },
+ ],
+ },
+ questionType: "matching",
+ stem: {
+ stemTxt: "鎸夐『搴忚繛绾�",
+ },
+ stemStyle: undefined,
+ titleDescription: "1",
+ userChoise: [],
+ value: [],
+ },
+ questionData: {
+ warnUp: {
+ one: "",
+ two: "",
+ three: "",
+ four: "",
+ five: "",
+ six: "",
+ seven:"",
+ enight:"",
+ },
+ reading: {
+ one: "",
+ two: "",
+ },
+ table: {
+ one: "",
+ two: "",
+ three: "",
+ four: "",
+ five: "",
+ six: "",
+ seven: "",
+ enight: "",
+ nine: "",
+ },
+ },
+ };
+ },
+ methods: {
+ //瑙嗛鍜岄煶棰戠殑MD5鍦板潃
+ async getVidoePath() {
+ // 瑙嗛Md5鍦板潃
+ this.videoPathOne = await getResourcePath(
+ "dd44a1e31b4304f50d10b2481a148411"
+ );
+ // 闊抽Md5鍦板潃
+ // this.auidoPathOne = await getResourcePath(
+ // "2c5f6c69b0f9f7a3c03e473cb8c977f5"
+ // );
+
+ },
+ setBookQuestion() {
+ console.log("淇濆瓨");
+ localStorage.setItem(
+ "artAndDrama-book-question-three",
+ JSON.stringify(this.questionData)
+ );
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.w70 {
+ width: 78%;
+}
+
+.fw-400 {
+ font-weight: 400 !important;
+}
+
+.fz-26 {
+ font-size: 26px !important;
+}
+
+.cover-img {
+ position: absolute;
+ top: 33%;
+ left: 23%;
+}
+
+.division-line {
+ width: 2px;
+ height: 100%;
+ background-color: red;
+}
+
+.macthing {
+ background-color: rgb(188, 220, 164);
+ padding: 5% 0%;
+}
+</style>
\ No newline at end of file
diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
new file mode 100644
index 0000000..564b93e
--- /dev/null
+++ b/src/books/artAndDrama/view/components/chapter004.vue
@@ -0,0 +1,290 @@
+<template>
+ <div class="chapter" num="5">
+ <div class="page-box" page="30">
+ <div v-if="showPageList.indexOf(30) > -1">
+ <h1 id="a004">
+ <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
+ <img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
+ <audio :src="auidoPathOne" class="audio" controls></audio>
+ </h1>
+ <div class="bodystyle">
+ <div class="bk">
+ <div class="bj1">
+ <p class="left"><img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /></p>
+ </div>
+ <p>鍦ㄦ垙鍓ф紨鍑轰腑锛岄櫎浜嗚垶鍙颁笂鐨勬紨鍛橈紝瀵兼紨銆佺伅鍏夈�侀�犲瀷绛夊箷鍚庝汉鍛樹篃鍙戞尌鐫�閲嶈鐨勪綔鐢ㄣ�傛湰鍗曞厓璁╂垜浠粠鍙板墠璧拌繘骞曞悗锛屽悜榛橀粯濂夌尞鐨勫伐浣滀汉鍛樿嚧鏁紒</p>
+ </div>
+ </div>
+ <p><br /></p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">27</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="31">
+ <div v-if="showPageList.indexOf(31) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <img src="../../assets/images/page5.png" alt="" />
+ <h2 id="b016">绗竴璇俱��涓�妯′竴鏍�</h2>
+ <h3 class="lefth3" id="c031"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅鍥存垚涓�鍦堬紝闈㈡湞鍦堝韫蹭笅锛岀浉閭讳袱浜轰簰鎸庢墜鑷傦紝缁勫憳鍚屾椂绔欒捣鏉ワ紝鐪嬬湅鍝釜缁勬渶蹇紒</p>
+ <p><span class="hs1">鈼�</span>璇翠竴璇达細蹇�熺珯璧锋潵鐨勭璇�鏄粈涔堬紵</p>
+ <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
+ <h3 class="lefth3" id="c032"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛岃〃婕斾互涓嬪満鏅紝娉ㄦ剰淇濇寔鍔ㄤ綔涓�鑷村摝銆�</p>
+ <p>铓傝殎闃熼暱鍚瑰搷闆嗗悎鍙凤紝铓傝殎浠繀閫熻窇涓婂満绔欏ソ闃熷舰銆�</p>
+ <p>铓傝殎浠姮鐫�濂堕叒鍚戝墠璧扮潃銆�</p>
+ <p>铓傝殎浠窡闅忚殏铓侀槦闀跨殑鍙ｄ护娑堝け鍦ㄨ崏涓涢噷銆�</p>
+ <p>铓傝殎浠敱鍥涢潰鍏柟璧板洖鏉ャ��</p>
+ <p>铓傝殎浠姴鍎挎瘮鍒氭墠鏇磋冻锛屾姮璧峰ザ閰悜灞辨礊璧板幓銆�</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-1.gif" /></p>
+ </div>
+ <p><br /></p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">28</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="32">
+ <div v-if="showPageList.indexOf(32) > -1">
+ <h1>
+ <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b017">绗簩璇俱��閫犲瀷鍙樺彉鍙�</h2>
+ <h3 class="lefth3" id="c033"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鏄ュぉ鏉ヤ簡锛屾槬椋庡惞杩囷紝鏌虫爲鍙戣娊浜嗭紝杩庢槬鑺卞紑浜嗭紝灏忕嚂瀛愬湪澶╃┖鑷敱鍦伴缈斻�備竴鍒囬兘鏄偅涔堢敓鏈哄媰鍕冦�傝涓衡�滄槬澶┾�濇秱涓婁綘鍠滄鐨勯鑹层��</p>
+ <!-- 鍥剧墖缂哄け -->
+ <!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">29</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="33">
+ <div v-if="showPageList.indexOf(33) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <h3 class="lefth3" id="c034"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鍔ㄥ姩鎵嬶紝涓恒�婁竴鍧楀ザ閰�嬩腑鐨勮殏铓佽鑹茶璁＄畝鍗曠殑鏈嶈鍚э紒</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">30</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="34">
+ <div v-if="showPageList.indexOf(34) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <img src="../../assets/images/page5.png" alt="" />
+ <h2 id="b018">绗笁璇俱��鍙樺簾涓哄疂</h2>
+ <h3 class="lefth3" id="c035"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛屽ご椤剁焊鏉紝鑵垮す鎶ョ焊锛岃繘琛屽す绾歌繍鏉父鎴忥紒</p>
+ <h3 class="lefth3" id="c036"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>璇锋牴鎹�婁竴鍧楀ザ閰�嬬殑鍓ф湰锛屽垪鍑烘紨鍑轰腑闇�瑕佺殑閬撳叿娓呭崟锛岃鎸夌収娓呭崟锛屽埄鐢ㄤ綘鏀堕泦鐨勬棫鐗╁埗浣滈亾鍏峰惂锛�</p>
+ <p class="center"><img class="img-e" alt="" src="../../assets/images/0035-1.jpg" /></p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">31</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="35">
+ <div v-if="showPageList.indexOf(35) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <img src="../../assets/images/page5.png" alt="" />
+ <h2 id="b019">绗洓璇俱��濂囧鐨勮垶鍙�</h2>
+ <h3 class="lefth3" id="c037"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>璇蜂綘璇曠潃妯℃嫙婕斿憳鍊欏満銆佽阿骞曪紝鑸炲彴缇庢湳宸ヤ綔浜哄憳杩涜骞曞悗鍑嗗鐨勫満鏅��</p>
+ <p class="center"><img class="img-e" alt="" src="../../assets/images/0036-1.jpg" /></p>
+ <h3 class="lefth3" id="c038"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>閭�璇峰悓浼村叡鍚屽畬鎴愩�婁竴鍧楀ザ閰�嬬殑灞曟紨鍚э紒</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">32</div>
+ </div>
+ </div>
+ <div class="page-box" page="36">
+ <div v-if="showPageList.indexOf(36) > -1">
+ <h1>
+ <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b020">鍗曞厓娲诲姩浠诲姟</h2>
+ <h3 class="lefth3" id="c039"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
+ <p class="center"><span class="hs">褰綋鎿嶇粌涔�</span></p>
+ <p><span class="hs1">鈼�</span>澶撮儴杩愬姩</p>
+ <p>绗�1涓叓鎷嶏細鍙虫墜瓒婅繃澶撮《鎽稿乏鑰筹紝鍚戝彸杞昏交鍘嬪ご閮ㄣ��</p>
+ <p>绗�2涓叓鎷嶏細宸︽墜瓒婅繃澶撮《鎽稿彸鑰筹紝鍚戝乏杞昏交鍘嬪ご閮ㄣ��</p>
+ <p>绗�3涓叓鎷嶏細澶撮儴椤烘椂閽堣浆涓�鍦堛��</p>
+ <p>绗�4涓叓鎷嶏細澶撮儴閫嗘椂閽堣浆涓�鍦堛��</p>
+ <p><span class="hs1">鈼�</span>寮�鑲╃粌涔�</p>
+ <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鎵撳紑锛屼笌鑲╁悓瀹姐��</p>
+ <p>绗�1涓叓鎷嶏細绗�1-4鎷嶆墜鑲樺唴渚у悜澶栬浆鍔紝甯﹀姩 鍙岃偐鎵撳紑锛涚5-8鎷嶆墜鑲樺唴渚у悜鍐呮敹鍥烇紝鍚庤儗鎷辫捣锛屽甫鍔ㄥ弻鑲╁唴鎵ｃ��</p>
+ <p>绗�2鑷崇4涓叓鎷嶏細閲嶅绗�1涓叓鎷嶇殑鍔ㄤ綔銆�</p>
+ <p><span class="hs1">鈼�</span>鎻愭矇鑲╄繍鍔�</p>
+ <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鎵撳紑锛屼笌鑲╁悓瀹姐��</p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">33</div>
+ </div>
+ </div>
+ <div class="page-box" page="37">
+ <div v-if="showPageList.indexOf(37) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <img src="../../assets/images/page5.png" alt="" />
+ <p>绗�1鑷崇2涓叓鎷嶏細鍙屾墜涓嬪瀭锛屾墜蹇冨悜涓嬶紝鍙岃偐涓婃彁鍐嶆矇涓嬶紝涓ゆ媿涓�鍔ㄣ��</p>
+ <p>绗�3鑷崇4涓叓鎷嶏細鍙屾墜涓嬪瀭锛屾墜蹇冨悜涓嬶紝宸﹀彸鑲╄唨渚濇涓婃彁鍐嶆矇涓嬶紝涓�鎷嶄竴鍔ㄣ��</p>
+ <p><span class="hs1">鈼�</span>浼稿睍杩愬姩</p>
+ <p>韬綋鏀炬澗锛岃啙鐩栧井灞堬紝涓婅韩鑷劧寮洸涓嬫矇锛屾墜鑷傝嚜鐒朵笅鍨傘��</p>
+ <p>绗�1涓叓鎷嶏細绗�1-7鎷嶈韩浣撶洿璧凤紝鍙岃噦涓捐捣锛岃府璧疯剼灏栵紱绗�8鎷嶈繕鍘熷垵濮嬬姸鎬併��</p>
+ <p>绗�2鑷崇4涓叓鎷嶏細閲嶅绗�1涓叓鎷嶇殑鍔ㄤ綔銆�</p>
+ <h3 class="lefth3" id="c040"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鍐欎竴绡囨帓婕旀�荤粨锛屽垎浜涔犵粡楠屽拰鎰熷彈锛�</p>
+ <p class="center">
+ <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
+ x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
+ controlslist="nodownload" class="w100"
+ style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
+ <h2>瑙嗛: 鍥㈢粨灏辨槸鍔涢噺</h2>
+ </p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">34</div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { getResourcePath } from "@/assets/methods/resources";
+export default {
+ name: "chapterFour",
+ props: {
+ showPageList: {
+ type: Array,
+ },
+
+ },
+ //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
+ mounted() {
+ this.getVidoePath();
+ const bookQuestion = localStorage.getItem("artAndDrama-book-question-four");
+ if (bookQuestion) {
+ this.questionData = JSON.parse(bookQuestion);
+ }
+ },
+ data() {
+ return {
+ videoPathOne: "",
+ auidoPathOne: "",
+ questionData: {
+ warnUp: {
+ one: "",
+
+ },
+ reading: {
+ one: "",
+ two: "",
+ },
+ table: {
+ one: "",
+ two: "",
+ three: "",
+ four: "",
+ five: "",
+ six: "",
+ seven: "",
+ enight: "",
+ nine: "",
+ },
+ },
+ };
+ },
+ methods: {
+ //瑙嗛鍜岄煶棰戠殑MD5鍦板潃
+ async getVidoePath() {
+ this.videoPathOne = await getResourcePath(
+ "09de7704eeaaf3a210b8c6af0a94d545"
+ );
+ // this.auidoPathOne = await getResourcePath(
+ // "2c5f6c69b0f9f7a3c03e473cb8c977f5"
+ // );
+ },
+ setBookQuestion() {
+ console.log("淇濆瓨");
+ localStorage.setItem(
+ "artAndDrama-book-question-four",
+ JSON.stringify(this.questionData)
+ );
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.w70 {
+ width: 78%;
+}
+
+.fw-400 {
+ font-weight: 400 !important;
+}
+
+.fz-26 {
+ font-size: 26px !important;
+}
+
+.cover-img {
+ position: absolute;
+ top: 33%;
+ left: 23%;
+}
+
+.division-line {
+ width: 2px;
+ height: 100%;
+ background-color: red;
+}
+
+.macthing {
+ background-color: rgb(188, 220, 164);
+ padding: 5% 0%;
+}
+</style>
\ No newline at end of file
diff --git a/src/books/artAndDrama/view/components/chapter005.vue b/src/books/artAndDrama/view/components/chapter005.vue
new file mode 100644
index 0000000..310daa3
--- /dev/null
+++ b/src/books/artAndDrama/view/components/chapter005.vue
@@ -0,0 +1,260 @@
+<template>
+ <div class="chapter" num="6">
+ <div class="page-box" page="38">
+ <div v-if="showPageList.indexOf(38) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <h1 id="a008">闄勫綍</h1>
+ <p class="block3"><span class="hs">鍓ф湰</span></p>
+ <p class="center1"><span class="hs">涓�鍧楀ザ閰�</span></p>
+ <p class="block">婕斿憳琛細铓傝殎闃熼暱銆佸皬铓傝殎銆佸ぇ澶磋殏铓併�佸皬鐪奸暅铓傝殎銆佽殏铓佸皬濡广�佸ザ閰汉</p>
+ <p class="block3"><span class="hs">閫夋1</span></p>
+ <p class="block">銆愯捣鍏夛紝铓傝殎闃熼暱涓婂満銆�</p>
+ <p class="block">鍜诲捇鈥�</p>
+ <p class="block">銆愯殏铓侀槦闀垮惞鍝嶉泦鍚堝彿锛岃殏铓佷滑杩呴�熻窇涓婂満绔欏ソ闃熷舰銆�</p>
+ <p class="block">铓傝殎闃熼暱锛�<span class="un1">鎴戝甯�</span>锛佷粖澶╂惉杩愮伯椋燂紝鍙<span class="un1">鍑哄姏</span>锛屼笉璁�<span
+ class="un1">鍋峰槾</span>銆傝皝鍋峰槾灏�<span class="un1">缃氳皝</span>锛�</p>
+ <p class="block">铓傝殎浠細鏀跺埌锛�</p>
+ <p class="block">灏忚殏铓侊細锛堝榾鍜曪級瑕佹槸鍋峰槾鐨�<span class="un1">鏄偍鍛�</span>锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙涔夋璇嶄弗锛�<span class="un1">鐓ф牱鍙楃綒</span>锛�</p>
+ <p class="block">銆愯殏铓佷滑榧撴帉銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氱◢鎭紒绔嬫锛佸鎵鹃鐗╋紒鍑哄彂锛�</p>
+ <p class="block">銆愯殏铓佷滑浜夊厛鎭愬悗鍥涘瀵婚銆�</p>
+ <p class="block">澶уご铓傝殎锛氾紙绐佺劧锛�<span class="un1">鎶ュ憡</span>锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氭�庝箞浜嗭紵</p>
+ </div>
+ <p><br /></p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">35</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="39">
+ <div v-if="showPageList.indexOf(39) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <img src="../../assets/images/page5.png" alt="" />
+ <p class="block">澶уご铓傝殎锛氾紙绐佺劧锛�<span class="un1">鎶ュ憡</span>锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氭�庝箞浜嗭紵</p>
+ <p class="block">澶уご铓傝殎锛氾紙鎸囩潃锛夎繖閲屾湁涓�鍧楀ぇ濂堕叒锛�</p>
+ <p class="block">銆愪竴鍧楀ザ閰紙婕斿憳锛夎洞鍦ㄨ钀藉銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙鍏村锛夊摝锛�</p>
+ <p class="block">銆愯殏铓侀槦闀胯濂堕叒鐨勯鍛宠糠浣忥紝杞捣浜嗗湀鍦堛��</p>
+ <p class="block">銆愰煶涔愯捣锛岃殏铓侀槦闀垮拰濂堕叒浜鸿烦璧蜂簡鑸炶箞銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙闄堕唹锛夊ザ閰�︹�﹀ザ閰�︹�﹀～楗辫倸瀛愪笉鍐嶅懕鍛卞彨銆傚ザ閰�︹�﹀ザ閰�︹�﹀悆涓嬩竴鍙ｄ竴澹扮編濡欌�︹��</p>
+ <p class="block">銆愯殏铓佷滑鍋滀笅鎵嬮噷鐨勬惉杩愬伐浣滐紝鐪嬬潃闃熼暱銆�</p>
+ <p class="block">澶уご铓傝殎锛氾紙澶у枈锛夐槦闀匡紒</p>
+ <p class="block">銆愯殏铓侀槦闀胯鍚撻啋锛屽ザ閰汉瓒村湪鍦颁笂銆�</p>
+ <p class="block">灏忕溂闀滆殏铓侊細闃熼暱锛侀槦闀匡紒<span class="un1">蹇偣鎼繍鍚�</span>锛佽繖涔�<span
+ class="un1">鐑�</span>鐨勫ぉ锛屽啀涓嶅嚭鍙戯紝濂堕叒灏�<span class="un1">鍖�</span>鍟︼紒</p>
+ <p class="block">铓傝殎闃熼暱锛氳寰楀锛佹垜鐜板湪灏�<span class="un1">鎼�</span>锛�</p>
+ <p class="block">銆愯殏铓侀槦闀胯蛋鍒板ザ閰潰鍓嶄娇鍔叉姮銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氬搸鍝燂紝鍝庡摕锛屽搸鍝熷摕銆�</p>
+ <p class="block">銆愯殏铓侀槦闀夸竴娆′篃娌℃姮璧锋潵銆�</p>
+ <p class="block3"><span class="hs">閫夋2</span></p>
+ <p class="block">铓傝殎闃熼暱锛氾紙璧疯韩锛�<span class="un1">鎴戝喅瀹氫簡</span>锛佸ぇ瀹�<span
+ class="un1">涓�璧锋惉</span>锛佽繖鍧楀ザ閰互鎴戜负棣栵紝鎼繍鐨勮矾涓�<span class="un1">涓嶈鍋峰悆</span>锛�</p>
+ <p class="block">铓傝殎浠細<span class="un1">鏄�</span>锛�</p>
+ <p class="block">銆愯殏铓佷滑杩呴�熷洿鎴愪竴鍦堬紝铓傝殎闃熼暱绔欏湪濂堕叒鏈�鍓嶉潰銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氬惉鎴戝彛浠わ紒3锛�2锛�1锛佹姮锛�</p>
+ </div>
+ <p><br /></p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">36</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="40">
+ <div v-if="showPageList.indexOf(40) > -1">
+ <h1>
+ <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
+ </h1>
+ <div class="bodystyle">
+
+ <p class="block">銆愬ザ閰鎶捣銆�</p>
+ <p class="block">澶уご铓傝殎锛氬搰锛佽繖鍧楀ザ閰�<span class="un1">濂介鍣�</span>锛�</p>
+ <p class="block">灏忕溂闀滆殏铓侊細鎴戞兂<span class="un1">鍜�</span>涓�鍙ｏ紒</p>
+ <p class="block">灏忚殏铓侊細濡傛灉鑳�<span class="un1">鑸斾竴涓�</span>灏卞ソ浜嗭紒</p>
+ <p class="block">铓傝殎灏忓锛氭垜鐨勫彛姘存祦鍑烘潵浜嗭紒</p>
+ <p class="block">铓傝殎闃熼暱锛氫笉璁哥瀻鎯筹紒涓嶈鍋峰悆锛�<span class="un1">鍑哄彂</span>锛�</p>
+ <p class="block">銆愰煶涔愯捣锛岃殏铓佷滑鎶潃濂堕叒鍚戝墠璧扮潃銆�</p>
+ <p class="block">铓傝殎浠細濂堕叒锛佸ザ閰紒鎴戜滑鐨勫ザ閰紒濂堕叒锛佸ザ閰紒鎴戜滑涓�璧峰垎浜��</p>
+ <p class="block">銆愯殏铓佷滑闄堕唹涓��</p>
+ <p class="block3"><span class="hs">閫夋3</span></p>
+ <p class="block">鍢��</p>
+ <p class="block">銆愯殏铓佷滑鐢ㄥ姴杩囩寷锛屽ザ閰殑涓�涓鎺変簡銆�</p>
+ <p class="block">铓傝殎灏忓锛�<span class="un1">鍟�</span>锛侀槦闀匡紒濂堕叒鐨勮<span class="un1">鎺変簡</span>锛�</p>
+ <p class="block">銆愬ぇ瀹剁湅鍒版帀鍦ㄥ湴涓婄殑濂堕叒銆�</p>
+ <p class="block">铓傝殎浠細鍝囧摝锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氱瓑绛夛紒</p>
+ <p class="block">銆愯垶鍙板彉鍏夛紝婕斿憳鍔ㄤ綔瀹氭牸銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氭帀浜�<span class="un1">涓�涓</span>锛岃繖璇�<span class="un1">鎬庝箞鍔�</span>锛�<span
+ class="un1">涓㈡帀</span>锛屽疄鍦�<span class="un1">澶彲鎯�</span>锛�<span
+ class="un1">瓒佹満鍚冩帀</span>锛屽張瑕佺姱涓嶈鍋峰槾鐨勭浠ゃ�傛�庝箞鍔炲憿锛熸湁涓姙娉曪紒鎴戣鏄�<span class="un1">鍋峰槾</span>璋佷篃<span
+ class="un1">鐪嬩笉瑙�</span>锛�<span class="un1">杩欐牱</span>涓嶅氨琛屽暒锛佸ぇ瀹跺惉濂藉暒锛�</p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">37</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="41">
+ <div v-if="showPageList.indexOf(41) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <img src="../../assets/images/page5.png" alt="" />
+ <p class="block3"><span class="hs">閫夋4</span></p>
+ <p class="block">銆愯垶鍙板彉鍏夛紝婕斿憳绔嬫绔欏ソ銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氫紤鎭竴浼氬効锛�</p>
+ <p class="block">铓傝殎灏忓锛�<span class="un1">涓轰粈涔�</span>瑕佷紤鎭憖锛�</p>
+ <p class="block">灏忕溂闀滆殏铓侊細闃熼暱锛佽繖鍧楁帀鍦ㄥ湴涓婄殑濂堕叒<span class="un1">鎬庝箞鍔炲憖</span>锛�</p>
+ <p class="block">澶уご铓傝殎锛氭垜浠涓嶆妸瀹�<span class="un1">鍒嗕簡鍚�</span>锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氬惉鎴戣锛�<span class="un1">浼戞伅</span>锛�<span
+ class="un1">绔嬪埢浼戞伅</span>锛佸ぇ瀹舵惉杩愬お杈涜嫤鍟︼紒鍒嗘暎寮�锛屽摢閲屽噳蹇氨鍒板摢閲屼紤鎭紒</p>
+ <p class="block">銆愬ぇ瀹朵緷鏃т笉鍔ㄣ��</p>
+ <p class="block">铓傝殎闃熼暱锛氬叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝ｏ紒鍚戝悗鈥旇浆锛侀綈姝モ�旇蛋锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氱珛鈥斿畾锛佸師鍦颁紤鎭紒</p>
+ <p class="block">銆愯殏铓佷滑璺熼殢鍙ｄ护娑堝け鍦ㄨ崏涓涢噷銆�</p>
+ <p class="block3"><span class="hs">閫夋5</span></p>
+ <p class="block">銆愯殏铓侀槦闀垮悜鑽変笡閲屾湜鍘伙紝纭畾娌℃湁澹板搷銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙灏忓０锛夊樋鍢垮樋锛屽悆鎺夊悗灏辫琚鍒蛋鎴栬�呭氨璇磋鑰侀拱鍚冩帀灏卞ソ鍟︼紒</p>
+ <p class="block">銆愯殏铓侀槦闀夸綆涓嬪ご锛屽梾浜嗕竴涓嬪ザ閰��</p>
+ <p class="block">铓傝殎闃熼暱锛氬懗閬�<span class="un1">鐪�</span>棣欙紒</p>
+ <p class="block">銆愯殏铓侀槦闀跨殑鎵嬩几鍚戝ザ閰福锛岀獊鐒讹紝濂堕叒浜虹珯浜嗚捣鏉ャ��</p>
+ <p class="block">銆愬彉鍏夈��</p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">38</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="42">
+ <div v-if="showPageList.indexOf(42) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <img src="../../assets/images/page5.png" alt="" />
+ <p class="block">濂堕叒浜猴細涓嶈鍚冿紒</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙鍚撲簡涓�璺筹級浣犱綘浣狅紒浣犳�庝箞<span class="un1">绔�</span>璧锋潵鍟︼紒</p>
+ <p class="block">濂堕叒浜猴細鎴�<span class="un1">瀹炲湪</span>鐪嬩笉涓嬪幓鍟︼紒</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙瀹虫�曪級鏁戝懡鍝囷紒濂堕叒<span class="un1">娲�</span>鍟︼紒</p>
+ <p class="block">銆愯殏铓侀槦闀胯窇銆�</p>
+ <p class="block">濂堕叒浜猴細<span class="un1">绔欎綇</span>锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氫綘瑕佸共浠�涔堬紵</p>
+ <p class="block">濂堕叒浜猴細<span class="un1">杩欏潡</span>锛�<span class="un1">浣犱笉鑳藉悆</span>锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氫负浠�涔堬紵</p>
+ <p class="block">濂堕叒浜猴細<span class="un1">绗竴</span>锛�<span class="un1">浣�</span>瀹氱殑瑙勭煩锛屼粖澶╂惉杩愪腑锛�<span
+ class="un1">涓嶈鍋峰悆</span>锛佸鏋�<span class="un1">浣�</span>鍋氫笉鍒帮紝浣犲氨<span
+ class="un1">涓嶈兘瑕佹眰鍒汉</span>锛�<span class="un1">绗簩</span>锛佷綘鏄�<span
+ class="un1">铓傝殎闃熼暱</span>锛屽ぇ瀹堕�変綘褰撻槦闀匡紝鏄浣犵殑<span class="un1">淇′换</span>鍜�<span
+ class="un1">灏婇噸</span>锛佷綘鍗磋儗鐫�澶у<span class="un1">鍋峰悆</span>锛�<span class="un1">绗笁</span>锛�<span
+ class="un1">璇氬疄瀹堜俊</span>鏄編寰凤紝浣犲悆鎺夊ザ閰<span class="un1">鎾掕皫</span>锛屾拻浜�<span
+ class="un1">涓�涓�</span>璋庡氨瑕佺敤<span class="un1">鏃犳暟</span>鐨勮皫鏉ュ渾绗竴涓皫锛屾渶鍚�<span
+ class="un1">杩樻槸</span>浼氳鍙戠幇锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙浣庡ご锛夋垜涓嶅悆浜嗭紝鎴戠煡閬�<span class="un1">閿欎簡</span>鈥︹�﹀彲鏄紝杩欐帀鍦ㄥ湴涓婄殑濂堕叒鎬庝箞鍔炲憿锛�</p>
+ <p class="block">濂堕叒浜猴細锛堟兂浜嗘兂锛�<span class="un1">鏈夊姙娉�</span>锛佷綘鍙互閫夋嫨澶у<span
+ class="un1">涓�璧峰垎</span>锛屼篃鍙互閫夋嫨缁欏勾榫勬渶灏忕殑铓傝殎鍚冿紒</p>
+ <p class="block">铓傝殎闃熼暱锛�<span class="un1">濂戒富鎰�</span>锛佹垜杩欏氨闂棶澶у锛岃阿璋綘锛�</p>
+ <p class="block">銆愬彉鍏夛紝濂堕叒鎱㈡參鍦拌汉鍦ㄥ湴涓娿��</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙鍠婏級<span class="un1">娉ㄦ剰鍟�</span>锛佸叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝ｏ紒</p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">39</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="43">
+ <div v-if="showPageList.indexOf(43) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <img src="../../assets/images/page5.png" alt="" />
+ <p>鍚戝悗杞紒榻愭璧帮紒</p>
+ <p class="block">銆愯殏铓佷滑鐢卞洓闈㈠叓鏂硅蛋鍥炴潵銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氬ぇ瀹朵紤鎭ソ鍟︼紒鎴戞湁涓�涓�<span class="un1">鍐冲畾</span>锛�</p>
+ <p class="block">铓傝殎浠細浠�涔堝喅瀹氾紵</p>
+ <p class="block">铓傝殎闃熼暱锛氳繖鐐瑰効濂堕叒娓ｆ槸鍒氭墠寮勬帀鐨勶紝涓簡鍙儨锛岋紙鎸囧悜灏忚殏铓侊級浣犳槸鎴戜滑涓勾榫勬渶灏忕殑锛�<span class="un1">浣�</span>鍚冩帀瀹冨惂锛�</p>
+ <p class="block">銆愯殏铓佷滑榧撴帉銆�</p>
+ <p class="block">銆愰煶涔愯捣锛屽ぇ瀹跺姴鍎挎瘮鍒氭墠鏇磋冻锛屾姮璧峰ザ閰悜灞辨礊璧板幓銆�</p>
+ <p class="block">銆愭敹鍏夈��</p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">40</div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "chapterFive",
+ props: {
+ showPageList: {
+ type: Array,
+ },
+
+ },
+ //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
+ mounted() {
+ },
+ data() {
+ return {
+ };
+ },
+ methods: {
+
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.w70 {
+ width: 78%;
+}
+
+.fw-400 {
+ font-weight: 400 !important;
+}
+
+.fz-26 {
+ font-size: 26px !important;
+}
+
+.cover-img {
+ position: absolute;
+ top: 33%;
+ left: 23%;
+}
+
+.division-line {
+ width: 2px;
+ height: 100%;
+ background-color: red;
+}
+
+.macthing {
+ background-color: rgb(188, 220, 164);
+ padding: 5% 0%;
+}
+</style>
\ No newline at end of file
diff --git a/src/books/artAndDrama/view/components/index.vue b/src/books/artAndDrama/view/components/index.vue
index c37fbcf..65d3c72 100644
--- a/src/books/artAndDrama/view/components/index.vue
+++ b/src/books/artAndDrama/view/components/index.vue
@@ -1,800 +1,580 @@
<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 ? 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(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> -->
-
- </div>
- <!-- 闊抽灏忕獥鎾斁缁勪欢 -->
- <miniAudio
- :path="audioPath"
- :currentTime="currentTime"
- @closeMiniAudio="closeMiniAudio"
- ref="audioPlayer"
- ></miniAudio>
+ <div class="page-main" @scroll="throttledScrollHandler">
+ <div id="searchDomBox" style="display: none">
+ <div id="searchContent"></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 NoteIcon from "@/assets/images/biji.png";
- import miniAudio from "@/components/miniAudio/index.vue";
- import _ from "lodash";
- import Swiper from "swiper/bundle";
- import "swiper/swiper-bundle.css";
- import Viewer from "viewerjs";
- import "viewerjs/dist/viewer.css";
- export default {
- data() {
- return {
- catalogLength: 3, // 鎬荤珷鑺傛暟
- showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
- loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
- throttleThreshold: 100, // 鑺傛祦闃堝��
- previousScrollTop: 0,
- throttledScrollHandler: null,
- observer: null,
- loadPageObserver: null,
- loadPageList: [],
- questionDataMap: {},
- renderSignMap: {},
- highlightData: null,
- audioPath: "",
+ <div class="page-content" :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(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>
+ </div>
+ <!-- 闊抽灏忕獥鎾斁缁勪欢 -->
+ <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer"></miniAudio>
+ </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 NoteIcon from "@/assets/images/biji.png";
+import miniAudio from "@/components/miniAudio/index.vue";
+import _ from "lodash";
+import Swiper from "swiper/bundle";
+import "swiper/swiper-bundle.css";
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+export default {
+ data() {
+ return {
+ catalogLength: 6, // 鎬荤珷鑺傛暟
+ showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
+ loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
+ throttleThreshold: 100, // 鑺傛祦闃堝��
+ previousScrollTop: 0,
+ throttledScrollHandler: null,
+ observer: null,
+ loadPageObserver: null,
+ loadPageList: [],
+ questionDataMap: {},
+ renderSignMap: {},
+ highlightData: null,
+ audioPath: "",
currentTime: null,
videoList: [],
- };
+ };
+ },
+ computed: {
+ fontSize() {
+ return this.$store.state.qiankun.fontSize;
},
- computed: {
- fontSize() {
- return this.$store.state.qiankun.fontSize;
- },
- pageZoom() {
- return this.$store.state.qiankun.scale / 100;
+ 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);
},
},
- 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();
- }, 200);
- },
- },
- pageZoom: {
- handler(newVal, oldVal) {
- const scrollBox = (
- this.container ? this.container : document
- ).querySelector(".page-main");
- scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
- },
+ loadPageList: {
+ handler(newVal, oldVal) {
+ setTimeout(() => {
+ this.initSwiper();
+ this.initViewer();
+ }, 200);
},
},
- 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, 10);
- // setTimeout(() => {
- // this.renderSign("Highlight", {
- // id: "2ACA9359",
- // txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩",
- // page: "10",
- // type: "Highlight",
- // color: "#F5E12A"
- // });
- // setTimeout(() => {
- // this.delSign({
- // ids: ["2ACA9359"]
- // });
- // }, 2000);
- // }, 5000);
-
- // 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
- // });
- // }, 5000);
- },
- 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) {
- // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
- if (event.target.scrollTop > this.previousScrollTop) {
- this.getAduio();
- // 鍚戜笅
- 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) {
- // 鍚戜笂
- 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 = (
+ pageZoom: {
+ handler(newVal, oldVal) {
+ const scrollBox = (
this.container ? this.container : document
- ).querySelector(`[dataid="${data.id}"]`);
- // 鍘婚噸
- if (!existence) {
+ ).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, 10);
+ // setTimeout(() => {
+ // this.renderSign("Highlight", {
+ // id: "2ACA9359",
+ // txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩",
+ // page: "10",
+ // type: "Highlight",
+ // color: "#F5E12A"
+ // });
+ // setTimeout(() => {
+ // this.delSign({
+ // ids: ["2ACA9359"]
+ // });
+ // }, 2000);
+ // }, 5000);
+
+ // 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
+ // });
+ // }, 5000);
+ },
+ 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) {
+ // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
+ if (event.target.scrollTop > this.previousScrollTop) {
+ this.getAduio();
+ // 鍚戜笅
+ 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) {
+ // 鍚戜笂
+ 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="${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();
+ ).querySelector(`[page="${page}"]`);
+ if (pageDom) {
+ pageDom.scrollIntoView();
+ } else {
+ console.log("椤电爜閿欒锛�");
}
- 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;
- }
+ }, 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 = (
+ }
+ },
+ // 鍒犻櫎鏍囪娓叉煋
+ 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
- ).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
- );
+ ).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;
}
}
- },
- 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;
- }
+ // observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般��
+ const isObserver = section.getAttribute("observer");
+ const isLoadObserver = section.getAttribute("loadObserver");
+ if (!isObserver) {
+ this.observer.observe(section);
+ section.setAttribute("observer", "1");
}
- },
- pageChangeCallback(entries, observer) {
- //entries锛氫唬琛ㄨ瀵熷埌鐨勭洰鏍囧厓绱犵殑闆嗗悎銆� observer锛氫唬琛ㄨ瀵熻�呭璞°��
- entries.forEach((entry) => {
- //entry.isIntersecting锛氭鏌ュ綋鍓嶇洰鏍囧厓绱犳槸鍚︿笌鏍瑰厓绱犵浉浜ゃ��
- if (entry.isIntersecting) {
- const target = entry.target;
- //entry.target锛氳幏鍙栧綋鍓嶇洰鏍囧厓绱�
- const page = target.getAttribute("page");
+ 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");
- 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(() => {
- // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
- 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: (this.container ? this.container : document).querySelector(
- ".swiper-button-next"
- ),
- prevEl: (this.container ? this.container : document).querySelector(
- ".swiper-button-prev"
- ),
- },
- // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
- observer: true,
- observeParents: true,
- // // 濡傛灉闇�瑕佸垎椤靛櫒
- // pagination: {
- // el: (this.container ? this.container : document).querySelector(
- // ".swiper-pagination"
- // ),
- // clickable: true // 鍒嗛〉鍣ㄥ彲浠ョ偣鍑�
+ // 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);
+ // }
+ // }
// }
- });
- }
- 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: (this.container ? this.container : document).querySelector(
- ".swiper-button-next"
- ),
- prevEl: (this.container ? this.container : document).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,
-
- };
- // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
- 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) {
+ // 娓叉煋杩欎竴椤电殑鏍囪
+ 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(() => {
// 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
- const pageTextList = document.createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
+ const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
// 鍖归厤鍏抽敭瀛�
const allPageTextNodes = [];
let currentNode = pageTextList.nextNode();
@@ -804,38 +584,236 @@
}
for (let i = 0; i < allPageTextNodes.length; i++) {
const textDom = allPageTextNodes[i];
- let txtIndex = textDom.textContent.indexOf(keyword);
+ let txtIndex = textDom.textContent.indexOf(
+ this.highlightData.txt
+ );
if (txtIndex > -1) {
- // 璁板綍鍏抽敭瀛楁墍鍦ㄩ〉鐮併�佺珷鑺備互鍙婂尮閰嶅埌鐨勬钀�
- searchResult.push({
- page: pageNum,
- catalog: catalogIndex,
- txt: textDom.textContent,
- txtIndex: txtIndex,
- });
+ textDom.parentNode.style.transition =
+ "background-color 0.8s";
+ textDom.parentNode.scrollIntoView();
+ textDom.parentNode.style.backgroundColor = "#79bbf0";
+ setTimeout(() => {
+ textDom.parentNode.style.backgroundColor = "";
+ }, 1000);
}
}
- // 缁撴潫锛屽嵏杞介攢姣�
- pageExample.$destroy();
- (this.container ? this.container : document).querySelector(
- "#searchDomBox"
- ).innerHTML = '<div id="searchContent"></div>';
- }
+ }, 100);
+ }
+ if (this.loadPageList.length > 5) {
+ // 瓒呰繃5椤�
+ this.loadPageList.shift();
}
}
}
- // 杈撳嚭鎼滅储缁撴灉
- console.log(searchResult);
- return searchResult;
- },
- // 鏍规嵁妫�绱㈢粨鏋滆烦杞搴斾綅缃苟楂樹寒
- searchItemLocation(data) {
- // 璁板綍楂樹寒淇℃伅
- this.highlightData = data;
- // 璺宠浆
- this.gotoPage(data.catalog, data.page, () => {});
- },
- // 椤甸潰鍚戜笅婊氬姩锛岄煶棰戝皬绐楁挱鏀惧姛鑳�
+ });
+ },
+ 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: (this.container ? this.container : document).querySelector(
+ ".swiper-button-next"
+ ),
+ prevEl: (this.container ? this.container : document).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: (this.container ? this.container : document).querySelector(
+ ".swiper-button-next"
+ ),
+ prevEl: (this.container ? this.container : document).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
+
+ };
+ // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
+ 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) {
+ // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+ 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
@@ -884,30 +862,31 @@
closeMiniAudio() {
this.audioPath = "";
},
- },
- components: {
- pageHeader,
- chapterOne,
- chapterTwo,
- miniAudio
- // chapterThree,
- // chapterFour,
-
- },
- };
- </script>
-
- <style lang="less" scoped>
- .page-main {
- width: 100%;
- height: 100%;
- overflow: auto;
- .page-content {
- max-width: 816px;
- min-width: 375px;
- margin: 0 auto;
- padding-bottom: 100px;
- }
+ },
+ components: {
+ pageHeader,
+ chapterOne,
+ chapterTwo,
+ miniAudio,
+ chapterThree,
+ chapterFour,
+ chapterFive
+
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.page-main {
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+
+ .page-content {
+ max-width: 816px;
+ min-width: 375px;
+ margin: 0 auto;
+ padding-bottom: 100px;
}
- </style>
-
\ No newline at end of file
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.1