diff --git a/1.html b/1.html
deleted file mode 100644
index 3a2d6e3..0000000
--- a/1.html
+++ /dev/null
@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <title>红色进度条音频播放器</title>
-  <style>
-    /* 基础样式：控制播放器宽度和高度 */
-    audio {
-      width: 300px;
-      height: 30px;
-    }
-
-    /* Chrome/Safari 样式 */
-    /* 隐藏所有控制按钮 */
-    audio::-webkit-media-controls-play-button,
-    audio::-webkit-media-controls-volume-slider-container,
-    audio::-webkit-media-controls-mute-button,
-    audio::-webkit-media-controls-volume-slider,
-    audio::-webkit-media-controls-current-time-display,
-    audio::-webkit-media-controls-time-remaining-display,
-    audio::-webkit-media-controls-playback-rate-button {
-      display: none !important;
-    }
-
-    /* 进度条设置 */
-    audio::-webkit-media-controls-timeline {
-      display: block !important;
-      width: 100% !important;
-      height: 6px !important;
-    }
-
-    /* 进度条背景 */
-    audio::-webkit-media-controls-timeline-container {
-      background-color: #eee !important;
-      border-radius: 3px !important;
-    }
-
-    /* 红色进度条和滑块 */
-    audio::-webkit-media-controls-thumb-container {
-      color: #ff0000 !important;
-    }
-    audio::-webkit-media-controls-timeline-progress-bar {
-      background-color: #ff0000 !important;
-      border-radius: 3px !important;
-    }
-
-    /* Firefox 样式 */
-    /* 隐藏所有控制按钮 */
-    audio::-moz-media-controls-play-button,
-    audio::-moz-media-controls-volume-control,
-    audio::-moz-media-controls-playback-rate,
-    audio::-moz-media-controls-current-time-display,
-    audio::-moz-media-controls-time-remaining-display {
-      display: none !important;
-    }
-
-    /* 控制面板样式 */
-    audio::-moz-media-controls-panel {
-      height: 30px !important;
-      background-color: transparent !important;
-      padding: 0 !important;
-    }
-
-    /* 进度条背景 */
-    audio::-moz-media-controls-timeline {
-      background-color: #eee !important;
-      border-radius: 3px !important;
-      height: 6px !important;
-    }
-
-    /* 红色进度条和滑块 */
-    audio::-moz-media-controls-progress-bar {
-      background-color: #ff0000 !important;
-      border-radius: 3px !important;
-    }
-    audio::-moz-media-controls-thumb {
-      background-color: #ff0000 !important;
-      width: 14px !important;
-      height: 14px !important;
-      border-radius: 50% !important;
-    }
-  </style>
-</head>
-<body>
-  <audio controls loop>
-    <source src="audio1.mp3" type="audio/mpeg">
-    您的浏览器不支持音频播放
-  </audio>
-
-  <script>
-    const audio = document.querySelector('audio');
-    audio.addEventListener('click', () => {
-      if (audio.paused) {
-        audio.play().catch(err => {
-          alert('请先点击页面，再点击进度条播放');
-        });
-      } else {
-        audio.pause();
-      }
-    });
-  </script>
-</body>
-</html>
-    
\ No newline at end of file
diff --git a/index.html b/index.html
index bf29a10..81bafbd 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,9 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>朴见潮音官网</title>
-        <script src="./js/vue.global.js"></script>
-        <script src="./js/artplayer.js"></script>
-        <link rel="stylesheet" href="./css/index.css" />
+        <script src="./static/js/vue.global.js"></script>
+        <script src="./static/js/artplayer.js"></script>
+        <link rel="stylesheet" href="./static/css/index.css" />
         <style>
             [v-cloak] {
                 display: none;
@@ -20,18 +20,23 @@
 
             <div class="sidebar flexflex">
                 <div class="pointer">
-                    <div class="item" :data-index="'01'"></div>
-                    <div class="item active" :data-index="'02'"></div>
-                    <div class="item" :data-index="'03'"></div>
-                    <div class="item" :data-index="'04'"></div>
+                    <div class="item" :class="{'active': pointerState === 'introduce'}" :data-index="'01'" @click="changePointer('introduce')"></div>
+                    <div class="item" :class="{'active': pointerState === 'works'}" :data-index="'02'" @click="changePointer('works')"></div>
+                    <div class="item" :class="{'active': pointerState === 'custom'}" :data-index="'03'" @click="changePointer('custom')"></div>
+                    <div class="item" :class="{'active': pointerState === 'student'}" :data-index="'04'" @click="changePointer('student')"></div>
                 </div>
 
                 <div class="arrow">
-                    <img class="item top" src="./img/arrow-white.svg" />
-                    <img class="item bottom" src="./img/arrow-orange.svg" />
+                    <!-- 向上按钮：不是介绍页时显示 -->
+                    <img v-if="pointerState !== 'introduce'" class="item top orange" src="./img/arrow-orange.svg" @click="scrollToPrevious" />
+                    <img v-else class="item top" src="./img/arrow-white.svg" />
+
+                    <!-- 向下按钮：不是学生页时显示 -->
+                    <img v-if="pointerState !== 'student'" class="item bottom orange" src="./img/arrow-orange.svg" @click="scrollToNext" />
+                    <img v-else class="item bottom white" src="./img/arrow-white.svg" />
                 </div>
             </div>
-            <div class="introduce">
+            <div class="introduce" ref="introduceRef">
                 <div class="head flexacenter">
                     <div class="logo mar1200">
                         <img class="icon" src="./img/logo.png" />
@@ -77,7 +82,7 @@
                 </div>
             </div>
 
-            <div class="works flexacenter">
+            <div class="works flexacenter" ref="worksRef">
                 <img class="bj1" src="./img/works-bj1.png" />
                 <div class="name-box">
                     <img class="bj" src="./img/works-title-bj.svg" />
@@ -134,24 +139,25 @@
                 <img class="bj2" src="./img/works-bj2.png" />
             </div>
 
-            <div class="custom">
+            <div class="custom" ref="customRef">
                 <div class="custom-box mar1200 flexflex">
                     <img class="title" src="./img/custom-title.png" />
                     <div class="subtitle">往事可成追忆，把你的故事谱成歌</div>
                     <div class="list flexflex mar1200">
-                        <div class="item flexacenter" v-for="(item, index) in 6" :key="index">
+                        <div class="item flexacenter" v-for="(item, index) in customList" :key="index">
                             <div class="info flexflex">
                                 <div class="name">画Remix</div>
                                 <div class="lyric">走过的路汇成星河，脚下的路更辽阔</div>
                                 <div class="progress-bar flexacenter">
-                                    <div class="bar white" :style="{ width: progress + '%' }"></div>
+                                    <div class="bar white" :style="{ width: item.progress + '%' }"></div>
                                     <div class="circle"></div>
-                                    <div class="bar black" :style="{ width: (100 - progress) + '%' }"></div>
+                                    <div class="bar black flex1"></div>
                                 </div>
                                 <div class="operate flexcenter">
-                                    <img class="speed left" src="./img/speed-left.png" />
-                                    <img class="play" src="./img/play-black-icon.svg" />
-                                    <img class="speed right" src="./img/speed-right.png" />
+                                    <img class="speed left" @click="fastForward('slow', item.src, 'custom')" src="./img/speed-left.png" />
+                                    <img v-if="item.state" class="play" @click="closeAll()" src="./img/pause-black-icon.svg" />
+                                    <img v-else class="play" @click="manageAudio(item.src, 'custom')" src="./img/play-black-icon.svg" />
+                                    <img class="speed right" @click="fastForward('fast', item.src, 'custom')" src="./img/speed-right.png" />
                                 </div>
                             </div>
 
@@ -166,15 +172,21 @@
                 </div>
             </div>
 
-            <div class="student">
+            <div class="student" ref="studentRef">
                 <div class="student-box flexflex">
-                    <img class="title" src="./img/student-title.png" alt="" />
-                    <div class="list">
-                        <img class="img" src="./img/student-img.png" />
+                    <img class="title" src="./static/img/student-title.png" alt="" />
+                    <div class="list flexacenter">
+                        <img class="img img1" src="./static/img/student-img.png" />
+                        <img class="img img2" src="./static/img/student-img.png" />
+                        <img class="img img3" src="./static/img/student-img.png" />
+                        <img class="img img4" src="./static/img/student-img.png" />
+                        <img class="img img5" src="./static/img/student-img.png" />
+                        <img class="img img6" src="./static/img/student-img.png" />
+                        <img class="img img7" src="./img/student-img.png" />
                     </div>
                     <div class="name">《听风少年的梦幻之城》</div>
                     <div class="info flexacenter">
-                        <img class="icon" src="./img/student-icon.svg" />
+                        <img class="icon" src="./static/img/student-icon.svg" />
                         林林林 | 7岁 | 广州
                     </div>
 
@@ -190,34 +202,34 @@
                     </div> -->
 
                     <div class="operate flexcenter">
-                        <img class="cut left" src="./img/cut-left.svg" />
-                        <img class="speed left" src="./img/speed-white-left.png" />
-                        <img class="play" src="./img/play-white-icon.svg" />
-                        <img class="speed right" src="./img/speed-white-right.png" />
-                        <img class="cut right" src="./img/cut-right.svg" />
+                        <img class="cut left" src="./static/img/cut-left.svg" />
+                        <img class="speed left" src="./static/img/speed-white-left.png" />
+                        <img class="play" src="./static/img/play-white-icon.svg" />
+                        <img class="speed right" src="./static/img/speed-white-right.png" />
+                        <img class="cut right" src="./static/img/cut-right.svg" />
                     </div>
                 </div>
                 <div class="contact flexflex mar1200">
-                    <img class="title" src="./img/contact-title.png" />
+                    <img class="title" src="./static/img/contact-title.png" />
                     <div class="hint">我们可以为你提供AI音乐定制服务，谱写你独有的人生歌曲</div>
                     <div class="hint">我们可以为你提供AI音乐教学培训服务，让你拥有独立完成音乐作品的能力</div>
-                    <img class="arrows" src="./img/arrows-yellow.svg" />
-                    <img class="WeChat" src="./img/WeChat-img.jpg" />
-                    <img class="logo" src="./img/logo-black.png" />
+                    <img class="arrows" src="./static/img/arrows-yellow.svg" />
+                    <img class="WeChat" src="./static/img/WeChat-img.jpg" />
+                    <img class="logo" src="./static/img/logo-black.png" />
                 </div>
             </div>
 
             <div class="footer flexcenter">
-                <img class="logo" src="./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>
 
             <div v-if="previewState" class="preview flexcenter">
-                <img class="close" @click="closePreview()" src="./img/close.svg" />
+                <img class="close" @click="closePreview()" src="./static/img/close.svg" />
                 <div class="artplayer-app"></div>
             </div>
         </div>
 
-        <script src="./js/index.js"></script>
+        <script src="./static/js/index.js"></script>
     </body>
 </html>
diff --git a/css/index.css b/static/css/index.css
similarity index 94%
rename from css/index.css
rename to static/css/index.css
index 36ea8ba..f91cad6 100644
--- a/css/index.css
+++ b/static/css/index.css
@@ -71,11 +71,19 @@
 .content .sidebar .arrow .item {
   width: 12px;
   height: 7px;
+}
+.content .sidebar .arrow .item.orange {
   cursor: pointer;
 }
+.content .sidebar .arrow .item.top.orange {
+  transform: rotate(180deg);
+}
 .content .sidebar .arrow .item:not(:last-of-type) {
   margin-bottom: 34px;
 }
+.content .sidebar .arrow .item.bottom.white {
+  transform: rotate(180deg);
+}
 .content .introduce {
   width: 100%;
 }
@@ -366,7 +374,7 @@
   position: relative;
   width: 340px;
   height: 191px;
-  margin: 0 30px;
+  margin: 0 auto;
   cursor: pointer;
 }
 .content .works .mv-box .item .media .img {
@@ -378,8 +386,8 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 27px;
-  height: 27px;
+  width: 28px;
+  height: 28px;
   cursor: pointer;
   filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
 }
