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); } /* 自定义复选框样式 */