feat(dashboard): unify global UI theme across all admin templates

This commit is contained in:
liuwei
2026-04-15 17:00:15 +08:00
parent ee5c1ebadc
commit cb8adc40ce
19 changed files with 808 additions and 379 deletions

View File

@@ -13,25 +13,26 @@
<script src="/static/js/axios.min.js"></script>
<style>
:root {
--bg: #f4f7fb;
--text: #0f172a;
--text-soft: #64748b;
--border: rgba(148, 163, 184, 0.18);
--primary: #4f46e5;
--primary-2: #6366f1;
--bg: #eef3ef;
--bg-deep: #e4ebe6;
--text: #15211b;
--text-soft: #4f6258;
--border: rgba(101, 121, 113, 0.18);
--primary: #0f766e;
--primary-2: #0b5e57;
--danger: #ef4444;
--shadow: 0 24px 48px rgba(15, 23, 42, 0.10);
--shadow: 0 24px 48px rgba(21, 33, 27, 0.10);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
font-family: "Avenir Next", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
color: var(--text);
background:
radial-gradient(circle at top left, rgba(99, 102, 241, 0.14), transparent 30%),
radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.10), transparent 26%),
linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%);
radial-gradient(circle at top left, rgba(15, 118, 110, 0.14), transparent 30%),
radial-gradient(circle at bottom right, rgba(234, 88, 12, 0.10), transparent 26%),
linear-gradient(165deg, var(--bg) 0%, var(--bg-deep) 100%);
min-height: 100vh;
display: flex;
align-items: center;
@@ -46,14 +47,14 @@
border-radius: 32px;
overflow: hidden;
background: rgba(255,255,255,0.72);
border: 1px solid rgba(148,163,184,0.14);
border: 1px solid rgba(101,121,113,0.14);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: var(--shadow);
}
.login-showcase {
padding: 56px 52px;
background: linear-gradient(145deg, rgba(79,70,229,0.96), rgba(59,130,246,0.88));
background: linear-gradient(145deg, rgba(15,118,110,0.96), rgba(11,94,87,0.92));
color: #fff;
display: flex;
flex-direction: column;
@@ -119,7 +120,7 @@
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(248,250,252,0.96));
background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(247,251,248,0.96));
}
.login-card {
width: 100%;
@@ -131,7 +132,7 @@
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(79,70,229,0.08);
background: rgba(15,118,110,0.08);
color: var(--primary);
font-size: 12px;
font-weight: 700;
@@ -146,14 +147,14 @@
.el-input__inner {
height: 48px;
border-radius: 14px;
border: 1px solid rgba(148,163,184,0.22);
background: rgba(248,250,252,0.94);
border: 1px solid rgba(101,121,113,0.22);
background: rgba(247,251,248,0.94);
color: var(--text);
transition: all .18s ease;
}
.el-input__inner:focus {
border-color: rgba(99,102,241,0.42);
box-shadow: 0 0 0 4px rgba(99,102,241,0.10);
border-color: rgba(15,118,110,0.42);
box-shadow: 0 0 0 4px rgba(15,118,110,0.10);
background: #fff;
}
.el-form-item__content { margin-left: 0 !important; }
@@ -166,7 +167,7 @@
color: #fff;
font-weight: 700;
font-size: 15px;
box-shadow: 0 14px 28px rgba(79,70,229,0.20);
box-shadow: 0 14px 28px rgba(15,118,110,0.20);
}
.login-button:hover, .login-button:focus {
opacity: .96;