From d8c24a06b3e7844ad65e7c821c022dbb36d29430 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期二, 19 十一月 2024 17:15:08 +0800 Subject: [PATCH] 各图书bug修改 --- src/books/artAndDance/view/components/chapter002.vue | 37 +++++++++++++++++++++---------------- 1 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/books/artAndDance/view/components/chapter002.vue b/src/books/artAndDance/view/components/chapter002.vue index 9c77c40..8357ff8 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,17 @@ <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="min-height: 370px" > <li style="width: 45%;"> - <img src="../../assets/images/05.gif" alt="" class="w100" :style="{opacity:(10 - num) / 10}"> + <img @click="clickImg" title="鐐瑰嚮姝ゅ鏌ョ湅鍥剧墖" src="../../assets/images/05.gif" alt="" class="w100" style="cursor:pointer" > </li> - <li style="width: 35%;"> - <img src="../../assets/images/girl.png" alt="" class="w100" :style="{opacity: num / 10}"> + <li style="width: 35%;" v-if="appearsImg"> + <img src="../../assets/images/girl.png" alt="" class="w100" > </li> </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"> @@ -32,7 +35,7 @@ <img src="../../assets/images/icon/tree.jpg" /> <span class="dl-ib"> 6 </span> </li> - <li> + <li class="fl"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </li> </ul> @@ -65,13 +68,13 @@ <ul class="fl fl-cl al-cn audio-box"> <li class="fl al-cn"> <span class="wh-nr auido-text mr-8">鐢风闊�</span> - <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio> + <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio> </li> <li class="fl al-cn mt-20"> <span class="wh-nr auido-text mr-8"> 濂崇闊� </span> - <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio> + <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></audio> </li> </ul> <h3 id="c006">浜$緤琛ョ墷</h3> @@ -86,7 +89,7 @@ <img src="../../assets/images/icon/tree.jpg" /> </div> </li> - <li> + <li class="fl"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </li> </ul> @@ -115,7 +118,7 @@ x5-playsinline="" controls controlslist="nodownload" - class="w100" + class="w100 video" style="margin-top: 40px;" ></video> <h2 class="lefth2 mt-40" id="b007"> @@ -153,7 +156,7 @@ <img src="../../assets/images/icon/tree.jpg" /> <span class="dl-ib"> 8 </span> </li> - <li> + <li class="fl"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </li> </ul> @@ -191,7 +194,9 @@ cutTimer:null, auidoPathOne:"", auidoPathTwo:"", - + appearsImg: false, + shape:require("../../assets/images/05.gif"), + girl:require("../../assets/images/girl.png") }; }, methods: { @@ -212,7 +217,7 @@ }, cutNum() { this.cutTimer = setInterval(() => { - if(this.num > 0) { + if(this.num > -10) { this.num -- } else { clearInterval(this.cutTimer) @@ -220,9 +225,9 @@ } },200) }, - audioPlay(e) { - this.$emit('closeAudio',e.srcElement.currentSrc) - } + clickImg(){ + this.appearsImg = !this.appearsImg + }, }, }; </script> -- Gitblit v1.9.1