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

调整CSS样式改善元素对齐和文本换行优化音频播放器进度条交互逻辑移除未使用的代码和console.log 添加窗口大小变化的事件监听修复标签云重新初始化问题
2025-09-25 18:53:56 +08:00
parent d61f57ed71
commit e378e383f6
6 changed files with 43 additions and 30 deletions
--- a/index.html
+++ b/index.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
    <head>
-
        <!-- 基本元数据 -->
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
@@ -12,13 +11,13 @@
        <meta name="theme-color" content="#1e135e" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-        
+
        <!-- 网站标题和描述 -->
        <title>朴见潮音官网 - AI音乐创作先锋品牌</title>
        <meta name="description" content="朴见潮音是国内领先的AI音乐创作品牌，致力于通过人工智能技术推动音乐创作的创新与发展。" />
        <meta name="keywords" content="朴见潮音,AI音乐,人工智能音乐,音乐创作,AI作曲" />
        <meta name="author" content="朴见潮音" />
-        
+
        <!-- 社交媒体元数据 -->
        <meta property="og:title" content="朴见潮音官网 - AI音乐创作先锋品牌" />
        <meta property="og:description" content="朴见潮音是国内领先的AI音乐创作品牌，致力于通过人工智能技术推动音乐创作的创新与发展。" />
@@ -26,13 +25,12 @@
        <meta property="og:url" content="https://www.pujian.com" />
        <meta property="og:type" content="website" />
        <meta property="og:site_name" content="朴见潮音" />
-        
+
        <!-- 网站图标 -->
        <link rel="shortcut icon" href="./static/img/favicon.ico" type="image/x-icon" />
        <link rel="apple-touch-icon" href="./static/img/logo.png" />
        <link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" />

-        
        <script src="./static/js/vue.global.js"></script>
        <script src="./static/js/artplayer.js"></script>
        <script src="./static/js/axios.min.js"></script>
@@ -193,7 +191,7 @@
                        <img class="bj" src="./static/img/custom-bj-1.png" />
                        <img class="bj" src="./static/img/custom-bj-2.png" />
                        <img class="bj" src="./static/img/custom-bj-1.png" />
-                    </div> 
+                    </div>
                </div>
            </div>

@@ -252,8 +250,8 @@
                <div class="bottom-middle flexcenter">
                    <div class="flexacenter" style="margin-bottom: 10px">
                        <div class="time-display">{{ currentTimeFormatted }}</div>
-                        <div class="progress-bar flexacenter" @click="handleBarDragBottomClick">
-                            <div class="bar white" :style="{ width: progress + '%' }" @mousedown="startBarDragBottom"></div>
+                        <div class="progress-bar flexacenter" @mousedown="startBarDragBottom">
+                            <div class="bar white" :style="{ width: progress + '%' }"></div>
                            <div class="bar black flex1"></div>
                        </div>
                        <div class="time-display">{{ durationFormatted }}</div>
--- a/static/css/index.css
+++ b/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;
--- a/static/css/index.less
+++ b/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 {
--- a/static/js/guess.js
+++ b/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 };
--- a/static/js/index.js
+++ b/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");
--- a/static/js/song-request-station.js
+++ b/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();