feat(guess): 添加猜歌游戏音频播放和结果反馈功能
- 新增音频播放控制逻辑，支持播放、暂停和结束事件 - 添加答对/答错音效和视觉反馈 - 实现答题结果状态管理（正确、错误、胜利） - 优化界面布局和响应式设计 - 新增返回首页功能 - 添加答案模式显示选项
This commit is contained in:
A1300399510
@@ -3,6 +3,9 @@
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:root {
|
||||
--base-height: 500px;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
background-color: #333333;
|
||||
@@ -215,7 +218,9 @@
|
||||
left: 997px;
|
||||
}
|
||||
.container .container-box .details {
|
||||
height: 500px;
|
||||
flex: 1;
|
||||
max-height: 500px;
|
||||
margin-bottom: 40px;
|
||||
width: 1200px;
|
||||
border-radius: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
@@ -267,7 +272,7 @@
|
||||
width: 400px;
|
||||
height: 86px;
|
||||
position: absolute;
|
||||
top: 293px;
|
||||
bottom: 120px;
|
||||
right: 0;
|
||||
}
|
||||
.container .container-box .details .start-box {
|
||||
@@ -276,35 +281,33 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
}
|
||||
.container .container-box .details .start-box .microphone {
|
||||
width: 326px;
|
||||
height: 326px;
|
||||
position: absolute;
|
||||
top: 93px;
|
||||
left: 163px;
|
||||
width: calc(var(--base-height) * 0.652);
|
||||
height: calc(var(--base-height) * 0.652);
|
||||
margin-top: calc(var(--base-height) * 0.186);
|
||||
margin-left: 163px;
|
||||
margin-right: 28px;
|
||||
}
|
||||
.container .container-box .details .start-box .suspect-text {
|
||||
width: 493px;
|
||||
height: 56px;
|
||||
position: absolute;
|
||||
top: 136px;
|
||||
left: 517px;
|
||||
.container .container-box .details .start-box .start-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.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;
|
||||
color: #ffffff;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
position: absolute;
|
||||
top: 215px;
|
||||
left: 517px;
|
||||
margin-bottom: calc(var(--base-height) * 0.058);
|
||||
}
|
||||
.container .container-box .details .start-box .start-icon {
|
||||
width: 168px;
|
||||
height: 69px;
|
||||
position: absolute;
|
||||
top: 268px;
|
||||
left: 517px;
|
||||
.container .container-box .details .start-box .start-right .start-icon {
|
||||
width: fit-content;
|
||||
height: calc(var(--base-height) * 0.138);
|
||||
cursor: pointer;
|
||||
}
|
||||
.container .container-box .details .answer-box {
|
||||
@@ -314,7 +317,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
padding-top: 39px;
|
||||
padding-top: calc(var(--base-height) * 0.078);
|
||||
align-items: center;
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
@@ -326,9 +329,9 @@
|
||||
}
|
||||
}
|
||||
.container .container-box .details .answer-box .figure {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 25px;
|
||||
width: calc(var(--base-height) * 0.12);
|
||||
height: calc(var(--base-height) * 0.12);
|
||||
margin-bottom: calc(var(--base-height) * 0.05);
|
||||
}
|
||||
.container .container-box .details .answer-box.answer-0 .list .item:not(:last-of-type) {
|
||||
margin-right: 175px;
|
||||
@@ -340,30 +343,72 @@
|
||||
margin-right: 78px;
|
||||
}
|
||||
.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 {
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.container .container-box .details .answer-box .list .item .img {
|
||||
width: 200px;
|
||||
height: 212px;
|
||||
margin-bottom: 40px;
|
||||
.container .container-box .details .answer-box .list .item .img-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
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;
|
||||
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%;
|
||||
transform: translateX(-50%);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: calc(var(--base-height) * 0.06);
|
||||
height: calc(var(--base-height) * 0.06);
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
.container .container-box .details .answer-box .list .item .select-me {
|
||||
width: 150px;
|
||||
height: 64px;
|
||||
width: calc(var(--base-height) * 0.3);
|
||||
height: calc(var(--base-height) * 0.128);
|
||||
cursor: pointer;
|
||||
}
|
||||
.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));
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
}
|
||||
.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;
|
||||
z-index: 1;
|
||||
padding: 3px;
|
||||
height: 64px;
|
||||
height: calc(var(--base-height) * 0.128);
|
||||
padding-left: 18px;
|
||||
border-radius: 60px;
|
||||
padding-right: 27px;
|
||||
@@ -412,11 +458,22 @@
|
||||
}
|
||||
.container .container-box .details .masking .hint-box .like .icon {
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: -3px;
|
||||
left: -10px;
|
||||
top: -17px;
|
||||
width: 92px;
|
||||
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 {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
@@ -425,17 +482,7 @@
|
||||
color: #ffffff;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.container .container-box .details .reply {
|
||||
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 {
|
||||
.container .container-box .details .masking .index-btn {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
@@ -447,8 +494,9 @@
|
||||
line-height: 40px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.container .container-box .details .win .index-btn .index-icon {
|
||||
.container .container-box .details .masking .index-btn .index-icon {
|
||||
width: 190px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
@@ -457,6 +505,39 @@
|
||||
transform: translate(-50%, -50%);
|
||||
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 {
|
||||
/* 入场开始位置：向左偏移自身宽度 */
|
||||
|
||||
Reference in New Issue
Block a user