Hooke / fxPark

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
1174a2b4 1 parent ff8c8e24

fix

Inline Side-by-side
Showing 7 changed files with 62 additions and 20 deletions
......@@ -15,6 +15,7 @@ declare module 'vue' {
VanField: typeof import('vant/es')['Field']
VanIcon: typeof import('vant/es')['Icon']
VanLoading: typeof import('vant/es')['Loading']
VanPopup: typeof import('vant/es')['Popup']
VanRow: typeof import('vant/es')['Row']
VanUploader: typeof import('vant/es')['Uploader']
}
......
<!--
* @Date: 2024-04-10 15:08:08
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-04-17 18:25:28
* @LastEditTime: 2024-04-18 10:23:19
* @FilePath: /fxPark/src/views/fxPark/audio.vue
* @Description: 文件描述
-->
<template>
<div class="audio-page">
<div style="position: absolute; top: 2rem;">
<div style="margin-bottom: 0.5rem; text-align: center; font-size: 1.25rem; color: #70615a; font-weight: bold;">{{ audio_list[audioIndex]?.audio_name }}</div>
<div class="audio-wrapper">
<div class="audio-title">{{ audio_list[audioIndex]?.name }}&nbsp;&nbsp;{{ audio_list[audioIndex]?.nick_name }}</div>
<div class="audio-player">
<van-row class="content" align="center">
<van-col span="8">
<div>
<div style="width: 6rem; height: 6rem; border-radius: 50%; background-image: url('https://cdn.ipadbiz.cn/xfPark/audio/boxer.png'); background-size: 100% 100%;position: relative;">
<img :class="[audioStatus === 'play' ? 'play' : 'pause']" src="https://picsum.photos/50/50" style="width: 4.5rem; height: 4.5rem; border-radius: 50%; position: absolute; top: calc(50% - 2.25rem); left: calc(50% - 2.25rem);">
<div class="audio-avator">
<img :class="[audioStatus === 'play' ? 'play' : 'pause']" :src="audio_list[audioIndex]?.audio_cover">
</div>
</div>
</van-col>
......@@ -24,7 +24,7 @@
<div style="display: flex; justify-content: space-between;">
<van-icon @click="audioPrev" name="https://cdn.ipadbiz.cn/xfPark/audio/prev.png" size="1.5rem" />
<van-icon v-if="audioStatus === 'pause'" name="https://cdn.ipadbiz.cn/xfPark/audio/play.1713347802.png" size="1.5rem" @click="handelPlay" />
<van-icon v-if="audioStatus === 'play'" name="pause" size="1.5rem" @click="handlePause" />
<van-icon v-if="audioStatus === 'play'" name="https://cdn.ipadbiz.cn/xfPark/audio/pause.png" size="1.5rem" @click="handlePause" />
<van-icon @click="audioNext" name="https://cdn.ipadbiz.cn/xfPark/audio/next.png" size="1.5rem" />
<van-icon @click="showList" name="https://cdn.ipadbiz.cn/xfPark/audio/list.png" size="1.5rem" />
</div>
......@@ -35,9 +35,13 @@
<audio ref="audioPlayer" loop="loop" id="audios" :src="audio_list[audioIndex]?.audio_url" preload></audio>
</div>
</div>
<div class="audio-list" v-if="show_audio_list">
<div class="audio-item" @click="audioPlay(index)" v-for="(item, index) in audio_list" :key="index" :style="{ color: index === audioIndex ? '#fff' : '#70615a' }">{{ item.audio_name }}</div>
<van-popup v-model:show="show_audio_list" position="bottom" :style="{ height: '45%' }" class="audio-list">
<div style="text-align: center;margin-bottom: 1.5rem; font-size: 1.15rem;">播放列表</div>
<div :class="['audio-item', index === audioIndex ? 'active' : '']" @click="audioPlay(index)" v-for="(item, index) in audio_list" :key="index">
<div><van-icon name="https://cdn.ipadbiz.cn/xfPark/audio/shu.png" size="0.85rem" />&nbsp;&nbsp;<span style="font-size: 1.15rem;">{{ item.name }}</span></div>
<div style="font-size: 0.9rem;">{{ item.nick_name }}</div>
</div>
</van-popup>
</div>
</div>
</template>
......@@ -68,6 +72,8 @@ onMounted(async () => {
audio_cover: item.audio_cover ? item.audio_cover : 'https://picsum.photos/50/50',
audio_name: item.audio_name,
audio_note: item.audio_note,
name: item.name,
nick_name: item.nickname,
});
}
})
......@@ -141,11 +147,18 @@ const showList = () => {
display: flex;
justify-content: center;
align-items: center;
.audio-wrapper {
position: absolute;
top: 2rem;
.audio-title {
margin-bottom: 0.5rem; text-align: center; font-size: 1.25rem; color: #70615a; font-weight: bold;
}
}
.audio-player {
width: 85vw;
// border: 1px solid #fff;
// border-radius: 10px;
padding: 1.5rem 1rem 1rem;
padding: 1.5rem 1rem 0.5rem;
// display: flex;
// justify-content: center;
// align-items: center;
......@@ -162,6 +175,13 @@ const showList = () => {
padding: 1rem;
padding-left: 0;
color: #70615a; /* 调整文字颜色 */
.audio-avator {
width: 6rem; height: 6rem; border-radius: 50%; background-image: url('https://cdn.ipadbiz.cn/xfPark/audio/boxer.png'); background-size: 100% 100%;position: relative;
img {
width: 4.5rem; height: 4.5rem; border-radius: 50%; position: absolute; top: calc(50% - 2.25rem); left: calc(50% - 2.25rem);
}
}
}
.play {
animation: rotate 8s linear infinite;
......@@ -178,19 +198,35 @@ const showList = () => {
}
}
}
// .audio-list {
// width: auto;
// border: 1px solid #70615a;
// border-radius: 10px;
// margin-top: 1rem;
// padding: 1rem;
// padding-bottom: 0;
// backdrop-filter: blur(10px);
// -webkit-backdrop-filter: blur(10px);
// .audio-item {
// margin-bottom: 1rem;
// color: #70615a;
// }
// }
.audio-list {
width: auto;
border: 1px solid #70615a;
border-radius: 10px;
margin-top: 1rem;
padding: 1rem;
padding-bottom: 0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
.audio-item {
margin-bottom: 1rem;
color: #000;
display: flex;
justify-content: space-between;
align-items: center;
&.active {
font-weight: bold;
color: #70615a;
}
}
}
}
</style>
......
......@@ -90,7 +90,7 @@ onMounted(async () => {
ref_width.value = canvasDom.offsetWidth + 'px';
ref_height.value = canvasDom.offsetHeight + 'px';
});
createImage();
// createImage();
});
const resizePoster = () => { // 重置海报
......@@ -263,16 +263,21 @@ const afterRead = async (res) => {
}
.nickname {
writing-mode: lr;
font-size: 0.95rem;
width: 1.25rem;
height: 5rem;
font-size: 0.8rem;
font-weight: bold;
position: absolute;
top: 0.5rem;
// left: 3.5rem;
letter-spacing: 5px;
letter-spacing: 2px;
color: #1F6D4E;
padding: 0.5rem;
background-image: url('https://cdn.ipadbiz.cn/xfPark/post/public/wenzi-bg.1713239032.png');
padding: 1rem 0.3rem;
padding-left: 0.6rem;
background-image: url('https://cdn.ipadbiz.cn/xfPark/post/public/wenzi-bg.1713409830.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background-size: 90% 90%;
background-position: center;
}
}
}
......