fix: 修复页面布局和交互问题

调整CSS样式改善元素对齐和文本换行
优化音频播放器进度条交互逻辑
移除未使用的代码和console.log
添加窗口大小变化的事件监听
修复标签云重新初始化问题

static/css/index.css

@@ -80,6 +80,7 @@
 .content .introduce .box .info .award {
   flex-direction: column;
   margin-bottom: 177px;
+  align-items: flex-start;
 }
 .content .introduce .box .info .award .title {
   width: 101px;
@@ -620,6 +621,7 @@
   font-size: 14px;
   color: #555555;
   margin-bottom: 18px;
+  white-space: pre-wrap;
 }
 .content .custom .list .item .info .progress-bar {
   width: 260px;

static/css/index.less

@@ -91,6 +91,8 @@
                 .award {
                     flex-direction: column;
                     margin-bottom: 177px;
+                    align-items: flex-start;
+
                     .title {
                         width: 101px;
                         height: 24px;
@@ -721,6 +723,7 @@
                         font-size: 14px;
                         color: #555555;
                         margin-bottom: 18px;
+                        white-space: pre-wrap;
                     }
 
                     .progress-bar {
@@ -788,7 +791,7 @@
                     width: 240px;
                     height: 240px;
                     filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
-                    // transition: all 0.3s ease-in-out;   
+                    // transition: all 0.3s ease-in-out;
                     border-radius: 10px;
 
                     // &:hover {

static/js/guess.js

@@ -1,5 +1,5 @@
 const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
-const search = createApp({
+createApp({
     setup() {
         const musicData = ref([
             ["A组 世界在转动.MP3", "A组《来吧，占领我的无私》.MP3"],
@@ -14,6 +14,11 @@ const search = createApp({
         let isAnswer = ref(false);
 
         onMounted(() => {
+            window.addEventListener("resize", () => {
+                // 重新计算 detailsHeight
+                const windowHeight = window.innerHeight;
+                detailsHeight.value = Math.max(windowHeight - 379 - 40, 350);
+            });
             init();
 
             // 获取可是窗口高度
@@ -74,8 +79,6 @@ const search = createApp({
         let autoTimer = null;
         const audioEnd = (item) => {
             const nextItem = findNextItem(audiozSrc.value);
-            console.log("nextItem", nextItem);
-
             if (nextItem) autoTimer = setTimeout(() => play(nextItem), 500);
             audiozSrc.value = "";
         };
@@ -144,18 +147,11 @@ const search = createApp({
 
         let fluctuate = ref([]);
 
-        onMounted(() => {
-            // setInterval(() => {
-            //     randomFluctuate();
-            // }, 150);
-        });
-
         const randomFluctuate = () => {
-            fluctuate.value = []
+            fluctuate.value = [];
             for (let i = 0; i < 30; i++) {
                 fluctuate.value.push(Math.floor(Math.random() * 10) + 1);
             }
-            console.log("fluctuate", fluctuate.value);
         };
 
         return { fluctuate, isAnswer, detailsHeight, detailsRef, audioEnd, playSucceed, stop, audiozSrc, audioPlayer, backHome, select, loseState, winState, replyState, play, step, begin, musicData, nextStep };

static/js/index.js

@@ -1,5 +1,5 @@
-const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
-const search = createApp({
+const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue;
+createApp({
     setup() {
         const trait = [
             {
@@ -232,8 +232,6 @@ const search = createApp({
         const manageAudio = (src, area) => {
             const audio = audioPlayer.value;
 
-            console.log("src, area", src, area);
-
             closeAll();
 
             setTimeout(() => {
@@ -262,7 +260,7 @@ const search = createApp({
                         playData.value = { ...zeroOrderStudents.value, area };
                     }
                 });
-            }, 500);
+            }, 800);
         };
 
         // 重新播放
@@ -526,6 +524,13 @@ const search = createApp({
             else getPlayUrl(index, area);
         };
 
+
+        // 监听 previewState 如果为 true body.style.overflow = 'hidden'
+        watch(previewState, (newVal) => {
+            if (newVal) document.body.style.overflow = 'hidden';
+            else document.body.style.overflow = 'auto';
+        })
+
         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");

static/js/song-request-station.js

@@ -1,5 +1,5 @@
 const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
-const search = createApp({
+createApp({
     setup() {
         // 标签数据
         let tags = ref([]);
@@ -16,6 +16,9 @@ const search = createApp({
             return { containerWidth, containerHeight };
         };
 
+        let bubbleContainer = null;
+        let bubbleContainerFill = null;
+
         // 初始创建标签
         const init = () => {
             let tagsData = [
@@ -446,10 +449,13 @@ const search = createApp({
 
             tagsFill.value = tagAll;
 
+            bubbleContainer?.[0]?.destroy();
+            bubbleContainerFill?.[0]?.destroy();
+
             nextTick(() => {
                 const { containerWidth, containerHeight } = getContainerDimensions();
-                
-                tagCloud({
+
+                bubbleContainerFill = tagCloud({
                     selector: "#bubbleContainerFill", // 元素选择器，id 或 class
                     radius: [containerWidth / 2, containerHeight / 2], // 滚动横/纵轴半径, 默认60，单位px，取值60，[60]，[60, 60]
                     mspeed: "normal", // 滚动最大速度, 取值: slow, normal(默认), fast
@@ -459,7 +465,7 @@ const search = createApp({
                     multicolour: false, // 彩色字体，颜色随机，取值：true(默认),false
                 });
 
-                tagCloud({
+                bubbleContainer = tagCloud({
                     selector: "#bubbleContainer", // 元素选择器，id 或 class
                     radius: [containerWidth / 2, containerHeight / 2],
                     mspeed: "normal",
@@ -488,6 +494,10 @@ const search = createApp({
         onMounted(() => {
             init();
 
+            window.addEventListener("resize", () => {
+                init();
+            });
+
             // 添加进度更新事件监听器
             if (audioPlayer.value) {
                 volume.value = audioPlayer.value.volume * 100;
@@ -704,7 +714,6 @@ const search = createApp({
             // 获取音量进度条元素
             const progressBar = document.querySelector(".bottom-play .bottom-middle .progress-bar");
             if (!progressBar) return;
-            console.log("14111111111");
 
             const rect = progressBar.getBoundingClientRect();