refactor(style): 全部硬编码 #1E3A8A 替换为 var(--brand-primary)

为支持全局换色 (theme.scss :root 改 1 行即换主色), 把所有业务代码里
硬编码主色清理掉, 改用 CSS 变量.

扫描结果 (grep -ri '#1[Ee]3[Aa]8[Aa]' src/):
- theme.scss:21 定义本身 → 保留
- theme.js:7-8 JSDoc 注释示例 → 保留
- 其它 19 处业务硬编码 → 全部替换

替换明细:
- auth/Login.vue     13 处 (login-tabs/bg/color/border/btn/links)
- manager/Workbench.vue 2 处 (stat-card bg + border, 跟上个 commit 对齐)
- sponsor/SponsorProjects.vue 1 处 (var(--brand-primary, #1E3A8A) fallback → 裸变量, SKILL 禁 fallback)
- doctor/SignContract.vue 1 处 (同上)

rgb(30,58,138) / rgba(30,58,138,X) 形式: 0 处.

效果: 改 theme.scss :root --brand-primary 一行, 全项目颜色自动跟随.
派生色 (deep/darker/light/lighter/text/mix) 已在 theme.scss 内 HEX→HSL 自动算, 不需手动改.
This commit is contained in:
郭庆泰
2026-08-22 20:36:47 +08:00
parent 976178c3f1
commit cd01550d80
4 changed files with 20 additions and 20 deletions
+16 -16
View File
@@ -518,7 +518,7 @@ onUnmounted(() => {
.login-page .logo-icon{
width: 36px;
height: 36px;
background: #1e3a8a;
background: var(--brand-primary);
color: #fff;
display: flex;
align-items: center;
@@ -563,7 +563,7 @@ onUnmounted(() => {
}
.login-page .banner-inner{
background: #1e3a8a;
background: var(--brand-primary);
color: #fff;
padding: 56px 56px;
height: 440px;
@@ -647,10 +647,10 @@ onUnmounted(() => {
transition: color 0.2s, border-color 0.2s;
user-select: none;
}
.login-page .login-tabs .tab:hover{ color: #1e3a8a; }
.login-page .login-tabs .tab:hover{ color: var(--brand-primary); }
.login-page .login-tabs .tab.active{
color: #1e3a8a;
border-bottom-color: #1e3a8a;
color: var(--brand-primary);
border-bottom-color: var(--brand-primary);
font-weight: 500;
}
@@ -672,7 +672,7 @@ onUnmounted(() => {
}
.login-page .form-input:focus{
border-color: #1e3a8a;
border-color: var(--brand-primary);
}
.login-page .form-input::placeholder{
@@ -719,7 +719,7 @@ onUnmounted(() => {
font-size: 20px;
font-weight: 600;
letter-spacing: 4px;
color: #1e3a8a;
color: var(--brand-primary);
cursor: pointer;
user-select: none;
font-family: 'Courier New', monospace;
@@ -733,7 +733,7 @@ onUnmounted(() => {
}
.login-page .form-bottom-links .bottom-link{
color: #1e3a8a;
color: var(--brand-primary);
cursor: pointer;
}
@@ -744,7 +744,7 @@ onUnmounted(() => {
.login-page .login-btn{
width: 100%;
height: 44px;
background: #1e3a8a;
background: var(--brand-primary);
border: none;
color: #fff;
font-size: 15px;
@@ -819,14 +819,14 @@ onUnmounted(() => {
}
.login-page .user-type-item:hover{
border-color: #1e3a8a;
border-color: var(--brand-primary);
background: #f9fafb;
}
.login-page .user-type-item input[type="radio"]{
margin-right: 12px;
cursor: pointer;
accent-color: #1e3a8a;
accent-color: var(--brand-primary);
}
.login-page .user-type-item .info{ flex: 1; }
@@ -857,7 +857,7 @@ onUnmounted(() => {
}
.login-page .modal-btn.primary{
background: #1e3a8a;
background: var(--brand-primary);
color: #fff;
}
@@ -870,8 +870,8 @@ onUnmounted(() => {
}
.login-page .modal-btn.secondary:hover{
border-color: #1e3a8a;
color: #1e3a8a;
border-color: var(--brand-primary);
color: var(--brand-primary);
}
/* 响应式 */
@@ -970,13 +970,13 @@ onUnmounted(() => {
height: 44px;
border: 1px solid #d1d5db;
background: #f9fafb;
color: #1e3a8a;
color: var(--brand-primary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.sms-btn:hover:not(:disabled) {
border-color: #1e3a8a;
border-color: var(--brand-primary);
background: #f3f4f6;
}
.sms-btn:disabled {
+1 -1
View File
@@ -321,7 +321,7 @@ onMounted(load)
padding: 4px 8px;
}
.pad-confirm {
color: var(--brand-primary, #1e3a8a);
color: var(--brand-primary);
font-weight: 600;
cursor: pointer;
padding: 4px 12px;
+2 -2
View File
@@ -103,8 +103,8 @@ onMounted(() => { loadStats(); loadNotices() })
/* 5 个 KPI 卡 (深色底白字) */
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 12px; }
.stat-card {
background: #1e3a8a;
border: 1px solid #1e3a8a;
background: var(--brand-primary);
border: 1px solid var(--brand-primary);
border-radius: 8px;
padding: 24px;
cursor: pointer;
@@ -397,7 +397,7 @@ onMounted(load)
.breadcrumb { color: #909399; font-size: 13px; margin-bottom: 12px; }
.filter-form { margin-bottom: 12px; }
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.link { color: var(--brand-primary, #1E3A8A); }
.link { color: var(--brand-primary); }
.link-bold { color: #303133; font-weight: 600; }
.mono { font-family: monospace; color: #606266; font-size: 12px; }
.pagination { margin-top: 12px; justify-content: flex-end; display: flex; }