/*
    使用方式：
    1. 打印区域配置类为 print
    2. 打印区域-页眉，配置类为 header
    3. 打印区域-页脚，配置类为 footer
    4. 打印区域内-不打印的元素，配置类为 not-print
    5. 打印区域内-分页，配置类为 page-break (指定类元素后面分页)
    6. 若要使元素仅在打印时显示，配置类为 print-only
    7. 部分元素由于外部元素位置，导致打印时不显示滚动条，需要在对应外部元素上配置类为 print-static （仅打印时生效）
    8. 部分元素由于要显示页眉与页脚，此时需要将内容（滚动区域）配置类为 print-relative 并将 top 配置为页眉高度
*/

.print-only {
    display: none !important;
}

/* 打印样式 */
@media print {
    /* 外部元素位置 */
    .print-static {
        position: static !important;
    }

    /* 外部元素位置-相对位置 */
    .print-relative {
        position: relative !important;
    }

    .print-only {
        display: block !important;
    }

    /* 非打印区域 */
    * :not(.print) {
        visibility: hidden !important;
    }

    /* 页眉区域 打印区域需要设置 position: reactive; top: xxxpx */
    .print .header {
        position: fixed;
        top: 0;
        display: block;
        width: 100%;
    }

    /* 打印区域 */
    .print {
        position: absolute;
        width: 100%;
        height: 100%;
        /*        overflow: auto;*/
        left: 0;
        top: 0;
        background: white;
    }

        /* 打印区域 */
        .print,
        .print * {
            visibility: visible !important;
            transform-origin: top left;
        }

            /* 页脚区域 打印区域需要设置 position: reactive; top: xxxpx */
            .print .footer {
                position: fixed;
                bottom: 0;
                display: block;
            }

    /* 打印完成后分页 */
    .page-break {
        page-break-after: always;
    }

    /* 链接样式 */
    a:link,
    a:visited {
        text-decoration: none;
    }

    /* 控制不截断 */
    *:not(table) {
        /*        page-break-inside: avoid;*/
    }

    /* 非打印区域 */
    .not-print {
        display: none !important;
    }

    /* 打印页面样式 */
    @page {
        margin: 1cm;
    }

    header, footer {
        display: none;
    }
}