A1300399510/PC-official
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 添加歌曲请求站页面及静态资源

Browse Source 
style: 调整标签气泡动效样式和布局

refactor: 优化标签碰撞检测算法和位置计算

docs: 更新README文件说明

chore: 添加相关图片和CSS文件资源
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-18 19:03:24 +08:00
parent 35e3a11427
commit 8542840577
23 changed files with 1396 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
static/css/song-request-station.css Normal file
View File

@@ -0,0 +1,290 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
background-color: #333333;
/* 气泡浮动动画 */
/* 呼吸效果动画 */
}
.container .flexflex {
display: flex;
}
.container .flexcenter {
display: flex;
justify-content: center;
align-items: center;
}
.container .flexjcenter {
display: flex;
justify-content: center;
}
.container .flexacenter {
display: flex;
align-items: center;
}
.container .flex1 {
flex: 1;
}
.container .flexcolumn {
display: flex;
flex-direction: column;
}
.container .mar1200 {
width: 1200px;
margin: 0 auto;
}
.container * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
overflow: hidden;
}
.container .bubble-tag {
position: absolute;
padding: 8px 18px;
border-radius: 25px;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
font-size: 14px;
cursor: pointer;
transition: transform 0.3s ease;
user-select: none;
z-index: 1;
}
.container .bubble-tag:hover {
transform: scale(1.15);
z-index: 10;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
@keyframes float {
0%,
100% {
transform: translateY(0) translateX(0) rotate(0deg);
}
25% {
transform: translateY(-15px) translateX(10px) rotate(1deg);
}
50% {
transform: translateY(-30px) translateX(5px) rotate(0deg);
}
75% {
transform: translateY(-15px) translateX(-10px) rotate(-1deg);
}
}
@keyframes pulse {
0% {
opacity: 0.8;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
100% {
opacity: 1;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
}
.container .container-box {
padding-top: 24px;
height: 100vh;
display: flex;
flex-direction: column;
}
.container .container-box .logo {
width: 121px;
height: 24px;
margin-bottom: 31px;
}
.container .container-box .header {
position: relative;
width: 1200px;
height: 320px;
border-radius: 20px;
margin-bottom: 20px;
}
.container .container-box .header::after {
content: "";
width: 1200px;
height: 320px;
background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%);
border-radius: 20px;
position: absolute;
top: 0;
left: 0;
}
.container .container-box .header .halo {
width: 240px;
height: 214px;
position: absolute;
top: -71px;
left: -59px;
}
.container .container-box .header .star-icon {
position: absolute;
top: 46px;
left: 51px;
width: 56px;
height: 56px;
z-index: 1;
}
.container .container-box .header .love-little {
position: absolute;
top: 46px;
left: 51px;
width: 186px;
height: 160px;
transform: rotate(315deg);
top: 137px;
left: -10px;
z-index: 1;
}
.container .container-box .header .bj-2 {
width: 360px;
height: 128px;
position: absolute;
left: 25px;
bottom: 0;
z-index: 1;
}
.container .container-box .header .music-icon {
width: 34px;
height: 37px;
position: absolute;
top: 194px;
left: 40px;
transform: rotate(345deg);
z-index: 1;
}
.container .container-box .header .bj {
position: absolute;
bottom: 0;
right: 0;
width: 1064px;
height: 320px;
z-index: 1;
}
.container .container-box .header .love-big {
transform: rotate(44deg);
width: 321px;
height: 276px;
position: absolute;
top: 31px;
left: 69px;
z-index: 1;
}
.container .container-box .header .music-score {
width: 240px;
height: 240px;
position: absolute;
top: 1px;
left: 217px;
z-index: 1;
}
.container .container-box .header .robot {
width: 238px;
height: 238px;
position: absolute;
top: 42px;
left: 432px;
z-index: 1;
}
.container .container-box .header .text {
width: 224px;
height: 194px;
position: absolute;
top: 68px;
left: 694px;
z-index: 1;
}
.container .container-box .header .face {
width: 83px;
height: 83px;
position: absolute;
top: -27px;
left: 1080px;
z-index: 1;
}
.container .container-box .header .star-icon-2 {
width: 110px;
height: 110px;
position: absolute;
left: 953px;
top: 70px;
z-index: 1;
}
.container .container-box .header .ai-music {
width: 81px;
height: 28px;
position: absolute;
top: 282px;
left: 1106px;
z-index: 1;
}
.container .container-box .header .record-black {
width: 223px;
height: 233px;
position: absolute;
bottom: 0;
right: -1px;
z-index: 1;
}
.container .container-box .header .record-circle {
position: absolute;
top: 147px;
left: 1039px;
background-color: #72db86;
width: 110px;
height: 110px;
border-radius: 50%;
z-index: 1;
}
.container .container-box .header .record-circle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
}
.container .container-box .header .green-glow {
width: 306px;
height: 62px;
position: absolute;
top: 285px;
left: 217px;
}
.container .container-box .header .shadow {
width: 240px;
height: 165px;
position: absolute;
top: 191px;
left: 997px;
}
.container .container-box .list-box {
width: 1200px;
height: 100%;
background-color: rgba(255, 255, 255, 0.10980392);
border-radius: 20px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 3px 0;
margin-bottom: 40px;
flex: 1;
}
.container .container-box .list-box .list {
width: 1194px;
height: 100%;
background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%);
border-radius: 18px;
}