@@ -591,7 +599,7 @@
   position: absolute;
 }
 .content .custom .list .item .info .progress-bar .bar.white {
-  width: 20%;
+  width: 0;
   border-radius: 10px 0 0 10px;
 }
 .content .custom .list .item .info .progress-bar .bar.white::after {
@@ -663,17 +671,49 @@
   margin-bottom: 93px;
 }
 .content .student .student-box .list {
-  margin-bottom: 69px;
+  position: relative;
+  width: 1200px;
+  height: 320px;
+  margin: 0 auto 69px;
 }
 .content .student .student-box .list .img {
+  position: absolute;
   width: 240px;
   height: 240px;
   border-radius: 50%;
   filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
 }
-.content .student .student-box .list .img.pitch {
+.content .student .student-box .list .img.img6 {
+  left: 0;
+  z-index: 2;
+}
+.content .student .student-box .list .img.img4 {
+  left: 149px;
+  z-index: 4;
+}
+.content .student .student-box .list .img.img2 {
+  left: 299px;
+  z-index: 6;
+}
+.content .student .student-box .list .img.img1 {
   width: 320px;
   height: 320px;
+  left: 440px;
+  z-index: 7;
+}
+.content .student .student-box .list .img.img3 {
+  left: 654px;
+  z-index: 5;
+}
+.content .student .student-box .list .img.img5 {
+  left: 804px;
+  z-index: 3;
+}
+.content .student .student-box .list .img.img7 {
+  left: 954px;
+  z-index: 1;
 }
 .content .student .student-box .name {
   font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
diff --git a/css/index.less b/static/css/index.less
similarity index 94%
rename from css/index.less
rename to static/css/index.less
index cfde212..62d73ae 100644
--- a/css/index.less
+++ b/static/css/index.less
@@ -76,11 +76,22 @@
             .item {
                 width: 12px;
                 height: 7px;
-                cursor: pointer;
+
+                &.orange {
+                    cursor: pointer;
+                }
+
+                &.top.orange {
+                    transform: rotate(180deg);
+                }
 
                 &:not(:last-of-type) {
                     margin-bottom: 34px;
                 }
+
+                &.bottom.white {
+                    transform: rotate(180deg);
+                }
             }
         }
     }
