feat: 添加歌曲请求站页面及静态资源
style: 调整标签气泡动效样式和布局 refactor: 优化标签碰撞检测算法和位置计算 docs: 更新README文件说明 chore: 添加相关图片和CSS文件资源
This commit is contained in:
DESKTOP-RQ919RC\Pc
290
static/css/song-request-station.css
Normal file
290
static/css/song-request-station.css
Normal 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
324
static/css/song-request-station.less
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
static/img/ai-music.png
Normal file
BIN
static/img/ai-music.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
BIN
static/img/green-glow.png
Normal file
BIN
static/img/green-glow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
static/img/halo.png
Normal file
BIN
static/img/halo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
12
static/img/love-big.svg
Normal file
12
static/img/love-big.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="321px" height="276px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="80.0208971180524" y1="201.54595377948" x2="297.940183742093" y2="22.7556431456892" id="LinearGradient83">
|
||||
<stop id="Stop84" stop-color="#ff8eba" offset="0" />
|
||||
<stop id="Stop85" stop-color="#f4458c" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -429 -110 )">
|
||||
<path d="M 168.381696428571 272.765625 C 166.232142857143 274.921875 163.604910714286 276 160.5 276 C 157.395089285714 276 154.767857142857 274.921875 152.618303571429 272.765625 L 40.8415178571429 164.59375 C 39.6473214285714 163.635416666667 38.0053013392857 162.078125 35.9154575892857 159.921875 C 33.8256138392857 157.765625 30.51171875 153.842447916667 25.9737723214286 148.15234375 C 21.4358258928571 142.462239583333 17.3755580357143 136.622395833333 13.79296875 130.6328125 C 10.2103794642857 124.643229166667 7.01590401785714 117.395833333333 4.20954241071429 108.890625 C 1.40318080357143 100.385416666667 0 92.1197916666666 0 84.09375 C 0 57.7395833333333 7.58314732142857 37.1354166666667 22.7494419642857 22.28125 C 37.9157366071429 7.42708333333333 58.8738839285714 0 85.6238839285714 0 C 93.0279017857143 0 100.581194196429 1.28776041666665 108.283761160714 3.86328125000001 C 115.986328125 6.43880208333331 123.151506696429 9.91276041666665 129.779296875 14.28515625 C 136.407087053571 18.6575520833333 142.109375 22.7604166666666 146.886160714286 26.59375 C 151.662946428571 30.4270833333333 156.200892857143 34.5 160.5 38.8125 C 164.799107142857 34.5 169.337053571429 30.4270833333333 174.113839285714 26.59375 C 178.890625 22.7604166666666 184.592912946429 18.6575520833333 191.220703125 14.28515625 C 197.848493303571 9.91276041666665 205.013671875 6.43880208333331 212.716238839286 3.86328125000001 C 220.418805803571 1.28776041666665 227.972098214286 0 235.376116071429 0 C 262.126116071429 0 283.084263392857 7.42708333333333 298.250558035714 22.28125 C 313.416852678571 37.1354166666667 321 57.7395833333333 321 84.09375 C 321 110.567708333333 307.326450892857 137.520833333333 279.979352678571 164.953125 L 168.381696428571 272.765625 Z " fill-rule="nonzero" fill="url(#LinearGradient83)" stroke="none" transform="matrix(1 0 0 1 429 110 )" />
|
||||
</g>
|
||||
</svg>
|
||||
12
static/img/love-little.svg
Normal file
12
static/img/love-little.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="186px" height="160px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="49.0234708755539" y1="118.474345856316" x2="180.341391096329" y2="24.280835020015" id="LinearGradient77">
|
||||
<stop id="Stop78" stop-color="#a943e4" offset="0" />
|
||||
<stop id="Stop79" stop-color="#f4458c" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -350 -216 )">
|
||||
<path d="M 97.5669642857143 158.125 C 96.3214285714286 159.375 94.7991071428572 160 93 160 C 91.2008928571429 160 89.6785714285714 159.375 88.4330357142857 158.125 L 23.6651785714286 95.4166666666667 C 22.9732142857143 94.8611111111111 22.0217633928571 93.9583333333333 20.8108258928571 92.7083333333333 C 19.5998883928571 91.4583333333333 17.6796875 89.1840277777778 15.0502232142857 85.8854166666667 C 12.4207589285714 82.5868055555555 10.0680803571429 79.2013888888889 7.9921875 75.7291666666667 C 5.91629464285714 72.2569444444444 4.06529017857143 68.0555555555556 2.43917410714286 63.125 C 0.813058035714286 58.1944444444444 0 53.4027777777778 0 48.75 C 0 33.4722222222222 4.39397321428571 21.5277777777778 13.1819196428571 12.9166666666667 C 21.9698660714286 4.30555555555555 34.1138392857143 0 49.6138392857143 0 C 53.9040178571429 0 58.2806919642857 0.746527777777768 62.7438616071429 2.23958333333334 C 67.20703125 3.73263888888888 71.3588169642857 5.74652777777777 75.19921875 8.28125 C 79.0396205357143 10.8159722222222 82.34375 13.1944444444444 85.1116071428571 15.4166666666667 C 87.8794642857143 17.6388888888889 90.5089285714286 20 93 22.5 C 95.4910714285714 20 98.1205357142857 17.6388888888889 100.888392857143 15.4166666666667 C 103.65625 13.1944444444444 106.960379464286 10.8159722222222 110.80078125 8.28125 C 114.641183035714 5.74652777777777 118.79296875 3.73263888888888 123.256138392857 2.23958333333334 C 127.719308035714 0.746527777777768 132.095982142857 0 136.386160714286 0 C 151.886160714286 0 164.030133928571 4.30555555555555 172.818080357143 12.9166666666667 C 181.606026785714 21.5277777777778 186 33.4722222222222 186 48.75 C 186 64.0972222222222 178.077008928571 79.7222222222222 162.231026785714 95.625 L 97.5669642857143 158.125 Z " fill-rule="nonzero" fill="url(#LinearGradient77)" stroke="none" transform="matrix(1 0 0 1 350 216 )" />
|
||||
</g>
|
||||
</svg>
|
||||
12
static/img/music-icon.svg
Normal file
12
static/img/music-icon.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="34px" height="37px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="17" y1="0" x2="17" y2="37" id="LinearGradient86">
|
||||
<stop id="Stop87" stop-color="#fddf6d" offset="0" />
|
||||
<stop id="Stop88" stop-color="#f3974a" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -400 -273 )">
|
||||
<path d="M 33.3802083333333 0.622596153846156 C 33.7934027777778 1.03766025641025 34 1.54166666666667 34 2.13461538461539 L 34 27.0384615384615 C 34 27.7796474358974 33.7491319444444 28.4393028846154 33.2473958333333 29.0174278846154 C 32.7456597222222 29.5955528846154 32.1111111111111 30.0439703525641 31.34375 30.3626802884615 C 30.5763888888889 30.681390224359 29.8127170138889 30.9185697115385 29.052734375 31.07421875 C 28.2927517361111 31.2298677884615 27.5807291666667 31.3076923076923 26.9166666666667 31.3076923076923 C 26.2526041666667 31.3076923076923 25.5405815972222 31.2298677884615 24.7805989583333 31.07421875 C 24.0206163194444 30.9185697115385 23.2569444444444 30.681390224359 22.4895833333333 30.3626802884615 C 21.7222222222222 30.0439703525641 21.0876736111111 29.5955528846154 20.5859375 29.0174278846154 C 20.0842013888889 28.4393028846154 19.8333333333333 27.7796474358974 19.8333333333333 27.0384615384615 C 19.8333333333333 26.2972756410256 20.0842013888889 25.6376201923077 20.5859375 25.0594951923077 C 21.0876736111111 24.4813701923077 21.7222222222222 24.032952724359 22.4895833333333 23.7142427884615 C 23.2569444444444 23.3955328525641 24.0206163194444 23.1583533653846 24.7805989583333 23.0027043269231 C 25.5405815972222 22.8470552884615 26.2526041666667 22.7692307692308 26.9166666666667 22.7692307692308 C 28.4661458333333 22.7692307692308 29.8828125 23.0582932692308 31 23.6364182692308 L 31 11.6959134615385 L 14.1666666666667 16.9657451923077 L 14.1666666666667 32.7307692307692 C 14.1666666666667 33.4719551282051 13.9157986111111 34.1316105769231 13.4140625 34.7097355769231 C 12.9123263888889 35.2878605769231 12.2777777777778 35.7362780448718 11.5104166666667 36.0549879807692 C 10.7430555555556 36.3736979166667 9.97938368055556 36.6108774038462 9.21940104166667 36.7665264423077 C 8.45941840277778 36.9221754807692 7.74739583333333 37 7.08333333333333 37 C 6.41927083333333 37 5.70724826388889 36.9221754807692 4.947265625 36.7665264423077 C 4.18728298611111 36.6108774038462 3.42361111111111 36.3736979166667 2.65625 36.0549879807692 C 1.88888888888889 35.7362780448718 1.25434027777778 35.2878605769231 0.752604166666667 34.7097355769231 C 0.250868055555556 34.1316105769231 0 33.4719551282051 0 32.7307692307692 C 0 31.9895833333333 0.250868055555556 31.3299278846154 0.752604166666667 30.7518028846154 C 1.25434027777778 30.1736778846154 1.88888888888889 29.7252604166667 2.65625 29.4065504807692 C 3.42361111111111 29.0878405448718 4.18728298611111 28.8506610576923 4.947265625 28.6950120192308 C 5.70724826388889 28.5393629807692 6.41927083333333 28.4615384615385 7.08333333333333 28.4615384615385 C 8.6328125 28.4615384615385 10.0494791666667 28.7506009615385 12 29.3287259615385 L 12 7.82692307692308 C 11.3333333333333 7.36738782051282 11.4735243055556 6.94861778846154 11.75390625 6.57061298076923 C 12.0342881944444 6.19260817307692 12.3958333333333 5.92948717948718 12.8385416666667 5.78125 L 31.2552083333333 0.0889423076923074 C 31.4322916666667 0.0296474358974358 31.6388888888889 0 31.875 0 C 32.4652777777778 0 32.9670138888889 0.207532051282051 33.3802083333333 0.622596153846156 Z " fill-rule="nonzero" fill="url(#LinearGradient86)" stroke="none" transform="matrix(1 0 0 1 400 273 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
static/img/music-score.png
Normal file
BIN
static/img/music-score.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
6
static/img/record-black.svg
Normal file
6
static/img/record-black.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="223px" height="233px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1338 -166 )">
|
||||
<path d="M 116.443349753695 0 C 164.076564175014 0 204.253703364059 27.3522430445635 222 67.5256649406986 L 222 165.474335053222 C 204.253703364059 205.647756955436 164.076564175014 233 116.443349753695 233 C 51.2350738916256 233 0 181.74 0 116.5 C 0 51.26 51.2350738916256 0 116.443349753695 0 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 1338 166 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
static/img/robot.png
Normal file
BIN
static/img/robot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 358 KiB |
BIN
static/img/shadow.png
Normal file
BIN
static/img/shadow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
static/img/smiling-face.png
Normal file
BIN
static/img/smiling-face.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
12
static/img/song-request-bj-2.svg
Normal file
12
static/img/song-request-bj-2.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="128px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="130.108695652174" y1="128" x2="259.239130434783" y2="79.0588235294117" id="LinearGradient74">
|
||||
<stop id="Stop75" stop-color="#2f1071" offset="0" />
|
||||
<stop id="Stop76" stop-color="#611ccf" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -385 -271 )">
|
||||
<path d="M 177 128 L 0 83.6535433070867 L 347 0 L 360 128 L 177 128 Z " fill-rule="nonzero" fill="url(#LinearGradient74)" stroke="none" transform="matrix(1 0 0 1 385 271 )" />
|
||||
</g>
|
||||
</svg>
|
||||
12
static/img/song-request-bj.svg
Normal file
12
static/img/song-request-bj.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1064px" height="320px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="31.9200000000012" y1="16.9411764705882" x2="1028.53333333334" y2="310.588235294118" id="LinearGradient80">
|
||||
<stop id="Stop81" stop-color="#c22cc3" offset="0" />
|
||||
<stop id="Stop82" stop-color="#db2cd9" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -496 -79 )">
|
||||
<path d="M 184 320 L 0 271 L 111 0 L 1064 247 L 1064 300 C 1064 311.2 1055.2 320 1044 320 L 184 320 Z " fill-rule="nonzero" fill="url(#LinearGradient80)" stroke="none" transform="matrix(1 0 0 1 496 79 )" />
|
||||
</g>
|
||||
</svg>
|
||||
18
static/img/song-request-text.svg
Normal file
18
static/img/song-request-text.svg
Normal file
File diff suppressed because one or more lines are too long
BIN
static/img/star-icon-2.png
Normal file
BIN
static/img/star-icon-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
static/img/star-icon.png
Normal file
BIN
static/img/star-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -179,6 +179,8 @@ const search = createApp({
|
||||
let art = null;
|
||||
// 开启播放 MV
|
||||
const openPreview = (id) => {
|
||||
closeAll();
|
||||
|
||||
ajax("https://pujianchaoyin.com/api/getMvDetail", {
|
||||
id,
|
||||
}).then((res) => {
|
||||
@@ -234,10 +236,8 @@ const search = createApp({
|
||||
const manageAudio = (src, area) => {
|
||||
const audio = audioPlayer.value;
|
||||
closeAll();
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
if (audio?.src != src) audio.src = src;
|
||||
console.log("audio", audio);
|
||||
|
||||
audio.play().then(() => {
|
||||
if (area == "works") {
|
||||
awardAudioList.value.forEach((item) => {
|
||||
@@ -262,7 +262,7 @@ const search = createApp({
|
||||
playData.value = { ...zeroOrderStudents.value, area };
|
||||
}
|
||||
});
|
||||
});
|
||||
}, 500);
|
||||
};
|
||||
|
||||
// 重新播放
|
||||
|
||||
Reference in New Issue
Block a user