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

feat(ui): 优化标签样式并添加播放状态高亮效果

Browse Source 
- 重构标签HTML结构，添加.tag-text容器
- 为当前播放标签添加旋转渐变边框效果
- 调整标签尺寸和内边距
- 添加控制台日志输出当前播放数据
- 更新VSCode端口配置
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-10-11 18:54:11 +08:00
parent bccccacad8
commit f1aa3a5d4a
5 changed files with 136 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}

4
song-request-station.html
View File

@@ -47,7 +47,9 @@
<div class="fill-item" v-for="(item, index) in tagsFill" :key="index" :class="[`item${ item.type }`]"></div>
</div>
<div class="list" id="bubbleContainer" ref="container">
<div class="tag-item" v-for="(item, index) in tags" :key="index" :class="[`item${ item.type }`, {'red': item.isred}]" @click="clickSongs(item.tag, item.songs)" @mouseleave="handleMouseleave" @mouseenter="handleMouseenter">{{ item.tag }}</div>
<div class="tag-item" v-for="(item, index) in tags" :key="index" :class="[`item${ item.type }`, {'red': item.isred},{'show': playData?.tag == item.tag}]" @click="clickSongs(item.tag, item.songs)" @mouseleave="handleMouseleave" @mouseenter="handleMouseenter">
<div class="tag-text">{{ item.tag }}</div>
</div>
</div>
</div>

70
static/css/song-request-station.css
View File

@@ -300,51 +300,89 @@
border-radius: 18px;
}
.tag-item {
height: 60px;
line-height: 60px;
height: 66px;
border-radius: 12px;
background: #d5e7f7;
position: absolute;
font-size: 20px !important;
color: #1c3e5e;
padding: 0 25px;
width: fit-content;
cursor: pointer;
box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
background: rgba(255, 255, 255, 0.223529);
opacity: 1 !important;
padding: 3px;
}
.tag-item.show::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 12px;
background: linear-gradient(var(--rotate), #db4743, #ffffff 43%, #c28846);
animation: bg 1.3s infinite linear;
}
@property --rotate {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes bg {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
.tag-item .tag-text {
background: #d5e7f7;
padding: 0 25px;
border-radius: 10px;
height: 100%;
display: flex;
align-items: center;
transition: background 0.3s, color 0.3s, z-index 0.3s, font-weight 0.3s;
position: relative;
z-index: 1;
}
.tag-item:hover {
font-weight: 650;
color: #583a05 !important;
background: #f19a04 !important;
z-index: 100 !important;
}
.tag-item:hover .tag-text {
background: #f19a04 !important;
}
.tag-item.item2 {
height: 50px;
line-height: 50px;
height: 56px;
color: #1c3e5e;
padding: 0 20px;
font-size: 18px !important;
}
.tag-item.item2 .tag-text {
padding: 0 20px;
background: #d5e7f7;
}
.tag-item.item3 {
height: 47px;
line-height: 47px;
height: 53px;
color: #1c3e5e;
padding: 0 16px;
font-size: 16px !important;
}
.tag-item.item3 .tag-text {
padding: 0 16px;
background: #d5e7f7;
}
.tag-item.item4 {
height: 30px;
line-height: 30px;
height: 36px;
color: #1c3e5e;
padding: 0 10px;
font-size: 14px !important;
}
.tag-item.item4 .tag-text {
padding: 0 10px;
background: #d5e7f7;
}
.tag-item.red {
.tag-item.red .tag-text {
color: #62263c !important;
background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%);
}

95
static/css/song-request-station.less
View File

@@ -356,70 +356,111 @@
}
.tag-item {
height: 60px;
line-height: 60px;
// border-radius: 30px;
height: 66px;
// line-height: 60px;
border-radius: 12px;
background: #d5e7f7;
// background: #d5e7f7;
position: absolute;
font-size: 20px !important;
color: #1c3e5e;
padding: 0 25px;
width: fit-content;
cursor: pointer;
box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
// box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
background: rgba(255, 255, 255, 0.223529);
opacity: 1 !important;
// transition: background 0.3s, color 0.3s, z-index 0.3s, font-weight 0.3s;
padding: 3px;
&.show::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 12px;
background: linear-gradient(var(--rotate), #db4743, #ffffff 43%, #c28846);
animation: bg 1.3s infinite linear;
}
@property --rotate {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes bg {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
.tag-text {
background: #d5e7f7;
padding: 0 25px;
border-radius: 10px;
height: 100%;
display: flex;
align-items: center;
transition: background 0.3s, color 0.3s, z-index 0.3s, font-weight 0.3s;
position: relative;
z-index: 1;
}
&:hover {
font-weight: 650;
color: #583a05 !important;
background: rgba(241, 154, 4, 1) !important;
z-index: 100 !important;
.tag-text {
background: rgba(241, 154, 4, 1) !important;
}
}
&.item2 {
height: 50px;
line-height: 50px;
// border-radius: 25px;
height: 56px;
color: #1c3e5e;
padding: 0 20px;
font-size: 18px !important;
.tag-text {
padding: 0 20px;
background: #d5e7f7;
}
}
&.item3 {
height: 47px;
line-height: 47px;
// border-radius: 25px;
height: 53px;
color: #1c3e5e;
padding: 0 16px;
font-size: 16px !important;
.tag-text {
padding: 0 16px;
background: #d5e7f7;
}
}
&.item4 {
height: 30px;
line-height: 30px;
// border-radius: 30px;
height: 36px;
color: #1c3e5e;
padding: 0 10px;
font-size: 14px !important;
.tag-text {
padding: 0 10px;
background: #d5e7f7;
}
}
&.red {
.tag-text {
color: #62263c !important;
background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%);
}
// &.red:hover {
// font-weight: 650;
// color: #583a05 !important;
// // background-color: rgba(241, 154, 4, 1) !important;
// background-color: rgb(255, 255, 255) !important;
// z-index: 100 !important;
// }
}
}
.bottom-play {

2
static/js/song-request-station.js
View File

@@ -404,6 +404,8 @@ createApp({
setTimeout(() => {
if (audio?.src != item.path) audio.src = `./static/mp3/station/${item.path}`;
audio.play().then(() => (playData.value = { ...item, state: true }));
console.log("playData.value", playData.value);
}, 500);
};