fix(admin): 修复后台登录页输入框白底浅字导致输入内容不可见
- 根因:styles/admin.css 的全局表单增强规则带 !important,把 .el-input__wrapper 底色固定为白色 (background-color: #ffffff !important),登录页原有的深色输入框样式被整体覆盖; 而输入文字色仍是 #f1f5f9(近白),于是形成"白底浅字",输入内容与光标都看不见 - 影响范围:登录页用户名/密码/验证码三个输入框。用户名与密码被浏览器自动填充 (浅底 + 深色文字)掩盖了问题,验证码框永远不会被自动填充,因此最先暴露 - 修复:登录页统一按浅色输入框配色,输入文字改为 #0f172a(白底对比度由 1.05:1 提升到 17.6:1), 清理已被全局规则覆盖失效的深色 wrapper 声明,并补充说明注释避免再次误写 - 验证:headless Chrome + CDP 真实加载 /admin/login 并逐字输入,取计算样式确认 文字色由 rgb(241,245,249) 变为 rgb(15,23,42),对照截图确认验证码清晰可见; 前端门禁 npm run check / test:coverage / build 全部通过
This commit is contained in:
@@ -285,26 +285,16 @@ async function handleLogin() {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
/* 注意:styles/admin.css 里的全局增强规则带 !important,把输入框底色固定成白色
|
||||
(.el-input__wrapper { background-color: #ffffff !important }),本页原设计的深色输入框
|
||||
无法生效;若仍把文字设成浅色就是"白底浅字",输入内容与光标都看不见
|
||||
(验证码框不会被浏览器自动填充,因此最先暴露该问题)。
|
||||
这里统一按浅色输入框配色:深色文字 + 中灰占位符;白底、边框与蓝色焦点环由该全局规则提供。 */
|
||||
.admin-form :deep(.el-input__wrapper) {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
|
||||
border-radius: 10px;
|
||||
padding: 0 12px;
|
||||
transition:
|
||||
box-shadow 0.2s,
|
||||
background 0.2s;
|
||||
}
|
||||
.admin-form :deep(.el-input__wrapper:hover) {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.admin-form :deep(.el-input__wrapper.is-focus) {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(20, 119, 255, 0.45) inset,
|
||||
0 0 0 3px rgba(20, 119, 255, 0.08);
|
||||
}
|
||||
.admin-form :deep(.el-input__inner) {
|
||||
color: #f1f5f9;
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user