From f99d327dd2a9923c511373e76eef533457e4af32 Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期一, 17 六月 2024 15:15:30 +0800
Subject: [PATCH] 艺术戏剧（整本分页）
---
src/books/artAndDrama/view/components/chapter004.vue | 25 +++--
src/books/artAndDrama/view/components/chapter005.vue | 11 +-
src/books/artAndDrama/assets/images/unit4-header-img.png | 0
src/books/artAndDrama/assets/main.less | 18 +++-
src/books/artAndDrama/view/components/chapter003.vue | 25 ++++--
src/books/artAndDrama/view/components/chapter002.vue | 35 +++++---
src/books/artAndDrama/view/components/chapter001.vue | 70 ++++++++++-------
src/books/artAndDrama/assets/images/unit2-header-img.png | 0
src/books/artAndDrama/assets/images/unit3-header-img.png | 0
src/App.vue | 2
src/books/artAndDrama/view/components/index.vue | 27 +++++-
11 files changed, 133 insertions(+), 80 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 16e08b0..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
- : "artAndDance")
+ : "artAndDrama")
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
diff --git a/src/books/artAndDrama/assets/images/unit2-header-img.png b/src/books/artAndDrama/assets/images/unit2-header-img.png
new file mode 100644
index 0000000..a454827
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/unit2-header-img.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/unit3-header-img.png b/src/books/artAndDrama/assets/images/unit3-header-img.png
new file mode 100644
index 0000000..229cc52
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/unit3-header-img.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/unit4-header-img.png b/src/books/artAndDrama/assets/images/unit4-header-img.png
new file mode 100644
index 0000000..a4cc696
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/unit4-header-img.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/main.less b/src/books/artAndDrama/assets/main.less
index 4aa7c90..e000d1d 100644
--- a/src/books/artAndDrama/assets/main.less
+++ b/src/books/artAndDrama/assets/main.less
@@ -1,7 +1,7 @@
.ans-drama {
width: 100%;
height: 100%;
- font-family: "瀹嬩綋", SimSun, sans-serif;
+ font-family: "STKaiti", SimSun, sans-serif;
span.un1{
-webkit-text-emphasis-style:dot;
-moz-text-emphasis-style:dot;
@@ -50,8 +50,9 @@
div.bodystyle {
font-size:18px;
text-align:justify;
- margin:5%;
+ margin:5% 15%;
line-height:30px;
+
}
span.zt-0
@@ -102,7 +103,8 @@
p
{
- margin-top:1em;
+ // margin-top:1em;
+ margin: 0;
text-indent:2em;
line-height:30px;
font-size:18px;
@@ -169,7 +171,7 @@
text-align:center;
font-size:1.8em;
color:#515594;
- margin-bottom:0.5cm;
+ margin-bottom:0%;
margin-top:0.5cm;
}
@@ -252,6 +254,7 @@
.img-0{
width:100%;
+height: auto;
}
.imz{
width:96%;
@@ -512,6 +515,13 @@
outline: none;
}
}
+ // 鏁磋鐨刬nput鏍囩
+ .input-w-66{
+ width: 66%;
+ }
+ .headerimg{
+ margin-left: 5%;
+ }
.page-footer {
position: relative;
display: flex;
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index babd03a..54731ea 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -4,7 +4,7 @@
<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>
+ <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -24,14 +24,14 @@
<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>
+ <h1 style="margin-bottom: 0%">
<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">
- <img src="../../assets/images/page5.png" alt="" />
<h2 id="b001">绗竴璇俱��榻愬績鍗忓姏</h2>
<h3 class="lefth3" id="c001">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
@@ -43,11 +43,13 @@
<span class="hs1">鈼�</span>澶у０鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
</p>
<h1>
- <audio :src="auidoPathTwo" class="audio" controls></audio>
+ <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
</h1>
- <p>灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
- <!-- 杩炵嚎棰� -->
+
+ <!-- 杩炵嚎棰� -->
<matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'"></matching>
+ <p>灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
+
</div>
<p><br /></p>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -97,11 +99,11 @@
</div>
<div class="page-box" page="7">
<div v-if="showPageList.indexOf(7) > -1">
- <h1>
+ <h1 style="margin-bottom: 0%">
<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">
- <img src="../../assets/images/page5.png" alt="" />
<h2 id="b002">绗簩璇俱��娲ユ触涔愰亾</h2>
<h3 class="lefth3" id="c003">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
@@ -109,7 +111,7 @@
<p>
<span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
- <h1><audio :src="auidoPathThree" class="audio" controls></audio></h1>
+ <h1><audio :src="auidoPathThree" controls class="audio" @play="audioPlay"></audio></h1>
<div class="bj3">
<p class="center">
@@ -147,18 +149,20 @@
<div class="page-box" page="8">
<div v-if="showPageList.indexOf(8) > -1">
<h1>
- <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ <img src="../../assets/images/page6-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 openImgBox" id="c005">
- <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
- </h1>
+ <h3 class="lefth3" id="c006">
+ <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
+ </h3>
<p>
<span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
- <h1><audio :src="auidoPathTwo" class="audio" controls></audio></h1>
+ <h1 class="lefth3 openImgBox" id="c005">
+ <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
+ </h1>
+ <h1><audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio></h1>
<div class="bj3">
<p class="center">
<span class="hs">鏄�<a id="w1"></a><sup>1</sup>锛堣妭閫夛級</span>
@@ -173,7 +177,7 @@
class="un1">杞绘倓鎮�</span>鐨勶紝鑽�<span class="un1">杞坏缁�</span>鐨勩��
</p>
</div>
- <hr />
+ <hr style="margin-left: 0; width: 20%;" />
<p class="note">
<a id="m1">1</a>
鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
@@ -189,11 +193,11 @@
</div>
<div class="page-box" page="9">
<div v-if="showPageList.indexOf(9) > -1">
- <h1>
+ <h1 style="margin-bottom: 0%;">
<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">
- <img src="../../assets/images/page5.png" alt="" />
<h3 class="lefth3" id="c006">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
@@ -205,10 +209,10 @@
class="hs1">鈼�</span>鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫０闊冲嚭鐜帮細涓�涓０闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓０闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓ｇ殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
</p>
<p>姝ｄ箟闃熼暱锛氣��
- <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" />鈥�
+ <input v-model="questionData.warnUp.one" class="input-bottom-border input-w-66" @change="setBookQuestion" />銆傗��
</p>
- <p>榛戞殫闃熼暱锛氣�� <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
- @change="setBookQuestion" />鈥�</p>
+ <p>榛戞殫闃熼暱锛氣�� <input v-model="questionData.warnUp.two" class="input-bottom-border input-w-66" @change="setBookQuestion" />銆傗��
+ </p>
</div>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -231,7 +235,7 @@
<span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
<h1>
- <audio :src="auidoPathTwo" class="audio" controls></audio>
+ <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
</h1>
<div class="bj3">
@@ -260,7 +264,7 @@
v-model="questionData.warnUp.six" class="input-bottom-border fz-18" style=" width: 10%;"
@change="setBookQuestion" />锛堣韩浣撴劅瑙夛級鍟婏紒
</p>
- <hr />
+ <hr style="margin-left: 0; width: 20%;" />
<p class="note">
<a id="m1">1</a>
鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
@@ -279,8 +283,9 @@
<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">
- <img src="../../assets/images/page5.png" alt="" />
+
<p class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/1-5.gif" />
</p>
@@ -334,6 +339,7 @@
<h1>
<img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
<div class="bodystyle">
<h3 class="lefth3" id="c010">
<img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
@@ -348,7 +354,7 @@
controlslist="nodownload" class="w100"
style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
<h2>瑙嗛: 鎴戜滑鏄竴瀹朵汉</h2>
- </p>
+ </p>
</div>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -370,9 +376,9 @@
showPageList: {
type: Array,
},
- primaryColor:{
- type:String,
- default:"red"
+ primaryColor: {
+ type: String,
+ default: "red"
}
},
//鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
@@ -551,6 +557,9 @@
JSON.stringify(this.questionData)
);
},
+ audioPlay(e) {
+ this.$emit('closeAudio', e.srcElement.currentSrc)
+ }
},
};
</script>
@@ -579,7 +588,8 @@
height: 100%;
background-color: red;
}
-.macthing{
+
+.macthing {
background-color: rgb(188, 220, 164);
padding: 5% 5%;
}
diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue
index c9c21d4..e4e8ebb 100644
--- a/src/books/artAndDrama/view/components/chapter002.vue
+++ b/src/books/artAndDrama/view/components/chapter002.vue
@@ -4,7 +4,7 @@
<div v-if="showPageList.indexOf(14) > -1">
<h1 id="a004">
<img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
- <audio :src="auidoPathOne" controls></audio>
+ <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -31,8 +31,8 @@
<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">
- <img src="../../assets/images/page5.png" alt="" />
<h2 id="b006">绗竴璇俱��浜斿畼鐨勫姏閲�</h2>
<h3 class="lefth3" id="c011">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
@@ -70,17 +70,17 @@
<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%" />
+ <img src="../../assets/images/unit2-header-img.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>
+ <p>榛勮壊锛氭煚妾��<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�</p>
+ <p>绾㈣壊锛氶灜鐐��<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�</p>
+ <p>缁胯壊锛氬彾瀛愩��<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�<input v-model="questionData.warnUp.eight" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�</p>
+ <p>榛戣壊锛氶粦鏉裤��<input v-model="questionData.warnUp.nine" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�<input v-model="questionData.warnUp.ten" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�</p>
+ <p>钃濊壊锛氬ぇ娴枫��<input v-model="questionData.warnUp.eleven" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�<input v-model="questionData.warnUp.twelve" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�</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>
@@ -101,14 +101,15 @@
<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">
<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>鈥�<input v-model="questionData.warnUp.thirteen" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 80%"/>銆傗��</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>
+ <p>鈥�<input v-model="questionData.warnUp.fourteen" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 80%"/>銆傗��</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>
@@ -125,7 +126,7 @@
<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" />
+ <img src="../../assets/images/unit2-header-img.png" alt="" style="width: 100%; height: auto" />
</h1>
<div class="bodystyle">
<p><span class="hs">杩欏潡濂堕叒澶矇浜嗭紝鎴戜滑浼戞伅涓�涓嬪惂锛�</span>锛堜竴鍙急灏忕殑铓傝殎锛屽湪鍚戣殏铓侀槦闀胯姹備紤鎭級</p>
@@ -143,6 +144,7 @@
<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">
<h2 id="b009">绗洓璇俱��鐪熷惉鐪熺湅鐪熸劅鍙�</h2>
<h3 class="lefth3" id="c017"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
@@ -165,7 +167,7 @@
<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" />
+ <img src="../../assets/images/unit2-header-img.png" alt="" style="width: 100%; height: auto" />
</h1>
<div class="bodystyle">
<h2 id="b010">鍗曞厓娲诲姩浠诲姟</h2>
@@ -190,17 +192,19 @@
<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><span class="hs1">鈼�</span>鍚逛箳涔撶悆缁冧範</p>
<p>鐢ㄦ皵鎭皢妗岄潰涓婄殑涔掍箵鐞冧粠鈥滆捣鐐光�濊繍閫佽嚦鈥滅粓鐐光�濓紝杩愰�佽繃绋嬩腑閬垮厤涔掍箵鐞冭Е纰伴殰纰嶇墿銆�</p>
- <h3 class="lefth3" id="c020"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <h3 class="lefth3" id="c020"><img class="img-gn1" alt="" src="../../assets/images/tzyys.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>
+ <h2>瑙嗛: 鎯熷鎯熻倴鐨勪汉鐗�</h2>
+ </p>
</div>
</div>
<!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -288,6 +292,9 @@
JSON.stringify(this.questionData)
);
},
+ audioPlay(e) {
+ this.$emit('closeAudio',e.srcElement.currentSrc)
+ }
},
};
</script>
diff --git a/src/books/artAndDrama/view/components/chapter003.vue b/src/books/artAndDrama/view/components/chapter003.vue
index 9754452..67b0f5d 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" class="audio" controls></audio>
+ <audio :src="auidoPathOne" controls class="audio" @play="audioPlay" ></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -28,8 +28,9 @@
<h1>
<img src="../../assets/images/header-green.png" alt="" style="width: 100%;" />
</h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
<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>
@@ -52,7 +53,7 @@
<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%" />
+ <img src="../../assets/images/unit3-header-img.png" alt="" style="height: auto; width: 100%" />
</h1>
<div class="bodystyle">
<h2 id="b012">绗簩璇俱��鎰忓鍙戠敓浜嗭紒</h2>
@@ -77,6 +78,7 @@
<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">
<h2 id="b013">绗笁璇俱��鎴戣鎬庝箞鍔烇紵</h2>
<h3 class="lefth3" id="c025"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
@@ -96,10 +98,11 @@
<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>
+ <img src="../../assets/images/unit3-header-img.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>
@@ -110,7 +113,7 @@
<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>
+ <p><input v-model="questionData.warnUp.enight" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 85%"/></p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
@@ -140,7 +143,7 @@
<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" />
+ <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" />
</h1>
<div class="bodystyle">
<h2 id="b015">鍗曞厓娲诲姩浠诲姟</h2>
@@ -166,8 +169,9 @@
<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">
- <h3 class="lefth3" id="c030"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <h3 class="lefth3" id="c030"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
<p><span class="hs1">鈼�</span>鍔冲姩鏈�鍏夎崳锛佽涓哄涓暱杈堝仛涓�浠跺姏鎵�鑳藉強鐨勪簨鎯咃紝鐢ㄥ疄闄呰鍔ㄨ〃杈句綘鐨勭埍鎰忥紒浣撻獙杩囩▼涓璁颁綇姣忎竴涓姩浣滅殑缁嗚妭锛屽啀灏濊瘯浠ユ棤瀹炵墿琛ㄦ紨鐨勬柟寮忚繘琛屽睍绀恒��
</p>
<p class="center">
@@ -360,6 +364,9 @@
JSON.stringify(this.questionData)
);
},
+ audioPlay(e) {
+ this.$emit('closeAudio',e.srcElement.currentSrc)
+ }
},
};
</script>
diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
index 564b93e..cb0c15c 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" class="audio" controls></audio>
+ <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -28,13 +28,14 @@
<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">
- <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>
+ <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 90%"/></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>
@@ -55,7 +56,7 @@
<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%" />
+ <img src="../../assets/images/unit4-header-img.png" alt="" style="height: auto; width: 100%" />
</h1>
<div class="bodystyle">
<h2 id="b017">绗簩璇俱��閫犲瀷鍙樺彉鍙�</h2>
@@ -76,6 +77,7 @@
<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">
<h3 class="lefth3" id="c034"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
<p><span class="hs1">鈼�</span>鍔ㄥ姩鎵嬶紝涓恒�婁竴鍧楀ザ閰�嬩腑鐨勮殏铓佽鑹茶璁＄畝鍗曠殑鏈嶈鍚э紒</p>
@@ -91,10 +93,9 @@
<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" />
+ <img src="../../assets/images/unit4-header-img.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>
@@ -114,8 +115,8 @@
<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">
- <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>
@@ -134,7 +135,7 @@
<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" />
+ <img src="../../assets/images/unit4-header-img.png" alt="" style="width: 100%; height: auto" />
</h1>
<div class="bodystyle">
<h2 id="b020">鍗曞厓娲诲姩浠诲姟</h2>
@@ -164,8 +165,8 @@
<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">
- <img src="../../assets/images/page5.png" alt="" />
<p>绗�1鑷崇2涓叓鎷嶏細鍙屾墜涓嬪瀭锛屾墜蹇冨悜涓嬶紝鍙岃偐涓婃彁鍐嶆矇涓嬶紝涓ゆ媿涓�鍔ㄣ��</p>
<p>绗�3鑷崇4涓叓鎷嶏細鍙屾墜涓嬪瀭锛屾墜蹇冨悜涓嬶紝宸﹀彸鑲╄唨渚濇涓婃彁鍐嶆矇涓嬶紝涓�鎷嶄竴鍔ㄣ��</p>
<p><span class="hs1">鈼�</span>浼稿睍杩愬姩</p>
@@ -253,8 +254,12 @@
"artAndDrama-book-question-four",
JSON.stringify(this.questionData)
);
- },
+ },
+ audioPlay(e) {
+ this.$emit('closeAudio',e.srcElement.currentSrc)
+ }
},
+
};
</script>
diff --git a/src/books/artAndDrama/view/components/chapter005.vue b/src/books/artAndDrama/view/components/chapter005.vue
index 310daa3..3305f5e 100644
--- a/src/books/artAndDrama/view/components/chapter005.vue
+++ b/src/books/artAndDrama/view/components/chapter005.vue
@@ -38,10 +38,8 @@
<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">
- <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>
@@ -78,7 +76,6 @@
<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>
@@ -113,8 +110,8 @@
<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">
- <img src="../../assets/images/page5.png" alt="" />
<p class="block3"><span class="hs">閫夋4</span></p>
<p class="block">銆愯垶鍙板彉鍏夛紝婕斿憳绔嬫绔欏ソ銆�</p>
<p class="block">铓傝殎闃熼暱锛氫紤鎭竴浼氬効锛�</p>
@@ -147,8 +144,8 @@
<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">
- <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>
@@ -185,8 +182,8 @@
<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">
- <img src="../../assets/images/page5.png" alt="" />
<p>鍚戝悗杞紒榻愭璧帮紒</p>
<p class="block">銆愯殏铓佷滑鐢卞洓闈㈠叓鏂硅蛋鍥炴潵銆�</p>
<p class="block">铓傝殎闃熼暱锛氬ぇ瀹朵紤鎭ソ鍟︼紒鎴戞湁涓�涓�<span class="un1">鍐冲畾</span>锛�</p>
diff --git a/src/books/artAndDrama/view/components/index.vue b/src/books/artAndDrama/view/components/index.vue
index 65d3c72..c3f7e59 100644
--- a/src/books/artAndDrama/view/components/index.vue
+++ b/src/books/artAndDrama/view/components/index.vue
@@ -9,14 +9,15 @@
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>
+ <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterOne>
+ <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterTwo>
+ <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterThree>
+ <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterFour>
<chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterFive>
</div>
<!-- 闊抽灏忕獥鎾斁缁勪欢 -->
- <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer"></miniAudio>
+ <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer">
+ </miniAudio>
</div>
</template>
@@ -858,6 +859,22 @@
}
}
},
+ // 鐐瑰嚮闊抽鎾斁锛屽叧闂叾浠栭煶棰�
+ closeAudio(path) {
+ let allVideo = (
+ 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()
+ }
+ }
+ }
+ this.closeMiniAudio()
+ },
// 鍏抽棴mini video
closeMiniAudio() {
this.audioPath = "";
--
Gitblit v1.9.1