Reverse the Code that Caused the PDF Rendering Error

This commit is contained in:
马一丁
2025-11-25 01:52:00 +08:00
parent e9b7a91722
commit 49cda6d863

View File

@@ -832,91 +832,69 @@ p {{
margin-bottom: {cfg.page.section_spacing}px;
}}
/* KPI卡片优化 - WeasyPrint不支持CSS Grid使用Flex实现等宽排布 */
/* KPI卡片优化 - 防止溢出 */
.kpi-grid {{
display: flex !important;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-auto-rows: minmax(auto, 1fr);
grid-auto-flow: row dense;
gap: {cfg.grid.gap}px;
margin: 20px 0;
align-items: stretch;
page-break-inside: avoid !important;
break-inside: avoid !important;
page-break-after: avoid !important;
page-break-before: avoid !important;
break-before: avoid !important;
break-after: avoid !important;
}}
.kpi-grid .kpi-card {{
box-sizing: border-box;
flex: 0 1 calc(33.333% - {cfg.grid.gap}px) !important;
max-width: calc(33.333% - {cfg.grid.gap}px) !important;
grid-column: span 2;
}}
/* 单条/双条/三条的特殊列数 */
.chapter .kpi-grid[data-kpi-count="1"] {{
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-auto-flow: row;
}}
.chapter .kpi-grid[data-kpi-count="1"] .kpi-card {{
flex-basis: 100% !important;
max-width: 100% !important;
grid-column: span 1;
}}
.chapter .kpi-grid[data-kpi-count="2"] {{
grid-template-columns: repeat(4, minmax(0, 1fr));
}}
.chapter .kpi-grid[data-kpi-count="2"] .kpi-card {{
flex-basis: calc(50% - {cfg.grid.gap}px) !important;
max-width: calc(50% - {cfg.grid.gap}px) !important;
grid-column: span 2;
}}
.chapter .kpi-grid[data-kpi-count="3"] .kpi-card {{
flex-basis: calc(33.333% - {cfg.grid.gap}px) !important;
max-width: calc(33.333% - {cfg.grid.gap}px) !important;
.chapter .kpi-grid[data-kpi-count="3"] {{
grid-template-columns: repeat(6, minmax(0, 1fr));
}}
/* 四条时采用2x2排布 */
.chapter .kpi-grid[data-kpi-count="4"] .kpi-card {{
flex-basis: calc(50% - {cfg.grid.gap}px) !important;
max-width: calc(50% - {cfg.grid.gap}px) !important;
}}
.chapter .kpi-grid[data-kpi-count="4"] {{
page-break-before: auto !important;
break-before: auto !important;
page-break-inside: avoid !important;
margin-top: 8px !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
}}
.chapter .kpi-grid[data-kpi-count="4"] .kpi-card {{
grid-column: span 2;
}}
/* hr 与紧随的KPI/正文保持同页,减少多余空白 */
hr {{
page-break-before: avoid !important;
page-break-after: avoid !important;
break-before: avoid !important;
break-after: avoid !important;
margin: 12px 0 !important;
}}
/* 五条及以上默认三列6个自动两行3+3 */
.chapter .kpi-grid[data-kpi-count="5"] .kpi-card,
.chapter .kpi-grid[data-kpi-count="6"] .kpi-card,
.chapter .kpi-grid[data-kpi-count="7"] .kpi-card,
.chapter .kpi-grid[data-kpi-count="8"] .kpi-card,
.chapter .kpi-grid[data-kpi-count="9"] .kpi-card,
.chapter .kpi-grid[data-kpi-count="10"] .kpi-card,
.chapter .kpi-grid[data-kpi-count="11"] .kpi-card,
.chapter .kpi-grid[data-kpi-count="12"] .kpi-card,
.chapter .kpi-grid[data-kpi-count="13"] .kpi-card,
.chapter .kpi-grid[data-kpi-count="14"] .kpi-card,
.chapter .kpi-grid[data-kpi-count="15"] .kpi-card,
.chapter .kpi-grid[data-kpi-count="16"] .kpi-card {{
flex-basis: calc(33.333% - {cfg.grid.gap}px) !important;
max-width: calc(33.333% - {cfg.grid.gap}px) !important;
}}
/* 5个时最后两张拉宽为两列 */
.chapter .kpi-grid[data-kpi-count="5"] .kpi-card:nth-last-child(-n+2) {{
flex-basis: calc(50% - {cfg.grid.gap}px) !important;
max-width: calc(50% - {cfg.grid.gap}px) !important;
/* 五条及以上默认三列6栅格每卡占2 */
.chapter .kpi-grid[data-kpi-count="5"],
.chapter .kpi-grid[data-kpi-count="6"],
.chapter .kpi-grid[data-kpi-count="7"],
.chapter .kpi-grid[data-kpi-count="8"],
.chapter .kpi-grid[data-kpi-count="9"],
.chapter .kpi-grid[data-kpi-count="10"],
.chapter .kpi-grid[data-kpi-count="11"],
.chapter .kpi-grid[data-kpi-count="12"],
.chapter .kpi-grid[data-kpi-count="13"],
.chapter .kpi-grid[data-kpi-count="14"],
.chapter .kpi-grid[data-kpi-count="15"],
.chapter .kpi-grid[data-kpi-count="16"] {{
grid-template-columns: repeat(6, minmax(0, 1fr));
}}
/* 余数为2时最后两张平分全宽 */
.chapter .kpi-grid[data-kpi-count="5"] .kpi-card:nth-last-child(-n+2),
.chapter .kpi-grid[data-kpi-count="8"] .kpi-card:nth-last-child(-n+2),
.chapter .kpi-grid[data-kpi-count="11"] .kpi-card:nth-last-child(-n+2),
.chapter .kpi-grid[data-kpi-count="14"] .kpi-card:nth-last-child(-n+2) {{
flex-basis: calc(50% - {cfg.grid.gap}px) !important;
max-width: calc(50% - {cfg.grid.gap}px) !important;
grid-column: span 3;
}}
/* 余数为1时最后一张占满全宽 */
@@ -924,8 +902,7 @@ hr {{
.chapter .kpi-grid[data-kpi-count="10"] .kpi-card:last-child,
.chapter .kpi-grid[data-kpi-count="13"] .kpi-card:last-child,
.chapter .kpi-grid[data-kpi-count="16"] .kpi-card:last-child {{
flex-basis: 100% !important;
max-width: 100% !important;
grid-column: 1 / -1;
}}
.kpi-card {{