no message

static/css/index.css

@@ -180,6 +180,7 @@
   width: 800px;
   height: 448px;
   overflow: hidden;
+  cursor: pointer;
 }
 .content .introduce .box .album .album-box .item {
   width: 800px;
@@ -928,10 +929,15 @@
   height: 24px;
   cursor: pointer;
 }
+.content .bottom-play .bottom-box .middle .time-display {
+  color: #fff;
+  font-size: 12px;
+  line-height: 10px;
+}
 .content .bottom-play .bottom-box .middle .progress-bar {
   height: 10px;
   width: 500px;
-  margin: 0 auto;
+  margin: 0 10px;
 }
 .content .bottom-play .bottom-box .middle .progress-bar .bar {
   height: 4px;

static/css/index.less

@@ -200,6 +200,7 @@
                     width: 800px;
                     height: 448px;
                     overflow: hidden;
+                    cursor: pointer;
 
                     .item {
                         width: 800px;
@@ -1081,10 +1082,16 @@
                     }
                 }
 
+                .time-display {
+                    color: #fff;
+                    font-size: 12px;
+                    line-height: 10px;
+                }
+
                 .progress-bar {
                     height: 10px;
                     width: 500px;
-                    margin: 0 auto;
+                    margin: 0 10px;
                     .bar {
                         height: 4px;
                         background-color: rgba(255, 255, 255, 1);

static/js/index.js

@@ -32,6 +32,16 @@ const search = createApp({
         const audioPlayer = ref(null);
 
         const progress = ref(20); // 播放进度百分比
+        // 响应式变量存储当前播放时间和总时长
+        const currentTimeFormatted = ref('00:00');
+        const durationFormatted = ref('00:00');
+        
+        // 格式化时间函数：将秒数转换为 MM:SS 格式
+        const formatTime = (seconds) => {
+            const mins = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        };
         // 更新进度的函数
         const getProgress = () => {
             if (!audioPlayer.value) return;
@@ -39,6 +49,10 @@ const search = createApp({
             const duration = audioPlayer.value.duration || 0;
             const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
             setProgress(progress, audioPlayer.value.src);
+            
+            // 更新时间显示
+            currentTimeFormatted.value = formatTime(currentTime);
+            durationFormatted.value = formatTime(duration);
         };
 
         const setProgress = (val, src) => {
@@ -93,18 +107,27 @@ const search = createApp({
             ajaxget("https://pujianchaoyin.com/index/api").then((res) => {
                 if (res.code != 200) return;
                 const data = res.data;
-                console.log("data", data);
                 bannerList.value = data.banner;
                 awardMVList.value = data.awardMVList;
-                nextTick(() => {});
+                nextTick(() => {
+                    bannerSwiper();
+                });
             });
         };
 
         let bannerSwiperTimer = null;
         const bannerSwiper = () => {
             bannerSwiperTimer = setTimeout(() => {
+                let index = pointerIndex.value + 1;
+                if (index > bannerList.value.length - 1) index = 0;
+                changePointer(index);
+                bannerSwiper();
+            }, 3000);
+        };
 
-            }, 1000);
+        const changeInterval = (type) => {
+            if (type) clearTimeout(bannerSwiperTimer);
+            else bannerSwiper();
         };
 
         onMounted(() => {
@@ -210,7 +233,6 @@ const search = createApp({
         // 快进 和 后退 10秒
         const fastForward = (type = "fast", src, area) => {
             if (!audioPlayer.value) return;
-            console.log("src", src, "audioPlayer", audioPlayer.value);
             if (audioPlayer.value.src != src) {
                 manageAudio(src, area);
                 return;
@@ -472,6 +494,6 @@ const search = createApp({
             });
         };
 
-        return { awardMVList, bannerList, albumBoxRef, volume, handleVolumeClick, handleVolumeDrag, startDrag, stopDrag, toggleMute, isMuted, volume, cutStudent, studentList, studentIndex, scrollToPrevious, scrollToNext, changePointer, pointerIndex, visibleRef, studentRef, customRef, worksRef, introduceRef, customList, closeAll, manageAudio, progress, pauseAudio, playAudio, audioList, closePreview, openPreview, previewState, audioHeadState, pauseHead, playHead, audioPlayer, text, trait, fastForward };
+        return { 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, pauseAudio, playAudio, audioList, closePreview, openPreview, previewState, audioHeadState, pauseHead, playHead, audioPlayer, text, trait, fastForward };
     },
 }).mount("#appIndex");