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

44
index.html
View File

@@ -1,14 +1,42 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- 基本元数据 -->
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>朴见潮音官网</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="format-detection" content="telephone=no,email=no,address=no" />
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta name="theme-color" content="#1e135e" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- 网站标题和描述 -->
<title>朴见潮音官网 - AI音乐创作先锋品牌</title>
<meta name="description" content="朴见潮音是国内领先的AI音乐创作品牌，致力于通过人工智能技术推动音乐创作的创新与发展。" />
<meta name="keywords" content="朴见潮音,AI音乐,人工智能音乐,音乐创作,AI作曲" />
<meta name="author" content="朴见潮音" />
<!-- 社交媒体元数据 -->
<meta property="og:title" content="朴见潮音官网 - AI音乐创作先锋品牌" />
<meta property="og:description" content="朴见潮音是国内领先的AI音乐创作品牌，致力于通过人工智能技术推动音乐创作的创新与发展。" />
<meta property="og:image" content="./static/img/logo.png" />
<meta property="og:url" content="https://www.pujian.com" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="朴见潮音" />
<!-- 网站图标 -->
<link rel="shortcut icon" href="./static/img/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="./static/img/logo.png" />
<link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" />
<script src="./static/js/vue.global.js"></script> <script src="./static/js/vue.global.js"></script>
<script src="./static/js/artplayer.js"></script> <script src="./static/js/artplayer.js"></script>
<script src="./static/js/axios.min.js"></script> <script src="./static/js/axios.min.js"></script>
<link rel="stylesheet" href="./static/css/index.css" /> <link rel="stylesheet" href="./static/css/index.css" />
<link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" />
<style> <style>
[v-cloak] { [v-cloak] {
display: none; display: none;
@@ -127,7 +155,7 @@
<div class="operate flexcenter"> <div class="operate flexcenter">
<img class="speed left" src="./static/img/speed-left.png" @click="fastForward('slow')" /> <img class="speed left" src="./static/img/speed-left.png" @click="fastForward('slow')" />
<img v-if="item.state" class="play" @click="closeAll()" src="./static/img/pause-black-icon.svg" /> <img v-if="item.state" class="play" @click="closeAll()" src="./static/img/pause-black-icon.svg" />
<img v-else class="play" @click="manageAudio(item.playurl, 'works')" src="./static/img/play-black-icon.svg" /> <img v-else class="play" @click="judgmentPlayUrl(item.playurl, 'works', index)" src="./static/img/play-black-icon.svg" />
<img class="speed right" src="./static/img/speed-right.png" @click="fastForward('fast')" /> <img class="speed right" src="./static/img/speed-right.png" @click="fastForward('fast')" />
</div> </div>
</div> </div>
@@ -140,7 +168,7 @@
<div class="custom" ref="customRef"> <div class="custom" ref="customRef">
<div class="custom-box mar1200 flexflex"> <div class="custom-box mar1200 flexflex">
<img class="title" src="./static/img/custom-title.png" /> <img class="title" src="./static/img/custom-title.png" />
<div class="subtitle">往事可成追忆，把你的故事谱成歌</div> <div class="subtitle">释放音乐本能，用词曲表达人生</div>
<div class="list flexflex mar1200"> <div class="list flexflex mar1200">
<div class="item flexacenter" v-for="(item, index) in customList" :key="index"> <div class="item flexacenter" v-for="(item, index) in customList" :key="index">
<div class="info flexflex"> <div class="info flexflex">
@@ -153,7 +181,7 @@
<div class="operate flexcenter"> <div class="operate flexcenter">
<img class="speed left" @click="fastForward('slow')" src="./static/img/speed-left.png" /> <img class="speed left" @click="fastForward('slow')" src="./static/img/speed-left.png" />
<img v-if="item.state" class="play" @click="closeAll()" src="./static/img/pause-black-icon.svg" /> <img v-if="item.state" class="play" @click="closeAll()" src="./static/img/pause-black-icon.svg" />
<img v-else class="play" @click="item.playurl ? manageAudio(item.playurl, 'custom') : getPlayUrl(index, 'custom')" src="./static/img/play-black-icon.svg" /> <img v-else class="play" @click="judgmentPlayUrl(item.playurl, 'custom', index)" src="./static/img/play-black-icon.svg" />
<img class="speed right" @click="fastForward('fast')" src="./static/img/speed-right.png" /> <img class="speed right" @click="fastForward('fast')" src="./static/img/speed-right.png" />
</div> </div>
</div> </div>
@@ -190,7 +218,7 @@
<img class="cut left" src="./static/img/cut-left.svg" @click="cutSong('up', zeroOrderStudents.order)" /> <img class="cut left" src="./static/img/cut-left.svg" @click="cutSong('up', zeroOrderStudents.order)" />
<img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow')" /> <img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow')" />
<img v-if="zeroOrderStudents.state" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" /> <img v-if="zeroOrderStudents.state" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
<img v-else class="play" @click="zeroOrderStudents.playurl ? manageAudio(zeroOrderStudents.playurl, 'student') : getPlayUrl(index, 'student')" src="./static/img/play-white-icon.svg" /> <img v-else class="play" @click="judgmentPlayUrl(zeroOrderStudents.playurl, 'student', index)" src="./static/img/play-white-icon.svg" />
<img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast')" /> <img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast')" />
<img class="cut right" src="./static/img/cut-right.svg" @click="cutSong('down', zeroOrderStudents.order)" /> <img class="cut right" src="./static/img/cut-right.svg" @click="cutSong('down', zeroOrderStudents.order)" />
</div> </div>
@@ -207,7 +235,7 @@
<div class="footer flexcenter"> <div class="footer flexcenter">
<img class="logo" src="./static/img/ai-title.png" /> <img class="logo" src="./static/img/ai-title.png" />
<div class="text">广州九微科技有限公司 | Copyright 2001-2025 GTER All Rights Reserved | 粤ICP备14050432号</div> <div class="text">广州九微科技有限公司 | Copyright 2001-2025 GTER All Rights Reserved</div>
</div> </div>
<div v-if="previewState" class="preview flexcenter" @click="closePreview()"> <div v-if="previewState" class="preview flexcenter" @click="closePreview()">

