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

为多个元素添加悬停动画效果，提升用户体验重构音频播放逻辑，增加judgmentPlayUrl方法统一处理播放更新HTML元数据，优化SEO和移动端适配修改部分文案内容
2025-09-25 15:34:07 +08:00
parent c5abafdc86
commit 523547871e
4 changed files with 105 additions and 14 deletions
--- a/index.html
+++ b/index.html
@@ -1,14 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
    <head>
+
+        <!-- 基本元数据 -->
        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>朴见潮音官网</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+        <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/artplayer.js"></script>
        <script src="./static/js/axios.min.js"></script>
        <link rel="stylesheet" href="./static/css/index.css" />
-        <link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" />
        <style>
            [v-cloak] {
                display: none;
@@ -127,7 +155,7 @@
                                <div class="operate flexcenter">
                                    <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-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')" />
                                </div>
                            </div>
@@ -140,7 +168,7 @@
            <div class="custom" ref="customRef">
                <div class="custom-box mar1200 flexflex">
                    <img class="title" src="./static/img/custom-title.png" />
-                    <div class="subtitle">往事可成追忆，把你的故事谱成歌</div>
+                    <div class="subtitle">释放音乐本能，用词曲表达人生</div>
                    <div class="list flexflex mar1200">
                        <div class="item flexacenter" v-for="(item, index) in customList" :key="index">
                            <div class="info flexflex">
@@ -153,7 +181,7 @@
                                <div class="operate flexcenter">
                                    <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-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" />
                                </div>
                            </div>
@@ -190,7 +218,7 @@
                        <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 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="cut right" src="./static/img/cut-right.svg" @click="cutSong('down', zeroOrderStudents.order)" />
                    </div>
@@ -207,7 +235,7 @@

            <div class="footer flexcenter">
                <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 v-if="previewState" class="preview flexcenter" @click="closePreview()">
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -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;
--- a/static/css/index.less
+++ b/static/css/index.less
@@ -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;
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -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");