feat(web): 深度定制 Element Plus 主题 — 靛蓝主色/暗色模式/侧栏折叠/面包屑/登录页重绘
- 新增 styles/theme.css:CSS 变量覆盖默认主题(主色 #4F46E5、圆角、阴影、页面背景),html.dark 暗色变量 - 新增 stores/theme.ts:暗色/亮色切换,localStorage 持久化 - main.ts 引入 element-plus 暗色 css-vars 与主题文件,挂载前初始化主题 - index.html 加 SVG favicon 与防暗色闪烁内联脚本 - AdminLayout:深色可折叠侧栏、header 面包屑 + 暗色切换按钮、页面切换过渡 - UserLayout:header 打磨 + 暗色切换按钮 - LoginView/ApplyView:统一品牌渐变背景与卡片,登录页 OTP 输入行内联发送按钮、登录按钮唯一通栏主按钮(修复按钮错位)
This commit is contained in:
@@ -0,0 +1,186 @@
|
||||
/* ============================================================
|
||||
* 全局主题:通过 CSS 变量覆盖 Element Plus 默认主题
|
||||
* 亮色为默认;html.dark 下为暗色(配合 element-plus dark css-vars)
|
||||
* ============================================================ */
|
||||
|
||||
:root {
|
||||
/* 品牌主色:靛蓝(替代默认 #409EFF) */
|
||||
--el-color-primary: #4f46e5;
|
||||
--el-color-primary-light-3: #847eed;
|
||||
--el-color-primary-light-5: #a7a3f2;
|
||||
--el-color-primary-light-7: #cac8f7;
|
||||
--el-color-primary-light-8: #dcdafa;
|
||||
--el-color-primary-light-9: #edecfc;
|
||||
--el-color-primary-dark-2: #3f38b7;
|
||||
|
||||
/* 圆角 */
|
||||
--el-border-radius-base: 8px;
|
||||
--el-border-radius-small: 6px;
|
||||
|
||||
/* 页面背景:偏冷灰白 */
|
||||
--el-bg-color-page: #f4f5fa;
|
||||
|
||||
/* 阴影:更柔和 */
|
||||
--el-box-shadow-light: 0 4px 16px rgba(15, 23, 42, 0.06);
|
||||
--el-box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
|
||||
|
||||
/* 字体栈 */
|
||||
--el-font-family:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
|
||||
'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
|
||||
|
||||
/* 布局自定义变量 */
|
||||
--app-sidebar-bg: #1c2333;
|
||||
--app-sidebar-bg-active: rgba(99, 102, 241, 0.18);
|
||||
--app-sidebar-text: rgba(255, 255, 255, 0.72);
|
||||
--app-sidebar-text-active: #ffffff;
|
||||
--app-sidebar-logo-bg: rgba(99, 102, 241, 0.16);
|
||||
--app-header-height: 60px;
|
||||
}
|
||||
|
||||
/* ---------------- 暗色模式 ---------------- */
|
||||
html.dark {
|
||||
/* 主色在暗色下提亮一档,保证对比度 */
|
||||
--el-color-primary: #818cf8;
|
||||
--el-color-primary-light-3: #5a62ae;
|
||||
--el-color-primary-light-5: #41467c;
|
||||
--el-color-primary-light-7: #272a4a;
|
||||
--el-color-primary-light-8: #1a1c32;
|
||||
--el-color-primary-light-9: #14162b;
|
||||
--el-color-primary-dark-2: #6366f1;
|
||||
|
||||
--el-bg-color-page: #101218;
|
||||
--app-sidebar-bg: #161a24;
|
||||
--app-sidebar-logo-bg: rgba(129, 140, 248, 0.16);
|
||||
}
|
||||
|
||||
/* ---------------- 认证页(登录 / 申请)公共样式 ----------------
|
||||
* 深色品牌背景 + 光晕,卡片浮于其上。
|
||||
* 亮/暗模式下此背景保持一致,形成品牌页与内部页面的反差。
|
||||
*/
|
||||
.auth-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(1200px 600px at 85% -10%, rgba(99, 102, 241, 0.28), transparent 60%),
|
||||
radial-gradient(900px 500px at -10% 110%, rgba(56, 189, 248, 0.16), transparent 55%),
|
||||
linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #26224f 100%);
|
||||
}
|
||||
.auth-page::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 560px;
|
||||
height: 560px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(99, 102, 241, 0.22), transparent 70%);
|
||||
top: -180px;
|
||||
right: -120px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.auth-page::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 480px;
|
||||
height: 480px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(34, 211, 238, 0.14), transparent 70%);
|
||||
bottom: -160px;
|
||||
left: -100px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
width: 420px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
html.dark .auth-card {
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.auth-card .el-card__body {
|
||||
padding: 28px 28px 24px;
|
||||
}
|
||||
|
||||
/* 品牌区:图标放渐变圆角块内 */
|
||||
.auth-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.auth-brand .brand-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
|
||||
}
|
||||
.auth-brand h2 {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.auth-brand .sub {
|
||||
font-size: 12.5px;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.auth-foot {
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
/* 表单提交按钮:通栏主按钮 */
|
||||
.auth-submit {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ---------------- 全局细节 ---------------- */
|
||||
/* 细滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(120, 130, 150, 0.35);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(120, 130, 150, 0.55);
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 文本选中颜色 */
|
||||
::selection {
|
||||
background: rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
|
||||
/* 页面切换过渡(避免突兀) */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user