97 lines
2.2 KiB
CSS
97 lines
2.2 KiB
CSS
/* 统一 KPI 统计网格响应式规范 */
|
||
|
||
.kpi-grid {
|
||
display: grid !important;
|
||
gap: 12px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 规则 1：屏幕宽度 >= 1200px -> 固定 4 列 */
|
||
@media (min-width: 1200px) {
|
||
.kpi-grid {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
||
}
|
||
}
|
||
|
||
/* 规则 2：768px <= 屏幕宽度 < 1200px -> 固定 2 列 */
|
||
@media (min-width: 768px) and (max-width: 1199.98px) {
|
||
.kpi-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||
}
|
||
}
|
||
|
||
/* 规则 3：屏幕宽度 < 768px -> 固定 1 列 */
|
||
@media (max-width: 767.98px) {
|
||
.kpi-grid {
|
||
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
|
||
}
|
||
}
|
||
|
||
/* 强制子项允许收缩，防止内部长文本撑爆网格 */
|
||
.kpi-grid > *,
|
||
.kpi-grid-6 > * {
|
||
min-width: 0 !important;
|
||
flex: none !important; /* 覆盖旧的 flex 逻辑 */
|
||
width: auto !important; /* 让 grid 控制宽度 */
|
||
}
|
||
|
||
/* 6-2-1 网格规范 (对标 CRMEB 统计概况) */
|
||
.kpi-grid-6 {
|
||
display: grid !important;
|
||
gap: 12px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
@media (min-width: 1200px) {
|
||
.kpi-grid-6 {
|
||
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) and (max-width: 1199.98px) {
|
||
.kpi-grid-6 {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 767.98px) {
|
||
.kpi-grid-6 {
|
||
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
|
||
}
|
||
}
|
||
|
||
/* ===== 后台通用紧凑布局规范 (CRMEB 1:1) ===== */
|
||
|
||
/* 页面根容器: 去除各页面自带的 padding，由 Layout 统一管理 */
|
||
.admin-page {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
/* 垂直区块容器: 统一控制卡片、组件之间的间距 */
|
||
.admin-sections {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--admin-section-gap);
|
||
width: 100%;
|
||
}
|
||
|
||
/* 通用网格: 用于图表布局等 */
|
||
.admin-grid {
|
||
display: grid;
|
||
gap: var(--admin-section-gap);
|
||
width: 100%;
|
||
}
|
||
|
||
/* 统一卡片内部间距: 替代业务组件或页面内硬编码的 padding */
|
||
.admin-card {
|
||
padding: var(--admin-card-padding) !important;
|
||
background: #ffffff;
|
||
border-radius: 4px;
|
||
}
|