-
+
{{ durationFormatted }}
diff --git a/static/css/index.css b/static/css/index.css
index 63d8fe0..48deff5 100644
--- 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;
diff --git a/static/css/index.less b/static/css/index.less
index 604440a..56846cc 100644
--- 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 {
diff --git a/static/js/guess.js b/static/js/guess.js
index d528e29..bb6517c 100644
--- 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 };
diff --git a/static/js/index.js b/static/js/index.js
index 6c05890..47d6436 100644
--- 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");
diff --git a/static/js/song-request-station.js b/static/js/song-request-station.js
index 0c58573..2718a7d 100644
--- 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();
