|
|
@@ -9,20 +9,21 @@
|
|
|
v-model="play_value"
|
|
|
class="audio-slider"
|
|
|
:format-tooltip="formatProcessToolTip"
|
|
|
+ :style="{ '--slider-color': topicColor }"
|
|
|
@change="changeCurrentTime"
|
|
|
/>
|
|
|
<span class="audio-time">{{ audio_allTime }}</span>
|
|
|
</div>
|
|
|
<div class="audio-icon">
|
|
|
<SvgIcon icon-class="pre" size="12" :color="topicColor" @click="changeFile('prev')" />
|
|
|
- <SvgIcon :icon-class="iconClass" size="26" @click="playAudio" />
|
|
|
+ <SvgIcon :icon-class="iconClass" :color="topicColor" size="26" @click="playAudio" />
|
|
|
<SvgIcon icon-class="next" size="12" :color="topicColor" @click="changeFile('next')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else class="independent-big">
|
|
|
<div v-if="fileNameDisplay == 'true'" class="audio-name">{{ audioIndex + 1 }}. {{ fileName }}</div>
|
|
|
<div class="slider-area">
|
|
|
- <SvgIcon :icon-class="iconClass" size="18" :color="topicColor" @click="playAudio" />
|
|
|
+ <SvgIcon :icon-class="iconClass" size="18" :color="topicColor" @click="playAudio" style="cursor: pointer" />
|
|
|
<span class="audio-time">{{ secondFormatConversion(audio.current_time) }}</span>
|
|
|
<el-slider
|
|
|
v-model="play_value"
|
|
|
@@ -37,32 +38,35 @@
|
|
|
</div>
|
|
|
<div v-else-if="'middle' === viewSize" class="audio-middle">
|
|
|
<div v-if="fileNameDisplay == 'true'" class="audio-name">{{ audioIndex + 1 }}. {{ fileName }}</div>
|
|
|
- <div class="slider-area">
|
|
|
- <SvgIcon :icon-class="iconClass" size="18" @click="playAudio" />
|
|
|
- <span class="audio-time">{{ secondFormatConversion(audio.current_time) }}</span>
|
|
|
- <el-slider
|
|
|
- v-model="play_value"
|
|
|
- class="audio-slider"
|
|
|
- :format-tooltip="formatProcessToolTip"
|
|
|
- @change="changeCurrentTime"
|
|
|
- />
|
|
|
- <span class="audio-time">{{ audio_allTime }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-else-if="'small' === viewSize" class="audio-icons">
|
|
|
- <div v-if="fileNameDisplay == 'true'" class="audio-name">{{ audioIndex + 1 }}. {{ fileName }}</div>
|
|
|
- <span class="icon-box">
|
|
|
+ <span class="icon-box" :style="{ borderColor: topicColor }">
|
|
|
<SvgIcon
|
|
|
:icon-class="iconClass"
|
|
|
- size="14"
|
|
|
+ size="12"
|
|
|
+ :color="topicColor"
|
|
|
:style="{ marginLeft: audio.paused ? '4px' : '0' }"
|
|
|
@click="playAudio"
|
|
|
/>
|
|
|
</span>
|
|
|
</div>
|
|
|
- <div v-else :class="['audio-list', audioIndex === curAudioIndex ? 'active' : '']">
|
|
|
+ <div v-else-if="'small' === viewSize" class="audio-small">
|
|
|
+ <div v-if="fileNameDisplay == 'true'" class="audio-name">{{ audioIndex + 1 }}. {{ fileName }}</div>
|
|
|
+ <SvgIcon
|
|
|
+ icon-class="sound"
|
|
|
+ size="20"
|
|
|
+ :color="topicColor"
|
|
|
+ @click="playAudio"
|
|
|
+ :class="{ 'sound-icon--playing': !audio.paused }"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-else :class="['audio-list', { active: audioIndex === curAudioIndex }]" :style="cssVars">
|
|
|
<div class="active-mark">
|
|
|
- <SvgIcon v-if="audioIndex === curAudioIndex" icon-class="paused" size="12" style="cursor: default" />
|
|
|
+ <SvgIcon
|
|
|
+ v-if="audioIndex === curAudioIndex"
|
|
|
+ icon-class="paused"
|
|
|
+ size="12"
|
|
|
+ :color="topicColor"
|
|
|
+ style="cursor: default"
|
|
|
+ />
|
|
|
</div>
|
|
|
<span class="audio-name">{{ audioIndex + 1 }}. {{ fileName }}</span>
|
|
|
<span class="audio-time">{{ audio_allTime }}</span>
|
|
|
@@ -127,6 +131,10 @@ export default {
|
|
|
type: String,
|
|
|
default: '#076aff',
|
|
|
},
|
|
|
+ assistColor: {
|
|
|
+ type: String,
|
|
|
+ default: '#076aff',
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -150,6 +158,11 @@ export default {
|
|
|
iconClass() {
|
|
|
return this.audio.paused ? 'paused' : 'playing';
|
|
|
},
|
|
|
+ cssVars() {
|
|
|
+ return {
|
|
|
+ '--assist-color': this.assistColor,
|
|
|
+ };
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
fileId: {
|
|
|
@@ -178,7 +191,6 @@ export default {
|
|
|
getCurTime(curTime) {
|
|
|
this.curTime = curTime * 1000;
|
|
|
},
|
|
|
-
|
|
|
playAudio() {
|
|
|
if (!this.url) return;
|
|
|
const audio = this.$refs[this.fileId];
|
|
|
@@ -286,11 +298,11 @@ export default {
|
|
|
}
|
|
|
|
|
|
.audio-middle {
|
|
|
- width: 280px;
|
|
|
- padding: 12px 16px;
|
|
|
- background-color: #f8f8f8;
|
|
|
- border: 1px solid #e7e7e7;
|
|
|
- border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ column-gap: 10px;
|
|
|
+ align-items: left;
|
|
|
+ margin-left: 5px;
|
|
|
|
|
|
.audio-name {
|
|
|
padding: 8px;
|
|
|
@@ -300,13 +312,27 @@ export default {
|
|
|
background-color: #eee;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
+
|
|
|
+ .icon-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 4px solid #076aff;
|
|
|
+ border-radius: 20px;
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .audio-icons {
|
|
|
+ .audio-small {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
column-gap: 10px;
|
|
|
- align-items: center;
|
|
|
+ align-items: left;
|
|
|
+ margin-left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
.audio-name {
|
|
|
padding: 8px;
|
|
|
@@ -316,21 +342,6 @@ export default {
|
|
|
background-color: #eee;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
-
|
|
|
- .icon-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- cursor: pointer;
|
|
|
- background-color: #076aff;
|
|
|
- border-radius: 20px;
|
|
|
-
|
|
|
- .svg-icon {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.audio-list {
|
|
|
@@ -340,16 +351,12 @@ export default {
|
|
|
padding: 8px 24px 8px 16px;
|
|
|
|
|
|
&.active {
|
|
|
- background-color: #f4f9ff;
|
|
|
+ background-color: var(--assist-color, #f4f9ff);
|
|
|
}
|
|
|
|
|
|
.active-mark {
|
|
|
width: 20px;
|
|
|
height: 28px;
|
|
|
-
|
|
|
- .svg-icon {
|
|
|
- color: #076aff;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.audio-name {
|
|
|
@@ -385,4 +392,21 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.sound-icon--playing {
|
|
|
+ animation: soundWave 1s infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes soundWave {
|
|
|
+ 0%,
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ opacity: 0.5;
|
|
|
+ transform: scale(1.2);
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
zq