@@ -413,7 +424,7 @@
                     position: relative;
                     width: 340px;
                     height: 191px;
-                    margin: 0 30px;
+                    margin: 0 auto;
                     cursor: pointer;
 
                     .img {
@@ -426,8 +437,8 @@
                         top: 50%;
                         left: 50%;
                         transform: translate(-50%, -50%);
-                        width: 27px;
-                        height: 27px;
+                        width: 28px;
+                        height: 28px;
                         cursor: pointer;
                         filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
                     }
@@ -671,7 +682,7 @@
                                 position: absolute;
                             }
                             &.white {
-                                width: 20%;
+                                width: 0;
                                 border-radius: 10px 0 0 10px;
 
                                 &::after {
@@ -763,15 +774,54 @@
             }
 
             .list {
-                margin-bottom: 69px;
+                position: relative;
+                width: 1200px;
+                height: 320px;
+                margin: 0 auto 69px;
                 .img {
+                    position: absolute;
                     width: 240px;
                     height: 240px;
                     border-radius: 50%;
                     filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
-                    &.pitch {
+                    cursor: pointer;
+                    transition: all 0.3s ease-in-out;
+
+                    &.img6 {
+                        left: 0;
+                        z-index: 2;
+                    }
+
+                    &.img4 {
+                        left: 149px;
+                        z-index: 4;
+                    }
+
+                    &.img2 {
+                        left: 299px;
+                        z-index: 6;
+                    }
+
+                    &.img1 {
                         width: 320px;
                         height: 320px;
+                        left: 440px;
+                        z-index: 7;
+                    }
+
+                    &.img3 {
+                        left: 654px;
+                        z-index: 5;
+                    }
+
+                    &.img5 {
+                        left: 804px;
+                        z-index: 3;
+                    }
+
+                    &.img7 {
+                        left: 954px;
+                        z-index: 1;
                     }
                 }
             }
diff --git a/img/WeChat-img.jpg b/static/img/WeChat-img.jpg
similarity index 100%
rename from img/WeChat-img.jpg
rename to static/img/WeChat-img.jpg
diff --git a/img/ai-title.png b/static/img/ai-title.png
similarity index 100%
rename from img/ai-title.png
rename to static/img/ai-title.png
diff --git a/img/album-bj1.svg b/static/img/album-bj1.svg
similarity index 100%
rename from img/album-bj1.svg
rename to static/img/album-bj1.svg
diff --git a/img/album-bj2.svg b/static/img/album-bj2.svg
similarity index 100%
rename from img/album-bj2.svg
rename to static/img/album-bj2.svg
diff --git a/img/album-bj3.svg b/static/img/album-bj3.svg
similarity index 100%
rename from img/album-bj3.svg
rename to static/img/album-bj3.svg
diff --git a/img/album-bj4.png b/static/img/album-bj4.png
similarity index 100%
rename from img/album-bj4.png
rename to static/img/album-bj4.png
diff --git a/img/album-bj5.svg b/static/img/album-bj5.svg
similarity index 100%
rename from img/album-bj5.svg
rename to static/img/album-bj5.svg
diff --git a/img/album-img.svg b/static/img/album-img.svg
similarity index 100%
rename from img/album-img.svg
rename to static/img/album-img.svg
diff --git a/img/arrow-orange.svg b/static/img/arrow-orange.svg
similarity index 100%
rename from img/arrow-orange.svg
rename to static/img/arrow-orange.svg
diff --git a/img/arrow-white.svg b/static/img/arrow-white.svg
similarity index 100%
rename from img/arrow-white.svg
rename to static/img/arrow-white.svg
diff --git a/img/arrows-yellow.svg b/static/img/arrows-yellow.svg
similarity index 100%
rename from img/arrows-yellow.svg
rename to static/img/arrows-yellow.svg
diff --git a/img/audio-img.png b/static/img/audio-img.png
similarity index 100%
rename from img/audio-img.png
rename to static/img/audio-img.png
diff --git a/img/audio-img.svg b/static/img/audio-img.svg
similarity index 100%
rename from img/audio-img.svg
rename to static/img/audio-img.svg
diff --git a/img/award-winning-works.png b/static/img/award-winning-works.png
similarity index 100%
rename from img/award-winning-works.png
rename to static/img/award-winning-works.png
diff --git a/img/close.svg b/static/img/close.svg
similarity index 100%
rename from img/close.svg
rename to static/img/close.svg
diff --git a/img/contact-title.png b/static/img/contact-title.png
similarity index 100%
rename from img/contact-title.png
rename to static/img/contact-title.png
diff --git a/img/custom-bj-1.svg b/static/img/custom-bj-1.svg
similarity index 100%
rename from img/custom-bj-1.svg
rename to static/img/custom-bj-1.svg
diff --git a/img/custom-bj-2.svg b/static/img/custom-bj-2.svg
similarity index 100%
rename from img/custom-bj-2.svg
rename to static/img/custom-bj-2.svg
diff --git a/img/custom-img.png b/static/img/custom-img.png
similarity index 100%
rename from img/custom-img.png
rename to static/img/custom-img.png
diff --git a/img/custom-title.png b/static/img/custom-title.png
similarity index 100%
rename from img/custom-title.png
rename to static/img/custom-title.png
diff --git a/img/cut-left.svg b/static/img/cut-left.svg
similarity index 100%
rename from img/cut-left.svg
rename to static/img/cut-left.svg
diff --git a/img/cut-right.svg b/static/img/cut-right.svg
similarity index 100%
rename from img/cut-right.svg
rename to static/img/cut-right.svg
diff --git a/img/gushi.png b/static/img/gushi.png
similarity index 100%
rename from img/gushi.png
rename to static/img/gushi.png
diff --git a/img/headset-icon.png b/static/img/headset-icon.png
similarity index 100%
rename from img/headset-icon.png
rename to static/img/headset-icon.png
diff --git a/img/logo-black.png b/static/img/logo-black.png
similarity index 100%
rename from img/logo-black.png
rename to static/img/logo-black.png
diff --git a/img/logo.png b/static/img/logo.png
similarity index 100%
rename from img/logo.png
rename to static/img/logo.png
diff --git a/img/mv-1.svg b/static/img/mv-1.svg
similarity index 100%
rename from img/mv-1.svg
rename to static/img/mv-1.svg
diff --git a/img/mv-icon.png b/static/img/mv-icon.png
similarity index 100%
rename from img/mv-icon.png
rename to static/img/mv-icon.png
diff --git a/img/pause-black-icon.svg b/static/img/pause-black-icon.svg
similarity index 100%
rename from img/pause-black-icon.svg
rename to static/img/pause-black-icon.svg
diff --git a/img/pause-white-icon.svg b/static/img/pause-white-icon.svg
similarity index 100%
rename from img/pause-white-icon.svg
rename to static/img/pause-white-icon.svg
diff --git a/img/play-black-icon.svg b/static/img/play-black-icon.svg
similarity index 100%
rename from img/play-black-icon.svg
rename to static/img/play-black-icon.svg
diff --git a/img/play-white-icon.svg b/static/img/play-white-icon.svg
similarity index 100%
rename from img/play-white-icon.svg
rename to static/img/play-white-icon.svg
diff --git a/img/record-icon.png b/static/img/record-icon.png
similarity index 100%
rename from img/record-icon.png
rename to static/img/record-icon.png
diff --git a/img/remake-icon.png b/static/img/remake-icon.png
similarity index 100%
rename from img/remake-icon.png
rename to static/img/remake-icon.png
diff --git a/img/serial-icon.png b/static/img/serial-icon.png
similarity index 100%
rename from img/serial-icon.png
rename to static/img/serial-icon.png
diff --git a/img/serial-icon.svg b/static/img/serial-icon.svg
similarity index 100%
rename from img/serial-icon.svg
rename to static/img/serial-icon.svg
diff --git a/img/speed-left.png b/static/img/speed-left.png
similarity index 100%
rename from img/speed-left.png
rename to static/img/speed-left.png
diff --git a/img/speed-right.png b/static/img/speed-right.png
similarity index 100%
rename from img/speed-right.png
rename to static/img/speed-right.png
diff --git a/img/speed-white-left.png b/static/img/speed-white-left.png
similarity index 100%
rename from img/speed-white-left.png
rename to static/img/speed-white-left.png
diff --git a/img/speed-white-right.png b/static/img/speed-white-right.png
similarity index 100%
rename from img/speed-white-right.png
rename to static/img/speed-white-right.png
diff --git a/img/student-icon.svg b/static/img/student-icon.svg
similarity index 100%
rename from img/student-icon.svg
rename to static/img/student-icon.svg
diff --git a/img/student-img.png b/static/img/student-img.png
similarity index 100%
rename from img/student-img.png
rename to static/img/student-img.png
diff --git a/img/student-title.png b/static/img/student-title.png
similarity index 100%
rename from img/student-title.png
rename to static/img/student-title.png
diff --git a/img/train-icon.png b/static/img/train-icon.png
similarity index 100%
rename from img/train-icon.png
rename to static/img/train-icon.png
diff --git a/img/works-bj1.png b/static/img/works-bj1.png
similarity index 100%
rename from img/works-bj1.png
rename to static/img/works-bj1.png
diff --git a/img/works-bj2.png b/static/img/works-bj2.png
similarity index 100%
rename from img/works-bj2.png
rename to static/img/works-bj2.png
diff --git a/img/works-line-1.svg b/static/img/works-line-1.svg
similarity index 100%
rename from img/works-line-1.svg
rename to static/img/works-line-1.svg
diff --git a/img/works-line-2.svg b/static/img/works-line-2.svg
similarity index 100%
rename from img/works-line-2.svg
rename to static/img/works-line-2.svg
diff --git a/img/works-line-3.svg b/static/img/works-line-3.svg
similarity index 100%
rename from img/works-line-3.svg
rename to static/img/works-line-3.svg
diff --git a/img/works-line-4.svg b/static/img/works-line-4.svg
similarity index 100%
rename from img/works-line-4.svg
rename to static/img/works-line-4.svg
diff --git a/img/works-line-5.svg b/static/img/works-line-5.svg
similarity index 100%
rename from img/works-line-5.svg
rename to static/img/works-line-5.svg
diff --git a/img/works-line-6.svg b/static/img/works-line-6.svg
similarity index 100%
rename from img/works-line-6.svg
rename to static/img/works-line-6.svg
diff --git a/img/works-title-bj.svg b/static/img/works-title-bj.svg
similarity index 100%
rename from img/works-title-bj.svg
rename to static/img/works-title-bj.svg
diff --git a/img/works-title.png b/static/img/works-title.png
similarity index 100%
rename from img/works-title.png
rename to static/img/works-title.png
diff --git a/js/artplayer.js b/static/js/artplayer.js
similarity index 100%
rename from js/artplayer.js
rename to static/js/artplayer.js
diff --git a/js/index.js b/static/js/index.js
similarity index 54%
rename from js/index.js
rename to static/js/index.js
index 58155dc..fa86b73 100644
--- a/js/index.js
+++ b/static/js/index.js
@@ -45,9 +45,128 @@ const search = createApp({
             audioList.value.forEach((item) => {
                 if (item.url === src) item.progress = val;
             });
+
+            customList.value.forEach((item) => {
+                if (item.src === src) item.progress = val;
+            });
+        };
+
+        const introduceRef = ref(null);
+        const worksRef = ref(null);
+        const customRef = ref(null);
+        const studentRef = ref(null);
+
+        let pointerState = ref("introduce");
+
+        const elements = ref([
+            {
+                isVisible: false,
+                ref: introduceRef,
+                title: "介绍",
+                state: "introduce",
+            },
+            {
+                isVisible: false,
+                ref: worksRef,
+                title: "作品",
+                state: "works",
+            },
+            {
+                isVisible: false,
+                ref: customRef,
+                title: "定制",
+                state: "custom",
+            },
+            {
+                isVisible: false,
+                ref: studentRef,
+                title: "学生",
+                state: "student",
+            },
+        ]);
+
+        // 点击侧边栏
+        const changePointer = (state) => {
+            const element = document.querySelector(`.${state}`);
+
+            if (!element) return;
+            element.scrollIntoView({ 
+                behavior: "smooth",
+            });
+        };
+
+        // 向上滚动到上一页
+        const scrollToPrevious = () => {
+            const currentIndex = ['introduce', 'works', 'custom', 'student'].indexOf(pointerState.value);
+            if (currentIndex > 0) {
+                const prevState = ['introduce', 'works', 'custom', 'student'][currentIndex - 1];
+                changePointer(prevState);
+            }
+        };
+
+        // 向下滚动到下一页
+        const scrollToNext = () => {
+            const currentIndex = ['introduce', 'works', 'custom', 'student'].indexOf(pointerState.value);
+            if (currentIndex < 3) {
+                const nextState = ['introduce', 'works', 'custom', 'student'][currentIndex + 1];
+                changePointer(nextState);
+            }
+        };
+
+        // 获取当前在可视窗口中的元素ref
+        const visibleRef = computed(() => {
+            const visibleElement = elements.value.find((el) => el.isVisible);
+            return visibleElement ? visibleElement.ref : null;
+        });
+
+        const observer = ref(null);
+
+        // 初始化观察器
+        const initObserver = () => {
+            observer.value = new IntersectionObserver(
+                (entries) => {
+                    entries.forEach((entry) => {
+                        // 找到对应的元素状态并更新
+                        const targetEl = elements.value.find((el) => el.ref === entry.target);
+                        if (targetEl) {
+                            targetEl.isVisible = entry.isIntersecting;
+                            if (entry.isIntersecting) pointerState.value = targetEl.state;
+                        }
+                    });
+                },
+                {
+                    root: null, // 视口作为根元素
+                    rootMargin: "0px",
+                    threshold: 0.3, // 可见比例达到10%时触发
+                }
+            );
+
+            // 开启监听 - 对所有预定义的元素执行observe
+            elements.value.forEach((element) => {
+                if (element.ref && element.ref) observer.value.observe(element.ref);
+            });
+
+            console.log(observer.value);
+        };
+
+        // 添加元素到监听列表
+        const addElement = (elRef) => {
+            if (elRef.value) {
+                // 存储元素ref和其可见状态
+                elements.value.push({
+                    ref: elRef.value,
+                    isVisible: false,
+                });
+                // 开始监听
+                observer.value?.observe(elRef.value);
+            }
         };
 
         onMounted(() => {
+            setTimeout(() => {
+                initObserver();
+            }, 1000);
+
             // 添加进度更新事件监听器
             if (audioPlayer.value) {
                 audioPlayer.value.addEventListener("timeupdate", getProgress);
@@ -57,6 +176,8 @@ const search = createApp({
 
         // 组件卸载时清理事件监听器
         onUnmounted(() => {
+            observer.value?.disconnect();
+
             audioPlayer?.value?.removeEventListener("timeupdate", getProgress);
             audioPlayer?.value?.removeEventListener("loadedmetadata", getProgress);
         });
@@ -68,7 +189,7 @@ const search = createApp({
         const playHead = () => {
             closeAll();
             nextTick(() => {
-                audioPlayer.value.src = "./mp3/1.MP3";
+                audioPlayer.value.src = "./static/mp3/1.MP3";
                 audioPlayer.value.play().then(() => (audioHeadState.value = true));
             });
         };
@@ -156,37 +277,64 @@ const search = createApp({
         };
 
         const manageAudio = (src, area) => {
-            console.log("src", src, "area", area);
             const audio = audioPlayer.value;
-            console.log("audio", audio.paused);
             closeAll();
-            if (area == "head") {
-                nextTick(() => {
+            nextTick(() => {
+                if (area == "head") {
                     if (audio?.src != src) audio.src = src;
                     audio.play().then(() => (audioHeadState.value = true));
-                });
-            }
+                }
 
-            if (area == "works") {
-                nextTick(() => {
+                if (area == "works") {
                     if (audio?.src != src) audio.src = src;
                     audio.play().then(() => {
                         audioList.value.forEach((item) => {
                             if (item.url == src) item["state"] = true;
                         });
                     });
-                });
-            }
+                }
+
+                console.log("area", area, src);
+
+                if (area == "custom") {
+                    if (audio?.src != src) audio.src = src;
+                    audio.play().then(() => {
+                        customList.value.forEach((item) => {
+                            if (item.src == src) item["state"] = true;
+                        });
+                    });
+                }
+            });
         };
 
         const closeAll = () => {
             audioPlayer.value.pause();
             audioHeadState.value = false;
             audioList.value.forEach((item) => {
+                item["progress"] = 0;
+                item["state"] = false;
+            });
+            customList.value.forEach((item) => {
+                item["progress"] = 0;
                 item["state"] = false;
             });
         };
 
-        return { closeAll, manageAudio, progress, pauseAudio, playAudio, audioList, closePreview, openPreview, previewState, audioHeadState, pauseHead, playHead, audioPlayer, text, trait, fastForward };
+        let customList = ref([
+            {
+                src: "https://app.gter.net/image/miniApp/mp3/1.mp3",
+            },
+            {
+                src: "https://app.gter.net/image/miniApp/mp3/2.mp3",
+            },
+            {
+                src: "https://app.gter.net/image/miniApp/mp3/3.mp3",
+            },
+            {
+                src: "https://app.gter.net/image/miniApp/mp3/4.mp3",
+            },
+        ]);
+
+        return { scrollToPrevious, scrollToNext, changePointer, pointerState, visibleRef, studentRef, customRef, worksRef, introduceRef, customList, closeAll, manageAudio, progress, pauseAudio, playAudio, audioList, closePreview, openPreview, previewState, audioHeadState, pauseHead, playHead, audioPlayer, text, trait, fastForward };
     },
 }).mount("#appIndex");
diff --git a/js/vue.global.js b/static/js/vue.global.js
similarity index 100%
rename from js/vue.global.js
rename to static/js/vue.global.js
diff --git a/mp3/1.MP3 b/static/mp3/1.MP3
similarity index 100%
rename from mp3/1.MP3
rename to static/mp3/1.MP3
