fix: #account高特异性选择器确保CSS覆盖生效
All checks were successful
continuous-integration/drone/push Build is passing

- 卡片分组改用#account前缀+!important
- 用户名颜色用三层选择器确保#111827生效
- 输入框样式用#account前缀+硬编码值
- Grid布局用#account前缀
- 卡片背景改为#FAFBFC区分白色底
This commit is contained in:
yiqiu
2026-03-21 11:24:34 +08:00
parent dbea104d92
commit 3c2559fb29

View File

@@ -32,16 +32,16 @@
} }
/* === 用户栏 === */ /* === 用户栏 === */
.box-top { #account .box-top {
height: auto; height: auto !important;
width: 100%; width: 100% !important;
padding: 20px 24px; padding: 20px 24px !important;
border-bottom: none; border-bottom: none !important;
background: linear-gradient(135deg, rgba(79,70,229,0.04) 0%, rgba(59,130,246,0.04) 100%); background: linear-gradient(135deg, rgba(79,70,229,0.04) 0%, rgba(59,130,246,0.04) 100%) !important;
border-radius: var(--acc-radius); border-radius: 10px !important;
display: flex; display: flex !important;
align-items: center; align-items: center !important;
margin-bottom: 8px; margin-bottom: 8px !important;
} }
.right-name { .right-name {
display: flex; display: flex;
@@ -49,11 +49,13 @@
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
} }
.name-text { .name-text,
font-size: 20px; #account .name-text,
font-weight: 700; #account .box-top .right-name .name-text {
line-height: 1.4; font-size: 20px !important;
color: var(--acc-text-primary) !important; font-weight: 700 !important;
line-height: 1.4 !important;
color: #111827 !important;
} }
.name-country { .name-country {
margin-top: 4px; margin-top: 4px;
@@ -138,20 +140,20 @@
} }
/* === 分组区块 — 基础资料/账户信息/OAuth === */ /* === 分组区块 — 基础资料/账户信息/OAuth === */
.basic, #account .basic,
.account, #account .account,
.oauth { #account .oauth {
padding: 24px; padding: 24px !important;
margin-top: 0; margin-top: 0 !important;
background: var(--acc-surface); background: #FAFBFC !important;
border: 1px solid var(--acc-border); border: 1px solid #E5E7EB !important;
border-radius: var(--acc-radius); border-radius: 10px !important;
margin-bottom: 16px; margin-bottom: 16px !important;
} }
.basic { margin-top: 24px; } #account .basic { margin-top: 24px !important; }
.account { margin-top: 0 !important; } #account .account { margin-top: 0 !important; }
.oauth { margin-top: 0; } #account .oauth { margin-top: 0 !important; }
.wx-switch { margin-top: 0; padding: 0 24px 24px; } #account .wx-switch { margin-top: 0; padding: 0 24px 24px; }
/* === 分组标题 === */ /* === 分组标题 === */
.account-title, .account-title,
@@ -166,21 +168,21 @@
} }
/* === 表单行 — 改用 Grid === */ /* === 表单行 — 改用 Grid === */
.basic > .el-row, #account .basic > .el-row,
.account > .el-row { #account .account > .el-row {
display: grid !important; display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important; grid-template-columns: 1fr 1fr 1fr !important;
gap: 16px 20px !important; gap: 16px 20px !important;
margin-top: 20px !important; margin-top: 20px !important;
} }
/* 隐藏 el-col span=3 空白列 */ /* 隐藏 el-col span=3 空白列 */
.basic > .el-row > .el-col-3, #account .basic > .el-row > .el-col-3,
.account > .el-row > .el-col-3 { #account .account > .el-row > .el-col-3 {
display: none !important; display: none !important;
} }
/* 让 el-col 填满 Grid 列 */ /* 让 el-col 填满 Grid 列 */
.basic > .el-row > .el-col, #account .basic > .el-row > .el-col,
.account > .el-row > .el-col { #account .account > .el-row > .el-col {
width: 100% !important; width: 100% !important;
max-width: 100% !important; max-width: 100% !important;
flex: none !important; flex: none !important;
@@ -222,43 +224,43 @@
} }
/* === 输入框 — 圆角边框 === */ /* === 输入框 — 圆角边框 === */
.box-item-b > .el-input, #account .box-item-b > .el-input,
.box-item-b .el-select, #account .box-item-b .el-select,
.box-item-b .el-textarea { #account .box-item-b .el-textarea {
width: 100% !important; width: 100% !important;
border: none; border: none !important;
border-bottom: none; border-bottom: none !important;
} }
.box-item-b .el-input__inner { #account .box-item-b .el-input__inner {
height: 40px; height: 40px !important;
padding: 0 12px; padding: 0 12px !important;
border: 1px solid var(--acc-border) !important; border: 1px solid #E5E7EB !important;
border-radius: var(--acc-radius-sm) !important; border-radius: 8px !important;
background: var(--acc-surface) !important; background: #FFFFFF !important;
font-size: 14px; font-size: 14px !important;
color: var(--acc-text-primary); color: #111827 !important;
transition: all var(--acc-transition); transition: all 200ms ease-out;
} }
.box-item-b .el-input__inner:hover { #account .box-item-b .el-input__inner:hover {
border-color: var(--acc-border-hover) !important; border-color: #D1D5DB !important;
} }
.box-item-b .el-input__inner:focus { #account .box-item-b .el-input__inner:focus {
border-color: var(--acc-border-focus) !important; border-color: var(--color-primary, #4F46E5) !important;
box-shadow: 0 0 0 3px rgba(79,70,229,0.08); box-shadow: 0 0 0 3px rgba(79,70,229,0.08) !important;
outline: none; outline: none !important;
} }
/* Select 输入框 */ /* Select 输入框 */
.box-item-b .el-select .el-input__inner { #account .box-item-b .el-select .el-input__inner {
border: 1px solid var(--acc-border) !important; border: 1px solid #E5E7EB !important;
border-radius: var(--acc-radius-sm) !important; border-radius: 8px !important;
} }
/* Textarea */ /* Textarea */
.box-item-b .el-textarea .el-textarea__inner { #account .box-item-b .el-textarea .el-textarea__inner {
padding: 10px 12px; padding: 10px 12px !important;
border: 1px solid var(--acc-border) !important; border: 1px solid #E5E7EB !important;
border-radius: var(--acc-radius-sm) !important; border-radius: 8px !important;
font-size: 14px; font-size: 14px !important;
transition: all var(--acc-transition); transition: all 200ms ease-out;
min-height: 80px; min-height: 80px;
} }
.box-item-b .el-textarea .el-textarea__inner:hover { .box-item-b .el-textarea .el-textarea__inner:hover {