| | |
| | | alt="" |
| | | class="w100 mb-40" |
| | | /> |
| | | <div class="padding-96"> |
| | | <ul class="fl fl-cl al-cn img-state" style="margin-top: 100px"> |
| | | <li style="width: 45%"> |
| | | <img |
| | | src="../../assets/images/crane.png" |
| | | alt="" |
| | | class="w100" |
| | | :style="{ opacity: (10 - num) / 10 }" |
| | | /> |
| | | </li> |
| | | <li style="width: 35%"> |
| | | <img |
| | | src="../../assets/images/rise.png" |
| | | alt="" |
| | | class="w100" |
| | | :style="{ opacity: num / 10 }" |
| | | /> |
| | | </li> |
| | | </ul> |
| | | <div class="padding-96 fl ju-cn al-cn fl-cl"> |
| | | <p class="center share-img-box fl ju-cn al-end"> |
| | | <img |
| | | :src="num >= 0 ? crane : rise" |
| | | alt="" |
| | | :style="{ |
| | | opacity: num >= 0 ? num / 10 : -num / 10, |
| | | width: num >= 0 ? '80%' : '70%', |
| | | }" |
| | | /> |
| | | </p> |
| | | <p class="img">“西塞山前白鹭飞”动作</p> |
| | | </div> |
| | | <ul class="pb-box"> |
| | |
| | | <div class="page-box" page="22"> |
| | | <div v-if="showPageList.indexOf(22) > -1"> |
| | | <div> |
| | | <img |
| | | src="../../assets/images/chapter-five-header.png" |
| | | class="w100" |
| | | /> |
| | | <img src="../../assets/images/chapter-five-header.png" class="w100" /> |
| | | </div> |
| | | <div class="padding-96"> |
| | | <h2 class="lefth2" id="b001"> |
| | |
| | | <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 controlslist="noplaybackrate nodownload" 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 controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio> |
| | | <audio |
| | | :src="auidoPathTwo" |
| | | controls |
| | | controlslist="noplaybackrate nodownload" |
| | | class="audio" |
| | | ></audio> |
| | | </li> |
| | | </ul> |
| | | <h3 id="c015">渔歌子</h3> |
| | | <p class="block2 fm-son">〔唐〕张志和</p> |
| | | <h3 id="c015" style="margin-right: 3%;" >渔歌子</h3> |
| | | <p class="block2 fm-son" style="margin-right: 7%;">〔唐〕张志和</p> |
| | | <p class="block2 m16-0">西塞山前白鹭飞,</p> |
| | | <p class="block2 m16-0">桃花流水鳜鱼肥。</p> |
| | | </div> |
| | |
| | | x5-playsinline="" |
| | | controls |
| | | controlslist="nodownload" |
| | | class="w100" |
| | | style="margin:38px 0" |
| | | class="w100 video" |
| | | style="margin: 38px 0" |
| | | ></video> |
| | | <h2 class="lefth2" id="b003"> |
| | | <img class="img-gn" alt="" src="../../assets/images/czysj.jpg" /> |
| | |
| | | auidoPathOne: "", |
| | | auidoPathTwo: "", |
| | | num: 0, |
| | | crane: require("../../assets/images/crane.png"), |
| | | rise: require("../../assets/images/rise.png"), |
| | | }; |
| | | }, |
| | | unmounted() { |
| | |
| | | }, |
| | | cutNum() { |
| | | this.cutTimer = setInterval(() => { |
| | | if (this.num > 0) { |
| | | if (this.num > -10) { |
| | | this.num--; |
| | | } else { |
| | | clearInterval(this.cutTimer); |
| | |
| | | } |
| | | }, 200); |
| | | }, |
| | | audioPlay(e) { |
| | | this.$emit('closeAudio',e.srcElement.currentSrc) |
| | | } |
| | | }, |
| | | }; |
| | | </script> |