From 447fad1797cc37d2a9e2d5129ce74af728fa8836 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期四, 27 六月 2024 18:23:05 +0800 Subject: [PATCH] 题目公共请求方法添加收藏获取 --- src/books/artAndDance/view/components/chapter005.vue | 79 +++++++++++++++++---------------------- 1 files changed, 34 insertions(+), 45 deletions(-) diff --git a/src/books/artAndDance/view/components/chapter005.vue b/src/books/artAndDance/view/components/chapter005.vue index bc95185..032ca3e 100644 --- a/src/books/artAndDance/view/components/chapter005.vue +++ b/src/books/artAndDance/view/components/chapter005.vue @@ -1,6 +1,6 @@ <template> <div class="chapter" num="6"> - <div class="page-box" page="20" style="min-height: auto"> + <div class="page-box" page="20"> <div v-if="showPageList.indexOf(20) > -1"> <img class="img-0" alt="" src="../../assets/images/dy5.jpg" /> <img @@ -18,26 +18,12 @@ 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> - <p class="img">鈥滆タ濉炲北鍓嶇櫧楣鈥濆姩浣�</p> + <div class="padding-96 fl ju-cn al-cn fl-cl"> + <p class="center share-img-box"> + <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"> <li class="ml-40"> @@ -77,20 +63,20 @@ <h2 class="lefth2" id="b002"> <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" ></audio> </li> - <li class="fl al-cn"> - <span class="wh-nr"> 濂崇闊� </span> - <audio :src="auidoPathTwo" controls></audio> + <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" ></audio> </li> </ul> <h3 id="c015">娓旀瓕瀛�</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"> @@ -113,8 +99,8 @@ class="w100 mb-40" /> <div class="padding-96"> - <p class="block2">闈掔绗狅紝缁胯搼琛o紝</p> - <p class="block2">鏂滈缁嗛洦涓嶉』褰掋��</p> + <p class="block2 m16-0">闈掔绗狅紝缁胯搼琛o紝</p> + <p class="block2 m16-0">鏂滈缁嗛洦涓嶉』褰掋��</p> <video :src="videoPathOne" webkit-playsinline="true" @@ -124,7 +110,8 @@ x5-video-player-fullscreen="true" x5-playsinline="" controls - class="w100" + controlslist="nodownload" + class="w100 video" style="margin:38px 0" ></video> <h2 class="lefth2" id="b003"> @@ -188,6 +175,8 @@ auidoPathOne: "", auidoPathTwo: "", num: 0, + crane:require("../../assets/images/crane.png"), + rise:require("../../assets/images/rise.png") }; }, unmounted() { @@ -211,24 +200,24 @@ ); }, addNum() { - this.addTimer = setInterval(() => { - if (this.num < 10) { - this.num++; + this.addTimer = setInterval(() => { + if(this.num < 10) { + this.num ++ } else { - clearInterval(this.addTimer); - this.cutNum(); + clearInterval(this.addTimer) + this.cutNum() } - }, 200); + },200) }, cutNum() { - this.cutTimer = setInterval(() => { - if (this.num > 0) { - this.num--; + this.cutTimer = setInterval(() => { + if(this.num > -10) { + this.num -- } else { - clearInterval(this.cutTimer); - this.addNum(); + clearInterval(this.cutTimer) + this.addNum() } - }, 200); + },200) }, }, }; -- Gitblit v1.9.1