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' { ...@@ -15,6 +15,7 @@ declare module 'vue' {
15 VanField: typeof import('vant/es')['Field'] 15 VanField: typeof import('vant/es')['Field']
16 VanIcon: typeof import('vant/es')['Icon'] 16 VanIcon: typeof import('vant/es')['Icon']
17 VanLoading: typeof import('vant/es')['Loading'] 17 VanLoading: typeof import('vant/es')['Loading']
18 + VanPopup: typeof import('vant/es')['Popup']
18 VanRow: typeof import('vant/es')['Row'] 19 VanRow: typeof import('vant/es')['Row']
19 VanUploader: typeof import('vant/es')['Uploader'] 20 VanUploader: typeof import('vant/es')['Uploader']
20 } 21 }
......
1 <!-- 1 <!--
2 * @Date: 2024-04-10 15:08:08 2 * @Date: 2024-04-10 15:08:08
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-04-17 18:25:28 4 + * @LastEditTime: 2024-04-18 10:23:19
5 * @FilePath: /fxPark/src/views/fxPark/audio.vue 5 * @FilePath: /fxPark/src/views/fxPark/audio.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="audio-page"> 9 <div class="audio-page">
10 - <div style="position: absolute; top: 2rem;"> 10 + <div class="audio-wrapper">
11 - <div style="margin-bottom: 0.5rem; text-align: center; font-size: 1.25rem; color: #70615a; font-weight: bold;">{{ audio_list[audioIndex]?.audio_name }}</div> 11 + <div class="audio-title">{{ audio_list[audioIndex]?.name }}&nbsp;&nbsp;{{ audio_list[audioIndex]?.nick_name }}</div>
12 <div class="audio-player"> 12 <div class="audio-player">
13 <van-row class="content" align="center"> 13 <van-row class="content" align="center">
14 <van-col span="8"> 14 <van-col span="8">
15 <div> 15 <div>
16 - <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;"> 16 + <div class="audio-avator">
17 - <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);"> 17 + <img :class="[audioStatus === 'play' ? 'play' : 'pause']" :src="audio_list[audioIndex]?.audio_cover">
18 </div> 18 </div>
19 </div> 19 </div>
20 </van-col> 20 </van-col>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
24 <div style="display: flex; justify-content: space-between;"> 24 <div style="display: flex; justify-content: space-between;">
25 <van-icon @click="audioPrev" name="https://cdn.ipadbiz.cn/xfPark/audio/prev.png" size="1.5rem" /> 25 <van-icon @click="audioPrev" name="https://cdn.ipadbiz.cn/xfPark/audio/prev.png" size="1.5rem" />
26 <van-icon v-if="audioStatus === 'pause'" name="https://cdn.ipadbiz.cn/xfPark/audio/play.1713347802.png" size="1.5rem" @click="handelPlay" /> 26 <van-icon v-if="audioStatus === 'pause'" name="https://cdn.ipadbiz.cn/xfPark/audio/play.1713347802.png" size="1.5rem" @click="handelPlay" />
27 - <van-icon v-if="audioStatus === 'play'" name="pause" size="1.5rem" @click="handlePause" /> 27 + <van-icon v-if="audioStatus === 'play'" name="https://cdn.ipadbiz.cn/xfPark/audio/pause.png" size="1.5rem" @click="handlePause" />
28 <van-icon @click="audioNext" name="https://cdn.ipadbiz.cn/xfPark/audio/next.png" size="1.5rem" /> 28 <van-icon @click="audioNext" name="https://cdn.ipadbiz.cn/xfPark/audio/next.png" size="1.5rem" />
29 <van-icon @click="showList" name="https://cdn.ipadbiz.cn/xfPark/audio/list.png" size="1.5rem" /> 29 <van-icon @click="showList" name="https://cdn.ipadbiz.cn/xfPark/audio/list.png" size="1.5rem" />
30 </div> 30 </div>
...@@ -35,9 +35,13 @@ ...@@ -35,9 +35,13 @@
35 <audio ref="audioPlayer" loop="loop" id="audios" :src="audio_list[audioIndex]?.audio_url" preload></audio> 35 <audio ref="audioPlayer" loop="loop" id="audios" :src="audio_list[audioIndex]?.audio_url" preload></audio>
36 </div> 36 </div>
37 </div> 37 </div>
38 - <div class="audio-list" v-if="show_audio_list"> 38 + <van-popup v-model:show="show_audio_list" position="bottom" :style="{ height: '45%' }" class="audio-list">
39 - <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> 39 + <div style="text-align: center;margin-bottom: 1.5rem; font-size: 1.15rem;">播放列表</div>
40 + <div :class="['audio-item', index === audioIndex ? 'active' : '']" @click="audioPlay(index)" v-for="(item, index) in audio_list" :key="index">
41 + <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>
42 + <div style="font-size: 0.9rem;">{{ item.nick_name }}</div>
40 </div> 43 </div>
44 + </van-popup>
41 </div> 45 </div>
42 </div> 46 </div>
43 </template> 47 </template>
...@@ -68,6 +72,8 @@ onMounted(async () => { ...@@ -68,6 +72,8 @@ onMounted(async () => {
68 audio_cover: item.audio_cover ? item.audio_cover : 'https://picsum.photos/50/50', 72 audio_cover: item.audio_cover ? item.audio_cover : 'https://picsum.photos/50/50',
69 audio_name: item.audio_name, 73 audio_name: item.audio_name,
70 audio_note: item.audio_note, 74 audio_note: item.audio_note,
75 + name: item.name,
76 + nick_name: item.nickname,
71 }); 77 });
72 } 78 }
73 }) 79 })
...@@ -141,11 +147,18 @@ const showList = () => { ...@@ -141,11 +147,18 @@ const showList = () => {
141 display: flex; 147 display: flex;
142 justify-content: center; 148 justify-content: center;
143 align-items: center; 149 align-items: center;
150 + .audio-wrapper {
151 + position: absolute;
152 + top: 2rem;
153 + .audio-title {
154 + margin-bottom: 0.5rem; text-align: center; font-size: 1.25rem; color: #70615a; font-weight: bold;
155 + }
156 + }
144 .audio-player { 157 .audio-player {
145 width: 85vw; 158 width: 85vw;
146 // border: 1px solid #fff; 159 // border: 1px solid #fff;
147 // border-radius: 10px; 160 // border-radius: 10px;
148 - padding: 1.5rem 1rem 1rem; 161 + padding: 1.5rem 1rem 0.5rem;
149 // display: flex; 162 // display: flex;
150 // justify-content: center; 163 // justify-content: center;
151 // align-items: center; 164 // align-items: center;
...@@ -162,6 +175,13 @@ const showList = () => { ...@@ -162,6 +175,13 @@ const showList = () => {
162 padding: 1rem; 175 padding: 1rem;
163 padding-left: 0; 176 padding-left: 0;
164 color: #70615a; /* 调整文字颜色 */ 177 color: #70615a; /* 调整文字颜色 */
178 +
179 + .audio-avator {
180 + width: 6rem; height: 6rem; border-radius: 50%; background-image: url('https://cdn.ipadbiz.cn/xfPark/audio/boxer.png'); background-size: 100% 100%;position: relative;
181 + img {
182 + width: 4.5rem; height: 4.5rem; border-radius: 50%; position: absolute; top: calc(50% - 2.25rem); left: calc(50% - 2.25rem);
183 + }
184 + }
165 } 185 }
166 .play { 186 .play {
167 animation: rotate 8s linear infinite; 187 animation: rotate 8s linear infinite;
...@@ -178,19 +198,35 @@ const showList = () => { ...@@ -178,19 +198,35 @@ const showList = () => {
178 } 198 }
179 } 199 }
180 } 200 }
201 + // .audio-list {
202 + // width: auto;
203 + // border: 1px solid #70615a;
204 + // border-radius: 10px;
205 + // margin-top: 1rem;
206 + // padding: 1rem;
207 + // padding-bottom: 0;
208 + // backdrop-filter: blur(10px);
209 + // -webkit-backdrop-filter: blur(10px);
210 + // .audio-item {
211 + // margin-bottom: 1rem;
212 + // color: #70615a;
213 + // }
214 + // }
181 .audio-list { 215 .audio-list {
182 - width: auto;
183 - border: 1px solid #70615a;
184 - border-radius: 10px;
185 margin-top: 1rem; 216 margin-top: 1rem;
186 padding: 1rem; 217 padding: 1rem;
187 padding-bottom: 0; 218 padding-bottom: 0;
188 - backdrop-filter: blur(10px);
189 - -webkit-backdrop-filter: blur(10px);
190 .audio-item { 219 .audio-item {
191 margin-bottom: 1rem; 220 margin-bottom: 1rem;
221 + color: #000;
222 + display: flex;
223 + justify-content: space-between;
224 + align-items: center;
225 + &.active {
226 + font-weight: bold;
192 color: #70615a; 227 color: #70615a;
193 } 228 }
194 } 229 }
230 + }
195 } 231 }
196 </style> 232 </style>
......
...@@ -90,7 +90,7 @@ onMounted(async () => { ...@@ -90,7 +90,7 @@ onMounted(async () => {
90 ref_width.value = canvasDom.offsetWidth + 'px'; 90 ref_width.value = canvasDom.offsetWidth + 'px';
91 ref_height.value = canvasDom.offsetHeight + 'px'; 91 ref_height.value = canvasDom.offsetHeight + 'px';
92 }); 92 });
93 - createImage(); 93 + // createImage();
94 }); 94 });
95 95
96 const resizePoster = () => { // 重置海报 96 const resizePoster = () => { // 重置海报
...@@ -263,16 +263,21 @@ const afterRead = async (res) => { ...@@ -263,16 +263,21 @@ const afterRead = async (res) => {
263 } 263 }
264 .nickname { 264 .nickname {
265 writing-mode: lr; 265 writing-mode: lr;
266 - font-size: 0.95rem; 266 + width: 1.25rem;
267 + height: 5rem;
268 + font-size: 0.8rem;
269 + font-weight: bold;
267 position: absolute; 270 position: absolute;
268 top: 0.5rem; 271 top: 0.5rem;
269 // left: 3.5rem; 272 // left: 3.5rem;
270 - letter-spacing: 5px; 273 + letter-spacing: 2px;
271 color: #1F6D4E; 274 color: #1F6D4E;
272 - padding: 0.5rem; 275 + padding: 1rem 0.3rem;
273 - background-image: url('https://cdn.ipadbiz.cn/xfPark/post/public/wenzi-bg.1713239032.png'); 276 + padding-left: 0.6rem;
277 + background-image: url('https://cdn.ipadbiz.cn/xfPark/post/public/wenzi-bg.1713409830.png');
274 background-repeat: no-repeat; 278 background-repeat: no-repeat;
275 - background-size: 100% 100%; 279 + background-size: 90% 90%;
280 + background-position: center;
276 } 281 }
277 } 282 }
278 } 283 }
......