feat(guess): 添加猜歌游戏音频播放和结果反馈功能
- 新增音频播放控制逻辑，支持播放、暂停和结束事件 - 添加答对/答错音效和视觉反馈 - 实现答题结果状态管理（正确、错误、胜利） - 优化界面布局和响应式设计 - 新增返回首页功能 - 添加答案模式显示选项
This commit is contained in:
A1300399510
95
2.html
Normal file
95
2.html
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>CSS实现卡片边框渐变动画</title>
|
||||||
|
</head>
|
||||||
|
<link rel="stylesheet" href="../common.css" />
|
||||||
|
<style>
|
||||||
|
/* 引入字体 */
|
||||||
|
@import url("https://fonts.googleapis.com/css?family=Amatic+SC");
|
||||||
|
|
||||||
|
body {
|
||||||
|
/* 添加透视效果 */
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
perspective: 1800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 300px;
|
||||||
|
height: 200px;
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 0 10px 20px 20px rgba(0, 0, 0, 0.17);
|
||||||
|
/* 修改角度为--rotate */
|
||||||
|
background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846);
|
||||||
|
/* 添加旋转动画 */
|
||||||
|
animation: bg 2.5s infinite linear;
|
||||||
|
position: relative;
|
||||||
|
/* transform: rotateX(10deg) rotateY(15deg); */
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 296px;
|
||||||
|
height: 196px;
|
||||||
|
left: calc(50% - 148px);
|
||||||
|
top: calc(50% - 98px);
|
||||||
|
background: #222;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card span {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 1;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-family: "Amatic SC";
|
||||||
|
cursor: default;
|
||||||
|
/* 添加过渡效果 */
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* span添加hover */
|
||||||
|
.card:hover span {
|
||||||
|
background: linear-gradient(45deg, #ff1d74, #e3820c 43%, #c28846);
|
||||||
|
color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 定义@property */
|
||||||
|
@property --rotate {
|
||||||
|
syntax: "<angle>";
|
||||||
|
initial-value: 0deg;
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bg {
|
||||||
|
0% {
|
||||||
|
--rotate: 0deg;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
--rotate: 360deg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="card">
|
||||||
|
<span>苏苏就是小苏苏888</span>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
197
guess.html
197
guess.html
@@ -1,105 +1,132 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
|
|
||||||
<title>朴见潮音 - 猜歌</title>
|
<head>
|
||||||
<link rel="stylesheet" href="./static/css/guess.css" />
|
<meta charset="UTF-8" />
|
||||||
<script src="./static/js/vue.global.js"></script>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" />
|
|
||||||
|
|
||||||
<style>
|
<title>朴见潮音 - 猜歌</title>
|
||||||
[v-cloak] {
|
<link rel="stylesheet" href="./static/css/guess.css" />
|
||||||
display: none;
|
<script src="./static/js/vue.global.js"></script>
|
||||||
}
|
<link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" />
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container" id="guess" v-cloak>
|
|
||||||
<div class="container-box mar1200">
|
|
||||||
<img class="logo" src="./static/img/logo.png" alt="" />
|
|
||||||
<div class="header">
|
|
||||||
<img class="halo" src="./static/img/halo.png" />
|
|
||||||
<img class="record-black" src="./static/img/record-black.svg" />
|
|
||||||
<div class="record-circle"></div>
|
|
||||||
<img class="star-icon" src="./static/img/star-icon.png" alt="" />
|
|
||||||
<img class="bj-2" src="./static/img/guess/guess-bj-2.svg" alt="" />
|
|
||||||
<img class="love-little" src="./static/img/guess/guess-love-little.svg" alt="" />
|
|
||||||
<img class="music-icon" src="./static/img/music-icon.svg" alt="" />
|
|
||||||
<img class="bj" src="./static/img/guess/guess-bj.svg" alt="" />
|
|
||||||
<img class="love-big" src="./static/img/guess/guess-love-big.svg" alt="" />
|
|
||||||
<img class="music-score" src="./static/img/music-score.png" />
|
|
||||||
<img class="question" src="./static/img/guess/question-mark.png" />
|
|
||||||
<img class="text" src="./static/img/guess/guess-text.svg" />
|
|
||||||
<img class="face" src="./static/img/smiling-face.png" />
|
|
||||||
<img class="star-icon-2" src="./static/img/star-icon-2.png" />
|
|
||||||
<img class="ai-music" src="./static/img/ai-music.png" />
|
|
||||||
<img class="green-glow" src="./static/img/green-glow.png" />
|
|
||||||
<img class="shadow" src="./static/img/shadow.png" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="details">
|
<style>
|
||||||
<img class="ray-light ray-light-left" src="./static/img/guess/ray-light.svg" />
|
[v-cloak] {
|
||||||
<img class="ray-light ray-light-right" src="./static/img/guess/ray-light.svg" />
|
display: none;
|
||||||
<img class="bj-check" src="./static/img/guess/bj-check.svg" alt="" />
|
}
|
||||||
<img class="bj-mask" src="./static/img/guess/bj-mask.svg" alt="" />
|
</style>
|
||||||
<img class="fluctuate-icon" src="./static/img/guess/fluctuate-icon.png" alt="" />
|
</head>
|
||||||
<transition-group name="slide-right" tag="div" class="transition-container">
|
|
||||||
<div class="start-box" v-show="step == null" key="start">
|
<body>
|
||||||
<img class="microphone" src="./static/img/guess/microphone.png" alt="" />
|
<div class="container" id="guess" v-cloak>
|
||||||
|
<audio ref="audioPlayer" preload="none" @ended="audioEnd"></audio>
|
||||||
|
<div class="container-box mar1200">
|
||||||
|
<img class="logo" src="./static/img/logo.png" alt="" />
|
||||||
|
<div class="header">
|
||||||
|
<img class="halo" src="./static/img/halo.png" />
|
||||||
|
<img class="record-black" src="./static/img/record-black.svg" />
|
||||||
|
<div class="record-circle"></div>
|
||||||
|
<img class="star-icon" src="./static/img/star-icon.png" alt="" />
|
||||||
|
<img class="bj-2" src="./static/img/guess/guess-bj-2.svg" alt="" />
|
||||||
|
<img class="love-little" src="./static/img/guess/guess-love-little.svg" alt="" />
|
||||||
|
<img class="music-icon" src="./static/img/music-icon.svg" alt="" />
|
||||||
|
<img class="bj" src="./static/img/guess/guess-bj.svg" alt="" />
|
||||||
|
<img class="love-big" src="./static/img/guess/guess-love-big.svg" alt="" />
|
||||||
|
<img class="music-score" src="./static/img/music-score.png" />
|
||||||
|
<img class="question" src="./static/img/guess/question-mark.png" />
|
||||||
|
<img class="text" src="./static/img/guess/guess-text.svg" />
|
||||||
|
<img class="face" src="./static/img/smiling-face.png" />
|
||||||
|
<img class="star-icon-2" src="./static/img/star-icon-2.png" />
|
||||||
|
<img class="ai-music" src="./static/img/ai-music.png" />
|
||||||
|
<img class="green-glow" src="./static/img/green-glow.png" />
|
||||||
|
<img class="shadow" src="./static/img/shadow.png" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="details" ref="detailsRef" :style="{'--base-height': `${ detailsHeight }px`}">
|
||||||
|
<img class="ray-light ray-light-left" src="./static/img/guess/ray-light.svg" />
|
||||||
|
<img class="ray-light ray-light-right" src="./static/img/guess/ray-light.svg" />
|
||||||
|
<img class="bj-check" src="./static/img/guess/bj-check.svg" alt="" />
|
||||||
|
<img class="bj-mask" src="./static/img/guess/bj-mask.svg" alt="" />
|
||||||
|
<img class="fluctuate-icon" src="./static/img/guess/fluctuate-icon.png" alt="" />
|
||||||
|
<transition-group name="slide-right" tag="div" class="transition-container">
|
||||||
|
<div class="start-box" v-show="step == null" key="start">
|
||||||
|
<img class="microphone" src="./static/img/guess/microphone.png" alt="" />
|
||||||
|
<div class="start-right">
|
||||||
<img class="suspect-text" src="./static/img/guess/suspect-text.png" alt="" />
|
<img class="suspect-text" src="./static/img/guess/suspect-text.png" alt="" />
|
||||||
<div class="hint">连对3题有奖品哦，快来挑战吧！</div>
|
<div class="hint">连对3题有奖品哦，快来挑战吧！</div>
|
||||||
<img class="start-icon" @click="begin" src="./static/img/guess/start-icon.png" alt="" />
|
<img class="start-icon" @click="begin" src="./static/img/guess/start-icon.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="answer-box flexacenter" :class="[`answer-${ index }`]" v-for="(item, index) in musicData" v-show="step == index" :key="'answer-' + index">
|
|
||||||
<img class="figure" :src="`./static/img/guess/figure-${ index + 1 }.png`" alt="" />
|
|
||||||
<div class="list flexflex">
|
|
||||||
<div class="item flexflex" v-for="(song, songIndex) in item" :key="'song-' + index + '-' + songIndex">
|
|
||||||
<img class="img" :src="`./static/img/guess/treasure-${ songIndex + 1 }.png`" alt="" />
|
|
||||||
<img class="icon" @click="play(song)" src="./static/img/play-white-icon.svg" alt="" />
|
|
||||||
<img class="select-me" src="./static/img/guess/select-me.png" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text">请问哪首歌是真人唱的？</div>
|
|
||||||
</div>
|
|
||||||
</transition-group>
|
|
||||||
|
|
||||||
<!-- <div class="masking reply flexflex">
|
|
||||||
<div class="hint-box flexacenter">
|
|
||||||
<div class="like">
|
|
||||||
<img class="icon" src="./static/img/guess/like-icon.svg" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="text">恭喜答对！马上进入下一题…</div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<div class="masking reply flexflex" v-if="false">
|
|
||||||
<div class="hint-box flexacenter">
|
|
||||||
<div class="like">
|
|
||||||
<img class="icon" src="./static/img/guess/like-icon.svg" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="text">恭喜答对！马上进入下一题…</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="answer-box flexacenter" :class="[`answer-${ index }`]"
|
||||||
|
v-for="(item, index) in musicData" v-show="step == index" :key="'answer-' + index">
|
||||||
|
<img class="figure" :src="`./static/img/guess/figure-${ index + 1 }.png`" alt="" />
|
||||||
|
<div class="list flexflex">
|
||||||
|
<div class="item flexflex " v-for="(song, songIndex) in item"
|
||||||
|
:key="'song-' + index + '-' + songIndex">
|
||||||
|
<div class="img-box" :class="{'show': audiozSrc == song}">
|
||||||
|
<img class="img" :src="`./static/img/guess/treasure-${ songIndex + 1 }.png`"
|
||||||
|
alt="" />
|
||||||
|
<img class="icon" v-if="audiozSrc == song" @click="stop"
|
||||||
|
src="./static/img/pause-white-icon.svg" alt="" />
|
||||||
|
<img class="icon" v-else @click="play(song)" src="./static/img/play-white-icon.svg"
|
||||||
|
alt="" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="masking win flexflex">
|
<img class="select-me" src="./static/img/guess/select-me.png" alt=""
|
||||||
<img class="win-icon" src="./static/img/guess/win-icon.png" alt="" />
|
@click="select(song, index)" />
|
||||||
<div class="hint-box flexacenter">
|
{{ isAnswer ? song : '' }}
|
||||||
<div class="like">
|
|
||||||
<img class="icon" src="./static/img/guess/like-icon.svg" alt="" />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="text">恭喜答对！马上进入下一题…</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="text">请问哪首歌是真人唱的？</div>
|
||||||
|
</div>
|
||||||
|
</transition-group>
|
||||||
|
|
||||||
<div class="index-btn">
|
<div class="masking reply flexflex" v-if="replyState">
|
||||||
<img class="index-icon" src="./static/img/guess/index-icon.svg" alt="" />
|
<div class="hint-box flexacenter">
|
||||||
返回首页
|
<div class="like">
|
||||||
|
<img class="icon" src="./static/img/guess/like-icon.svg" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="text">恭喜答对！马上进入下一题…</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="masking win flexflex" v-if="winState">
|
||||||
|
<img class="gold-left" src="./static/img/guess/gold-left.png" alt="" />
|
||||||
|
<img class="gold-right" src="./static/img/guess/gold-right.png" alt="" />
|
||||||
|
<img class="win-icon" src="./static/img/guess/win-icon.png" alt="" />
|
||||||
|
<div class="hint-box flexacenter">
|
||||||
|
<div class="like">
|
||||||
|
<img class="icon" src="./static/img/guess/like-icon.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="text">恭喜答对！马上进入下一题…</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="index-btn" @click="backHome">
|
||||||
|
<img class="index-icon" src="./static/img/guess/index-icon.svg" alt="" />
|
||||||
|
返回首页
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="masking lose flexflex" v-if="loseState">
|
||||||
|
<div class="hint-box flexacenter">
|
||||||
|
<div class="regret">
|
||||||
|
<img class="icon" src="./static/img/guess/regret-icon.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="text">很遗憾没有答对…</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="index-btn" @click="backHome">
|
||||||
|
<img class="index-icon" src="./static/img/guess/index-icon.svg" alt="" />
|
||||||
|
返回首页
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="./static/js/guess.js"></script>
|
</div>
|
||||||
</body>
|
<script src="./static/js/guess.js"></script>
|
||||||
</html>
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -3,6 +3,9 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
:root {
|
||||||
|
--base-height: 500px;
|
||||||
|
}
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #333333;
|
background-color: #333333;
|
||||||
@@ -215,7 +218,9 @@
|
|||||||
left: 997px;
|
left: 997px;
|
||||||
}
|
}
|
||||||
.container .container-box .details {
|
.container .container-box .details {
|
||||||
height: 500px;
|
flex: 1;
|
||||||
|
max-height: 500px;
|
||||||
|
margin-bottom: 40px;
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
@@ -267,7 +272,7 @@
|
|||||||
width: 400px;
|
width: 400px;
|
||||||
height: 86px;
|
height: 86px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 293px;
|
bottom: 120px;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
.container .container-box .details .start-box {
|
.container .container-box .details .start-box {
|
||||||
@@ -276,35 +281,33 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
.container .container-box .details .start-box .microphone {
|
.container .container-box .details .start-box .microphone {
|
||||||
width: 326px;
|
width: calc(var(--base-height) * 0.652);
|
||||||
height: 326px;
|
height: calc(var(--base-height) * 0.652);
|
||||||
position: absolute;
|
margin-top: calc(var(--base-height) * 0.186);
|
||||||
top: 93px;
|
margin-left: 163px;
|
||||||
left: 163px;
|
margin-right: 28px;
|
||||||
}
|
}
|
||||||
.container .container-box .details .start-box .suspect-text {
|
.container .container-box .details .start-box .start-right {
|
||||||
width: 493px;
|
display: flex;
|
||||||
height: 56px;
|
flex-direction: column;
|
||||||
position: absolute;
|
|
||||||
top: 136px;
|
|
||||||
left: 517px;
|
|
||||||
}
|
}
|
||||||
.container .container-box .details .start-box .hint {
|
.container .container-box .details .start-box .start-right .suspect-text {
|
||||||
|
height: calc(var(--base-height) * 0.112);
|
||||||
|
margin-top: calc(var(--base-height) * 0.278);
|
||||||
|
margin-bottom: calc(var(--base-height) * 0.048);
|
||||||
|
}
|
||||||
|
.container .container-box .details .start-box .start-right .hint {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
position: absolute;
|
margin-bottom: calc(var(--base-height) * 0.058);
|
||||||
top: 215px;
|
|
||||||
left: 517px;
|
|
||||||
}
|
}
|
||||||
.container .container-box .details .start-box .start-icon {
|
.container .container-box .details .start-box .start-right .start-icon {
|
||||||
width: 168px;
|
width: fit-content;
|
||||||
height: 69px;
|
height: calc(var(--base-height) * 0.138);
|
||||||
position: absolute;
|
|
||||||
top: 268px;
|
|
||||||
left: 517px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.container .container-box .details .answer-box {
|
.container .container-box .details .answer-box {
|
||||||
@@ -314,7 +317,7 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding-top: 39px;
|
padding-top: calc(var(--base-height) * 0.078);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
@keyframes fadeInUp {
|
@keyframes fadeInUp {
|
||||||
@@ -326,9 +329,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.container .container-box .details .answer-box .figure {
|
.container .container-box .details .answer-box .figure {
|
||||||
width: 60px;
|
width: calc(var(--base-height) * 0.12);
|
||||||
height: 60px;
|
height: calc(var(--base-height) * 0.12);
|
||||||
margin-bottom: 25px;
|
margin-bottom: calc(var(--base-height) * 0.05);
|
||||||
}
|
}
|
||||||
.container .container-box .details .answer-box.answer-0 .list .item:not(:last-of-type) {
|
.container .container-box .details .answer-box.answer-0 .list .item:not(:last-of-type) {
|
||||||
margin-right: 175px;
|
margin-right: 175px;
|
||||||
@@ -340,30 +343,72 @@
|
|||||||
margin-right: 78px;
|
margin-right: 78px;
|
||||||
}
|
}
|
||||||
.container .container-box .details .answer-box .list {
|
.container .container-box .details .answer-box .list {
|
||||||
margin-bottom: 13px;
|
margin-bottom: calc(var(--base-height) * 0.026);
|
||||||
}
|
}
|
||||||
.container .container-box .details .answer-box .list .item {
|
.container .container-box .details .answer-box .list .item {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.container .container-box .details .answer-box .list .item .img {
|
.container .container-box .details .answer-box .list .item .img-box {
|
||||||
width: 200px;
|
display: flex;
|
||||||
height: 212px;
|
justify-content: center;
|
||||||
margin-bottom: 40px;
|
align-items: center;
|
||||||
|
width: calc(var(--base-height) * 0.412);
|
||||||
|
height: calc(var(--base-height) * 0.436);
|
||||||
|
margin-bottom: calc(var(--base-height) * 0.074);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
.container .container-box .details .answer-box .list .item .icon {
|
.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;
|
||||||
|
}
|
||||||
|
@property --rotate {
|
||||||
|
syntax: "<angle>";
|
||||||
|
initial-value: 0deg;
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@keyframes bg {
|
||||||
|
0% {
|
||||||
|
--rotate: 0deg;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
--rotate: 360deg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.container .container-box .details .answer-box .list .item .img-box::after {
|
||||||
|
content: "";
|
||||||
|
z-index: -1;
|
||||||
|
width: calc(100% - 6px);
|
||||||
|
height: calc(100% - 6px);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 164px;
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: #7d4bf8;
|
||||||
|
}
|
||||||
|
.container .container-box .details .answer-box .list .item .img-box .img {
|
||||||
|
width: calc(100% - 6px);
|
||||||
|
height: calc(100% - 6px);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.container .container-box .details .answer-box .list .item .img-box .icon {
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(var(--base-height) * 0.036);
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: 30px;
|
width: calc(var(--base-height) * 0.06);
|
||||||
height: 30px;
|
height: calc(var(--base-height) * 0.06);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
.container .container-box .details .answer-box .list .item .select-me {
|
.container .container-box .details .answer-box .list .item .select-me {
|
||||||
width: 150px;
|
width: calc(var(--base-height) * 0.3);
|
||||||
height: 64px;
|
height: calc(var(--base-height) * 0.128);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.container .container-box .details .answer-box .text {
|
.container .container-box .details .answer-box .text {
|
||||||
@@ -382,13 +427,14 @@
|
|||||||
background: linear-gradient(to bottom, rgba(51, 51, 51, 0.2), rgba(0, 0, 0, 0.898));
|
background: linear-gradient(to bottom, rgba(51, 51, 51, 0.2), rgba(0, 0, 0, 0.898));
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.container .container-box .details .masking .hint-box {
|
.container .container-box .details .masking .hint-box {
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
background-color: rgba(255, 255, 255, 0.25);
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
height: 64px;
|
height: calc(var(--base-height) * 0.128);
|
||||||
padding-left: 18px;
|
padding-left: 18px;
|
||||||
border-radius: 60px;
|
border-radius: 60px;
|
||||||
padding-right: 27px;
|
padding-right: 27px;
|
||||||
@@ -412,11 +458,22 @@
|
|||||||
}
|
}
|
||||||
.container .container-box .details .masking .hint-box .like .icon {
|
.container .container-box .details .masking .hint-box .like .icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -3px;
|
left: -10px;
|
||||||
top: -3px;
|
top: -17px;
|
||||||
width: 92px;
|
width: 92px;
|
||||||
height: 98px;
|
height: 98px;
|
||||||
}
|
}
|
||||||
|
.container .container-box .details .masking .hint-box .regret {
|
||||||
|
position: relative;
|
||||||
|
width: calc(var(--base-height) * 0.23);
|
||||||
|
height: calc(var(--base-height) * 0.23);
|
||||||
|
}
|
||||||
|
.container .container-box .details .masking .hint-box .regret .icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: -15px;
|
||||||
|
}
|
||||||
.container .container-box .details .masking .hint-box .text {
|
.container .container-box .details .masking .hint-box .text {
|
||||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@@ -425,17 +482,7 @@
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.container .container-box .details .reply {
|
.container .container-box .details .masking .index-btn {
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.container .container-box .details .win {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.container .container-box .details .win .win-icon {
|
|
||||||
width: 209px;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
.container .container-box .details .win .index-btn {
|
|
||||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@@ -447,8 +494,9 @@
|
|||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.container .container-box .details .win .index-btn .index-icon {
|
.container .container-box .details .masking .index-btn .index-icon {
|
||||||
width: 190px;
|
width: 190px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -457,6 +505,39 @@
|
|||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
.container .container-box .details .reply {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.container .container-box .details .win .gold-left {
|
||||||
|
width: 327px;
|
||||||
|
height: 381px;
|
||||||
|
position: absolute;
|
||||||
|
top: 55px;
|
||||||
|
left: 146px;
|
||||||
|
}
|
||||||
|
.container .container-box .details .win .gold-right {
|
||||||
|
width: 416px;
|
||||||
|
height: 375px;
|
||||||
|
position: absolute;
|
||||||
|
top: 37px;
|
||||||
|
left: 755px;
|
||||||
|
}
|
||||||
|
.container .container-box .details .win .win-icon {
|
||||||
|
width: calc(var(--base-height) * 0.418);
|
||||||
|
height: calc(var(--base-height) * 0.4);
|
||||||
|
margin-top: calc(var(--base-height) * 0.004);
|
||||||
|
margin-bottom: calc(var(--base-height) * 0.022);
|
||||||
|
}
|
||||||
|
.container .container-box .details .win .hint-box {
|
||||||
|
margin-bottom: calc(var(--base-height) * 0.318);
|
||||||
|
}
|
||||||
|
.container .container-box .details .lose {
|
||||||
|
padding-top: calc(var(--base-height) * 0.422);
|
||||||
|
}
|
||||||
|
.container .container-box .details .lose .hint-box {
|
||||||
|
margin-bottom: calc(var(--base-height) * 0.322);
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
/* 入场动画 */
|
/* 入场动画 */
|
||||||
.slide-right-enter-from {
|
.slide-right-enter-from {
|
||||||
/* 入场开始位置：向左偏移自身宽度 */
|
/* 入场开始位置：向左偏移自身宽度 */
|
||||||
|
|||||||
@@ -3,26 +3,36 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--base-height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
.flexflex {
|
.flexflex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexcenter {
|
.flexcenter {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexjcenter {
|
.flexjcenter {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexacenter {
|
.flexacenter {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex1 {
|
.flex1 {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexcolumn {
|
.flexcolumn {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -239,7 +249,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.details {
|
.details {
|
||||||
height: 500px;
|
// height: 500px;
|
||||||
|
flex: 1;
|
||||||
|
max-height: 500px;
|
||||||
|
margin-bottom: 40px;
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
@@ -297,7 +310,8 @@
|
|||||||
width: 400px;
|
width: 400px;
|
||||||
height: 86px;
|
height: 86px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 293px;
|
// top: 293px;
|
||||||
|
bottom: 120px;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -307,39 +321,50 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
|
||||||
.microphone {
|
.microphone {
|
||||||
width: 326px;
|
// width: 326px;
|
||||||
height: 326px;
|
// height: 326px;
|
||||||
position: absolute;
|
// margin-top: 93px;
|
||||||
top: 93px;
|
width: calc(var(--base-height) * 0.652);
|
||||||
left: 163px;
|
height: calc(var(--base-height) * 0.652);
|
||||||
|
margin-top: calc(var(--base-height) * 0.186);
|
||||||
|
margin-left: 163px;
|
||||||
|
margin-right: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.suspect-text {
|
.start-right {
|
||||||
width: 493px;
|
display: flex;
|
||||||
height: 56px;
|
flex-direction: column;
|
||||||
position: absolute;
|
|
||||||
top: 136px;
|
.suspect-text {
|
||||||
left: 517px;
|
// height: 56px;
|
||||||
|
// margin-top: 136px;
|
||||||
|
// margin-bottom: 23px;
|
||||||
|
height: calc(var(--base-height) * 0.112);
|
||||||
|
margin-top: calc(var(--base-height) * 0.278);
|
||||||
|
margin-bottom: calc(var(--base-height) * 0.048);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
// position: absolute;
|
||||||
|
// top: calc(var(--base-height) * 0.43);
|
||||||
|
// left: 517px;
|
||||||
|
margin-bottom: calc(var(--base-height) * 0.058);
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-icon {
|
||||||
|
width: fit-content;
|
||||||
|
height: calc(var(--base-height) * 0.138);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hint {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #ffffff;
|
|
||||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
|
||||||
position: absolute;
|
|
||||||
top: 215px;
|
|
||||||
left: 517px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-icon {
|
|
||||||
width: 168px;
|
|
||||||
height: 69px;
|
|
||||||
position: absolute;
|
|
||||||
top: 268px;
|
|
||||||
left: 517px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.answer-box {
|
.answer-box {
|
||||||
@@ -349,7 +374,8 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding-top: 39px;
|
// padding-top: 39px;
|
||||||
|
padding-top: calc(var(--base-height) * 0.078);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
// animation: fadeInUp 3s ease forwards;
|
// animation: fadeInUp 3s ease forwards;
|
||||||
|
|
||||||
@@ -364,9 +390,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.figure {
|
.figure {
|
||||||
width: 60px;
|
width: calc(var(--base-height) * 0.12);
|
||||||
height: 60px;
|
height: calc(var(--base-height) * 0.12);
|
||||||
margin-bottom: 25px;
|
// margin-bottom: 22px;
|
||||||
|
margin-bottom: calc(var(--base-height) * 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.answer-0 {
|
&.answer-0 {
|
||||||
@@ -394,30 +421,93 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
margin-bottom: 13px;
|
// margin-bottom: 13px;
|
||||||
|
margin-bottom: calc(var(--base-height) * 0.026);
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.img {
|
|
||||||
width: 200px;
|
.img-box {
|
||||||
height: 212px;
|
display: flex;
|
||||||
margin-bottom: 40px;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: calc(var(--base-height) * 0.412);
|
||||||
|
height: calc(var(--base-height) * 0.436);
|
||||||
|
// width: 206px;
|
||||||
|
// height: 218px;
|
||||||
|
// margin-bottom: 37px;
|
||||||
|
margin-bottom: calc(var(--base-height) * 0.074);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 20px;
|
||||||
|
|
||||||
|
|
||||||
|
&.show {
|
||||||
|
background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846);
|
||||||
|
animation: bg 2.5s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@property --rotate {
|
||||||
|
syntax: "<angle>";
|
||||||
|
initial-value: 0deg;
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bg {
|
||||||
|
0% {
|
||||||
|
--rotate: 0deg;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
--rotate: 360deg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
z-index: -1;
|
||||||
|
width: calc(100% - 6px);
|
||||||
|
height: calc(100% - 6px);
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: #7d4bf8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: calc(100% - 6px);
|
||||||
|
height: calc(100% - 6px);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
// top: 164px;
|
||||||
|
bottom: calc(var(--base-height) * 0.036);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: calc(var(--base-height) * 0.06);
|
||||||
|
height: calc(var(--base-height) * 0.06);
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 164px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-me {
|
.select-me {
|
||||||
width: 150px;
|
// width: 150px;
|
||||||
height: 64px;
|
// height: 64px;
|
||||||
|
width: calc(var(--base-height) * 0.3);
|
||||||
|
height: calc(var(--base-height) * 0.128);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -441,15 +531,19 @@
|
|||||||
background: linear-gradient(to bottom, rgba(51, 51, 51, 0.2), rgba(0, 0, 0, 0.898));
|
background: linear-gradient(to bottom, rgba(51, 51, 51, 0.2), rgba(0, 0, 0, 0.898));
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
.hint-box {
|
.hint-box {
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
background-color: rgba(255, 255, 255, 0.25);
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
height: 64px;
|
// height: 64px;
|
||||||
|
height: calc(var(--base-height) * 0.128);
|
||||||
padding-left: 18px;
|
padding-left: 18px;
|
||||||
border-radius: 60px;
|
border-radius: 60px;
|
||||||
padding-right: 27px;
|
padding-right: 27px;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -470,13 +564,28 @@
|
|||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -3px;
|
left: -10px;
|
||||||
top: -3px;
|
top: -17px;
|
||||||
width: 92px;
|
width: 92px;
|
||||||
height: 98px;
|
height: 98px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.regret {
|
||||||
|
position: relative;
|
||||||
|
// width: 115px;
|
||||||
|
// height: 115px;
|
||||||
|
width: calc(var(--base-height) * 0.23);
|
||||||
|
height: calc(var(--base-height) * 0.23);
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: -15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@@ -486,18 +595,6 @@
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.reply {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.win {
|
|
||||||
justify-content: space-between;
|
|
||||||
.win-icon {
|
|
||||||
width: 209px;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.index-btn {
|
.index-btn {
|
||||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
@@ -511,6 +608,7 @@
|
|||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
.index-icon {
|
.index-icon {
|
||||||
width: 190px;
|
width: 190px;
|
||||||
@@ -523,6 +621,55 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.reply {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.win {
|
||||||
|
.gold-left {
|
||||||
|
width: 327px;
|
||||||
|
height: 381px;
|
||||||
|
position: absolute;
|
||||||
|
top: 55px;
|
||||||
|
left: 146px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gold-right {
|
||||||
|
width: 416px;
|
||||||
|
height: 375px;
|
||||||
|
position: absolute;
|
||||||
|
top: 37px;
|
||||||
|
left: 755px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.win-icon {
|
||||||
|
// width: 209px;
|
||||||
|
// height: 200px;
|
||||||
|
// margin-top: 2px;
|
||||||
|
// margin-bottom: 11px;
|
||||||
|
width: calc(var(--base-height) * 0.418);
|
||||||
|
height: calc(var(--base-height) * 0.4);
|
||||||
|
margin-top: calc(var(--base-height) * 0.004);
|
||||||
|
margin-bottom: calc(var(--base-height) * 0.022);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint-box {
|
||||||
|
// margin-bottom: 159px;
|
||||||
|
margin-bottom: calc(var(--base-height) * 0.318);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lose {
|
||||||
|
// padding-top: 211px;
|
||||||
|
padding-top: calc(var(--base-height) * 0.422);
|
||||||
|
|
||||||
|
.hint-box {
|
||||||
|
// margin-bottom: 161px;
|
||||||
|
margin-bottom: calc(var(--base-height) * 0.322);
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -566,4 +713,4 @@
|
|||||||
/* 列表排序动画（可选） */
|
/* 列表排序动画（可选） */
|
||||||
.slide-move {
|
.slide-move {
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
}
|
}
|
||||||
BIN
static/img/guess/gold-left.png
Normal file
BIN
static/img/guess/gold-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 679 KiB |
BIN
static/img/guess/gold-right.png
Normal file
BIN
static/img/guess/gold-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 408 KiB |
@@ -2,20 +2,36 @@ const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
|
|||||||
const search = createApp({
|
const search = createApp({
|
||||||
setup() {
|
setup() {
|
||||||
const musicData = ref([
|
const musicData = ref([
|
||||||
["A组 世界在转动.MP3", "A组《来吧，占领我的无私》"],
|
["A组 世界在转动.MP3", "A组《来吧，占领我的无私》.MP3"],
|
||||||
["B组 《远方》.MP3", "B组 大闹天宫.MP3", "B组 下一站旅行.MP3"],
|
["B组 《远方》.MP3", "B组 大闹天宫.MP3", "B组 下一站旅行.MP3"],
|
||||||
["C组 旧唱片.MP3", "C组 梅雨季.MP3", "C组 尊重成长共赢.MP3", "C组《弥留》.MP3"],
|
["C组 旧唱片.MP3", "C组 梅雨季.MP3", "C组 尊重成长共赢.MP3", "C组《弥留》.MP3"],
|
||||||
]);
|
]);
|
||||||
|
|
||||||
let step = ref(0); // null 是未开始 0 是第一题
|
let step = ref(null); // null 是未开始 0 是第一题
|
||||||
|
let detailsHeight = ref(500)
|
||||||
|
const detailsRef = ref(null)
|
||||||
|
|
||||||
|
let isAnswer = ref(false)
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
console.log("init");
|
console.log("init");
|
||||||
init();
|
init();
|
||||||
|
|
||||||
|
console.log("detailsRef", detailsRef.value);
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
// 将 musicData 里的 二维值打乱
|
|
||||||
musicData.value.forEach((item) => {
|
musicData.value.forEach((item) => {
|
||||||
item.sort(() => Math.random() - 0.5);
|
item.sort(() => Math.random() - 0.5);
|
||||||
});
|
});
|
||||||
@@ -29,18 +45,76 @@ const search = createApp({
|
|||||||
|
|
||||||
// 添加一个方法来切换到下一题
|
// 添加一个方法来切换到下一题
|
||||||
const nextStep = () => {
|
const nextStep = () => {
|
||||||
if (step.value < musicData.value.length - 1) {
|
step.value++;
|
||||||
step.value++;
|
|
||||||
} else {
|
|
||||||
// 所有问题都回答完毕，可以重置或显示结果
|
|
||||||
// step.value = null;
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
const audioPlayer = ref(null)
|
||||||
|
const audiozSrc = ref("")
|
||||||
|
|
||||||
|
|
||||||
const play = (item) => {
|
const play = (item) => {
|
||||||
console.log("item", item);
|
console.log("item", item);
|
||||||
|
audioPlayer.value.src = './static/mp3/guess/' + item
|
||||||
|
audioPlayer.value.play()
|
||||||
|
|
||||||
|
audiozSrc.value = item
|
||||||
};
|
};
|
||||||
|
|
||||||
return { play, step, begin, musicData, nextStep };
|
const stop = () => {
|
||||||
|
audioPlayer.value.pause()
|
||||||
|
audiozSrc.value = ""
|
||||||
|
}
|
||||||
|
|
||||||
|
const playSucceed = () => {
|
||||||
|
audioPlayer.value.src = './static/mp3/guess/succeed.mp3'
|
||||||
|
audioPlayer.value.play()
|
||||||
|
}
|
||||||
|
const playLose = () => {
|
||||||
|
audioPlayer.value.src = './static/mp3/guess/lose.mp3'
|
||||||
|
audioPlayer.value.play()
|
||||||
|
}
|
||||||
|
|
||||||
|
const audioEnd = () => {
|
||||||
|
console.log("结束");
|
||||||
|
|
||||||
|
audiozSrc.value = ""
|
||||||
|
}
|
||||||
|
|
||||||
|
const select = (item, index) => {
|
||||||
|
stop()
|
||||||
|
if (item.indexOf("《") !== -1) {
|
||||||
|
playSucceed()
|
||||||
|
if (step.value == musicData.value.length - 1) {
|
||||||
|
winState.value = true
|
||||||
|
} else {
|
||||||
|
replyState.value = true
|
||||||
|
autoSkip()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
loseState.value = true
|
||||||
|
playLose()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let replyState = ref(false)
|
||||||
|
let winState = ref(false)
|
||||||
|
let loseState = ref(false)
|
||||||
|
|
||||||
|
const autoSkip = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
replyState.value = false
|
||||||
|
nextStep()
|
||||||
|
}, 2000)
|
||||||
|
}
|
||||||
|
|
||||||
|
const backHome = () => {
|
||||||
|
step.value = null
|
||||||
|
replyState.value = false
|
||||||
|
winState.value = false
|
||||||
|
loseState.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return { isAnswer, detailsHeight, detailsRef, audioEnd, playSucceed, stop, audiozSrc, audioPlayer, backHome, select, loseState, winState, replyState, play, step, begin, musicData, nextStep };
|
||||||
},
|
},
|
||||||
}).mount("#guess");
|
}).mount("#guess");
|
||||||
|
|||||||
BIN
static/mp3/guess/lose.mp3
Normal file
BIN
static/mp3/guess/lose.mp3
Normal file
Binary file not shown.
BIN
static/mp3/guess/succeed.mp3
Normal file
BIN
static/mp3/guess/succeed.mp3
Normal file
Binary file not shown.
Reference in New Issue
Block a user