Henry_Du/BYW-VoiceHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): 优化投票/评论按钮样式、评论弹窗浅色化、投稿表单残留黑框修复

Browse Source 
- SongList 点赞按钮改用 indigo 渐变硬边圆角 12px，新增阴影；评论按钮从胶囊 blue 改为浅灰底 indigo 图标几何风格
- SongCommentsDialog 弹窗整体浅色化：bg-white 主底、评论卡片 zinc-50、输入框 focus indigo 环、发送按钮 indigo 主色系
- RequestForm 投稿表单：搜索结果容器从 rgba(0,0,0,0.4) 改为 bg-secondary 浅灰；备注输入框 bg-white；复选框/横条状态/手动输入按钮/提交按钮全套浅色 + indigo 主题
This commit is contained in:
Henry_Du
2026-09-18 23:21:53 +08:00
parent 8a82cb77a7
commit 87aa12d573
3 changed files with 88 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Songs/SongList.vue
+21 -17
View File
@@ -2231,24 +2231,27 @@ const vRipple = {
justify-content: center;
width: 48px;
height: 45px;
background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 8px;
background: linear-gradient(180deg, #4f46e5 0%, #6366f1 100%);
border: 1px solid rgba(79, 70, 229, 0.25);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 10px rgba(79, 70, 229, 0.18);
}
.like-button.liked {
background: var(--bg-secondary, #1a1d24);
border-color: var(--border-secondary, #242f38);
background: var(--primary-light, rgba(79, 70, 229, 0.12));
border-color: var(--primary, #4f46e5);
background-image: none;
box-shadow: none;
}
.like-button.disabled {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
background: var(--bg-secondary, #f4f4f5);
border-color: var(--border-secondary, #e4e4e7);
cursor: not-allowed;
opacity: 0.5;
box-shadow: none;
}
.like-button.disabled .like-icon {
@@ -3054,22 +3057,23 @@ button:disabled {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
width: 26px;
height: 26px;
margin-left: 6px;
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 999px;
background: rgba(59, 130, 246, 0.08);
color: #60a5fa;
border: 1px solid var(--border-secondary, #e4e4e7);
border-radius: 10px;
background: var(--bg-secondary, #f4f4f5);
color: var(--primary, #4f46e5);
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
}
.submission-note-trigger:hover {
background: rgba(59, 130, 246, 0.18);
border-color: rgba(59, 130, 246, 0.5);
box-shadow: 0 6px 12px rgba(96, 165, 250, 0.15);
background: rgba(79, 70, 229, 0.08);
border-color: rgba(79, 70, 229, 0.35);
color: #4338ca;
box-shadow: 0 4px 10px rgba(79, 70, 229, 0.12);
}
.submission-note-modal {