25
static/css/index.css
View File

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

25
static/css/index.less
View File

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

25
static/js/index.js
View File

@@ -118,10 +118,6 @@ const search = createApp({
bannerList.value = data.banner; bannerList.value = data.banner;
awardMVList.value = data.awardMVList; 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; awardAudioList.value = data.awardAudioList;
customList.value = data.customAudioList; customList.value = data.customAudioList;
@@ -235,7 +231,11 @@ const search = createApp({
// 管理音频播放 // 管理音频播放
const manageAudio = (src, area) => { const manageAudio = (src, area) => {
const audio = audioPlayer.value; const audio = audioPlayer.value;
console.log("src, area", src, area);
closeAll(); closeAll();
setTimeout(() => { setTimeout(() => {
if (audio?.src != src) audio.src = src; if (audio?.src != src) audio.src = src;
audio.play().then(() => { audio.play().then(() => {
@@ -494,6 +494,11 @@ const search = createApp({
id = item.id; id = item.id;
} }
if (area == "works") {
const item = awardAudioList.value[index];
id = item.id;
}
ajax("https://pujianchaoyin.com/api/getMusicDetail", { ajax("https://pujianchaoyin.com/api/getMusicDetail", {
id, id,
}).then((res) => { }).then((res) => {
@@ -508,9 +513,19 @@ const search = createApp({
customList.value[index] = { ...data, ...customList.value[index] }; customList.value[index] = { ...data, ...customList.value[index] };
manageAudio(data.playurl, area); 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"); }).mount("#appIndex");