no message

create.html

@@ -204,7 +204,7 @@
                 <div class="spinner"></div>
                 <div class="loading-text">加载中...</div>
             </div>
-            <iframe id="haimian-iframe" src="https://www.haimian.com/" frameborder="0" allowfullscreen></iframe>
+            <iframe id="haimian-iframe" allow="encrypted-media" src="https://www.haimian.com/" frameborder="0" allowfullscreen></iframe>
         </div>
         <div class="logo-mask"></div>
         <script>

index.html

@@ -57,7 +57,7 @@
                         <img class="bj bj1" src="./static/img/album-bj1.svg" />
                         <img class="bj bj2" src="./static/img/album-bj2.svg" />
                         <div class="album-box" ref="albumBoxRef">
-                            <div class="item" v-for="(item, index) in bannerList" :key="index" @click="openPreview(item.playurl)">
+                            <div class="item" v-for="(item, index) in bannerList" :key="index" @click="openPreview(item.id, item.img)">
                                 <img class="img" :src="item.img" />
                                 <img class="bj bj3" src="./static/img/album-bj3.svg" />
                                 <img class="bj bj4" src="./static/img/album-bj4.png" />
@@ -99,7 +99,7 @@
                             <div class="time">{{ item.date }}</div>
                         </div>
 
-                        <div class="media" @click="openPreview(item.playurl, item.img)">
+                        <div class="media" @click="openPreview(item.id, item.img)">
                             <img class="img" :src="item.img" />
                             <img class="play" src="./static/img/play-white-icon.svg" />
                         </div>
@@ -109,7 +109,7 @@
                 <div class="audio-box mar1200 flexflex">
                     <div class="item" v-for="(item, index) in awardAudioList" :key="index">
                         <img class="serial-icon" src="./static/img/serial-icon.png" />
-                        <div class="serial">{{ index + 1 }}</div>
+                        <div class="serial">{{ (index + 1 + '').padStart(2, '0') }}</div>
                         <div class="content flexflex">
                             <div class="album">
                                 <img class="img" :src="item.img" />
@@ -124,10 +124,10 @@
                                     <div class="bar black flex1"></div>
                                 </div>
                                 <div class="operate flexcenter">
-                                    <img class="speed left" src="./static/img/speed-left.png" @click="fastForward('slow', item.playurl, 'works')" />
+                                    <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 class="speed right" src="./static/img/speed-right.png" @click="fastForward('fast', item.playurl, 'works')" />
+                                    <img class="speed right" src="./static/img/speed-right.png" @click="fastForward('fast')" />
                                 </div>
                             </div>
                         </div>
@@ -150,10 +150,10 @@
                                     <div class="bar black flex1"></div>
                                 </div>
                                 <div class="operate flexcenter">
-                                    <img class="speed left" @click="fastForward('slow', item.playurl, 'custom')" 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-else class="play" @click="manageAudio(item.playurl, 'custom')" src="./static/img/play-black-icon.svg" />
-                                    <img class="speed right" @click="fastForward('fast', item.playurl, 'custom')" src="./static/img/speed-right.png" />
+                                    <img class="speed right" @click="fastForward('fast')" src="./static/img/speed-right.png" />
                                 </div>
                             </div>
 
@@ -181,16 +181,17 @@
                     </div>
 
                     <div class="progress-bar flexacenter">
-                        <div class="bar white" :style="{ width: progress + '%' }"></div>
+                        <div class="bar white" :style="{ width: zeroOrderStudents.progress + '%' }"></div>
                         <div class="bar black flex1"></div>
                     </div>
 
                     <div class="operate flexcenter">
-                        <img class="cut left" src="./static/img/cut-left.svg" />
+                        <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" />
+                        <img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow')" />
-                        <img class="play" src="./static/img/play-white-icon.svg" />
+                        <img v-if="zeroOrderStudents.state" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
-                        <img class="speed right" src="./static/img/speed-white-right.png" />
+                        <img v-else class="play" @click="zeroOrderStudents.playurl ? manageAudio(zeroOrderStudents.playurl, 'student') : getPlayUrl(index, 'student')" src="./static/img/play-white-icon.svg" />
-                        <img class="cut right" src="./static/img/cut-right.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>
                 </div>
                 <div class="contact flexflex mar1200">
