|
|
@@ -1239,6 +1239,8 @@ export default {
|
|
|
position: relative;
|
|
|
min-height: calc(100vh - 100px);
|
|
|
padding: 16px 20px 24px;
|
|
|
+ /* 内嵌 qiankun 时禁止横向溢出：内容超宽只裁切不出滚动条，配合网格 minmax 保证不溢出 */
|
|
|
+ overflow-x: hidden;
|
|
|
color: var(--qb-text);
|
|
|
box-sizing: border-box;
|
|
|
background:
|
|
|
@@ -1591,7 +1593,8 @@ export default {
|
|
|
}
|
|
|
.qb-kpi-row {
|
|
|
display: grid;
|
|
|
- grid-template-columns: repeat(5, 1fr);
|
|
|
+ /* auto-fit + 最小宽度：容器放得下 5 张就一行铺满；放不下自动换行对齐，绝不横向溢出（qiankun 内嵌时主应用侧边栏会挤占宽度） */
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
|
|
|
gap: 12px;
|
|
|
margin-bottom: 12px;
|
|
|
}
|
|
|
@@ -1823,7 +1826,8 @@ export default {
|
|
|
}
|
|
|
.qb-row {
|
|
|
display: grid;
|
|
|
- grid-template-columns: repeat(12, 1fr);
|
|
|
+ /* minmax(0,1fr) 去掉 1fr 的最小内容宽度下限，防止内嵌时图表面板把行撑出容器 */
|
|
|
+ grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
|
gap: 12px;
|
|
|
margin-bottom: 12px;
|
|
|
}
|
|
|
@@ -2288,9 +2292,6 @@ export default {
|
|
|
color: #5f7796;
|
|
|
}
|
|
|
@media screen and (max-width: 1400px) {
|
|
|
- .qb-kpi-row {
|
|
|
- grid-template-columns: repeat(3, 1fr);
|
|
|
- }
|
|
|
.qb-col-3,
|
|
|
.qb-col-4,
|
|
|
.qb-col-6 {
|
|
|
@@ -2299,7 +2300,7 @@ export default {
|
|
|
.qb-col-8 {
|
|
|
grid-column: span 12;
|
|
|
}
|
|
|
- /* 三列布局下卡片变窄：图标与环形图同步收紧 */
|
|
|
+ /* 窄容器下卡片变窄：图标与环形图同步收紧（KPI 行数已交给 auto-fit 自适应） */
|
|
|
.qb-kpi-icon {
|
|
|
flex-basis: 46px;
|
|
|
width: 46px;
|