324
static/css/song-request-station.less Normal file
View File

@@ -0,0 +1,324 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
background-color: rgba(51, 51, 51, 1);
.flexflex {
display: flex;
}
.flexcenter {
display: flex;
justify-content: center;
align-items: center;
}
.flexjcenter {
display: flex;
justify-content: center;
}
.flexacenter {
display: flex;
align-items: center;
}
.flex1 {
flex: 1;
}
.flexcolumn {
display: flex;
flex-direction: column;
}
.mar1200 {
width: 1200px;
margin: 0 auto;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
overflow: hidden;
}
.bubble-tag {
position: absolute;
padding: 8px 18px;
border-radius: 25px;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
font-size: 14px;
cursor: pointer;
transition: transform 0.3s ease;
user-select: none;
z-index: 1;
}
.bubble-tag:hover {
transform: scale(1.15);
z-index: 10;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
/* 气泡浮动动画 */
@keyframes float {
0%,
100% {
transform: translateY(0) translateX(0) rotate(0deg);
}
25% {
transform: translateY(-15px) translateX(10px) rotate(1deg);
}
50% {
transform: translateY(-30px) translateX(5px) rotate(0deg);
}
75% {
transform: translateY(-15px) translateX(-10px) rotate(-1deg);
}
}
/* 呼吸效果动画 */
@keyframes pulse {
0% {
opacity: 0.8;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
100% {
opacity: 1;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
}
.container-box {
padding-top: 24px;
height: 100vh;
display: flex;
flex-direction: column;
.logo {
width: 121px;
height: 24px;
margin-bottom: 31px;
}
.header {
position: relative;
width: 1200px;
height: 320px;
// background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%);
border-radius: 20px;
margin-bottom: 20px;
&::after {
content: "";
width: 1200px;
height: 320px;
background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%);
border-radius: 20px;
position: absolute;
top: 0;
left: 0;
}
.halo {
width: 240px;
height: 214px;
position: absolute;
top: -71px;
left: -59px;
}
.star-icon {
position: absolute;
top: 46px;
left: 51px;
width: 56px;
height: 56px;
z-index: 1;
}
.love-little {
position: absolute;
top: 46px;
left: 51px;
width: 186px;
height: 160px;
transform: rotate(315deg);
top: 137px;
left: -10px;
z-index: 1;
}
.bj-2 {
width: 360px;
height: 128px;
position: absolute;
left: 25px;
bottom: 0;
z-index: 1;
}
.music-icon {
width: 34px;
height: 37px;
position: absolute;
top: 194px;
left: 40px;
transform: rotate(345deg);
z-index: 1;
}
.bj {
position: absolute;
bottom: 0;
right: 0;
width: 1064px;
height: 320px;
z-index: 1;
}
.love-big {
transform: rotate(44deg);
width: 321px;
height: 276px;
position: absolute;
top: 31px;
left: 69px;
z-index: 1;
}
.music-score {
width: 240px;
height: 240px;
position: absolute;
top: 1px;
left: 217px;
z-index: 1;
}
.robot {
width: 238px;
height: 238px;
position: absolute;
top: 42px;
left: 432px;
z-index: 1;
}
.text {
width: 224px;
height: 194px;
position: absolute;
top: 68px;
left: 694px;
z-index: 1;
}
.face {
width: 83px;
height: 83px;
position: absolute;
top: -27px;
left: 1080px;
z-index: 1;
}
.star-icon-2 {
width: 110px;
height: 110px;
position: absolute;
left: 953px;
top: 70px;
z-index: 1;
}
.ai-music {
width: 81px;
height: 28px;
position: absolute;
top: 282px;
left: 1106px;
z-index: 1;
}
.record-black {
width: 223px;
height: 233px;
position: absolute;
bottom: 0;
right: -1px;
z-index: 1;
}
.record-circle {
position: absolute;
top: 147px;
left: 1039px;
background-color: rgb(114, 219, 134);
width: 110px;
height: 110px;
border-radius: 50%;
z-index: 1;
&::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
}
}
.green-glow {
width: 306px;
height: 62px;
position: absolute;
top: 285px;
left: 217px;
}
.shadow {
width: 240px;
height: 165px;
position: absolute;
top: 191px;
left: 997px;
}
}
.list-box {
width: 1200px;
height: 100%;
background-color: rgba(255, 255, 255, 0.109803921568627);
border-radius: 20px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 3px 0;
margin-bottom: 40px;
flex: 1;
.list {
width: 1194px;
height: 100%;
background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%);
border-radius: 18px;
}
}
}
}