Showing
1 changed file
with
37 additions
and
60 deletions
| @@ -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 {{ |
-
Please register or login to post a comment