马一丁

Reverse the Code that Caused the PDF Rendering Error

@@ -832,91 +832,69 @@ p {{ @@ -832,91 +832,69 @@ p {{
832 margin-bottom: {cfg.page.section_spacing}px; 832 margin-bottom: {cfg.page.section_spacing}px;
833 }} 833 }}
834 834
835 -/* KPI卡片优化 - WeasyPrint不支持CSS Grid,使用Flex实现等宽排布 */ 835 +/* KPI卡片优化 - 防止溢出 */
836 .kpi-grid {{ 836 .kpi-grid {{
837 - display: flex !important;  
838 - flex-wrap: wrap; 837 + display: grid;
  838 + grid-template-columns: repeat(6, minmax(0, 1fr));
  839 + grid-auto-rows: minmax(auto, 1fr);
  840 + grid-auto-flow: row dense;
839 gap: {cfg.grid.gap}px; 841 gap: {cfg.grid.gap}px;
840 margin: 20px 0; 842 margin: 20px 0;
841 align-items: stretch; 843 align-items: stretch;
842 - page-break-inside: avoid !important;  
843 - break-inside: avoid !important;  
844 - page-break-after: avoid !important;  
845 - page-break-before: avoid !important;  
846 - break-before: avoid !important;  
847 - break-after: avoid !important;  
848 }} 844 }}
849 845
850 .kpi-grid .kpi-card {{ 846 .kpi-grid .kpi-card {{
851 - box-sizing: border-box;  
852 - flex: 0 1 calc(33.333% - {cfg.grid.gap}px) !important;  
853 - max-width: calc(33.333% - {cfg.grid.gap}px) !important; 847 + grid-column: span 2;
854 }} 848 }}
855 849
856 /* 单条/双条/三条的特殊列数 */ 850 /* 单条/双条/三条的特殊列数 */
  851 +.chapter .kpi-grid[data-kpi-count="1"] {{
  852 + grid-template-columns: repeat(1, minmax(0, 1fr));
  853 + grid-auto-flow: row;
  854 +}}