@@ -203,7 +204,7 @@
                 </div>
             </div>
 
-            <div class="footer flexcenter">
+            <div class="footer flexcenter" :style="{ marginBottom: playData ? '76px' : '' }">
                 <img class="logo" src="./static/img/ai-title.png" />
                 <div class="text">广州九微科技有限公司 | Copyright 2001-2025 GTER All Rights Reserved | 粤ICP备14050432号</div>
             </div>
@@ -213,32 +214,31 @@
                 <div class="artplayer-app"></div>
             </div>
 
-            <div class="bottom-play" v-if="playData">
+            <div class="bottom-play flexacenter" v-if="playData">
-                <div class="bottom-box mar1200 flexacenter">
+                <div class="bottom-left flex1 flexacenter">
-                    <div class="left flexacenter">
                     <img class="img" :src="playData?.img" />
                     <div class="name">{{ playData?.title }}</div>
                 </div>
 
-                    <div class="middle flex1 flexcenter">
+                <div class="bottom-middle flexcenter">
                     <div class="operate flexcenter">
-                            <img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow', url, 'works')" />
+                        <img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow')" />
                         <img v-if="playData.state" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
                         <img v-else class="play" @click="rePlay()" src="./static/img/play-white-icon.svg" />
-                            <img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast', url, 'works')" />
+                        <img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast')" />
                     </div>
                     <div class="flexacenter">
                         <div class="time-display">{{ currentTimeFormatted }}</div>
-                            <div class="progress-bar flexacenter">
+                        <div class="progress-bar flexacenter" @click="handleBarDragBottomClick">
-                                <div class="bar white" :style="{ width: progress + '%' }"></div>
+                            <div class="bar white" :style="{ width: progress + '%' }" @mousedown="startBarDragBottom"></div>
                             <div class="bar black flex1"></div>
                         </div>
                         <div class="time-display">{{ durationFormatted }}</div>
                     </div>
                 </div>
 
-                    <div class="right">
+                <div class="bottom-right flex1 flexcenter">
-                        <div class="item">
+                    <div class="item" @mouseenter="handleVolumeShow" @mouseleave="handleVolumeHide">
                         <svg v-if="volume == 0" class="svg" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 16 16"><path fill="#FCFCFC" d="M1 6.334a1 1 0 0 1 1-1h1.385a.667.667 0 0 0 .505-.231l2.938-3.41A.667.667 0 0 1 8 2.13v11.85c0 .604-.74.896-1.154.454l-2.958-3.165a.667.667 0 0 0-.487-.211H2a1 1 0 0 1-1-1zm3.9-.36a2 2 0 0 1-1.515.694H2.333v3.055h1.068a2 2 0 0 1 1.461.635l1.805 1.93V3.924zM9.764 6.04 11.724 8l-1.96 1.96a.333.333 0 0 0 0 .471l.472.471c.13.13.341.13.471 0l1.96-1.96 1.96 1.96c.13.13.34.13.47 0l.472-.471a.333.333 0 0 0 0-.471L13.61 8l1.96-1.96a.333.333 0 0 0 0-.47l-.471-.472a.333.333 0 0 0-.472 0l-1.96 1.96-1.959-1.96a.333.333 0 0 0-.471 0l-.472.471a.333.333 0 0 0 0 .471"></path></svg>
 
                         <svg v-else class="svg" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 16 16">
@@ -246,7 +246,7 @@
                             <path fill="#fff" d="M12.479 12.479a.348.348 0 0 1-.007-.478c2.013-2.248 2.013-5.753 0-8.001a.348.348 0 0 1 .007-.478l.471-.471c.13-.13.342-.13.466.005 2.525 2.764 2.525 7.126 0 9.89a.322.322 0 0 1-.466.004z"></path>
                         </svg>
 
-                            <div class="sound-control flexflex">
+                        <div class="sound-control flexflex" v-if="volumeShow">
                             <div class="value">{{ volume }}</div>
                             <div class="progress flexflex" @click="handleVolumeClick">
                                 <div class="bar" :style="{ height: volume + '%' }" @mousedown="startDrag"></div>
