math_cms/resources/views/pdf/partials/common-styles.blade.php

{{-- 
    PDF通用样式片段
    被卷子、判卷和知识点讲解模板共享
    
    包含：
    1. 页面设置 (A4, 页边距, 页眉页脚)
    2. 基础排版样式（不含body，因为知识点讲解有独立容器）
    3. 题目相关通用样式
    4. SVG/数学公式渲染样式
    5. 图片容器样式
    6. 打印相关样式
--}}
<style>
    /* ==================== 页面设置 ==================== */
    @page {
        size: A4;
        margin: 2cm 2cm 2.5cm 2cm;
        @top-left {
            content: string(top-left-text);
            font-size: 12px;
            color: #666;
        }
        @top-right {
            content: string(top-right-text);
            font-size: 12px;
            color: #666;
        }
        @bottom-left {
            content: string(bottom-left-text);
            font-size: 12px;
            color: #666;
        }
        @bottom-right {
            content: counter(page) "/" counter(pages);
            font-size: 12px;
            color: #666;
        }
    }

    /* ==================== 通用组件样式 ==================== */
    /* 大题标题：不与后面内容分开 */
    .section-title {
        font-size: 16px;
        font-weight: bold;
        margin-top: 16px;
        margin-bottom: 10px;
        page-break-after: avoid;
        break-after: avoid;
    }
    
    /* 题目整体：不分页 */
    .question {
        margin-bottom: 14px;
        page-break-inside: avoid;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }
    
    /* 题目网格：不分页 */
    .question-grid {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 4px;
        row-gap: 6px;
        align-items: flex-start;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    
    .question-lead {
        display: flex;
        gap: 4px;
        align-items: flex-start;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.6;
        margin-top: 2px;
    }
    .question-lead.spacer { visibility: hidden; }
    .question-number { white-space: nowrap; margin-right: 2px; }
    .grading-boxes { gap: 4px; flex-wrap: wrap; align-items: center; }
    .grading-boxes span { vertical-align: middle; }
    
    .question-main {
        font-size: 14px;
        line-height: 1.65;
        font-family: inherit;
        display: block;
        orphans: 3;
        widows: 3;
    }
    
    .question-score { margin-right: 6px; font-weight: 600; }
    .question-score-inline {
        display: block;
        font-size: 13px;
        color: #555;
        margin: 0 0 2px 0;
        white-space: nowrap;
    }
    
    /* 题目内容：防止孤行 */
    .question-stem {
        display: block;
        font-size: 14px;
        font-family: inherit;
        orphans: 3;
        widows: 3;
    }
    .question-content {
        font-size: 14px;
        margin-bottom: 8px;
        line-height: 1.6;
        orphans: 3;
        widows: 3;
    }

    /* ==================== 选项样式 ==================== */
    /* 选项容器：不分页 */
    .options {
        display: grid;
        row-gap: 8px;
        margin-top: 8px;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .options-grid-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px 12px;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .options-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 20px;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .options-grid-1 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    
    /* 单个选项：不分页 */
    .option {
        width: 100%;
        font-size: 14px;
        line-height: 1.6;
        word-wrap: break-word;
        display: flex;
        align-items: flex-start;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .option strong { margin-right: 4px; }
    .option-inline { display: inline-flex; align-items: baseline; margin-right: 20px; }
    .option-compact { font-size: 14px; line-height: 1.6; }

    /* ==================== 答案区域样式 ==================== */
    /* 答案元信息：不分页 */
    .answer-meta {
        font-size: 12px;
        color: #2f2f2f;
        line-height: 1.75;
        margin-top: 4px;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .answer-line + .answer-line { margin-top: 4px; }
    
    .solution-step {
        align-items: center;
        gap: 6px;
    }
    .step-box { display: inline-block; }
    .step-label { white-space: nowrap; }
    .solution-heading { font-weight: 700; }
    .solution-content { display: inline-block; line-height: 1.75; }
    
    /* 解析区域：不分页 */
    .solution-section {
        margin-top: 8px;
        padding: 6px 8px;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .solution-section strong {
        font-size: 13px;
    }
    .solution-parsed {
        margin-top: 6px;
        line-height: 1.8;
    }

    /* 填空线样式 */
    .fill-line {
        display: inline-block;
        border-bottom: 1px solid #000;
        width: 100px;
        text-align: center;
    }
    .wavy-underline {
        display: inline-block;
        min-width: 80px;
        height: 22px;
        border-bottom: 1.2px dashed #444;
        vertical-align: middle;
    }
    .wavy-underline.short {
        min-width: 60px;
    }

    /* 答案区域样式 */
    .answer-area {
        position: relative;
        margin-top: 12px;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .answer-area .answer-label {
        position: absolute;
        top: -10px;
        left: 10px;
        font-size: 10px;
        background: #fff;
        padding: 0 4px;
        color: #555;
        letter-spacing: 1px;
    }
    .answer-area.wavy {
        height: 28px;
        border-bottom: 1.5px dashed #555;
        background-image: repeating-linear-gradient(
            -45deg,
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.35) 4px,
            transparent 4px,
            transparent 8px
        );
        background-size: 16px 16px;
        background-repeat: repeat-x;
        background-position: bottom;
    }
    .answer-area.boxy {
        min-height: 150px;
        border: 1.5px solid #444;
        border-radius: 6px;
        padding: 14px;
    }

    /* ==================== SVG与数学公式样式 ==================== */
    /* 让内嵌 SVG 按比例缩放展示 */
    svg, .math-render svg {
        max-width: 100%;
        height: auto;
        display: block;
        shape-rendering: geometricPrecision;
        text-rendering: geometricPrecision;
    }
    
    /* 优化SVG中文字标签的显示 */
    svg text {
        font-family: "SimSun", "Times New Roman", serif !important;
        font-size: 12px;
        font-weight: bold;
        dominant-baseline: middle;
        text-anchor: middle;
        alignment-baseline: central;
        paint-order: stroke fill;
        stroke: none;
        fill: #000;
    }
    
    /* SVG中点标签的精确对齐 */
    svg text.label-point {
        font-size: 14px;
        font-weight: bold;
        dx: 0;
        dy: 0;
    }
    
    /* 确保SVG中的圆形和线条正确渲染 */
    svg circle, svg line, svg polygon, svg polyline {
        shape-rendering: geometricPrecision;
    }

    /* ==================== 图片容器样式 ==================== */
    .pdf-figure {
        break-inside: avoid;
        page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        break-before: avoid;
        break-after: avoid;
        page-break-before: avoid;
        page-break-after: avoid;
        margin: 8px 0;
        display: block;
        min-height: 30px;
        max-height: 180mm;
    }
    .pdf-figure img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        object-fit: contain;
        box-sizing: border-box;
    }
    
    /* 题干中的图片样式 */
    .question-stem img,
    .question-main img,
    .question-content img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 12px auto;
        box-sizing: border-box;
    }
    
    /* 选项中的图片样式 */
    .option img {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
    }

    /* ==================== 打印样式 ==================== */
    @media print {
        .no-print {
            display: none;
        }
        body {
            -webkit-print-color-adjust: exact;
        }
    }

    /* ==================== KaTeX数学公式样式 ==================== */
    .katex {
        font-size: 1.1em !important;
    }
    .katex-display {
        margin: 0.5em 0 !important;
    }
</style>