857 .chapter .kpi-grid[data-kpi-count="1"] .kpi-card {{ 855 .chapter .kpi-grid[data-kpi-count="1"] .kpi-card {{
858 - flex-basis: 100% !important;  
859 - max-width: 100% !important; 856 + grid-column: span 1;
  857 +}}
  858 +.chapter .kpi-grid[data-kpi-count="2"] {{
  859 + grid-template-columns: repeat(4, minmax(0, 1fr));
860 }} 860 }}
861 .chapter .kpi-grid[data-kpi-count="2"] .kpi-card {{ 861 .chapter .kpi-grid[data-kpi-count="2"] .kpi-card {{
862 - flex-basis: calc(50% - {cfg.grid.gap}px) !important;  
863 - max-width: calc(50% - {cfg.grid.gap}px) !important; 862 + grid-column: span 2;
864 }} 863 }}
865 -.chapter .kpi-grid[data-kpi-count="3"] .kpi-card {{  
866 - flex-basis: calc(33.333% - {cfg.grid.gap}px) !important;  
867 - max-width: calc(33.333% - {cfg.grid.gap}px) !important; 864 +.chapter .kpi-grid[data-kpi-count="3"] {{
  865 + grid-template-columns: repeat(6, minmax(0, 1fr));
868 }} 866 }}
869 867
870 /* 四条时采用2x2排布 */ 868 /* 四条时采用2x2排布 */
871 -.chapter .kpi-grid[data-kpi-count="4"] .kpi-card {{  
872 - flex-basis: calc(50% - {cfg.grid.gap}px) !important;  
873 - max-width: calc(50% - {cfg.grid.gap}px) !important;  
874 -}}  
875 .chapter .kpi-grid[data-kpi-count="4"] {{ 869 .chapter .kpi-grid[data-kpi-count="4"] {{
876 - page-break-before: auto !important;  
877 - break-before: auto !important;  
878 - page-break-inside: avoid !important;  
879 - margin-top: 8px !important;  
880 -}}  
881 -  
882 -/* hr 与紧随的KPI/正文保持同页,减少多余空白 */  
883 -hr {{  
884 - page-break-before: avoid !important;  
885 - page-break-after: avoid !important;  
886 - break-before: avoid !important;  
887 - break-after: avoid !important;  
888 - margin: 12px 0 !important; 870 + grid-template-columns: repeat(4, minmax(0, 1fr));
889 }} 871 }}
890 -  
891 -/* 五条及以上默认三列(6个自动两行3+3) */  
892 -.chapter .kpi-grid[data-kpi-count="5"] .kpi-card,  
893 -.chapter .kpi-grid[data-kpi-count="6"] .kpi-card,  
894 -.chapter .kpi-grid[data-kpi-count="7"] .kpi-card,  
895 -.chapter .kpi-grid[data-kpi-count="8"] .kpi-card,  
896 -.chapter .kpi-grid[data-kpi-count="9"] .kpi-card,  
897 -.chapter .kpi-grid[data-kpi-count="10"] .kpi-card,  
898 -.chapter .kpi-grid[data-kpi-count="11"] .kpi-card,  
899 -.chapter .kpi-grid[data-kpi-count="12"] .kpi-card,  
900 -.chapter .kpi-grid[data-kpi-count="13"] .kpi-card,  
901 -.chapter .kpi-grid[data-kpi-count="14"] .kpi-card,  
902 -.chapter .kpi-grid[data-kpi-count="15"] .kpi-card,  
903 -.chapter .kpi-grid[data-kpi-count="16"] .kpi-card {{  
904 - flex-basis: calc(33.333% - {cfg.grid.gap}px) !important;  
905 - max-width: calc(33.333% - {cfg.grid.gap}px) !important; 872 +.chapter .kpi-grid[data-kpi-count="4"] .kpi-card {{
  873 + grid-column: span 2;
906 }} 874 }}
907 875
908 -/* 5个时最后两张拉宽为两列 */  
909 -.chapter .kpi-grid[data-kpi-count="5"] .kpi-card:nth-last-child(-n+2) {{  
910 - flex-basis: calc(50% - {cfg.grid.gap}px) !important;  
911 - max-width: calc(50% - {cfg.grid.gap}px) !important; 876 +/* 五条及以上默认三列(6栅格,每卡占2) */
  877 +.chapter .kpi-grid[data-kpi-count="5"],
  878 +.chapter .kpi-grid[data-kpi-count="6"],
  879 +.chapter .kpi-grid[data-kpi-count="7"],
  880 +.chapter .kpi-grid[data-kpi-count="8"],
  881 +.chapter .kpi-grid[data-kpi-count="9"],
  882 +.chapter .kpi-grid[data-kpi-count="10"],
  883 +.chapter .kpi-grid[data-kpi-count="11"],
  884 +.chapter .kpi-grid[data-kpi-count="12"],
  885 +.chapter .kpi-grid[data-kpi-count="13"],
  886 +.chapter .kpi-grid[data-kpi-count="14"],
  887 +.chapter .kpi-grid[data-kpi-count="15"],
  888 +.chapter .kpi-grid[data-kpi-count="16"] {{
  889 + grid-template-columns: repeat(6, minmax(0, 1fr));
912 }} 890 }}
913 891
914 /* 余数为2时,最后两张平分全宽 */ 892 /* 余数为2时,最后两张平分全宽 */
  893 +.chapter .kpi-grid[data-kpi-count="5"] .kpi-card:nth-last-child(-n+2),
915 .chapter .kpi-grid[data-kpi-count="8"] .kpi-card:nth-last-child(-n+2), 894 .chapter .kpi-grid[data-kpi-count="8"] .kpi-card:nth-last-child(-n+2),
916 .chapter .kpi-grid[data-kpi-count="11"] .kpi-card:nth-last-child(-n+2), 895 .chapter .kpi-grid[data-kpi-count="11"] .kpi-card:nth-last-child(-n+2),
917 .chapter .kpi-grid[data-kpi-count="14"] .kpi-card:nth-last-child(-n+2) {{ 896 .chapter .kpi-grid[data-kpi-count="14"] .kpi-card:nth-last-child(-n+2) {{
918 - flex-basis: calc(50% - {cfg.grid.gap}px) !important;  
919 - max-width: calc(50% - {cfg.grid.gap}px) !important; 897 + grid-column: span 3;
920 }} 898 }}
921 899
922 /* 余数为1时,最后一张占满全宽 */ 900 /* 余数为1时,最后一张占满全宽 */
@@ -924,8 +902,7 @@ hr {{ @@ -924,8 +902,7 @@ hr {{
924 .chapter .kpi-grid[data-kpi-count="10"] .kpi-card:last-child, 902 .chapter .kpi-grid[data-kpi-count="10"] .kpi-card:last-child,
925 .chapter .kpi-grid[data-kpi-count="13"] .kpi-card:last-child, 903 .chapter .kpi-grid[data-kpi-count="13"] .kpi-card:last-child,
926 .chapter .kpi-grid[data-kpi-count="16"] .kpi-card:last-child {{ 904 .chapter .kpi-grid[data-kpi-count="16"] .kpi-card:last-child {{
927 - flex-basis: 100% !important;  
928 - max-width: 100% !important; 905 + grid-column: 1 / -1;
929 }} 906 }}
930 907
931 .kpi-card {{ 908 .kpi-card {{