@@ -256,7 +256,6 @@
                 </div>
             </div>
         </div>
-        </div>
 
         <script src="./static/js/index.js"></script>
     </body>

static/css/index.css

@@ -187,10 +187,12 @@
   height: 448px;
   position: relative;
   z-index: 1;
+  border-radius: 15px;
+  overflow: hidden;
 }
 .content .introduce .box .album .album-box .item .bj.bj3 {
-  width: 100%;
+  width: 101%;
-  height: 100%;
+  height: 101%;
   z-index: 1;
 }
 .content .introduce .box .album .album-box .item .bj.bj4 {
@@ -396,6 +398,7 @@
 .content .works .mv-box .item .media .img {
   width: 100%;
   height: 100%;
+  border-radius: 10px;
 }
 .content .works .mv-box .item .media .play {
   position: absolute;
@@ -611,38 +614,28 @@
   position: relative;
   cursor: pointer;
 }
-.content .custom .list .item .info .progress-bar .bar::after {
-  position: absolute;
-}
 .content .custom .list .item .info .progress-bar .bar.white {
   width: 0;
   border-radius: 10px 0 0 10px;
-}
-.content .custom .list .item .info .progress-bar .bar.white::after {
-  content: "";
-  width: calc(100% + 5px);
-  height: 100%;
   background-color: #5241b0;
-  display: block;
-  border-radius: 10px 0 0 10px;
 }
-.content .custom .list .item .info .progress-bar .bar.black::after {
+.content .custom .list .item .info .progress-bar .bar.white::before {
   content: "";
-  width: calc(100% + 5px);
-  height: 100%;
-  background-color: #000000;
-  display: block;
-  border-radius: 0 10px 10px 0;
-  left: -5px;
-}
-.content .custom .list .item .info .progress-bar .circle {
   width: 10px;
   height: 10px;
   background-color: #f3974b;
   border-radius: 50%;
-  position: relative;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: -5px;
   cursor: pointer;
   z-index: 1;
+  display: block;
+}
+.content .custom .list .item .info .progress-bar .bar.black {
+  background-color: #000000;
+  border-radius: 0 10px 10px 0;
 }
 .content .custom .list .item .info .operate .speed {
   width: 16px;
@@ -850,7 +843,8 @@
   font-style: normal;
   color: #f2f2f2;
   font-size: 13px;
-  height: 180px;
+  padding-top: 55px;
+  padding-bottom: 55px;
   background: linear-gradient(180deg, #5241b0 0%, #1e135e 100%);
 }
 .content .footer .logo {
@@ -887,17 +881,27 @@
   height: 76px;
   background-color: #353535;
   z-index: 1000;
-}
-.content .bottom-play .bottom-box {
-  height: 100%;
   justify-content: space-between;
+  animation: fadeInUp 0.3s ease forwards;
+  min-width: 1200px;
 }
-.content .bottom-play .bottom-box .left .img {
+@keyframes fadeInUp {
+  0% {
+    bottom: -76px;
+  }
+  100% {
+    bottom: 0;
+  }
+}
+.content .bottom-play .bottom-left {
+  padding-left: 12px;
+}
+.content .bottom-play .bottom-left .img {
   width: 56px;
   height: 56px;
   margin-right: 12px;
 }
-.content .bottom-play .bottom-box .left .name {
+.content .bottom-play .bottom-left .name {
   color: #fff;
   font-size: 14px;
   font-weight: 600;
@@ -907,51 +911,51 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.content .bottom-play .bottom-box .middle {
+.content .bottom-play .bottom-middle {
   flex-direction: column;
 }
-.content .bottom-play .bottom-box .middle .operate {
+.content .bottom-play .bottom-middle .operate {
   margin-bottom: 10px;
 }
-.content .bottom-play .bottom-box .middle .operate .cut {
+.content .bottom-play .bottom-middle .operate .cut {
   width: 14px;
   height: 12px;
   cursor: pointer;
 }
-.content .bottom-play .bottom-box .middle .operate .speed {
+.content .bottom-play .bottom-middle .operate .speed {
   width: 16px;
   height: 12px;
   margin: 0 40px;
   cursor: pointer;
 }
-.content .bottom-play .bottom-box .middle .operate .play {
+.content .bottom-play .bottom-middle .operate .play {
   width: 24px;
   height: 24px;
   cursor: pointer;
 }
-.content .bottom-play .bottom-box .middle .time-display {
+.content .bottom-play .bottom-middle .time-display {
   color: #fff;
   font-size: 12px;
   line-height: 10px;
 }
-.content .bottom-play .bottom-box .middle .progress-bar {
+.content .bottom-play .bottom-middle .progress-bar {
   height: 10px;
   width: 500px;
   margin: 0 10px;
 }
-.content .bottom-play .bottom-box .middle .progress-bar .bar {
+.content .bottom-play .bottom-middle .progress-bar .bar {
   height: 4px;
   background-color: #ffffff;
   border-radius: 10px;
   position: relative;
   cursor: pointer;
 }
-.content .bottom-play .bottom-box .middle .progress-bar .bar.white {
+.content .bottom-play .bottom-middle .progress-bar .bar.white {
   width: 0;
   border-radius: 10px 0 0 10px;
   background-color: #5241b0;
 }
-.content .bottom-play .bottom-box .middle .progress-bar .bar.white::before {
+.content .bottom-play .bottom-middle .progress-bar .bar.white::before {
   content: "";
   width: 10px;
   height: 10px;
@@ -965,22 +969,23 @@
   z-index: 1;
   display: block;
 }
-.content .bottom-play .bottom-box .middle .progress-bar .bar.black {
+.content .bottom-play .bottom-middle .progress-bar .bar.black {
   background-color: #f2f2f2;
   border-radius: 0 10px 10px 0;
 }
-.content .bottom-play .bottom-box .right .item {
+.content .bottom-play .bottom-right {
-  position: relative;
+  justify-content: flex-end;
+  padding-right: 12px;
 }
-.content .bottom-play .bottom-box .right .item .svg {
+.content .bottom-play .bottom-right .item {
+  position: relative;
+  margin-right: 18px;
+}
+.content .bottom-play .bottom-right .item .svg {
   display: block;
   cursor: pointer;
 }
-.content .bottom-play .bottom-box .right .item:hover .sound-control {
+.content .bottom-play .bottom-right .item .sound-control {
-  display: flex;
-}
-.content .bottom-play .bottom-box .right .item .sound-control {
-  display: none;
   justify-content: center;
   left: 50%;
   transform: translateX(-50%);
@@ -997,19 +1002,19 @@
   padding: 12px;
   cursor: auto;
 }
-.content .bottom-play .bottom-box .right .item .sound-control::after {
+.content .bottom-play .bottom-right .item .sound-control::after {
   content: "";
   width: 100%;
   height: 7px;
   position: absolute;
   bottom: -7px;
 }
-.content .bottom-play .bottom-box .right .item .sound-control .value {
+.content .bottom-play .bottom-right .item .sound-control .value {
   color: #fff;
   font-size: 14px;
   user-select: none;
 }
-.content .bottom-play .bottom-box .right .item .sound-control .progress {
+.content .bottom-play .bottom-right .item .sound-control .progress {
   width: 4px;
   height: 100px;
   border-radius: 4px;
@@ -1018,14 +1023,14 @@
   justify-content: flex-end;
   cursor: pointer;
 }
-.content .bottom-play .bottom-box .right .item .sound-control .progress .bar {
+.content .bottom-play .bottom-right .item .sound-control .progress .bar {
   width: 100%;
   height: 50px;
   background-color: #fff;
   border-radius: 4px;
   position: relative;
 }
-.content .bottom-play .bottom-box .right .item .sound-control .progress .bar::before {
+.content .bottom-play .bottom-right .item .sound-control .progress .bar::before {
   content: "";
   width: 10px;
   height: 10px;

static/css/index.less

@@ -205,14 +205,15 @@
                     .item {
                         width: 800px;
                         height: 448px;
-
                         position: relative;
                         z-index: 1;
+                        border-radius: 15px;
+                        overflow: hidden;
 
                         .bj {
                             &.bj3 {
-                                width: 100%;
+                                width: 101%;
-                                height: 100%;
+                                height: 101%;
                                 z-index: 1;
                             }
 
@@ -454,6 +455,7 @@
                     .img {
                         width: 100%;
                         height: 100%;
+                        border-radius: 10px;
                     }
 
                     .play {
@@ -702,44 +704,31 @@
                             position: relative;
                             cursor: pointer;
 
-                            &::after {
-                                position: absolute;
-                            }
                             &.white {
                                 width: 0;
                                 border-radius: 10px 0 0 10px;
-
-                                &::after {
-                                    content: "";
-                                    width: calc(100% + 5px);
-                                    height: 100%;
                                 background-color: #5241b0;
-                                    display: block;
-                                    border-radius: 10px 0 0 10px;
-                                }
-                            }
 
-                            &.black {
+                                &::before {
-                                &::after {
                                     content: "";
-                                    width: calc(100% + 5px);
-                                    height: 100%;
-                                    background-color: rgba(0, 0, 0, 1);
-                                    display: block;
-                                    border-radius: 0 10px 10px 0;
-                                    left: -5px;
-                                }
-                            }
-                        }
-
-                        .circle {
                                     width: 10px;
                                     height: 10px;
                                     background-color: #f3974b;
                                     border-radius: 50%;
-                            position: relative;
+                                    position: absolute;
+                                    top: 50%;
+                                    transform: translateY(-50%);
+                                    right: -5px;
                                     cursor: pointer;
                                     z-index: 1;
+                                    display: block;
+                                }
+                            }
+
+                            &.black {
+                                background-color: rgba(0, 0, 0, 1);
+                                border-radius: 0 10px 10px 0;
+                            }
                         }
                     }
 
@@ -991,7 +980,9 @@
         font-style: normal;
         color: #f2f2f2;
         font-size: 13px;
-        height: 180px;
+        padding-top: 55px;
+        padding-bottom: 55px;
+        // height: 180px;
         background: linear-gradient(180deg, rgba(82, 65, 176, 1) 0%, rgba(30, 19, 94, 1) 100%);
 
         .logo {
@@ -1032,12 +1023,23 @@
         height: 76px;
         background-color: #353535;
         z-index: 1000;
-
-        .bottom-box {
-            height: 100%;
         justify-content: space-between;
+        animation: fadeInUp 0.3s ease forwards;
+        min-width: 1200px;
+
+        @keyframes fadeInUp {
+            0% {
+                bottom: -76px;
+            }
+
+            100% {
+                bottom: 0;
+            }
+        }
+
+        .bottom-left {
+            padding-left: 12px;
 
-            .left {
             .img {
                 width: 56px;
                 height: 56px;
@@ -1056,7 +1058,7 @@
             }
         }
 
-            .middle {
+        .bottom-middle {
             flex-direction: column;
 
             .operate {
@@ -1128,20 +1130,23 @@
             }
         }
 
-            .right {
+        .bottom-right {
+            justify-content: flex-end;
+            padding-right: 12px;
+
             .item {
                 position: relative;
+                margin-right: 18px;
                 .svg {
                     display: block;
                     cursor: pointer;
                 }
-                    &:hover {
+                // &:hover {
+                //     .sound-control {
+                //         display: flex;
+                //     }
+                // }
                 .sound-control {
-                            display: flex;
-                        }
-                    }
-                    .sound-control {
-                        display: none;
                     justify-content: center;
                     left: 50%;
                     transform: translateX(-50%);
@@ -1207,4 +1212,3 @@
         }
     }
 }
-}

static/js/index.js

@@ -24,11 +24,6 @@ const search = createApp({
             },
         ];
 
-        const text = `中国AIGC产业联盟（AIGCxChina）
-            温州市社科联
-            温州市新闻媒体中心
-            第一届AI音乐春晚 正选节目`;
-
         const audioPlayer = ref(null);
 
         const progress = ref(0); // 播放进度百分比
@@ -68,6 +63,8 @@ const search = createApp({
             studentList.value.forEach((item) => {
                 if (item.playurl == src) item.progress = val;
             });
+
+            if (zeroOrderStudents.value?.playurl == src) zeroOrderStudents.value["progress"] = val;
         };
 
         const introduceRef = ref(null);
@@ -110,9 +107,11 @@ const search = createApp({
         let awardAudioList = ref([]);
 
         const init = () => {
-            ajaxget("https://pujianchaoyin.com/index/api").then((res) => {
+            ajax("https://pujianchaoyin.com/api/getHomeData").then((res) => {
                 if (res.code != 200) return;
                 const data = res.data;
+                console.log("data", data);
+
                 bannerList.value = data.banner;
                 awardMVList.value = data.awardMVList;
 
@@ -125,17 +124,14 @@ const search = createApp({
                 customList.value = data.customAudioList;
 
                 studentList.value = data.studentList || [];
-                console.log("customList", studentList.value[0]);
+
                 studentList.value.forEach((item, index) => {
-                    item["title"] = index;
                     item["order"] = index;
                 });
 
                 zeroOrderStudents.value = studentList.value[0];
 
-                nextTick(() => {
+                nextTick(() => bannerSwiper());
-                    bannerSwiper();
-                });
             });
         };
 
@@ -176,18 +172,25 @@ const search = createApp({
 
         let art = null;
         // 开启播放 MV
-        const openPreview = (url, poster = "") => {
+        const openPreview = (id, poster = "") => {
+            ajax("https://pujianchaoyin.com/api/getMvDetail", {
+                id,
+            }).then((res) => {
+                if (res.code != 200) return;
+                const data = res.data;
+
                 previewState.value = true;
                 nextTick(() => {
                     art = new Artplayer({
                         container: ".artplayer-app",
-                    url,
+                        url: data.playurl,
                         autoplay: true,
                         poster,
                         fullscreen: true,
                     });
                     art.play();
                 });
+            });
         };
 
         // 关闭播放 MV
@@ -198,8 +201,11 @@ const search = createApp({
         };
 
         // 快进 和 后退 10秒
-        const fastForward = (type = "fast", src, area) => {
+        const fastForward = (type = "fast") => {
             if (!audioPlayer.value) return;
+            const src = playData.value?.playurl || "";
+            const area = playData.value?.area || "";
+
             if (audioPlayer.value.src != src) {
                 manageAudio(src, area);
                 return;
@@ -240,6 +246,11 @@ const search = createApp({
                             }
                         });
                     }
+
+                    if (area == "student") {
+                        zeroOrderStudents.value["state"] = true;
+                        playData.value = { ...zeroOrderStudents.value, area };
+                    }
                 });
             });
         };
@@ -253,13 +264,17 @@ const search = createApp({
 
         const closeAll = () => {
             audioPlayer.value.pause();
+
             awardAudioList.value.forEach((item) => {
                 item["state"] = false;
             });
+
             customList.value.forEach((item) => {
                 item["state"] = false;
             });
 
+            zeroOrderStudents.value["state"] = false;
+
             console.log("playData", playData);
 
             playData.value && (playData.value.state = false);
@@ -270,16 +285,7 @@ const search = createApp({
         let studentIndex = ref(0);
         let zeroOrderStudents = ref({});
 
-        let studentList = ref([
+        let studentList = ref([]);
-            {
-                src: "https://app.gter.net/image/miniApp/mp3/1.mp3",
-                img: "./static/img/student-img.png",
-            },
-            {
-                src: "https://app.gter.net/image/miniApp/mp3/2.mp3",
-                img: "./static/img/student-img-2.png",
-            },
-        ]);
 
         const cutStudent = (order) => {
             // 找到目标元素和第一个元素
@@ -287,7 +293,11 @@ const search = createApp({
             // 交换order值
             if (target && first && target !== first) [target.order, first.order] = [first.order, target.order];
 
+            console.log("studentList.value", studentList.value);
+
             zeroOrderStudents.value = target;
+
+            target.playurl ? manageAudio(target.playurl, "student") : getPlayUrl(0, "student");
         };
 
         // 响应式数据：音量值、是否静音
@@ -309,7 +319,7 @@ const search = createApp({
             volume.value = Math.abs(~~volumePercent);
 
             // 设置音频元素的音量（范围是0-1）
-            if (audioPlayer.value) audioPlayer.value.volume = volumePercent / 100;
+            if (audioPlayer.value) audioPlayer.value.volume = volume.value / 100;
         };
 
         // 处理音量进度条点击
@@ -322,17 +332,18 @@ const search = createApp({
             // 因为是垂直进度条，所以用clientY
             const clickPosition = rect.bottom - event.clientY;
             const percentage = (clickPosition / rect.height) * 100;
+            console.log("percentage", percentage);
 
             setVolumePercentage(percentage);
         };
 
+        let volumeShow = ref(false);
         // 处理音量进度条拖拽
         let isDragging = false;
 
         const startDrag = (event) => {
             isDragging = true;
             handleVolumeDrag(event);
-
             // 添加事件监听器
             document.addEventListener("mousemove", handleVolumeDrag);
             document.addEventListener("mouseup", stopDrag);
@@ -362,40 +373,39 @@ const search = createApp({
             document.removeEventListener("mouseup", stopDrag);
         };
 
-        onMounted(() => {
+        const handleVolumeShow = () => (volumeShow.value = true);
-            // 绑定音量控制相关事件
-            const progressBar = document.querySelector(".sound-control .progress");
-            if (progressBar) {
-                progressBar.addEventListener("click", handleVolumeClick);
 
-                // 找到进度条内的滑块元素（bar）并绑定拖拽事件
+        const handleVolumeHide = () => (volumeShow.value = false);
-                const volumeBar = progressBar.querySelector(".bar");
-                if (volumeBar) volumeBar.addEventListener("mousedown", startDrag);
-            }
-        });
 
         onUnmounted(() => {
-            // 清理音量控制相关事件
-            const progressBar = document.querySelector(".sound-control .progress");
-            if (progressBar) {
-                progressBar.removeEventListener("click", handleVolumeClick);
-
-                const volumeBar = progressBar.querySelector(".bar");
-                if (volumeBar) volumeBar.removeEventListener("mousedown", startDrag);
-            }
-
             // 确保移除所有拖拽相关事件
             document.removeEventListener("mousemove", handleVolumeDrag);
             document.removeEventListener("mouseup", stopDrag);
+            document.removeEventListener("mousemove", handleBarDragBottomDrag);
+            document.removeEventListener("mouseup", stopBarDragBottom);
         });
 
+        const ajax = (url, data = {}) => {
+            if (["localhost", "127.0.0.1"].includes(location.hostname)) data["authorization"] = "3338bf6a2e53dda872da3664a2560b25";
+
+            return new Promise(function (resolve, reject) {
+                axios
+                    .post(url, data, {
+                        emulateJSON: true,
+                        withCredentials: true,
+                    })
+                    .then(function (res) {
+                        var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data;
+                        resolve(data);
+                    });
+            });
+        };
+
         const ajaxget = (url, data) => {
             if (!data) data = {};
 
             if (["localhost", "127.0.0.1"].includes(location.hostname)) data["authorization"] = "3338bf6a2e53dda872da3664a2560b25";
 
-            url = url.indexOf("https://") == -1 ? projectBaseURL2 + url : url;
-
             return new Promise((resolve, reject) => {
                 axios
                     .get(url, {
@@ -404,24 +414,106 @@ const search = createApp({
                     })
                     .then((res) => {
                         var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data;
-
-                        if (data.code == 401) {
-                            openShowWindow();
-                            reject();
-                        }
-                        if (data.code == 201) creationAlertBox("error", data.message || data.msg);
-
                         resolve(data);
-                    })
-                    .catch((error) => {
-                        // console.log("resolve", resolve)
-
-                        if (error.response?.status == 401) openShowWindow();
-                        resolve("");
                     });
             });
         };
 
-        return { zeroOrderStudents, rePlay, playData, awardAudioList, changeInterval, awardMVList, bannerList, albumBoxRef, volume, handleVolumeClick, handleVolumeDrag, startDrag, stopDrag, toggleMute, isMuted, volume, cutStudent, studentList, studentIndex, scrollToPrevious, scrollToNext, changePointer, pointerIndex, visibleRef, studentRef, customRef, formatTime, currentTimeFormatted, durationFormatted, worksRef, introduceRef, customList, closeAll, manageAudio, progress, closePreview, openPreview, previewState, audioPlayer, text, trait, fastForward };
+        // 处理音量进度条拖拽
+        let isBarBottomDragging = false;
+
+        const startBarDragBottom = (event) => {
+            isBarBottomDragging = true;
+            handleBarDragBottomDrag(event);
+            // 添加事件监听器
+            document.addEventListener("mousemove", handleBarDragBottomDrag);
+            document.addEventListener("mouseup", stopBarDragBottom);
+        };
+
+        const stopBarDragBottom = () => {
+            isBarBottomDragging = false;
+            document.removeEventListener("mousemove", handleBarDragBottomDrag);
+            document.removeEventListener("mouseup", stopBarDragBottom);
+        };
+
+        const handleBarDragBottomClick = (event) => {
+            // 获取进度条元素
+            const progressBar = event.currentTarget;
+            const rect = progressBar.getBoundingClientRect();
+            const clickPosition = event.clientX - rect.left;
+            const percentage = clickPosition / rect.width;
+
+            // 限制百分比在0-100之间
+            const clampedPercentage = Math.max(0, Math.min(100, percentage));
+            updatePlay(clampedPercentage);
+        };
+
+        const handleBarDragBottomDrag = (event) => {
+            if (!isBarBottomDragging) return;
+
+            // 获取音量进度条元素
+            const progressBar = document.querySelector(".bottom-play .middle .progress-bar");
+            if (!progressBar) return;
+
+            const rect = progressBar.getBoundingClientRect();
+
+            // 计算拖拽位置相对于进度条的比例
+            let dragPosition = event.clientX - rect.left;
+            // 限制在进度条范围内
+            dragPosition = Math.max(0, Math.min(dragPosition, rect.width));
+
+            const percentage = dragPosition / rect.width;
+            updatePlay(percentage);
+        };
+
+        const updatePlay = (percentage) => {
+            if (!audioPlayer.value) return;
+            const duration = audioPlayer.value.duration || 0;
+            let newTime = duration * percentage;
+            newTime = Math.max(0, Math.min(duration, newTime));
+            audioPlayer.value.currentTime = newTime;
+            getProgress();
+        };
+
+        const getPlayUrl = (index, area) => {
+            console.log("index", index);
+            let id = null;
+            if (area == "student") {
+                const item = zeroOrderStudents.value;
+                console.log("item", item.id);
+                id = item.id;
+            }
+
+            ajax("https://pujianchaoyin.com/api/getMusicDetail", {
+                id,
+            }).then((res) => {
+                if (res.code != 200) return;
+                const data = res.data;
+                console.log("data", data);
+
+                zeroOrderStudents.value = { ...data, ...zeroOrderStudents.value };
+
+                manageAudio(data.playurl, area);
+
+                console.log(zeroOrderStudents.value, "zeroOrderStudents");
+            });
+        };
+
+        const cutSong = (type, order) => {
+            const listLength = studentList.value.length;
+            let newOrder = 0;
+
+            if (type === "up") {
+                // 上一首：order减1，如果小于0则设置为列表最后一个元素的order
+                newOrder = order - 1 < 0 ? listLength - 1 : order - 1;
+            } else if (type === "down") {
+                // 下一首：order加1，如果大于等于列表长度则设置为0
+                newOrder = order + 1 >= listLength ? 0 : order + 1;
+            }
+
+            cutStudent(newOrder);
+        };
+
+        return { cutSong, getPlayUrl, handleBarDragBottomClick, startBarDragBottom, volumeShow, handleVolumeHide, handleVolumeShow, zeroOrderStudents, rePlay, playData, awardAudioList, changeInterval, awardMVList, bannerList, albumBoxRef, volume, handleVolumeClick, handleVolumeDrag, startDrag, stopDrag, toggleMute, isMuted, 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");