no message

create.html

@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>朴见潮音</title>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
-        <link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" />
+        <link rel="icon" href="/static/img/favicon.ico" type="image/x-icon" />
 
         <style>
             /* 全局样式 */

index.html

@@ -49,20 +49,20 @@
                         </div>
                         <div class="award flexflex">
                             <img class="title" src="./static/img/award-winning-works.png" />
-                            <img class="name" :src="bannerList[pointerIndex]?.title_pic" />
+                            <img class="name" v-if="bannerList[pointerIndex]?.title_pic" :src="bannerList[pointerIndex]?.title_pic" />
                             <div class="explain">{{ bannerList[pointerIndex]?.desc }}</div>
                         </div>
                     </div>
-                    <div class="album">
+                    <div class="album" @mouseover="changeInterval(true)" @mouseleave="changeInterval(false)">
                         <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">
+                            <div class="item" v-for="(item, index) in bannerList" :key="index" @click="openPreview(item.playurl)">
                                 <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" />
                                 <img class="bj bj5" src="./static/img/album-bj5.svg" />
-                                <img v-if="!audioHeadState" class="play" @click="openPreview(item.playurl)" src="./static/img/play-white-icon.svg" />
+                                <img class="play" src="./static/img/play-white-icon.svg" />
                             </div>
                         </div>
                     </div>
@@ -227,9 +227,13 @@
                             <img v-else class="play" @click="manageAudio(url, 'works')" src="./static/img/play-white-icon.svg" />
                             <img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast', url, 'works')" />
                         </div>
-                        <div class="progress-bar flexacenter">
-                            <div class="bar white" :style="{ width: progress + '%' }"></div>
-                            <div class="bar black flex1"></div>
+                        <div class="flexacenter">
+                            <div class="time-display">{{ currentTimeFormatted }}</div>
+                            <div class="progress-bar flexacenter">
+                                <div class="bar white" :style="{ width: progress + '%' }"></div>
+                                <div class="bar black flex1"></div>
+                            </div>
+                            <div class="time-display">{{ durationFormatted }}</div>
                         </div>
                     </div>
 

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");