From 5bef35a23190d52cf0d44edb8803bf11ac1ff43b Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期一, 01 七月 2024 10:42:42 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/books/artAndDrama/view/components/chapter004.vue | 10 -
src/books/artAndDrama/view/components/chapter005.vue | 271 ++++++++++++++++++++++++++++++++++++++
src/books/artAndDrama/assets/main.less | 9 +
src/books/artAndDrama/view/components/chapter003.vue | 5
src/books/artAndDrama/view/components/chapter002.vue | 20 --
src/books/artAndDrama/view/components/chapter001.vue | 28 +--
src/books/artAndDance/view/components/index.vue | 4
src/App.vue | 2
src/books/artAndDrama/view/components/index.vue | 62 +++++---
9 files changed, 343 insertions(+), 68 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 58ee2a9..77be6ac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -65,7 +65,7 @@
process.env.VUE_APP_RESOURCE_CTX +
(process.env.VUE_APP_ENV == "product"
? process.env.VUE_APP_BOOK_ID
- : "mathBook")
+ : "artAndDrama")
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
diff --git a/src/books/artAndDance/view/components/index.vue b/src/books/artAndDance/view/components/index.vue
index 0d85c36..da522a6 100644
--- a/src/books/artAndDance/view/components/index.vue
+++ b/src/books/artAndDance/view/components/index.vue
@@ -118,8 +118,8 @@
setTimeout(() => {
this.initSwiper();
this.initViewer();
- this.closeAudio()
- this.closeVideo()
+ this.closeAudio();
+ this.closeVideo();
}, 200);
},
},
diff --git a/src/books/artAndDrama/assets/main.less b/src/books/artAndDrama/assets/main.less
index 815d516..e30c867 100644
--- a/src/books/artAndDrama/assets/main.less
+++ b/src/books/artAndDrama/assets/main.less
@@ -425,6 +425,10 @@
// font-size: 18px;
// }
+ input{
+ font-family: "STkaiti";
+ font-size: 19px;
+ }
.folder{
color: brown;
font-size: 18px;
@@ -459,6 +463,11 @@
font-size: 19px;
text-align: left;
}
+ .text3{
+ margin: 6% 8%;
+ font-family: "STkaiti";
+ font-size: 30px;
+ }
//搴曢儴鍙傝�冩枃鐚殑鏍峰紡
.references{
font-family: "STkaiti";
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index 37d628f..a521954 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -5,7 +5,7 @@
<h1 id="a004">
<img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
<audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"
- @play="audioPlay"></audio>
+ ></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -45,7 +45,7 @@
</p>
<h1>
<!-- <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"
- @play="audioPlay"></audio> -->
+ ></audio> -->
</h1>
<!-- 杩炵嚎棰� -->
<matching :rawData="rawData" :question="question" class="macthing" :primary-color="color" :bordercolor="'#fff'"></matching>
@@ -70,7 +70,7 @@
</p><p class="center text">
<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 video " @play="videoPlay"
+ controlslist="nodownload" class="w100 video "
style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
</p>
<p class="center videoname">
@@ -104,7 +104,7 @@
<span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
<h1><audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload" class="audio"
- @play="audioPlay"></audio></h1>
+ ></audio></h1>
<div class="bj3">
<p class="center">
<span class="hs">鏄�<a id="w1"><sup>1</sup></a>锛堣妭閫夛級</span>
@@ -154,7 +154,7 @@
<img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
</h1>
<h1><audio :src="auidoPathFour" controls controlslist="noplaybackrate nodownload" class="audio"
- @play="audioPlay"></audio></h1>
+ ></audio></h1>
<div class="bj3">
<p class="center">
<span class="hs">鏄�<a id="w1"></a><sup>1</sup>锛堣妭閫夛級</span>
@@ -230,7 +230,7 @@
</p>
<h1>
<audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload" class="audio"
- @play="audioPlay"></audio>
+ ></audio>
</h1>
<div class="bj3">
@@ -308,7 +308,7 @@
<p class="text ends">
<span><span class="hs1">鈼�</span>鏀惧ぇ缂╁皬</span>
<span> <audio :src="auidoPathSex" controls controlslist="noplaybackrate nodownload" class="audio"
- @play="audioPlay"></audio> </span>
+ ></audio> </span>
</p>
<p class="text">
璇蜂綘浜ゆ浛鈥滄斁澶р�濆拰鈥滅缉灏忊�濅簲瀹樸�傚湪鈥滄斁澶р�濇椂锛屾兂璞′簲瀹樿椋炲埌澶栧お绌猴紱鍦ㄢ�滅缉灏忊�濇椂锛屾兂璞′簲瀹樺叏閮ㄧ缉灏忓埌浜嗛蓟灏栦笂銆�
@@ -317,7 +317,7 @@
<p class="text ends">
<span><span class="hs1">鈼�</span>鎻愬崌鑻规灉鑲�</span>
<span><audio :src="auidoPathSeven" controls controlslist="noplaybackrate nodownload" class="audio"
- @play="audioPlay"></audio> </span>
+ ></audio> </span>
</p>
<p class="text">
鎯宠薄浣犲湪涓�涓檶鐢熺殑鍦版柟锛岃皝閮戒笉璁よ瘑锛岀獊鐒堕亣瑙佷簡濂芥湅鍙嬶紝浣犲緢楂樺叴锛屼笂鍓嶅拰浠�/濂规墦鎷涘懠銆傚仛涓�鍋氫綘姝ゆ椂鐨勮〃鎯呭惂銆�
@@ -325,7 +325,7 @@
<p class="text ends">
<span><span class="hs1">鈼�</span>寰瑧璇粹�渁ng鈥�</span>
<span><audio :src="auidoPathEight" controls controlslist="noplaybackrate nodownload" class="audio"
- @play="audioPlay"></audio></span>
+ ></audio></span>
</p>
<p class="text">
璇蜂綘璇曚竴璇曞湪鎻愬崌鑻规灉鑲岀殑鍩虹涓婏紝鍙戝嚭鈥渁ng鈥濈殑闊炽�傚０闊宠灏藉彲鑳芥媺闀裤�佷繚鎸佺ǔ瀹氾紝骞跺悜杩滈�併��
@@ -334,7 +334,7 @@
<p class="text ends">
<span style="text-wrap: nowrap"><span class="hs1">鈼�</span>鍚戣繙灞卞枈鈥滈樋姣涒��</span>
<span style="margin-left: -4%;"><audio :src="auidoPathNine" controls controlslist="noplaybackrate nodownload" class="audio"
- @play="audioPlay"></audio></span>
+ ></audio></span>
</p>
<p class="text">
@@ -365,7 +365,7 @@
<p class="center text">
<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 video" @play="videoPlay"
+ controlslist="nodownload" class="w100 video"
style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
</p>
<p class="center videoname">
@@ -743,12 +743,6 @@
"artAndDrama-book-question-one",
JSON.stringify(this.questionData)
);
- },
- audioPlay(e) {
- this.$emit('closeAudio', e.srcElement.currentSrc)
- },
- videoPlay(e) {
- this.$emit('closeVideo', e.srcElement.currentSrc)
},
handleChapterData() {
localStorage.setItem(
diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue
index 391dfde..de0883c 100644
--- a/src/books/artAndDrama/view/components/chapter002.vue
+++ b/src/books/artAndDrama/view/components/chapter002.vue
@@ -5,7 +5,7 @@
<h1 id="a004">
<img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
<audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"
- @play="audioPlay"></audio>
+ ></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -198,7 +198,7 @@
<p class="text ends">
<span><span class="hs1">鈼�</span>鍚圭焊缁冧範</span>
<span> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"
- @play="audioPlay"></audio></span>
+ ></audio></span>
</p>
<p class="center text" style="margin: 4% 0"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" />
</p>
@@ -206,13 +206,13 @@
<p class="text ends">
<span> <span class="hs1">鈼�</span>鍚圭瑪缁冧範</span>
<span> <audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload" class="audio"
- @play="audioPlay"></audio></span>
+ ></audio></span>
</p>
<p class="text">灏嗕竴鏀瑪绔嬩簬妗岄潰锛岀湅鐪嬩綘鑳戒笉鑳界敤涓�鍙ｆ皵灏嗗畠鍚瑰�掋��</p>
<p class="text ends">
<span><span class="hs1">鈼�</span>鍚硅瀛愮粌涔�</span>
<span> <audio :src="auidoPathFour" controls controlslist="noplaybackrate nodownload" class="audio"
- @play="audioPlay"></audio></span>
+ ></audio></span>
</p>
<p class="text">灏嗕竴鍙鏂欒鎶涜嚦绌轰腑锛屽拰浣犵殑灏忎紮浼翠竴璧疯疆娴佸惞姘旓紝閬垮厤濉戞枡琚嬭惤鍦般��</p>
</div>
@@ -233,7 +233,7 @@
<p class="text ends">
<span> <span class="hs1">鈼�</span>鍚逛箳涔撶悆缁冧範</span>
<span> <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload" class="audio"
- @play="audioPlay"></audio></span>
+ ></audio></span>
</p>
<p class="text">鐢ㄦ皵鎭皢妗岄潰涓婄殑涔掍箵鐞冧粠鈥滆捣鐐光�濊繍閫佽嚦鈥滅粓鐐光�濓紝杩愰�佽繃绋嬩腑閬垮厤涔掍箵鐞冭Е纰伴殰纰嶇墿銆�</p>
<h3 class="lefth3" id="c020" style="margin-top: 7%"><img class="img-gn1" alt=""
@@ -244,7 +244,7 @@
<p class="center text">
<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 video" @play="videoPlay"
+ controlslist="nodownload" class="w100 video"
style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
</p>
<p class="center videoname">
@@ -483,14 +483,6 @@
"artAndDrama-book-question-two",
JSON.stringify(this.questionData)
);
- },
- //闊抽
- audioPlay(e) {
- this.$emit('closeAudio', e.srcElement.currentSrc)
- },
- //瑙嗛
- videoPlay(e) {
- this.$emit('closeVideo', e.srcElement.currentSrc)
},
handleChapterData() {
localStorage.setItem(
diff --git a/src/books/artAndDrama/view/components/chapter003.vue b/src/books/artAndDrama/view/components/chapter003.vue
index f221438..404ff65 100644
--- a/src/books/artAndDrama/view/components/chapter003.vue
+++ b/src/books/artAndDrama/view/components/chapter003.vue
@@ -5,7 +5,7 @@
<h1 id="a004">
<!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
<img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
- <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
+ <audio :src="auidoPathOne" controls class="audio"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -129,6 +129,7 @@
<p class="text2">缁撴灉锛�<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18"
@change="setBookQuestion" style="width: 70%" /></p>
<p class="text" style="margin-top: 7%;"><span class="hs1">鈼�</span>浣犳湁鐑︽伡鍚楋紵璇翠竴璇存槸浠�涔堬紝浣犳槸鎬庝箞澶勭悊瀹冪殑锛�</p>
+ <!-- 杈撳叆妗� -->
<p><input v-model="questionData.warnUp.enight" class="input-bottom-border fz-18"
@change="setBookQuestion" style="width: 85%" /></p>
</div>
@@ -196,7 +197,7 @@
<p class="center text">
<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 video" @play="videoPlay"
+ controlslist="nodownload" class="w100 video"
style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
</p>
<p class="center videoname">
diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
index 80f7f08..4696f8a 100644
--- a/src/books/artAndDrama/view/components/chapter004.vue
+++ b/src/books/artAndDrama/view/components/chapter004.vue
@@ -5,7 +5,7 @@
<h1 id="a004">
<!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
<img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
- <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
+ <audio :src="auidoPathOne" controls class="audio"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -184,7 +184,7 @@
<p class="center text">
<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 video" @play="videoPlay"
+ controlslist="nodownload" class="w100 video"
style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
</p>
<p class="center videoname">
@@ -280,12 +280,6 @@
"artAndDrama-book-question-four",
JSON.stringify(this.questionData)
);
- },
- audioPlay(e) {
- this.$emit('closeAudio', e.srcElement.currentSrc)
- },
- videoPlay(e) {
- this.$emit('closeVideo', e.srcElement.currentSrc)
},
handleChapterData() {
localStorage.setItem(
diff --git a/src/books/artAndDrama/view/components/chapter005.vue b/src/books/artAndDrama/view/components/chapter005.vue
new file mode 100644
index 0000000..be49fe1
--- /dev/null
+++ b/src/books/artAndDrama/view/components/chapter005.vue
@@ -0,0 +1,271 @@
+<template>
+ <div class="chapter" num="6">
+ <div class="page-box" page="38">
+ <div v-if="showPageList.indexOf(38) > -1">
+ <h1>
+ <img src="../../assets/images/unit5-header-img.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <p class="center text3">闄勩��褰�</p>
+ <p class="block3"><span class="hs">鍓ф湰</span></p>
+ <p class="center1 mar-t-b-5"><span class="hs ft-25">涓�鍧楀ザ閰�</span></p>
+ <p class="block text">婕斿憳琛細铓傝殎闃熼暱銆佸皬铓傝殎銆佸ぇ澶磋殏铓併�佸皬鐪奸暅铓傝殎銆佽殏铓佸皬濡广�佸ザ閰汉</p>
+ <p class="block3 selections"><span class="hs">閫夋1</span></p>
+ <p class="block text">銆愯捣鍏夛紝铓傝殎闃熼暱涓婂満銆�</p>
+ <p class="block text">鍜诲捇鈥�</p>
+ <p class="block text">銆愯殏铓侀槦闀垮惞鍝嶉泦鍚堝彿锛岃殏铓佷滑杩呴�熻窇涓婂満绔欏ソ闃熷舰銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛�<span class="un1">鎴戝甯�</span>锛佷粖澶╂惉杩愮伯椋燂紝鍙<span class="un1">鍑哄姏</span>锛屼笉璁�<span
+ class="un1">鍋峰槾</span>銆傝皝鍋峰槾灏�<span class="un1">缃氳皝</span>锛�</p>
+ <p class="block text">铓傝殎浠細鏀跺埌锛�</p>
+ <p class="block text">灏忚殏铓侊細锛堝榾鍜曪級瑕佹槸鍋峰槾鐨�<span class="un1">鏄偍鍛�</span>锛�</p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙涔夋璇嶄弗锛�<span class="un1">鐓ф牱鍙楃綒</span>锛�</p>
+ <p class="block text">銆愯殏铓佷滑榧撴帉銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氱◢鎭紒绔嬫锛佸鎵鹃鐗╋紒鍑哄彂锛�</p>
+ <p class="block text">銆愯殏铓佷滑浜夊厛鎭愬悗鍥涘瀵婚銆�</p>
+ <p class="block text">澶уご铓傝殎锛氾紙绐佺劧锛�<span class="un1">鎶ュ憡</span>锛�</p>
+ <p class="block text">铓傝殎闃熼暱锛氭�庝箞浜嗭紵</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>
+ <img class="headerimg mar-b-5" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+ <p class="block text">澶уご铓傝殎锛氾紙鎸囩潃锛夎繖閲屾湁涓�鍧楀ぇ濂堕叒锛�</p>
+ <p class="block text">銆愪竴鍧楀ザ閰紙婕斿憳锛夎洞鍦ㄨ钀藉銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙鍏村锛夊摝锛�</p>
+ <p class="block text">銆愯殏铓侀槦闀胯濂堕叒鐨勯鍛宠糠浣忥紝杞捣浜嗗湀鍦堛��</p>
+ <p class="block text">銆愰煶涔愯捣锛岃殏铓侀槦闀垮拰濂堕叒浜鸿烦璧蜂簡鑸炶箞銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙闄堕唹锛夊ザ閰�︹�﹀ザ閰�︹�﹀～楗辫倸瀛愪笉鍐嶅懕鍛卞彨銆傚ザ閰�︹�﹀ザ閰�︹�﹀悆涓嬩竴鍙ｄ竴澹扮編濡欌�︹��</p>
+ <p class="block text">銆愯殏铓佷滑鍋滀笅鎵嬮噷鐨勬惉杩愬伐浣滐紝鐪嬬潃闃熼暱銆�</p>
+ <p class="block text">澶уご铓傝殎锛氾紙澶у枈锛夐槦闀匡紒</p>
+ <p class="block text">銆愯殏铓侀槦闀胯鍚撻啋锛屽ザ閰汉瓒村湪鍦颁笂銆�</p>
+ <p class="block text">灏忕溂闀滆殏铓侊細闃熼暱锛侀槦闀匡紒<span class="un1">蹇偣鎼繍鍚�</span>锛佽繖涔�<span
+ class="un1">鐑�</span>鐨勫ぉ锛屽啀涓嶅嚭鍙戯紝濂堕叒灏�<span class="un1">鍖�</span>鍟︼紒</p>
+ <p class="block text">铓傝殎闃熼暱锛氳寰楀锛佹垜鐜板湪灏�<span class="un1">鎼�</span>锛�</p>
+ <p class="block text">銆愯殏铓侀槦闀胯蛋鍒板ザ閰潰鍓嶄娇鍔叉姮銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氬搸鍝燂紝鍝庡摕锛屽搸鍝熷摕銆�</p>
+ <p class="block text">銆愯殏铓侀槦闀夸竴娆′篃娌℃姮璧锋潵銆�</p>
+ <p class="block3 selections"><span class="hs">閫夋2</span></p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙璧疯韩锛�<span class="un1">鎴戝喅瀹氫簡</span>锛佸ぇ瀹�<span
+ class="un1">涓�璧锋惉</span>锛佽繖鍧楀ザ閰互鎴戜负棣栵紝鎼繍鐨勮矾涓�<span class="un1">涓嶈鍋峰悆</span>锛�</p>
+ <p class="block text">铓傝殎浠細<span class="un1">鏄�</span>锛�</p>
+ <p class="block text">銆愯殏铓佷滑杩呴�熷洿鎴愪竴鍦堬紝铓傝殎闃熼暱绔欏湪濂堕叒鏈�鍓嶉潰銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氬惉鎴戝彛浠わ紒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/unit5-header-img.png" alt="" style="height: auto; width: 100%" />
+ </h1>
+ <div class="bodystyle">
+ <p class="block text">銆愬ザ閰鎶捣銆�</p>
+ <p class="block text">澶уご铓傝殎锛氬搰锛佽繖鍧楀ザ閰�<span class="un1">濂介鍣�</span>锛�</p>
+ <p class="block text">灏忕溂闀滆殏铓侊細鎴戞兂<span class="un1">鍜�</span>涓�鍙ｏ紒</p>
+ <p class="block text">灏忚殏铓侊細濡傛灉鑳�<span class="un1">鑸斾竴涓�</span>灏卞ソ浜嗭紒</p>
+ <p class="block text">铓傝殎灏忓锛氭垜鐨勫彛姘存祦鍑烘潵浜嗭紒</p>
+ <p class="block text">铓傝殎闃熼暱锛氫笉璁哥瀻鎯筹紒涓嶈鍋峰悆锛�<span class="un1">鍑哄彂</span>锛�</p>
+ <p class="block text">銆愰煶涔愯捣锛岃殏铓佷滑鎶潃濂堕叒鍚戝墠璧扮潃銆�</p>
+ <p class="block text">铓傝殎浠細濂堕叒锛佸ザ閰紒鎴戜滑鐨勫ザ閰紒濂堕叒锛佸ザ閰紒鎴戜滑涓�璧峰垎浜��</p>
+ <p class="block text">銆愯殏铓佷滑闄堕唹涓��</p>
+ <p class="block3 selections"><span class="hs">閫夋3</span></p>
+ <p class="block text">鍢��</p>
+ <p class="block text">銆愯殏铓佷滑鐢ㄥ姴杩囩寷锛屽ザ閰殑涓�涓鎺変簡銆�</p>
+ <p class="block text">铓傝殎灏忓锛�<span class="un1">鍟�</span>锛侀槦闀匡紒濂堕叒鐨勮<span class="un1">鎺変簡</span>锛�</p>
+ <p class="block text">銆愬ぇ瀹剁湅鍒版帀鍦ㄥ湴涓婄殑濂堕叒銆�</p>
+ <p class="block text">铓傝殎浠細鍝囧摝锛�</p>
+ <p class="block text">铓傝殎闃熼暱锛氱瓑绛夛紒</p>
+ <p class="block text">銆愯垶鍙板彉鍏夛紝婕斿憳鍔ㄤ綔瀹氭牸銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氭帀浜�<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>
+ <img class="headerimg " src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+ <p class="block3 selections"><span class="hs">閫夋4</span></p>
+ <p class="block text">銆愯垶鍙板彉鍏夛紝婕斿憳绔嬫绔欏ソ銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氫紤鎭竴浼氬効锛�</p>
+ <p class="block text">铓傝殎灏忓锛�<span class="un1">涓轰粈涔�</span>瑕佷紤鎭憖锛�</p>
+ <p class="block text">灏忕溂闀滆殏铓侊細闃熼暱锛佽繖鍧楁帀鍦ㄥ湴涓婄殑濂堕叒<span class="un1">鎬庝箞鍔炲憖</span>锛�</p>
+ <p class="block text">澶уご铓傝殎锛氭垜浠涓嶆妸瀹�<span class="un1">鍒嗕簡鍚�</span>锛�</p>
+ <p class="block text">铓傝殎闃熼暱锛氬惉鎴戣锛�<span class="un1">浼戞伅</span>锛�<span
+ class="un1">绔嬪埢浼戞伅</span>锛佸ぇ瀹舵惉杩愬お杈涜嫤鍟︼紒鍒嗘暎寮�锛屽摢閲屽噳蹇氨鍒板摢閲屼紤鎭紒</p>
+ <p class="block text">銆愬ぇ瀹朵緷鏃т笉鍔ㄣ��</p>
+ <p class="block text">铓傝殎闃熼暱锛氬叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝ｏ紒鍚戝悗鈥旇浆锛侀綈姝モ�旇蛋锛�</p>
+ <p class="block text">铓傝殎闃熼暱锛氱珛鈥斿畾锛佸師鍦颁紤鎭紒</p>
+ <p class="block text">銆愯殏铓佷滑璺熼殢鍙ｄ护娑堝け鍦ㄨ崏涓涢噷銆�</p>
+ <p class="block3 selections"><span class="hs">閫夋5</span></p>
+ <p class="block text">銆愯殏铓侀槦闀垮悜鑽変笡閲屾湜鍘伙紝纭畾娌℃湁澹板搷銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙灏忓０锛夊樋鍢垮樋锛屽悆鎺夊悗灏辫琚鍒蛋鎴栬�呭氨璇磋鑰侀拱鍚冩帀灏卞ソ鍟︼紒</p>
+ <p class="block text">銆愯殏铓侀槦闀夸綆涓嬪ご锛屽梾浜嗕竴涓嬪ザ閰��</p>
+ <p class="block text">铓傝殎闃熼暱锛氬懗閬�<span class="un1">鐪�</span>棣欙紒</p>
+ <p class="block text">銆愯殏铓侀槦闀跨殑鎵嬩几鍚戝ザ閰福锛岀獊鐒讹紝濂堕叒浜虹珯浜嗚捣鏉ャ��</p>
+ <p class="block text">銆愬彉鍏夈��</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/unit5-header-img.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <p class="block text">濂堕叒浜猴細涓嶈鍚冿紒</p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙鍚撲簡涓�璺筹級浣犱綘浣狅紒浣犳�庝箞<span class="un1">绔�</span>璧锋潵鍟︼紒</p>
+ <p class="block text">濂堕叒浜猴細鎴�<span class="un1">瀹炲湪</span>鐪嬩笉涓嬪幓鍟︼紒</p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙瀹虫�曪級鏁戝懡鍝囷紒濂堕叒<span class="un1">娲�</span>鍟︼紒</p>
+ <p class="block text">銆愯殏铓侀槦闀胯窇銆�</p>
+ <p class="block text">濂堕叒浜猴細<span class="un1">绔欎綇</span>锛�</p>
+ <p class="block text">铓傝殎闃熼暱锛氫綘瑕佸共浠�涔堬紵</p>
+ <p class="block text">濂堕叒浜猴細<span class="un1">杩欏潡</span>锛�<span class="un1">浣犱笉鑳藉悆</span>锛�</p>
+ <p class="block text">铓傝殎闃熼暱锛氫负浠�涔堬紵</p>
+ <p class="block text">濂堕叒浜猴細<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 text">铓傝殎闃熼暱锛氾紙浣庡ご锛夋垜涓嶅悆浜嗭紝鎴戠煡閬�<span class="un1">閿欎簡</span>鈥︹�﹀彲鏄紝杩欐帀鍦ㄥ湴涓婄殑濂堕叒鎬庝箞鍔炲憿锛�</p>
+ <p class="block text">濂堕叒浜猴細锛堟兂浜嗘兂锛�<span class="un1">鏈夊姙娉�</span>锛佷綘鍙互閫夋嫨澶у<span
+ class="un1">涓�璧峰垎</span>锛屼篃鍙互閫夋嫨缁欏勾榫勬渶灏忕殑铓傝殎鍚冿紒</p>
+ <p class="block text">铓傝殎闃熼暱锛�<span class="un1">濂戒富鎰�</span>锛佹垜杩欏氨闂棶澶у锛岃阿璋綘锛�</p>
+ <p class="block text">銆愬彉鍏夛紝濂堕叒鎱㈡參鍦拌汉鍦ㄥ湴涓娿��</p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙鍠婏級<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>
+ <img class="headerimg mar-b-5" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+ <p class="text">鍚戝悗杞紒榻愭璧帮紒</p>
+ <p class="block text">銆愯殏铓佷滑鐢卞洓闈㈠叓鏂硅蛋鍥炴潵銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氬ぇ瀹朵紤鎭ソ鍟︼紒鎴戞湁涓�涓�<span class="un1">鍐冲畾</span>锛�</p>
+ <p class="block text">铓傝殎浠細浠�涔堝喅瀹氾紵</p>
+ <p class="block text">铓傝殎闃熼暱锛氳繖鐐瑰効濂堕叒娓ｆ槸鍒氭墠寮勬帀鐨勶紝涓簡鍙儨锛岋紙鎸囧悜灏忚殏铓侊級浣犳槸鎴戜滑涓勾榫勬渶灏忕殑锛�<span class="un1">浣�</span>鍚冩帀瀹冨惂锛�</p>
+ <p class="block text">銆愯殏铓佷滑榧撴帉銆�</p>
+ <p class="block text">銆愰煶涔愯捣锛屽ぇ瀹跺姴鍎挎瘮鍒氭墠鏇磋冻锛屾姮璧峰ザ閰悜灞辨礊璧板幓銆�</p>
+ <p class="block text">銆愭敹鍏夈��</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%;
+}
+.mar-t-b-5{
+ margin: 5% 0;
+}
+.mar-b-5{
+ margin-bottom: 5%;
+}
+.selections{
+ margin-top: 5%;
+ margin-bottom: 1%;
+ margin: 5% 8% 1% 8%
+}
+.ft-25{
+ font-size: 25px;
+ font-family: "STkaiti";
+}
+</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 ea7ad88..5f82a27 100644
--- a/src/books/artAndDrama/view/components/index.vue
+++ b/src/books/artAndDrama/view/components/index.vue
@@ -9,10 +9,11 @@
transformOrigin: 'center top',
}">
<pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader>
- <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" @closeAudio="closeAudio" @closeVideo="closeVideo"></chapterOne>
- <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" @closeAudio="closeAudio" @closeVideo="closeVideo"></chapterTwo>
- <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" @closeAudio="closeAudio" @closeVideo="closeVideo"></chapterThree>
- <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" @closeAudio="closeAudio" @closeVideo="closeVideo"></chapterFour>
+ <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">
@@ -26,6 +27,7 @@
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";
@@ -36,7 +38,7 @@
export default {
data() {
return {
- catalogLength: 5, // 鎬荤珷鑺傛暟
+ catalogLength: 6, // 鎬荤珷鑺傛暟
showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
throttleThreshold: 100, // 鑺傛祦闃堝��
@@ -85,6 +87,8 @@
setTimeout(() => {
this.initSwiper();
this.initViewer();
+ this.closeAudio();
+ this.closeVideo();
}, 200);
},
},
@@ -156,7 +160,7 @@
// 娴嬭瘯椤甸潰璺宠浆
// setTimeout(() => {
- // this.gotoPage(2,6);
+ // this.gotoPage(6,38);
// setTimeout(() => {
// this.renderSign("Highlight", {
// id: "2ACA9359",
@@ -712,6 +716,7 @@
chapterTwo,
chapterThree,
chapterFour,
+ chapterFive,
};
// 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
for (const key in pageData) {
@@ -856,38 +861,46 @@
}
},
// 鐐瑰嚮闊抽鎾斁锛屽叧闂叾浠栭煶棰�
- closeAudio(path) {
- let allVideo = (
+ closeAudio() {
+ let allAudio = (
this.container ? this.container : document
).querySelectorAll(".audio");
- allVideo = Array.from(allVideo);
- if (allVideo.length) {
- for (let index = 0; index < allVideo.length; index++) {
- const item = allVideo[index];
- if (item.currentSrc != path) {
- item.pause()
+ for (let index = 0; index < allAudio.length; index++) {
+ const item = allAudio[index];
+ item.addEventListener('play',() => {
+ const audioList = Array.from(allAudio);
+ for (let cindex = 0; cindex < audioList.length; cindex++) {
+ const citem = audioList[cindex];
+ if(citem.currentSrc != item.src) {
+ citem.pause()
+
+ }
}
- }
+ this.closeMiniAudio()
+ })
}
- this.closeMiniAudio()
},
// 鍏抽棴mini video
closeMiniAudio() {
this.audioPath = "";
},
// 鐐瑰嚮瑙嗛鎾斁锛屽叧闂叾浠栬棰�
- closeVideo(path) {
+ closeVideo() {
let allVideo = (
this.container ? this.container : document
).querySelectorAll(".video");
- allVideo = Array.from(allVideo);
- if(allVideo.length) {
- for (let index = 0; index < allVideo.length; index++) {
- const item = allVideo[index];
- if(item.currentSrc != path) {
- item.pause()
+ for (let index = 0; index < allVideo.length; index++) {
+ const item = allVideo[index];
+ item.addEventListener('playing',(item) => {
+ const path = item.srcElement.src
+ const videoList = Array.from(allVideo);
+ for (let cindex = 0; cindex < videoList.length; cindex++) {
+ const citem = videoList[cindex];
+ if(citem.currentSrc != path && path) {
+ citem.pause()
+ }
}
- }
+ })
}
}
},
@@ -898,6 +911,7 @@
miniAudio,
chapterThree,
chapterFour,
+ chapterFive,
},
};
</script>
--
Gitblit v1.9.1