Hooke / fxPark

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
2d40887e 1 parent 9b48ec86

植物之声页面样式调整

Inline Side-by-side
Showing 10 changed files with 47 additions and 31 deletions
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-16 15:16:19 4 + * @LastEditTime: 2024-04-17 18:25:28
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: 5rem;"> 10 + <div style="position: absolute; top: 2rem;">
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-player"> 12 <div class="audio-player">
12 - <van-row align="center"> 13 + <van-row class="content" align="center">
13 <van-col span="8"> 14 <van-col span="8">
14 <div> 15 <div>
15 - <div style="width: 5rem; height: 5rem; border-radius: 50%;"> 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 - <img :class="[audioStatus === 'play' ? 'play' : 'pause']" src="https://picsum.photos/50/50" style="width: 5rem; height: 5rem; border-radius: 50%;"> 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 </div> 18 </div>
18 </div> 19 </div>
19 </van-col> 20 </van-col>
20 <van-col span="16"> 21 <van-col span="16">
21 <div> 22 <div>
22 - <div class="van-ellipsis" style="margin-bottom: 1rem; color: #fff;">{{ audio_list[audioIndex]?.audio_name }}</div> 23 + <div class="van-ellipsis" style="margin-bottom: 1rem;">{{ audio_list[audioIndex]?.audio_note }}</div>
23 <div style="display: flex; justify-content: space-between;"> 24 <div style="display: flex; justify-content: space-between;">
24 - <van-icon @click="audioPrev" name="arrow-left" size="1.5rem" /> 25 + <van-icon @click="audioPrev" name="https://cdn.ipadbiz.cn/xfPark/audio/prev.png" size="1.5rem" />
25 - <van-icon v-if="audioStatus === 'pause'" name="play" 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" />
26 <van-icon v-if="audioStatus === 'play'" name="pause" size="1.5rem" @click="handlePause" /> 27 <van-icon v-if="audioStatus === 'play'" name="pause" size="1.5rem" @click="handlePause" />
27 - <van-icon @click="audioNext" name="arrow" size="1.5rem" /> 28 + <van-icon @click="audioNext" name="https://cdn.ipadbiz.cn/xfPark/audio/next.png" size="1.5rem" />
28 - <van-icon @click="showList" name="arrow-down" size="1.5rem" /> 29 + <van-icon @click="showList" name="https://cdn.ipadbiz.cn/xfPark/audio/list.png" size="1.5rem" />
29 </div> 30 </div>
30 </div> 31 </div>
31 </van-col> 32 </van-col>
32 </van-row> 33 </van-row>
33 - <!-- <div style="margin-right: 1rem; flex: 1;">
34 - <div style="width: 5rem; height: 5rem; border-radius: 50%;">
35 - <img :class="[audioStatus === 'play' ? 'play' : 'pause']" src="https://picsum.photos/50/50" style="width: 5rem; height: 5rem; border-radius: 50%;">
36 - </div>
37 - </div>
38 - <div style="flex: 3;">
39 - <div class="van-ellipsis" style="margin-bottom: 1rem; color: #fff;">{{ audio_list[audioIndex]['audio_name'] }}</div>
40 - <div style="display: flex; justify-content: space-between;">
41 - <van-icon @click="audioPrev" name="arrow-left" size="1.5rem" />
42 - <van-icon v-if="audioStatus === 'pause'" name="play" size="1.5rem" @click="handelPlay" />
43 - <van-icon v-if="audioStatus === 'play'" name="pause" size="1.5rem" @click="handlePause" />
44 - <van-icon @click="audioNext" name="arrow" size="1.5rem" />
45 - </div>
46 - </div> -->
47 <div> 34 <div>
48 <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>
49 </div> 36 </div>
50 </div> 37 </div>
51 - <div v-if="show_audio_list" style="width: 100%; height: 15rem; border: 1px solid #fff;"> 38 + <div class="audio-list" v-if="show_audio_list">
52 - <div @click="audioPlay(index)" v-for="(item, index) in audio_list" :key="index">{{ item.audio_name }}</div> 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>
53 </div> 40 </div>
54 </div> 41 </div>
55 </div> 42 </div>
...@@ -149,18 +136,33 @@ const showList = () => { ...@@ -149,18 +136,33 @@ const showList = () => {
149 .audio-page { 136 .audio-page {
150 height: 100vh; 137 height: 100vh;
151 position: relative; 138 position: relative;
152 - background-color: #47A3E4; 139 + background-image: url('https://cdn.ipadbiz.cn/xfPark/audio/bg.1713347802.jpg');
140 + background-size: 100% 100%;
153 display: flex; 141 display: flex;
154 justify-content: center; 142 justify-content: center;
155 align-items: center; 143 align-items: center;
156 .audio-player { 144 .audio-player {
157 - width: 75vw; 145 + width: 85vw;
158 - border: 1px solid #fff; 146 + // border: 1px solid #fff;
159 - border-radius: 10px; 147 + // border-radius: 10px;
160 - padding: 1rem 1rem 1rem 1rem; 148 + padding: 1.5rem 1rem 1rem;
161 // display: flex; 149 // display: flex;
162 // justify-content: center; 150 // justify-content: center;
163 // align-items: center; 151 // align-items: center;
152 + background-image: url('https://cdn.ipadbiz.cn/xfPark/audio/border.png');
153 + background-size: 100% 100%;
154 + position: relative;
155 + overflow: hidden; /* 隐藏内容溢出部分 */
156 + backdrop-filter: blur(10px); /* 调整模糊程度 */
157 + -webkit-backdrop-filter: blur(10px); /* 调整模糊程度 */
158 +
159 + .content {
160 + position: relative;
161 + z-index: 1; /* 使内容位于背景之上 */
162 + padding: 1rem;
163 + padding-left: 0;
164 + color: #70615a; /* 调整文字颜色 */
165 + }
164 .play { 166 .play {
165 animation: rotate 8s linear infinite; 167 animation: rotate 8s linear infinite;
166 } 168 }
...@@ -176,5 +178,19 @@ const showList = () => { ...@@ -176,5 +178,19 @@ const showList = () => {
176 } 178 }
177 } 179 }
178 } 180 }
181 + .audio-list {
182 + width: auto;
183 + border: 1px solid #70615a;
184 + border-radius: 10px;
185 + margin-top: 1rem;
186 + padding: 1rem;
187 + padding-bottom: 0;
188 + backdrop-filter: blur(10px);
189 + -webkit-backdrop-filter: blur(10px);
190 + .audio-item {
191 + margin-bottom: 1rem;
192 + color: #70615a;
193 + }
194 + }
179 } 195 }
180 </style> 196 </style>
......