style(admin/workbench): 上方 5 个 KPI stat-card 改为深色底白字
改动 (仅 CSS, 业务逻辑 100% 保留): - .stat-card 背景: #fff → linear-gradient var(--brand-primary) → var(--brand-primary-deep) - .stat-card 边框: 1px solid #f0f0f0 → 删 (深色底不需要边框) - .stat-card 文字: inherit → #fff (白字) - .stat-card hover: border-color 变化 → translateY(-2px) + 蓝色阴影上浮 - .stat-label 颜色: #8c8c8c → rgba(255,255,255,0.75) (白字次级) - .stat-value 渐变文字 hack → 直接 color: #fff (去掉 -webkit-background-clip/text-fill-color) 视觉效果: 5 个 KPI 卡变深海军蓝渐变方块, 白字 + 半透明 label, 鼠标 hover 上浮 2px 不变: 模板/grid 布局/点击跳转逻辑/data load 函数 都不动
This commit is contained in:
@@ -99,30 +99,26 @@ onMounted(load)
|
|||||||
|
|
||||||
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 12px; }
|
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 12px; }
|
||||||
.stat-card {
|
.stat-card {
|
||||||
background: #fff;
|
background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-deep) 100%);
|
||||||
border: 1px solid #f0f0f0;
|
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
transition: border-color 0.2s, box-shadow 0.2s;
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
min-height: 120px;
|
min-height: 120px;
|
||||||
}
|
}
|
||||||
.stat-card:hover { border-color: var(--brand-primary); box-shadow: 0 2px 8px rgba(30,58,138,0.15); }
|
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(21,42,102,0.4); }
|
||||||
.stat-label { font-size: 14px; color: #8c8c8c; margin-bottom: 16px; }
|
.stat-label { font-size: 14px; color: rgba(255,255,255,0.75); margin-bottom: 16px; }
|
||||||
.stat-value {
|
.stat-value {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-deep) 100%);
|
color: #fff;
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hint-text { font-size: 12px; color: #8c8c8c; margin: 12px 0 20px; text-align: center; }
|
.hint-text { font-size: 12px; color: #8c8c8c; margin: 12px 0 20px; text-align: center; }
|
||||||
|
|||||||
Reference in New Issue
Block a user