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
<!--
* @Date: 2024-04-10 15:08:08
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-04-16 15:16:19
* @LastEditTime: 2024-04-17 18:25:28
* @FilePath: /fxPark/src/views/fxPark/audio.vue
* @Description: 文件描述
-->
<template>
<div class="audio-page">
<div style="position: absolute; top: 5rem;">
<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-player">
<van-row align="center">
<van-row class="content" align="center">
<van-col span="8">
<div>
<div style="width: 5rem; height: 5rem; border-radius: 50%;">
<img :class="[audioStatus === 'play' ? 'play' : 'pause']" src="https://picsum.photos/50/50" style="width: 5rem; height: 5rem; border-radius: 50%;">
<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>
</div>
</van-col>
<van-col span="16">
<div>
<div class="van-ellipsis" style="margin-bottom: 1rem; color: #fff;">{{ audio_list[audioIndex]?.audio_name }}</div>
<div class="van-ellipsis" style="margin-bottom: 1rem;">{{ audio_list[audioIndex]?.audio_note }}</div>
<div style="display: flex; justify-content: space-between;">
<van-icon @click="audioPrev" name="arrow-left" size="1.5rem" />
<van-icon v-if="audioStatus === 'pause'" name="play" size="1.5rem" @click="handelPlay" />
<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 @click="audioNext" name="arrow" size="1.5rem" />
<van-icon @click="showList" name="arrow-down" size="1.5rem" />
<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>
</div>
</van-col>
</van-row>
<!-- <div style="margin-right: 1rem; flex: 1;">
<div style="width: 5rem; height: 5rem; border-radius: 50%;">
<img :class="[audioStatus === 'play' ? 'play' : 'pause']" src="https://picsum.photos/50/50" style="width: 5rem; height: 5rem; border-radius: 50%;">
</div>
</div>
<div style="flex: 3;">
<div class="van-ellipsis" style="margin-bottom: 1rem; color: #fff;">{{ audio_list[audioIndex]['audio_name'] }}</div>
<div style="display: flex; justify-content: space-between;">
<van-icon @click="audioPrev" name="arrow-left" size="1.5rem" />
<van-icon v-if="audioStatus === 'pause'" name="play" size="1.5rem" @click="handelPlay" />
<van-icon v-if="audioStatus === 'play'" name="pause" size="1.5rem" @click="handlePause" />
<van-icon @click="audioNext" name="arrow" size="1.5rem" />
</div>
</div> -->
<div>
<audio ref="audioPlayer" loop="loop" id="audios" :src="audio_list[audioIndex]?.audio_url" preload></audio>
</div>
</div>
<div v-if="show_audio_list" style="width: 100%; height: 15rem; border: 1px solid #fff;">
<div @click="audioPlay(index)" v-for="(item, index) in audio_list" :key="index">{{ item.audio_name }}</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>
</div>
</div>
</div>
......@@ -149,18 +136,33 @@ const showList = () => {
.audio-page {
height: 100vh;
position: relative;
background-color: #47A3E4;
background-image: url('https://cdn.ipadbiz.cn/xfPark/audio/bg.1713347802.jpg');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
.audio-player {
width: 75vw;
border: 1px solid #fff;
border-radius: 10px;
padding: 1rem 1rem 1rem 1rem;
width: 85vw;
// border: 1px solid #fff;
// border-radius: 10px;
padding: 1.5rem 1rem 1rem;
// display: flex;
// justify-content: center;
// align-items: center;
background-image: url('https://cdn.ipadbiz.cn/xfPark/audio/border.png');
background-size: 100% 100%;
position: relative;
overflow: hidden; /* 隐藏内容溢出部分 */
backdrop-filter: blur(10px); /* 调整模糊程度 */
-webkit-backdrop-filter: blur(10px); /* 调整模糊程度 */
.content {
position: relative;
z-index: 1; /* 使内容位于背景之上 */
padding: 1rem;
padding-left: 0;
color: #70615a; /* 调整文字颜色 */
}
.play {
animation: rotate 8s linear infinite;
}
......@@ -176,5 +178,19 @@ 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;
}
}
}
</style>
......