From 25c7517405f9ec0fe77692465e6526dfc558af08 Mon Sep 17 00:00:00 2001 From: HenryDu8133 <813367384@qq.com> Date: Fri, 18 Sep 2026 23:48:16 +0800 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E6=8A=95=E7=A8=BF=E9=A1=BB=E7=9F=A5?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E6=B5=85=E8=89=B2=E5=8C=96=E3=80=81=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E6=8C=89=E9=92=AEindigo=E5=8C=96=E3=80=81=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=8C=89=E9=92=AE=E5=87=A0=E4=BD=95=E9=A3=8E=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - RequestForm 左侧投稿须知卡片：从 rgba(0,0,0,0.4) 黑透明改为 bg-secondary#f4f4f5 浅灰底+边+16px圆角，标题加粗深色 - 搜索输入框：从深色 input-bg 改为白底细灰边，indigo focus 环；搜索按钮从 blue 渐变胶囊升级为 indigo(#4f46e5→#6366f1) 渐变硬边12px+投影 - 联合投稿区域：section-label 改深字；添加按钮从 bg-tertiary+白字改为 浅灰底+深灰字 hover indigo 填充反白；标签 collaborator-tag 同步 indigo 淡底 --- app/components/Songs/RequestForm.vue | 114 +++++++++++++++------------ 1 file changed, 65 insertions(+), 49 deletions(-) diff --git a/app/components/Songs/RequestForm.vue b/app/components/Songs/RequestForm.vue index 761dcef..3deab98 100644 --- a/app/components/Songs/RequestForm.vue +++ b/app/components/Songs/RequestForm.vue @@ -2934,10 +2934,11 @@ defineExpose({ } .rules-section { - background: rgba(0, 0, 0, 0.4); - border-radius: 13px; - padding: 1.25rem; - flex: 0 0 35%; /* 稍微缩小规则区域占比 */ + background: var(--bg-secondary, #f4f4f5); + border: 1px solid var(--border-secondary, #e4e4e7); + border-radius: 16px; + padding: 1.5rem 1.75rem; + flex: 0 0 35%; min-width: 300px; height: 100%; overflow-y: auto; @@ -2945,24 +2946,24 @@ defineExpose({ .section-title { font-family: 'MiSans', sans-serif; - font-weight: 400; - font-size: 15px; - letter-spacing: 0.04em; - color: var(--text-secondary); - margin-bottom: 0.75rem; + font-weight: 700; + font-size: 16px; + letter-spacing: 0.02em; + color: var(--text-primary, #09090b); + margin-bottom: 1rem; } .rules-content-desktop { font-family: 'MiSans', sans-serif; font-weight: 400; font-size: 15px; - line-height: 1.7; - letter-spacing: 0.04em; - color: var(--text-primary, #ffffff); + line-height: 1.75; + letter-spacing: 0.02em; + color: var(--text-primary, #18181b); } .rules-content-desktop p { - margin-bottom: 0.6rem; + margin-bottom: 0.7rem; } /* 移动端样式 */ @@ -3216,47 +3217,55 @@ defineExpose({ } .search-input { - background: var(--input-bg, #040e15); - border: 1px solid var(--input-border, #242f38); - border-radius: 8px; - padding: 0.6rem 0.85rem; + background: var(--bg-primary, #ffffff); + border: 1px solid var(--border-secondary, #e4e4e7); + border-radius: 12px; + padding: 0.75rem 1rem; font-family: 'MiSans', sans-serif; font-weight: 600; font-size: 15px; - color: var(--input-text, rgba(255, 255, 255, 0.6)); + color: var(--text-primary, #09090b); flex: 1; - min-width: 100px; /* 确保输入框不会缩到太小 */ + min-width: 100px; + transition: all 0.2s ease; +} + +.search-input::placeholder { + color: var(--text-tertiary, #a1a1aa); } .search-input:focus { outline: none; - border-color: #0b5afe; + border-color: var(--primary, #4f46e5); + box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); } .search-button { - background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%); - border: 1px solid rgba(255, 255, 255, 0.16); - border-radius: 8px; - padding: 0.75rem 1.5rem; - color: var(--text-primary, #ffffff); + background: linear-gradient(180deg, #4f46e5 0%, #6366f1 100%); + border: 1px solid rgba(79, 70, 229, 0.25); + border-radius: 12px; + padding: 0.8rem 1.75rem; + color: #ffffff; font-family: 'MiSans', sans-serif; - font-weight: 600; + font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; transition: all 0.3s ease; - flex-shrink: 0; /* 确保搜索按钮始终完整显示，不被重叠 */ + flex-shrink: 0; + box-shadow: 0 4px 12px rgba(79, 70, 229, 0.18); } .search-button:hover:not(:disabled) { transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 67, 248, 0.3); + box-shadow: 0 6px 16px rgba(79, 70, 229, 0.28); } .search-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; + box-shadow: 0 2px 6px rgba(79, 70, 229, 0.1); } /* 联合投稿人区域 */ @@ -3265,16 +3274,16 @@ defineExpose({ align-items: center; gap: 1rem; flex: 1; - min-width: 200px; /* 增加最小宽度，防止在窄屏下与搜索框重叠 */ + min-width: 200px; } .section-label { font-family: 'MiSans', sans-serif; - font-weight: 600; + font-weight: 700; font-size: 16px; - color: var(--text-primary, #ffffff); + color: var(--text-primary, #09090b); white-space: nowrap; - flex-shrink: 0; /* 防止标签被压缩 */ + flex-shrink: 0; } .collaborators-list { @@ -3288,45 +3297,52 @@ defineExpose({ display: flex; align-items: center; gap: 0.5rem; - background: rgba(11, 90, 254, 0.1); - border: 1px solid rgba(11, 90, 254, 0.2); - border-radius: 6px; - padding: 0.25rem 0.5rem; - font-size: 14px; - color: var(--text-primary, #ffffff); + background: rgba(79, 70, 229, 0.08); + border: 1px solid rgba(79, 70, 229, 0.2); + border-radius: 10px; + padding: 0.3rem 0.6rem; + font-size: 13px; + color: var(--primary, #4f46e5); + font-weight: 600; } .remove-collaborator { background: none; border: none; - color: var(--text-secondary); + color: var(--primary, #4f46e5); cursor: pointer; display: flex; align-items: center; padding: 0; + opacity: 0.7; + transition: opacity 0.2s; } .remove-collaborator:hover { - color: var(--text-primary, #ffffff); + opacity: 1; + color: #4338ca; } .add-collaborator-btn { display: flex; align-items: center; - gap: 0.25rem; - background: var(--bg-tertiary); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 6px; - padding: 0.25rem 0.75rem; + gap: 0.3rem; + background: var(--bg-secondary, #f4f4f5); + border: 1px solid var(--border-secondary, #e4e4e7); + border-radius: 10px; + padding: 0.45rem 0.9rem; font-size: 13px; - color: rgba(255, 255, 255, 0.8); + font-weight: 600; + color: var(--text-secondary, #52525b); cursor: pointer; - transition: all 0.2s; + transition: all 0.2s ease; } .add-collaborator-btn:hover { - background: rgba(255, 255, 255, 0.1); - color: var(--text-primary, #ffffff); + background: var(--primary, #4f46e5); + color: #ffffff; + border-color: var(--primary, #4f46e5); + box-shadow: 0 4px 10px rgba(79, 70, 229, 0.18); } /* 自定义复选框样式 */