feat(admin-dashboard): add mini share chart for plan order top5
This commit is contained in:
@@ -415,6 +415,67 @@
|
||||
color:var(--adm-text, #0f172a);
|
||||
}
|
||||
|
||||
/* 可复用:迷你占比(Top5)(渐进增强:由 admin.js 渲染,页面无 JS 时为空但不影响表格) */
|
||||
.adm-mini-share{
|
||||
margin-top:10px;
|
||||
width:100%;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:8px;
|
||||
padding:10px 10px;
|
||||
border:1px solid var(--adm-border-color, #e5e7eb);
|
||||
border-radius:var(--adm-radius, 12px);
|
||||
background:var(--adm-surface-tint, rgba(15, 23, 42, .02));
|
||||
box-shadow:var(--adm-shadow-sm);
|
||||
}
|
||||
|
||||
.adm-mini-share.is-empty{
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
color:var(--adm-text-muted, #94a3b8);
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.adm-mini-share-row{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
}
|
||||
|
||||
.adm-mini-share-name{
|
||||
width:72px;
|
||||
min-width:72px;
|
||||
max-width:72px;
|
||||
font-size:12px;
|
||||
color:var(--adm-text-secondary, #64748b);
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
|
||||
.adm-mini-share-bar-wrap{
|
||||
flex:1;
|
||||
min-width:0;
|
||||
height:12px;
|
||||
border-radius:999px;
|
||||
background:rgba(15, 23, 42, .06);
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.adm-mini-share-bar{
|
||||
height:100%;
|
||||
border-radius:999px;
|
||||
background:linear-gradient(90deg, rgba(245, 158, 11, .45), rgba(245, 158, 11, .16));
|
||||
}
|
||||
|
||||
.adm-mini-share-value{
|
||||
width:92px;
|
||||
min-width:92px;
|
||||
text-align:right;
|
||||
font-size:12px;
|
||||
color:var(--adm-text, #0f172a);
|
||||
}
|
||||
|
||||
.kpi-grid{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(4,minmax(0,1fr));
|
||||
|
||||
Reference in New Issue
Block a user