AskaEth
bc8b1ee6c0
- M3 认证/权限/审计/限流 + 全部 REST 接口 - M4 管理面板（MIUIx + 成绩录入/积分榜下钻/大屏控制） - M5a 大屏页面（六页 + 明细覆盖层 + 缩放适配） - M6 WebSocket 实时同步中心 - M7 xlsx 导出 + 赛事包 zip + 备份 - 规则包 YAML 导入导出（差异预览） - 字体 vendor 子集化（4 套 x2 字重） - 集成：realtime/export/rules 接入 main+httpapi；backup 子命令 - 修复：中间件包装 ResponseWriter 丢失 Hijacker，导致 WS 握手 501
80 lines
2.4 KiB
CSS
80 lines
2.4 KiB
CSS
/* ═══════════════════════════════════════════
|
|
MIUIX CONSOLE — Stat Card Component
|
|
═══════════════════════════════════════════ */
|
|
|
|
.mx-stat{
|
|
background:var(--mx-s2);
|
|
border-radius:var(--mx-r);
|
|
padding:16px;
|
|
position:relative;overflow:hidden;
|
|
cursor:pointer;
|
|
box-shadow:var(--mx-sh1);
|
|
transition:all var(--mx-d3) var(--mx-ease);
|
|
}
|
|
.mx-stat:hover{transition-duration:var(--mx-d2)}
|
|
.mx-stat:active{transform:scale(0.97)}
|
|
|
|
/* 顶部 accent 线 */
|
|
.mx-stat::before{
|
|
content:'';position:absolute;top:0;left:0;right:0;height:2px;
|
|
background:var(--mx-stat-accent,var(--mx-primary));
|
|
opacity:0;transition:opacity var(--mx-d2);
|
|
}
|
|
.mx-stat:hover::before{opacity:1}
|
|
|
|
/* 右上角柔光晕 */
|
|
.mx-stat::after{
|
|
content:'';position:absolute;top:-40%;right:-20%;
|
|
width:100px;height:100px;
|
|
background:var(--mx-stat-accent,var(--mx-primary));
|
|
border-radius:50%;opacity:0.04;
|
|
transition:opacity var(--mx-d2);
|
|
}
|
|
.mx-stat:hover::after{opacity:0.08}
|
|
|
|
.mx-stat-label{
|
|
font-size:11px;font-weight:600;color:var(--mx-t3);
|
|
text-transform:uppercase;letter-spacing:0.06em;
|
|
margin-bottom:10px;display:flex;align-items:center;gap:8px;
|
|
}
|
|
|
|
.mx-stat-icon{
|
|
width:26px;height:26px;border-radius:var(--mx-r-xs);
|
|
display:flex;align-items:center;justify-content:center;
|
|
transition:transform var(--mx-d2) var(--mx-ease);
|
|
}
|
|
.mx-stat:hover .mx-stat-icon{transform:scale(1.12) rotate(-3deg)}
|
|
|
|
.mx-stat-value{
|
|
font-size:28px;font-weight:800;
|
|
letter-spacing:-0.03em;
|
|
font-variant-numeric:tabular-nums;
|
|
line-height:1;margin-bottom:8px;
|
|
}
|
|
|
|
.mx-stat-delta{
|
|
display:inline-flex;align-items:center;gap:4px;
|
|
font-size:11px;font-weight:600;
|
|
padding:2px 8px;border-radius:var(--mx-r-pill);
|
|
}
|
|
.mx-stat-delta.up{background:rgba(52,211,153,0.1);color:var(--mx-green)}
|
|
.mx-stat-delta.down{background:rgba(248,113,113,0.1);color:var(--mx-red)}
|
|
|
|
/* Grid layout */
|
|
.mx-stat-grid{
|
|
display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
|
|
}
|
|
@media(min-width:768px){
|
|
.mx-stat-grid{grid-template-columns:repeat(4,1fr)}
|
|
}
|
|
|
|
/* Mobile */
|
|
@media(max-width:767px){
|
|
.mx-stat{padding:14px}
|
|
.mx-stat-value{font-size:22px}
|
|
.mx-stat-icon{width:24px;height:24px}
|
|
.mx-stat-icon svg{width:12px;height:12px}
|
|
.mx-stat-label{font-size:10px}
|
|
.mx-stat-delta{font-size:10px;padding:2px 6px}
|
|
}
|