From b60b839302d34048c216e9fd85b3a84caea257ea Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期二, 11 六月 2024 10:36:17 +0800
Subject: [PATCH] 1
---
src/books/artAndDance/view/components/chapter002.vue | 131 ++++++++++++++++++++++++++++++++++++-------
1 files changed, 110 insertions(+), 21 deletions(-)
diff --git a/src/books/artAndDance/view/components/chapter002.vue b/src/books/artAndDance/view/components/chapter002.vue
index c58b149..6364b3b 100644
--- a/src/books/artAndDance/view/components/chapter002.vue
+++ b/src/books/artAndDance/view/components/chapter002.vue
@@ -1,8 +1,9 @@
<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" />
+ <img src="../../assets/images/03-2.gif" alt="" style="width: 55%;" class="cover-gif">
</div>
</div>
<div class="page-box" page="9">
@@ -14,11 +15,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">
@@ -35,7 +41,7 @@
<div class="page-box" page="10">
<div v-if="showPageList.indexOf(10) > -1" class="pg-mh">
<div>
- <img src="../../assets/images/chapter-one-header.png" class="w100" />
+ <img src="../../assets/images/chapter-two-header.png" class="w100" />
</div>
<div class="padding-96">
<h2 class="lefth2" id="b005">
@@ -56,10 +62,22 @@
<h2 class="lefth2" id="b006">
<img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
</h2>
+ <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></audio>
+ </li>
+ <li class="fl al-cn mt-20">
+ <span class="wh-nr auido-text mr-8">
+ 濂崇闊�
+ </span>
+ <audio :src="auidoPathTwo" controls></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">
@@ -75,19 +93,31 @@
</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=""
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>
- <h2 class="lefth2" id="b007">
+ <video
+ :src="videoPathOne"
+ webkit-playsinline="true"
+ x-webkit-airplay="true"
+ playsinline="true"
+ x5-video-orientation="h5"
+ x5-video-player-fullscreen="true"
+ x5-playsinline=""
+ controls
+ class="w100"
+ style="margin-top: 40px;"
+ ></video>
+ <h2 class="lefth2 mt-40" id="b007">
<img class="img-gn" alt="" src="../../assets/images/czysj.jpg" />
</h2>
<div class="bj1">
@@ -105,18 +135,19 @@
src="../../assets/images/dn.png"
/>瀛︾敓鑷効鍒嗙粍锛屾瘡缁勮嚜琛岃缃笌璇ユ垚璇瘬鎰忕浉鍏崇殑涓婚锛屽湪鏁欏笀鐨勫紩瀵间笅杩涜鍒涚紪锛屽苟瀵屾湁鎯呮劅鍦板睍绀哄嚭鏉ャ��
</p>
- <div class="bj2">
+
+ </div>
+ <h2 class="lefth2 mt-40" id="b008">
+ <img class="img-gn1" alt="" src="../../assets/images/tz.jpg" />
+ </h2>
+ <div class="bj2">
<p class="block">
鏍规嵁鏈崟鍏冩墍瀛︾殑鑸炶箞鍏冪礌浠ュ強鎴愯瀵撴剰锛屽彂鎸ユ兂璞★紝鍒涚紪鍑烘柊鐨勫崟涓�鑸炶箞鍔ㄤ綔鎴栭�犲瀷鍚с��
</p>
</div>
- </div>
- <h2 class="lefth2" id="b008">
- <img class="img-gn1" alt="" src="../../assets/images/tz.jpg" />
- </h2>
- <p class="center"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></p>
+ <!-- <p class="center"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></p> -->
</div>
- <ul class="pb-box">
+ <ul style="margin-top: 20px">
<li class="ml-40">
<img src="../../assets/images/icon/tree.jpg" />
<span class="dl-ib"> 8 </span>
@@ -131,6 +162,7 @@
</template>
<script>
+import {getResourcePath} from "@/assets/methods/resources";
export default {
name: "chapterTwo",
props: {
@@ -138,7 +170,64 @@
type: Array,
},
},
+ 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,
+ auidoPathOne:"",
+ auidoPathTwo:"",
+
+ };
+ },
+ methods: {
+ async getVidoePath() {
+ this.videoPathOne = await getResourcePath("f6aaaed901868114d948031615250bed");
+ this.auidoPathOne = await getResourcePath("39fd9a021904ed3de1b8b9e036777ea3");
+ this.auidoPathTwo = await getResourcePath("a143777eff52ee24e53521d16afc85d9");
+ },
+ 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>
+.cover-gif {
+ position: absolute;
+ top: 33%;
+ left: 23%;
+
+}
+</style>
--
Gitblit v1.9.1