From 304689614daa96595aeeeed8e46e5dfa992ef2df Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期一, 17 六月 2024 17:33:33 +0800
Subject: [PATCH] 优化
---
src/books/artAndDance/view/components/chapter005.vue | 80 ++++++++++++++++++----------------------
1 files changed, 36 insertions(+), 44 deletions(-)
diff --git a/src/books/artAndDance/view/components/chapter005.vue b/src/books/artAndDance/view/components/chapter005.vue
index bc95185..e0fcfca 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" @play="audioPlay"></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" @play="audioPlay"></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">闈掔绗狅紝缁胯搼琛ｏ紝</p>
- <p class="block2">鏂滈缁嗛洦涓嶉』褰掋��</p>
+ <p class="block2 m16-0">闈掔绗狅紝缁胯搼琛ｏ紝</p>
+ <p class="block2 m16-0">鏂滈缁嗛洦涓嶉』褰掋��</p>
<video
:src="videoPathOne"
webkit-playsinline="true"
@@ -124,6 +110,7 @@
x5-video-player-fullscreen="true"
x5-playsinline=""
controls
+ controlslist="nodownload"
class="w100"
style="margin:38px 0"
></video>
@@ -188,6 +175,8 @@
auidoPathOne: "",
auidoPathTwo: "",
num: 0,
+ crane:require("../../assets/images/crane.png"),
+ rise:require("../../assets/images/rise.png")
};
},
unmounted() {
@@ -211,25 +200,28 @@
);
},
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)
},
+ audioPlay(e) {
+ this.$emit('closeAudio',e.srcElement.currentSrc)
+ }
},
};
</script>
--
Gitblit v1.9.1