diff --git a/2.html b/2.html index d60c878..26f7a3e 100644 --- a/2.html +++ b/2.html @@ -1,95 +1,95 @@ - - - - - - CSS实现卡片边框渐变动画 - - - - - -
- 苏苏就是小苏苏888 -
- - - \ No newline at end of file + + + + Item Appear Animation + + + + +
+
+
+ + + + diff --git a/guess.html b/guess.html index d991fa0..e3c82bd 100644 --- a/guess.html +++ b/guess.html @@ -1,132 +1,124 @@ + + + - - - + 朴见潮音 - 猜歌 + + + - 朴见潮音 - 猜歌 - - - + + - - + +
+ +
+ +
+ + +
+ + + + + + + + + + + + + + +
- -
- -
- -
- - -
- - - - - - - - - - - - - - -
- -
- - - - - - -
- -
- -
连对3题有奖品哦，快来挑战吧！
- -
- -
-
- -
-
-
- - - -
- - - {{ isAnswer ? song : '' }} +
+ + + + + + + +
+ +
+ +
连对3题有奖品哦，快来挑战吧！
+
-
请问哪首歌是真人唱的？
-
- +
+ +
+
+
+ + + +
-
-
- +
+
请问哪首歌是真人唱的？
+
+ + +
+
+ +
恭喜答对！马上进入下一题…
+
+
+ +
+ + + +
+ +
恭喜答对！马上进入下一题…
+
+ +
+ + 返回首页 +
+
+ +
+
+
+ +
+
很遗憾没有答对…
+
+ +
+ + 返回首页
-
恭喜答对！马上进入下一题…
- -
- - - -
- -
恭喜答对！马上进入下一题…
-
- -
- - 返回首页 -
-
- -
-
-
- -
-
很遗憾没有答对…
-
- - -
- - 返回首页 -
-
-
-
- - - - \ No newline at end of file + + + diff --git a/song-request-station.html b/song-request-station.html index 0306d6a..cb33409 100644 --- a/song-request-station.html +++ b/song-request-station.html @@ -31,6 +31,7 @@ + diff --git a/static/css/guess.css b/static/css/guess.css index b8a6748..013af07 100644 --- a/static/css/guess.css +++ b/static/css/guess.css @@ -218,7 +218,6 @@ left: 997px; } .container .container-box .details { - flex: 1; max-height: 500px; margin-bottom: 40px; width: 1200px; @@ -228,6 +227,7 @@ z-index: 1; padding: 3px; overflow: hidden; + height: var(--base-height); } .container .container-box .details::after { content: ""; @@ -268,6 +268,29 @@ left: 3px; bottom: 3px; } +.container .container-box .details .fluctuate-box { + position: absolute; + left: 10px; + top: 10px; + display: flex; + align-items: self-end; + z-index: 100; +} +.container .container-box .details .fluctuate-box .item { + height: 100%; + width: 12px; + display: flex; + flex-direction: column; + justify-content: flex-end; + margin-right: 2px; +} +.container .container-box .details .fluctuate-box .item .item-item { + width: 100%; + height: 5px; + border-radius: 2px; + background-color: #7d4bf8; + margin-top: 2px; +} .container .container-box .details .fluctuate-icon { width: 400px; height: 86px; @@ -293,6 +316,7 @@ .container .container-box .details .start-box .start-right { display: flex; flex-direction: column; + align-items: flex-start; } .container .container-box .details .start-box .start-right .suspect-text { height: calc(var(--base-height) * 0.112); @@ -306,7 +330,6 @@ margin-bottom: calc(var(--base-height) * 0.058); } .container .container-box .details .start-box .start-right .start-icon { - width: fit-content; height: calc(var(--base-height) * 0.138); cursor: pointer; } @@ -362,8 +385,8 @@ border-radius: 20px; } .container .container-box .details .answer-box .list .item .img-box.show { - background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846); - animation: bg 2.5s infinite linear; + background: linear-gradient(var(--rotate), #db4743, #ffffff 43%, #c28846); + animation: bg 1.3s infinite linear; } @property --rotate { syntax: ""; diff --git a/static/css/guess.less b/static/css/guess.less index ee93108..2962d4b 100644 --- a/static/css/guess.less +++ b/static/css/guess.less @@ -250,7 +250,7 @@ .details { // height: 500px; - flex: 1; + // flex: 1; max-height: 500px; margin-bottom: 40px; width: 1200px; @@ -260,6 +260,7 @@ z-index: 1; padding: 3px; overflow: hidden; + height: var(--base-height); &::after { content: ""; @@ -306,6 +307,32 @@ bottom: 3px; } + .fluctuate-box { + position: absolute; + left: 10px; + top: 10px; + display: flex; + align-items: self-end; + z-index: 100; + + .item { + height: 100%; + width: 12px; + display: flex; + flex-direction: column; + justify-content: flex-end; + margin-right: 2px; + + .item-item { + width: 100%; + height: 5px; + border-radius: 2px; + background-color: #7d4bf8; + margin-top: 2px; + } + } + } + .fluctuate-icon { width: 400px; height: 86px; @@ -323,7 +350,6 @@ left: 0; display: flex; - .microphone { // width: 326px; // height: 326px; @@ -338,7 +364,7 @@ .start-right { display: flex; flex-direction: column; - + align-items: flex-start; .suspect-text { // height: 56px; // margin-top: 136px; @@ -359,12 +385,11 @@ } .start-icon { - width: fit-content; + // width: fit-content; height: calc(var(--base-height) * 0.138); cursor: pointer; } } - } .answer-box { @@ -444,10 +469,9 @@ z-index: 1; border-radius: 20px; - &.show { - background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846); - animation: bg 2.5s infinite linear; + background: linear-gradient(var(--rotate), #db4743, #ffffff 43%, #c28846); + animation: bg 1.3s infinite linear; } @property --rotate { @@ -466,7 +490,6 @@ } } - &::after { content: ""; z-index: -1; @@ -500,9 +523,6 @@ } } - - - .select-me { // width: 150px; // height: 64px; @@ -713,4 +733,4 @@ /* 列表排序动画（可选） */ .slide-move { transition: transform 0.3s ease; -} \ No newline at end of file +} diff --git a/static/css/index.css b/static/css/index.css index fa5697e..fa1edf8 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -175,6 +175,8 @@ z-index: 10; flex-direction: column; align-items: center; + height: 448px; + justify-content: space-between; } .content .introduce .box .sidebar .pointer { margin-bottom: 192px; diff --git a/static/css/index.less b/static/css/index.less index b8bf231..dc90d70 100644 --- a/static/css/index.less +++ b/static/css/index.less @@ -202,6 +202,8 @@ z-index: 10; flex-direction: column; align-items: center; + height: 448px; + justify-content: space-between; .pointer { margin-bottom: 192px; .item { diff --git a/static/img/works-title.png b/static/img/works-title.png index 12edd98..2b5c432 100644 Binary files a/static/img/works-title.png and b/static/img/works-title.png differ diff --git a/static/js/guess.js b/static/js/guess.js index 2eb1778..d528e29 100644 --- a/static/js/guess.js +++ b/static/js/guess.js @@ -8,113 +8,156 @@ const search = createApp({ ]); let step = ref(null); // null 是未开始 0 是第一题 - let detailsHeight = ref(500) - const detailsRef = ref(null) + let detailsHeight = ref(500); + const detailsRef = ref(null); - let isAnswer = ref(false) + let isAnswer = ref(false); onMounted(() => { - console.log("init"); init(); - console.log("detailsRef", detailsRef.value); + // 获取可是窗口高度 + const windowHeight = window.innerHeight; + detailsHeight.value = Math.max(windowHeight - 379 - 40, 350); const searchParams = new URLSearchParams(window.location.search); - isAnswer.value = searchParams.has('answer') ? true : false; - - nextTick(() => { - if (detailsRef.value) { - detailsHeight.value = detailsRef.value.clientHeight - console.log(detailsHeight.value); - } - }) - + isAnswer.value = searchParams.has("a") ? true : false; }); const init = () => { musicData.value.forEach((item) => { item.sort(() => Math.random() - 0.5); }); - - console.log(musicData.value); }; const begin = () => { step.value = 0; + play(musicData.value[0][0]); }; // 添加一个方法来切换到下一题 const nextStep = () => { step.value++; - }; - const audioPlayer = ref(null) - const audiozSrc = ref("") + play(musicData.value[step.value][0]); + }; + const audioPlayer = ref(null); + const audiozSrc = ref(""); const play = (item) => { - console.log("item", item); - audioPlayer.value.src = './static/mp3/guess/' + item - audioPlayer.value.play() - - audiozSrc.value = item + clearTimeout(autoTimer); + audioPlayer.value.src = "./static/mp3/guess/" + item; + audioPlayer.value.play(); + audiozSrc.value = item; }; const stop = () => { - audioPlayer.value.pause() - audiozSrc.value = "" - } + audioPlayer.value.pause(); + audiozSrc.value = ""; + }; const playSucceed = () => { - audioPlayer.value.src = './static/mp3/guess/succeed.mp3' - audioPlayer.value.play() - } + audioPlayer.value.src = "./static/mp3/guess/succeed.mp3"; + audioPlayer.value.play(); + }; + + const playTriumph = () => { + audioPlayer.value.src = "./static/mp3/guess/triumph.mp3"; + audioPlayer.value.play(); + }; + const playLose = () => { - audioPlayer.value.src = './static/mp3/guess/lose.mp3' - audioPlayer.value.play() - } + audioPlayer.value.src = "./static/mp3/guess/lose.mp3"; + audioPlayer.value.play(); + }; - const audioEnd = () => { - console.log("结束"); + let autoTimer = null; + const audioEnd = (item) => { + const nextItem = findNextItem(audiozSrc.value); + console.log("nextItem", nextItem); - audiozSrc.value = "" - } + if (nextItem) autoTimer = setTimeout(() => play(nextItem), 500); + audiozSrc.value = ""; + }; const select = (item, index) => { - stop() + stop(); if (item.indexOf("《") !== -1) { - playSucceed() if (step.value == musicData.value.length - 1) { - winState.value = true + playTriumph(); + winState.value = true; } else { - replyState.value = true - autoSkip() + playSucceed(); + replyState.value = true; + autoSkip(); } } else { - loseState.value = true - playLose() - } - } + loseState.value = true; + playLose(); - let replyState = ref(false) - let winState = ref(false) - let loseState = ref(false) + // 开启一个定时器 + loseTimer = setTimeout(() => backHome(), 5000); + } + }; + + let replyState = ref(false); + let winState = ref(false); + let loseState = ref(false); + let loseTimer = null; const autoSkip = () => { setTimeout(() => { - replyState.value = false - nextStep() - }, 2000) - } + replyState.value = false; + nextStep(); + }, 2000); + }; const backHome = () => { - step.value = null - replyState.value = false - winState.value = false - loseState.value = false - } + clearTimeout(loseTimer); + init(); + step.value = null; + replyState.value = false; + winState.value = false; + loseState.value = false; + }; + const findNextItem = (str) => { + // 遍历二维数组的每一项 + for (let i = 0; i < musicData.value.length; i++) { + const currentArray = musicData.value[i]; + // 在当前数组中查找目标字符串的索引 + const index = currentArray.indexOf(str); + // 如果找到且不是数组中的最后一个元素，则返回null + if (index !== -1) { + // 检查是否有下一个元素 + if (index < currentArray.length - 1) { + return currentArray[index + 1]; + } else { + return ""; + } + } + } + // 如果在整个二维数组中都找不到该字符串 + return ""; + }; - return { isAnswer, detailsHeight, detailsRef, audioEnd, playSucceed, stop, audiozSrc, audioPlayer, backHome, select, loseState, winState, replyState, play, step, begin, musicData, nextStep }; + let fluctuate = ref([]); + + onMounted(() => { + // setInterval(() => { + // randomFluctuate(); + // }, 150); + }); + + const randomFluctuate = () => { + 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 }; }, }).mount("#guess"); diff --git a/static/js/song-request-station.js b/static/js/song-request-station.js index 14fd342..0c58573 100644 --- a/static/js/song-request-station.js +++ b/static/js/song-request-station.js @@ -525,8 +525,8 @@ const search = createApp({ setTimeout(() => { console.log("item", item); if (audio?.src != item.path) audio.src = item.path; - // audio.src = "https://app.gter.net/image/miniApp/mp3/1.mp3"; - audio.src = "/static/mp3/1.MP3"; + audio.src = "https://app.gter.net/image/miniApp/mp3/1.mp3"; + // audio.src = "/static/mp3/1.MP3"; audio.play().then(() => (playData.value = { ...item, state: true })); }, 500); }; diff --git a/static/mp3/guess/triumph.mp3 b/static/mp3/guess/triumph.mp3 new file mode 100644 index 0000000..ef2c97c Binary files /dev/null and b/static/mp3/guess/triumph.mp3 differ