feat(guess): 添加猜歌游戏页面及功能实现
- 新增猜歌游戏HTML页面结构 - 实现Vue.js猜歌游戏逻辑 - 添加游戏相关图片资源 - 完善CSS样式和动画效果 - 添加音乐数据JSON文件 - 更新歌曲请求站点的JS逻辑
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -246,6 +246,7 @@
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 3px;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@@ -303,7 +304,9 @@
|
||||
.start-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.microphone {
|
||||
width: 326px;
|
||||
height: 326px;
|
||||
@@ -338,6 +341,229 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.answer-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
padding-top: 39px;
|
||||
align-items: center;
|
||||
// animation: fadeInUp 3s ease forwards;
|
||||
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.figure {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
&.answer-0 {
|
||||
.list .item {
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 175px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.answer-1 {
|
||||
.list .item {
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 103px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.answer-2 {
|
||||
.list .item {
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 78px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-bottom: 13px;
|
||||
.item {
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.img {
|
||||
width: 200px;
|
||||
height: 212px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 164px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select-me {
|
||||
width: 150px;
|
||||
height: 64px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.masking {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(to bottom, rgba(51, 51, 51, 0.2), rgba(0, 0, 0, 0.898));
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.hint-box {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 3px;
|
||||
height: 64px;
|
||||
padding-left: 18px;
|
||||
border-radius: 60px;
|
||||
padding-right: 27px;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: calc(100% - 9px);
|
||||
height: calc(100% - 9px);
|
||||
background: linear-gradient(180deg, #4a28b0 0%, #7d4bf8 100%);
|
||||
z-index: -1;
|
||||
border-radius: 60px;
|
||||
}
|
||||
|
||||
.like {
|
||||
width: 82px;
|
||||
height: 88px;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: -3px;
|
||||
width: 92px;
|
||||
height: 98px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reply {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.win {
|
||||
justify-content: space-between;
|
||||
.win-icon {
|
||||
width: 209px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.index-btn {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #642501;
|
||||
text-align: center;
|
||||
width: 190px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
|
||||
.index-icon {
|
||||
width: 190px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 入场动画 */
|
||||
.slide-right-enter-from {
|
||||
/* 入场开始位置：向左偏移自身宽度 */
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-right-enter-active {
|
||||
/* 入场动画：向右移动到原位 */
|
||||
transition: transform 0.5s ease, opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.slide-right-enter-to {
|
||||
/* 入场结束位置：不偏移 */
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 退场动画 */
|
||||
.slide-right-leave-from {
|
||||
/* 退场开始位置：不偏移 */
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.slide-right-leave-active {
|
||||
/* 退场动画：向右移动到自身宽度外 */
|
||||
transition: transform 0.5s ease, opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.slide-right-leave-to {
|
||||
/* 退场结束位置：向右偏移自身宽度 */
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 列表排序动画（可选） */
|
||||
.slide-move {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user