feat: 登录态持久化 + 禁用按钮灰色 + 登录提示精简 + 全局美化 + 独立数据看板页
This commit is contained in:
+88
-14
@@ -15,7 +15,9 @@
|
||||
--danger: #e0483d;
|
||||
--danger-weak: #fdecea;
|
||||
--shadow: 0 1px 2px rgba(20, 30, 60, .05), 0 8px 24px rgba(20, 30, 60, .06);
|
||||
--shadow-lg: 0 12px 32px rgba(20, 30, 60, .12);
|
||||
--radius: 12px;
|
||||
--radius-lg: 18px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
@@ -39,8 +41,10 @@ html, body {
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 12px 24px;
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
box-shadow: 0 2px 12px rgba(20, 30, 60, .05);
|
||||
}
|
||||
.brand { display: flex; align-items: center; gap: 12px; }
|
||||
.logo {
|
||||
@@ -87,18 +91,18 @@ html, body {
|
||||
.btn:active { transform: translateY(1px); }
|
||||
.btn:disabled,
|
||||
.btn[disabled] {
|
||||
opacity: .5;
|
||||
opacity: .55;
|
||||
cursor: not-allowed;
|
||||
background: #eef1f6;
|
||||
color: #a0aab8;
|
||||
border-color: #d5dde8;
|
||||
transform: none;
|
||||
pointer-events: auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
.btn-primary:disabled,
|
||||
.btn-primary[disabled] {
|
||||
background: #b0c0d8;
|
||||
border-color: #b0c0d8;
|
||||
background: #c2c8d4;
|
||||
border-color: #c2c8d4;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
|
||||
@@ -160,18 +164,33 @@ select:focus, input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px
|
||||
|
||||
/* ---------- 卡片 ---------- */
|
||||
.cards {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
||||
gap: 12px; margin-top: 16px;
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 14px; margin-top: 16px;
|
||||
}
|
||||
.card {
|
||||
position: relative; overflow: hidden;
|
||||
background: var(--panel); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
|
||||
display: flex; flex-direction: column; gap: 6px;
|
||||
transition: transform .18s ease, box-shadow .18s ease;
|
||||
}
|
||||
.card::before {
|
||||
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
|
||||
background: var(--accent, var(--primary));
|
||||
}
|
||||
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
|
||||
.card span { font-size: 12px; color: var(--text-3); }
|
||||
.card b { font-size: 24px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
|
||||
.card b { font-size: 25px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
|
||||
.card.ok b { color: var(--ok); }
|
||||
.card.warn b { color: var(--warn); }
|
||||
.card.accent-blue { --accent: #2f6bff; }
|
||||
.card.accent-green { --accent: #12a86a; }
|
||||
.card.accent-orange { --accent: #e08c1a; }
|
||||
.card.accent-purple { --accent: #8b5cf6; }
|
||||
.card.accent-teal { --accent: #0ea5a4; }
|
||||
.card.accent-red { --accent: #e0483d; }
|
||||
.card.accent-indigo { --accent: #4f6bed; }
|
||||
.card.accent-gray { --accent: #94a3b8; }
|
||||
|
||||
/* ---------- 面板 ---------- */
|
||||
.panel {
|
||||
@@ -304,17 +323,31 @@ table.grid tbody tr.new:hover td { background: #d6f2e2; }
|
||||
position: fixed; inset: 0; z-index: 200;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 24px; background: linear-gradient(135deg, #1b2440, #2f6bff);
|
||||
overflow: hidden;
|
||||
}
|
||||
.login-gate::before,
|
||||
.login-gate::after {
|
||||
content: ''; position: absolute; border-radius: 50%;
|
||||
background: rgba(255, 255, 255, .08); pointer-events: none;
|
||||
}
|
||||
.login-gate::before { width: 340px; height: 340px; top: -90px; right: -70px; }
|
||||
.login-gate::after { width: 280px; height: 280px; bottom: -80px; left: -60px; background: rgba(255, 255, 255, .06); }
|
||||
.login-gate.hidden { display: none; }
|
||||
.login-box {
|
||||
position: relative; overflow: hidden;
|
||||
width: 420px; max-width: 100%;
|
||||
background: #fff; border-radius: 16px; padding: 28px 26px;
|
||||
background: #fff; border-radius: var(--radius-lg); padding: 30px 28px 28px;
|
||||
box-shadow: 0 24px 64px rgba(15, 23, 42, .35);
|
||||
}
|
||||
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
|
||||
.login-tip { margin: 0 0 18px; font-size: 12px; color: var(--text-3); line-height: 1.5; }
|
||||
.login-box::before {
|
||||
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
|
||||
background: linear-gradient(90deg, #2f6bff, #6a4bff);
|
||||
}
|
||||
.login-brand { display: flex; align-items: center; gap: 12px; margin: 2px 0 8px; }
|
||||
.login-brand .logo { width: 46px; height: 46px; border-radius: 13px; font-size: 18px; }
|
||||
.login-tip { margin: 0 0 20px; font-size: 12px; color: var(--text-3); line-height: 1.6; }
|
||||
.login-box .fi { margin-bottom: 14px; }
|
||||
.login-actions { display: flex; gap: 10px; margin-top: 4px; }
|
||||
.login-actions { display: flex; gap: 10px; margin-top: 6px; }
|
||||
.login-actions .btn { flex: 1; }
|
||||
.login-msg { margin-top: 12px; font-size: 12px; min-height: 18px; white-space: pre-wrap; }
|
||||
.login-msg.ok { color: var(--ok); }
|
||||
@@ -378,3 +411,44 @@ body.fs-on .topbar { padding-top: 8px; padding-bottom: 8px; }
|
||||
#rosterBody input { font-size: 12px; }
|
||||
}
|
||||
|
||||
/* ---------- 数据看板 ---------- */
|
||||
.dash-hero {
|
||||
background: linear-gradient(135deg, #1b2440, #2f6bff);
|
||||
color: #fff; padding: 20px 24px; border-radius: var(--radius-lg);
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.dash-hero .brand strong { color: #fff; font-size: 17px; }
|
||||
.dash-hero .brand small { color: rgba(255, 255, 255, .72); }
|
||||
.dash-hero a.back { color: #fff; opacity: .9; font-size: 13px; text-decoration: none; font-weight: 600; }
|
||||
.dash-hero a.back:hover { opacity: 1; text-decoration: underline; }
|
||||
.dash-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||||
.dash-controls select { width: 230px; height: 38px; }
|
||||
.dash-controls .inline { color: #fff; }
|
||||
.dash-controls .btn { background: rgba(255, 255, 255, .14); border-color: transparent; color: #fff; }
|
||||
.dash-controls .btn:hover { background: rgba(255, 255, 255, .24); }
|
||||
|
||||
.sec-title { margin: 22px 0 4px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
|
||||
.sec-title .tag-gray { background: var(--border-2); color: var(--text-3); padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
|
||||
|
||||
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 14px; }
|
||||
.class-card {
|
||||
background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
|
||||
padding: 16px 18px; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s;
|
||||
}
|
||||
.class-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
|
||||
.class-card h3 { margin: 0 0 2px; font-size: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
|
||||
.class-card .rate-num { font-size: 15px; font-weight: 800; white-space: nowrap; }
|
||||
.class-card .sub { font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
|
||||
.bar { height: 9px; border-radius: 999px; background: var(--border-2); overflow: hidden; }
|
||||
.bar > i { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }
|
||||
.class-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 14px; }
|
||||
.class-metrics .m { display: flex; flex-direction: column; gap: 2px; }
|
||||
.class-metrics .m span { color: var(--text-3); font-size: 11px; }
|
||||
.class-metrics .m b { font-size: 17px; font-weight: 700; }
|
||||
.metric-ok b { color: var(--ok); }
|
||||
.metric-warn b { color: var(--warn); }
|
||||
.metric-danger b { color: var(--danger); }
|
||||
|
||||
.empty { text-align: center; color: var(--text-3); padding: 40px 0; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user