From e230a82c645769d297e05ac54618d7bc23fd8376 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期一, 03 六月 2024 11:24:16 +0800 Subject: [PATCH] 合并 --- src/books/artAndDance/view/components/chapter002.vue | 52 +++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 45 insertions(+), 7 deletions(-) diff --git a/src/books/artAndDance/view/components/chapter002.vue b/src/books/artAndDance/view/components/chapter002.vue index b1bad73..6efca5f 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"> + <div class="page-box" page="8" style="min-height: auto;"> <div v-if="showPageList.indexOf(8) > -1"> <img class="img-0" alt="" src="../../assets/images/dy2.jpg" /> </div> @@ -14,11 +14,16 @@ /> <div class="padding-96"> <p class="center"> - <img class="img-b" alt="" src="../../assets/images/image10-1.jpg" /> + <img class="img-b" alt="" src="../../assets/images/04-2.gif" /> </p> - <p class="center"> - <img class="img-a" alt="" src="../../assets/images/image10-2.jpg" /> - </p> + <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}"> + </li> + <li style="width: 35%;"> + <img src="../../assets/images/girl.png" alt="" class="w100" :style="{opacity: num / 10}"> + </li> + </ul> <p class="img">鈥滅緤瑙掑紡鈥濊垶濮�</p> </div> <ul class="pb-box"> @@ -75,7 +80,7 @@ </div> </div> <div class="page-box" page="11"> - <div v-if="showPageList.indexOf(10) > -1" class="pg-mh"> + <div v-if="showPageList.indexOf(11) > -1" class="pg-mh"> <img src="../../assets/images/pageContentHeader.jpg" alt="" @@ -153,18 +158,51 @@ }, mounted() { this.getVidoePath(); + this.addNum() + }, + unmounted() { + if(this.addTimer) { + clearInterval(this.addTimer) + } + if(this.cutTimer) { + clearInterval(this.cutTimer) + } }, data() { return { videoPathOne: "", + num:0, + addTimer:null, + cutTimer:null }; }, methods: { getVidoePath() { this.videoPathOne = getResourcePath("f6aaaed901868114d948031615250bed"); }, + addNum() { + this.addTimer = setInterval(() => { + if(this.num < 10) { + this.num ++ + } else { + clearInterval(this.addTimer) + this.cutNum() + } + },200) + }, + cutNum() { + this.cutTimer = setInterval(() => { + if(this.num > 0) { + this.num -- + } else { + clearInterval(this.cutTimer) + this.addNum() + } + },200) + } }, }; </script> -<style lang="scss" scoped></style> +<style lang="less" scoped> +</style> -- Gitblit v1.9.1