A1300399510/PC-official
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
调整CSS样式改善元素对齐和文本换行
优化音频播放器进度条交互逻辑
移除未使用的代码和console.log
添加窗口大小变化的事件监听
修复标签云重新初始化问题
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-25 18:53:56 +08:00
parent d61f57ed71
commit e378e383f6
6 changed files with 43 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -1,7 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- 基本元数据 --> <!-- 基本元数据 -->
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
@@ -32,7 +31,6 @@
<link rel="apple-touch-icon" href="./static/img/logo.png" /> <link rel="apple-touch-icon" href="./static/img/logo.png" />
<link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" /> <link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" />
<script src="./static/js/vue.global.js"></script> <script src="./static/js/vue.global.js"></script>
<script src="./static/js/artplayer.js"></script> <script src="./static/js/artplayer.js"></script>
<script src="./static/js/axios.min.js"></script> <script src="./static/js/axios.min.js"></script>
@@ -252,8 +250,8 @@
<div class="bottom-middle flexcenter"> <div class="bottom-middle flexcenter">
<div class="flexacenter" style="margin-bottom: 10px"> <div class="flexacenter" style="margin-bottom: 10px">
<div class="time-display">{{ currentTimeFormatted }}</div> <div class="time-display">{{ currentTimeFormatted }}</div>
<div class="progress-bar flexacenter" @click="handleBarDragBottomClick"> <div class="progress-bar flexacenter" @mousedown="startBarDragBottom">
<div class="bar white" :style="{ width: progress + '%' }" @mousedown="startBarDragBottom"></div> <div class="bar white" :style="{ width: progress + '%' }"></div>
<div class="bar black flex1"></div> <div class="bar black flex1"></div>
</div> </div>
<div class="time-display">{{ durationFormatted }}</div> <div class="time-display">{{ durationFormatted }}</div>

2
static/css/index.css
View File

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

3
static/css/index.less
View File

@@ -91,6 +91,8 @@
.award { .award {
flex-direction: column; flex-direction: column;
margin-bottom: 177px; margin-bottom: 177px;
align-items: flex-start;
.title { .title {
width: 101px; width: 101px;
height: 24px; height: 24px;
@@ -721,6 +723,7 @@
font-size: 14px; font-size: 14px;
color: #555555; color: #555555;
margin-bottom: 18px; margin-bottom: 18px;
white-space: pre-wrap;
} }
.progress-bar { .progress-bar {

18
static/js/guess.js
View File

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

15
static/js/index.js
View File

@@ -1,5 +1,5 @@
const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue; const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue;
const search = createApp({ createApp({
setup() { setup() {
const trait = [ const trait = [
{ {
@@ -232,8 +232,6 @@ const search = createApp({
const manageAudio = (src, area) => { const manageAudio = (src, area) => {
const audio = audioPlayer.value; const audio = audioPlayer.value;
console.log("src, area", src, area);
closeAll(); closeAll();
setTimeout(() => { setTimeout(() => {
@@ -262,7 +260,7 @@ const search = createApp({
playData.value = { ...zeroOrderStudents.value, area }; playData.value = { ...zeroOrderStudents.value, area };
} }
}); });
}, 500); }, 800);
}; };
// 重新播放 // 重新播放
@@ -526,6 +524,13 @@ const search = createApp({
else getPlayUrl(index, area); 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 }; 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"); }).mount("#appIndex");

17
static/js/song-request-station.js
View File

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