xiaoben-as2-php/css/english_writing/sass/WritingCard.scss

.card {
    // B5 176mm*250mm
    max-width: 156mm;
    margin: 0 auto;
    padding: 0 10mm;
    font-family: "Times New Roman", "SimSun" !important;
    zoom: 0.74;
}

@mixin bd($pos: border, $style: solid, $color: #000) {
    position: relative;

    &:after {
        display: block;
        position: absolute;
        content: "";
        left: 0px;
        top: 0px;
        z-index: -1;
        width: 200%;
        height: 200%;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
        #{$pos}: 1px $style $color;
    }
}

.page {
    padding: 5.6mm 0 3mm;
    position: relative;
    height: 221.773mm;

    .content {}

    .title {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;
        padding-top: 50mm;
        margin-bottom: 8mm;

        .card-name {
            width: 40pt;
            font-size: 30pt;
            font-weight: bold;
        }

        .card-en-name {
            font-size: 21pt;
            font-weight: bold;
            margin-top: 6mm;
        }

        .title-line {
            width: 100%;
            background-color: #000;
            margin-top: 4mm;
            margin-bottom: 2mm;
            @include bd(border-bottom);
        }

        .title-text {
            font-size: 9pt;
        }
    }

    .guide-text {
        font-size: 12pt;
        text-align: justify;
        line-height: 5.5mm;

        span {
            font-weight: bold;
        }

        .guide-text-en {
            margin-bottom: 4mm;
        }
    }



    .point {
        position: absolute;
        width: 6mm;
        height: 3mm;
        background-color: #000;
    }

    .point-1 {
        top: 0;
        left: 8.4mm;
    }

    .point-2 {
        top: 0;
        left: 33%;
    }

    .point-2-back {
        top: 0;
        right: 33%;
    }

    .point-3 {
        top: 0;
        right: 8.4mm;
    }

    .point-4 {
        bottom: -3.2mm;
        left: 8.4mm;
    }

    .point-5 {
        bottom: -3.2mm;
        right: 8.4mm;
    }
}

