From 609989d5dd46d2611b42f7d508f67ec89b355562 Mon Sep 17 00:00:00 2001 From: user1 <10901603+no-distractions1@user.noreply.gitee.com> Date: 星期一, 17 六月 2024 15:17:43 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/books/artAndDance/view/components/chapter002.vue | 45 +++++++++++++++++++++++++++------------------ 1 files changed, 27 insertions(+), 18 deletions(-) diff --git a/src/books/artAndDance/view/components/chapter002.vue b/src/books/artAndDance/view/components/chapter002.vue index 6fae6b3..e3c4ee7 100644 --- a/src/books/artAndDance/view/components/chapter002.vue +++ b/src/books/artAndDance/view/components/chapter002.vue @@ -1,6 +1,6 @@ <template> <div class="chapter" num="3"> - <div class="page-box" page="8" style="min-height: auto;"> + <div class="page-box" page="8"> <div v-if="showPageList.indexOf(8) > -1"> <img class="img-0" alt="" src="../../assets/images/dy2.jpg" /> <img src="../../assets/images/03-2.gif" alt="" style="width: 55%;" class="cover-gif"> @@ -17,14 +17,18 @@ <p class="center"> <img class="img-b" alt="" src="../../assets/images/04-2.gif" /> </p> - <ul class="fl al-cn ju-bt img-state " style="margin-top: 100px;"> + <!-- <ul class="fl al-cn ju-bt img-state " style="margin-top: 100px;"> <li style="width: 45%;"> - <img src="../../assets/images/05.gif" alt="" class="w100" :style="{opacity:(10 - num) / 10}"> + <img src="../../assets/images/05.gif" alt="" class="w100" :style="{opacity:num / 10}"> </li> <li style="width: 35%;"> - <img src="../../assets/images/girl.png" alt="" class="w100" :style="{opacity: num / 10}"> + <img src="../../assets/images/girl.png" alt="" class="w100" :style="{opacity: (-num) / 10}"> </li> - </ul> + </ul> --> + <p class="center"> + <img :src="num >= 0 ? shape : girl" alt="" :style="{opacity:num >= 0 ? num / 10 : (-num) / 10 , width:num >= 0 ? '80%' : '34%'}"> + </p> + <p class="img">鈥滅緤瑙掑紡鈥濊垶濮�</p> </div> <ul class="pb-box"> @@ -62,22 +66,22 @@ <h2 class="lefth2" id="b006"> <img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" /> </h2> - <ul class="fl audio-box"> + <ul class="fl fl-cl al-cn audio-box"> <li class="fl al-cn"> - <span class="wh-nr">鐢风闊�</span> - <audio :src="auidoPathOne" controls></audio> + <span class="wh-nr auido-text mr-8">鐢风闊�</span> + <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio> </li> - <li class="fl al-cn"> - <span class="wh-nr"> + <li class="fl al-cn mt-20"> + <span class="wh-nr auido-text mr-8"> 濂崇闊� </span> - <audio :src="auidoPathTwo" controls></audio> + <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio> </li> </ul> <h3 id="c006">浜$緤琛ョ墷</h3> - <p class="block2">甯竴鍏�</p> - <p class="block2">缇婂晩缇婂晩鍜╁挬鍙紝鏈夊彧灏忕緤涓嶈浜嗐��</p> - <p class="block2">澧欏晩澧欏晩鍨掗珮楂橈紝澧欎笂鏈変釜澶х獰绐裤��</p> + <p class="block2 fm-son">甯竴鍏�</p> + <p class="block2 m16-0">缇婂晩缇婂晩鍜╁挬鍙紝鏈夊彧灏忕緤涓嶈浜嗐��</p> + <p class="block2 m16-0">澧欏晩澧欏晩鍨掗珮楂橈紝澧欎笂鏈変釜澶х獰绐裤��</p> </div> <ul> <li class="fl ju-end mr-40"> @@ -100,8 +104,8 @@ class="w100 mb-40" /> <div class="padding-96"> - <p class="block2">缇婂晩缇婂晩鍜╁挬鍙紝缇婂効鍏ㄩ兘鍚撳潖浜嗐��</p> - <p class="block2">绐熺绐熺榛戞礊娲烇紝蹇揩琛ヤ笂鎵嶅畨蹇冦��</p> + <p class="block2 m16-0">缇婂晩缇婂晩鍜╁挬鍙紝缇婂効鍏ㄩ兘鍚撳潖浜嗐��</p> + <p class="block2 m16-0">绐熺绐熺榛戞礊娲烇紝蹇揩琛ヤ笂鎵嶅畨蹇冦��</p> <p class="center"> <!-- <img class="img-g" alt="" src="../../assets/images/i0012-1.jpg" /> --> </p> @@ -114,6 +118,7 @@ x5-video-player-fullscreen="true" x5-playsinline="" controls + controlslist="nodownload" class="w100" style="margin-top: 40px;" ></video> @@ -190,7 +195,8 @@ cutTimer:null, auidoPathOne:"", auidoPathTwo:"", - + shape:require("../../assets/images/05.gif"), + girl:require("../../assets/images/girl.png") }; }, methods: { @@ -211,13 +217,16 @@ }, cutNum() { this.cutTimer = setInterval(() => { - if(this.num > 0) { + if(this.num > -10) { this.num -- } else { clearInterval(this.cutTimer) this.addNum() } },200) + }, + audioPlay(e) { + this.$emit('closeAudio',e.srcElement.currentSrc) } }, }; -- Gitblit v1.9.1