A1300399510/PC-official
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 添加悬停动画效果并优化音频播放逻辑

Browse Source 
为多个元素添加悬停动画效果，提升用户体验
重构音频播放逻辑，增加judgmentPlayUrl方法统一处理播放
更新HTML元数据，优化SEO和移动端适配
修改部分文案内容
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-25 15:34:07 +08:00
parent c5abafdc86
commit 523547871e
4 changed files with 105 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
static/css/index.css
View File

@@ -532,6 +532,12 @@
background-color: #000000;
border-radius: 0 10px 10px 0;
}
.content .works .audio-box .item .content .info .operate {
transition: all 0.3s ease-in-out;
}
.content .works .audio-box .item .content .info .operate > img:hover {
transform: scale(1.1);
}
.content .works .audio-box .item .content .info .operate .speed {
width: 16px;
height: 12px;
@@ -646,6 +652,12 @@
background-color: #000000;
border-radius: 0 10px 10px 0;
}
.content .custom .list .item .info .operate {
transition: all 0.3s ease-in-out;
}
.content .custom .list .item .info .operate > img:hover {
transform: scale(1.1);
}
.content .custom .list .item .info .operate .speed {
width: 16px;
height: 12px;
@@ -661,6 +673,10 @@
width: 240px;
height: 240px;
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
transition: all 0.3s ease-in-out;
}
.content .custom .list .item .info-img:hover {
transform: scale(1.05);
}
.content .custom .bottom {
position: absolute;
@@ -703,6 +719,9 @@
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.content .student .student-box .list .img:hover {
transform: scale(1.1);
}
.content .student .student-box .list .img.img5 {
left: 0;
z-index: 2;
@@ -792,6 +811,12 @@
background-color: #ffffff;
border-radius: 0 10px 10px 0;
}
.content .student .student-box .operate {
transition: all 0.3s ease-in-out;
}
.content .student .student-box .operate > img:hover {
transform: scale(1.1);
}
.content .student .student-box .operate .cut {
width: 14px;
height: 12px;

25
static/css/index.less
View File

@@ -470,7 +470,6 @@
height: 100%;
border-radius: 10px;
transition: all 0.3s ease-in-out;
}
.play {
@@ -614,6 +613,11 @@
}
.operate {
transition: all 0.3s ease-in-out;
> img:hover {
transform: scale(1.1);
}
.speed {
width: 16px;
height: 12px;
@@ -748,6 +752,12 @@
}
.operate {
transition: all 0.3s ease-in-out;
> img:hover {
transform: scale(1.1);
}
.speed {
width: 16px;
height: 12px;
@@ -767,6 +777,11 @@
width: 240px;
height: 240px;
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
transition: all 0.3s ease-in-out;
&:hover {
transform: scale(1.05);
}
}
}
}
@@ -815,6 +830,10 @@
cursor: pointer;
transition: all 0.3s ease-in-out;
&:hover {
transform: scale(1.1);
}
&.img5 {
left: 0;
z-index: 2;
@@ -922,6 +941,10 @@
}
.operate {
transition: all 0.3s ease-in-out;
> img:hover {
transform: scale(1.1);
}
.cut {
width: 14px;
height: 12px;

25
static/js/index.js
View File

@@ -118,10 +118,6 @@ const search = createApp({
bannerList.value = data.banner;
awardMVList.value = data.awardMVList;
data.awardAudioList.forEach((item, index) => {
item["playurl"] = `https://app.gter.net/image/miniApp/mp3/${index + 1}.mp3`;
});
awardAudioList.value = data.awardAudioList;
customList.value = data.customAudioList;
@@ -235,7 +231,11 @@ const search = createApp({
// 管理音频播放
const manageAudio = (src, area) => {
const audio = audioPlayer.value;
console.log("src, area", src, area);
closeAll();
setTimeout(() => {
if (audio?.src != src) audio.src = src;
audio.play().then(() => {
@@ -494,6 +494,11 @@ const search = createApp({
id = item.id;
}
if (area == "works") {
const item = awardAudioList.value[index];
id = item.id;
}
ajax("https://pujianchaoyin.com/api/getMusicDetail", {
id,
}).then((res) => {
@@ -508,9 +513,19 @@ const search = createApp({
customList.value[index] = { ...data, ...customList.value[index] };
manageAudio(data.playurl, area);
}
if (area == "works") {
awardAudioList.value[index] = { ...data, ...awardAudioList.value[index] };
manageAudio(data.playurl, area);
}
});
};
return { cutSong, getPlayUrl, handleBarDragBottomClick, startBarDragBottom, volumeShow, handleVolumeHide, handleVolumeShow, zeroOrderStudents, rePlay, playData, awardAudioList, changeInterval, awardMVList, bannerList, albumBoxRef, volume, handleVolumeClick, handleVolumeDrag, startDrag, stopDrag, volume, cutStudent, studentList, studentIndex, scrollToPrevious, scrollToNext, changePointer, pointerIndex, visibleRef, studentRef, customRef, formatTime, currentTimeFormatted, durationFormatted, worksRef, introduceRef, customList, closeAll, manageAudio, progress, closePreview, openPreview, previewState, audioPlayer, trait, fastForward };
const judgmentPlayUrl = (url, area, index) => {
if (url) manageAudio(url, area);
else getPlayUrl(index, area);
};
return { judgmentPlayUrl, cutSong, getPlayUrl, handleBarDragBottomClick, startBarDragBottom, volumeShow, handleVolumeHide, handleVolumeShow, zeroOrderStudents, rePlay, playData, awardAudioList, changeInterval, awardMVList, bannerList, albumBoxRef, volume, handleVolumeClick, handleVolumeDrag, startDrag, stopDrag, volume, cutStudent, studentList, studentIndex, scrollToPrevious, scrollToNext, changePointer, pointerIndex, visibleRef, studentRef, customRef, formatTime, currentTimeFormatted, durationFormatted, worksRef, introduceRef, customList, closeAll, manageAudio, progress, closePreview, openPreview, previewState, audioPlayer, trait, fastForward };
},
}).mount("#appIndex");