From 523547871e09697731b038e28c420778c08d8f2f Mon Sep 17 00:00:00 2001
From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com>
Date: Thu, 25 Sep 2025 15:34:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=82=AC=E5=81=9C?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=9F=B3=E9=A2=91=E6=92=AD=E6=94=BE=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为多个元素添加悬停动画效果，提升用户体验
重构音频播放逻辑，增加judgmentPlayUrl方法统一处理播放
更新HTML元数据，优化SEO和移动端适配
修改部分文案内容
---
 index.html            | 44 +++++++++++++++++++++++++++++++++++--------
 static/css/index.css  | 25 ++++++++++++++++++++++++
 static/css/index.less | 25 +++++++++++++++++++++++-
 static/js/index.js    | 25 +++++++++++++++++++-----
 4 files changed, 105 insertions(+), 14 deletions(-)
diff --git a/index.html b/index.html
index faba99a..143352e 100644
--- 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()">
diff --git a/static/css/index.css b/static/css/index.css
index 85c9986..7721532 100644
--- 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;
diff --git a/static/css/index.less b/static/css/index.less
index 81cddf7..be8a008 100644
--- 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;
diff --git a/static/js/index.js b/static/js/index.js
index 473ac65..6c05890 100644
--- 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");
