From 8ba5b1346308451e2c66f4414aa2c0b242d503d2 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期四, 27 六月 2024 15:31:49 +0800
Subject: [PATCH] 英语音频播放优化
---
src/books/artAndDance/view/components/chapter002.vue | 44 +++++++++++++++++++++++++-------------------
1 files changed, 25 insertions(+), 19 deletions(-)
diff --git a/src/books/artAndDance/view/components/chapter002.vue b/src/books/artAndDance/view/components/chapter002.vue
index 6fae6b3..392469b 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,18 @@
<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="margin-top: 100px;">
<li style="width: 45%;">
- <img src="../../assets/images/05.gif" alt="" class="w100" :style="{opacity:(10 - num) / 10}">
+ <img src="../../assets/images/05.gif" alt="" class="w100" :style="{opacity:num / 10}">
</li>
<li style="width: 35%;">
- <img src="../../assets/images/girl.png" alt="" class="w100" :style="{opacity: num / 10}">
+ <img src="../../assets/images/girl.png" alt="" class="w100" :style="{opacity: (-num) / 10}">
</li>
- </ul>
+ </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">
@@ -62,22 +66,22 @@
<h2 class="lefth2" id="b006">
<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">
+ <li class="fl al-cn mt-20">
+ <span class="wh-nr auido-text mr-8">
濂崇闊�
</span>
- <audio :src="auidoPathTwo" controls></audio>
+ <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></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">
@@ -100,8 +104,8 @@
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>
@@ -114,6 +118,7 @@
x5-video-player-fullscreen="true"
x5-playsinline=""
controls
+ controlslist="nodownload"
class="w100"
style="margin-top: 40px;"
></video>
@@ -190,7 +195,8 @@
cutTimer:null,
auidoPathOne:"",
auidoPathTwo:"",
-
+ shape:require("../../assets/images/05.gif"),
+ girl:require("../../assets/images/girl.png")
};
},
methods: {
@@ -211,14 +217,14 @@
},
cutNum() {
this.cutTimer = setInterval(() => {
- if(this.num > 0) {
+ if(this.num > -10) {
this.num --
} else {
clearInterval(this.cutTimer)
this.addNum()
}
},200)
- }
+ },
},
};
</script>
--
Gitblit v1.9.1