// 信息栏公用样式
.info-block {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 5mm;
    @include bd();

    .info-left {
        @include bd(border-right);

        .info {
            width: 100%;
            height: 18mm;
            padding: 1mm 0;
            font-size: 10.5pt;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;

            .info-item {
                width: 50%;
                display: -webkit-flex;
                display: flex;
                -webkit-align-items: center;
                align-items: center;
                -webkit-justify-content: center;
                justify-content: center;
                position: relative;

                .info-item-label {
                    display: block;
                    width: 20mm;
                    text-align: right;
                }

                i {
                    display: block;
                    height: 4mm;
                    width: 40mm;
                    text-align: center;
                    @include bd(border-bottom);
                    box-sizing: border-box;
                }

                .small-text {
                    position: absolute;
                    right: 4.5mm;
                    top: 4.5mm;
                    font-size: 6pt;
                    color: #888;
                }
            }
        }

        .tips {
            font-size: 9pt;
            display: -webkit-flex;
            display: flex;
            @include bd();
            // @include bd(border-top);
            // @include bd(border-bottom);

            &:after {
                border-left: none;
                border-right: none;
            }

            .tips-left {
                width: 8mm;
                display: -webkit-flex;
                display: flex;
                -webkit-align-items: center;
                align-items: center;
                text-align: center;
                @include bd(border-right);
            }

            .tips-right {
                padding: 1mm 2mm;
                line-height: 4mm;
                text-align: justify;

                .tips-list {
                    display: -webkit-flex;
                    display: flex;

                    i {
                        margin-right: 0.5mm;
                    }

                    p {
                        span {
                            font-weight: bold;
                        }
                    }
                }
            }
        }

        .example {
            height: 10mm;
            font-size: 9pt;
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-around;
            justify-content: space-around;

            .correct {
                display: -webkit-flex;
                display: flex;
                -webkit-align-items: center;
                align-items: center;

                .correct-text {
                    margin-right: 1mm;
                }

                .four-line-grid {
                    width: 15mm;
                    height: 6mm;
                    box-sizing: border-box;
                    @include bd(border, dashed, #ddd);
                    display: -webkit-flex;
                    display: flex;
                    -webkit-align-items: center;
                    align-items: center;

                    .line {
                        width: 100%;
                        height: 2mm;
                        box-sizing: border-box;
                        position: relative;
                        @include bd(border-top, dashed, #ddd);

                        &:after {
                            border-bottom: 1px solid #888;
                        }

                        .write {
                            position: absolute;
                            top: -1.2mm;
                            left: 2.2mm;
                            font-size: 12pt;
                        }
                    }
                }
            }

            .sign {
                display: -webkit-flex;
                display: flex;
                -webkit-align-items: center;
                align-items: center;

                .sign-icon {
                    width: 4.2mm;
                    height: 2mm;
                    margin-left: 1mm;
                    margin-right: 3mm;
                    @include bd();
                }
            }
        }
    }

    .info-right {
        width: 32mm;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;

        img {
            width: 16mm;
            height: 16mm;
        }
    }
}

.writing-area {
    height: auto;

    .content {
        padding: 2mm;
        @include bd();
    }

    .info-item {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        position: absolute;
        top: -5.6mm;
        left: 20mm;

        .info-item-label {
            display: block;
            width: 20mm;
            text-align: right;
        }

        i {
            display: block;
            height: 4mm;
            width: 40mm;
            text-align: center;
            @include bd(border-bottom);
            box-sizing: border-box;
        }
    }

    ol {
        li {
            position: relative;
            margin-bottom: 2mm;

            .number {
                position: absolute;
                top: 2.7mm;
                right: -6mm;
                font-size: 9pt;
                color: #888;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .four-line-grid {
        width: 100%;
        height: 9mm;
        box-sizing: border-box;
        @include bd(border, dashed, #ddd);
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;

        .line {
            width: 100%;
            height: 3mm;
            box-sizing: border-box;
            @include bd(border-top, dashed, #ddd);

            &:after {
                border-bottom: 1px solid #888;
            }
        }
    }

}

// 批改后题目样式
.report {
    .title {
        text-align: center;
        line-height: 6.5mm;

        .card-en-name {
            font-size: 16pt;
            font-weight: bold;
        }

        .card-name {
            font-size: 16pt;
            font-weight: bold;
        }

        .date {
            font-size: 9pt;
        }
    }

    .info-block {
        margin-bottom: 0;

        .tips {
            &:after {
                border-bottom: none;
            }
        }
    }

    .report-content {
        font-size: 12pt;

        .dynamic-text {
            text-align: justify;
            line-height: 5.5mm;
            margin: 5mm 0;

            p {
                span {
                    font-weight: bold;
                }
            }

            .dynamic-text-en {
                margin-bottom: 1mm;
            }
        }

        .part {
            .part-title {
                height: 10mm;
                width: 100mm;
                margin: 0 auto;
                line-height: 10mm;
                color: #fff;
                font-weight: bolder;
                text-align: center;
                position: relative;
                margin-bottom: 4mm;

                img {
                    width: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: -1;
                }

                .part-title-left {
                    width: 45mm;
                    height: 12mm;
                    font-size: 13.5pt;
                    position: absolute;
                    left: 8mm;
                    top: -1.5mm;

                    .title-icon {
                        position: relative;
                        height: inherit;
                        line-height: 12mm;
                        img {
                            width: 45mm;
                            height: 12mm;
                        }
                    }
                }

                .part-title-right {
                    font-size: 9pt;
                    width: 50%;
                    float: right;

                    span {
                        font-size: 13.5pt;
                        margin-right: 1mm;
                    }
                }
            }

            .part-content {
                .part-item {
                    margin-bottom: 4mm;

                    .item-title {
                        color: aqua;
                        font-weight: bold;
                        margin-bottom: 2mm;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-align-items: center;
                        align-items: center;
                        page-break-inside: avoid;

                        img {
                            width: 5mm;
                            margin-right: 2mm;
                            margin-bottom: 0.5mm;
                        }
                    }

                    .item-content {
                        text-align: justify;
                        line-height: 6mm;
                    }
                }
            }

            .score {
                display: -webkit-flex;
                display: flex;
                -webkit-justify-content: space-around;
                justify-content: space-around;

                .score-block {
                    text-align: center;

                    .score-color {
                        color: aqua;
                    }

                    .score-bar {
                        width: 20mm;
                        height: 2mm;
                        box-sizing: border-box;
                        border: 1px solid aqua;
                        border-radius: 4mm;
                        margin: 1mm 0 2mm;

                        .score-core {
                            height: 100%;
                            border-radius: 4mm;
                            background-color: aqua;
                        }
                    }
                }
            }

            .comment-sentence {
                margin-bottom: 2mm;

                .comment-txt {
                    padding-left: 2mm;
                }
            }

            .highlight-summary {}

            .writing-template {}

            .cardinal-word {}

            .multiple-expression {}

            .part-speech {}

            .translation {}

            .trans-list {
                list-style-type: decimal;
                list-style-position: inside;
                page-break-inside: avoid;

                i {
                    display: block;
                    width: 100%;
                    margin-top: 5mm;
                    @include bd(border-bottom);

                    &:after {
                        position: unset;
                    }
                }

                li {
                    padding-bottom: 2mm;
                }

            }

            .lr-list {
                display: -webkit-flex;
                display: flex;
                -webkit-flex-wrap: wrap;
                flex-wrap: wrap;
                -webkit-justify-content: space-between;
                justify-content: space-between;

                li {
                    width: 45%;
                }
            }
        }
    }
}