ChuangHeng/src/components/reportPdf/pdf.scss

.cd_box{
    padding: 20px 0 30px;
    box-sizing: border-box;
    position: relative;
    border-top: 1px solid rgba(0,0,0,.4);
    height: 890px;
    color: #111111;
    .cb_db{
        .cb_db_l{
            font-family: STSongti-SC, STSongti-SC;
            font-weight: 400;
            font-size: 10px;
            color: #FFFFFF;
            line-height: 16px;
            padding-left: 32px;
            &.cdl{
                color: #111111;
                padding-left: 0;
            }
        }
    }

    .cd_page{
        width: 100%;
        font-family: STSongti-SC, STSongti-SC;
        font-weight: 400;
        font-size: 10px;
        color: #111111;
        line-height: 16px;
        text-align: center;
        position: absolute;
        bottom: 20px;
    }

    p{
        font-family: STSongti-SC, STSongti-SC;
        font-weight: 400;
        font-size: 10px;
        color: #252525;
        line-height: 14px;
        margin-top: 20px;
        &.p2{
            font-size: 12px;
            line-height: 16px;
        }
        &.p3{
            font-size: 12px;
            line-height: 16px;
            color: #761E6A;
        }
    }

    .bp{
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 20px;
        color: #111111;
        line-height: 24px;
    }

    .big_title{
        font-family: STSongti-SC, STSongti-SC;
        font-weight: bold;
        font-size: 32px;
        color: #009191;
        line-height: 45px;
        margin-top: 20px;
    }

    &.fm{
        background: url('@/assets/images/report/fm_bg.png') no-repeat;
        background-size: 100% 100%;
        position: relative;
    }

    .fm_img{
        width: 178px;
        height: 48px;
        margin: 20px 0 0 28px
    }

    .fm_info{
        width: 100%;
        padding: 0 51px 41px 51px;
        position: absolute;
        bottom: 0;
        .fi_p{
            font-family: Helvetica;
            font-size: 48px;
            color: #FFD750;
            line-height: 58px;
            text-align: left;
        }
        .fi_line{
            width: 161px;
            height: 2px;
            background: #FFFFFF;
            margin-top: 5px;
        }
        .fi_title{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
            font-size: 48px;
            color: #FFFFFF;
            line-height: 67px;
            text-align: left;
            margin-top: 10px;
        }
        .fi_tip{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 20px;
            margin-top: 2px;
        }
        .fi_xx{
            margin-top: 15px;
            .fi_xx_pre{
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 10px;
                color: #99D3D3;
                line-height: 14px;
                &.ml{
                    margin-left: 16px;
                }
            }
        }
    }

    .cb_content{
        padding: 28px 32px 0;
        &.jxpjmddj{
            padding: 28px 0 0;
        }
    }

    &.js{
        .js_boxs{
            margin-top: 26px;
            display: flex;
            justify-content: space-between;
            .jb_pre{
                width: calc(20% - 10px);
                height: 302px;
                border-radius: 0px 18px 0px 18px;
                border: 2px solid #761E6A;
                padding-left: 10px;
                box-sizing: border-box;
                position: relative;
                .jbp_zm{
                    width: 32px;
                    height: 32px;
                    background: #761E6A;
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 22px;
                    color: #FFFFFF;
                    line-height: 27px;
                    text-align: center;
                    position: absolute;
                    left: 0;
                    right: 0;
                }
                img{
                    width: 48px;
                    height: 48px;
                    margin: 35px 32px 0 15px;
                }
                .jbp_title{
                    width: 100%;
                    height: 30px;
                    padding: 0 20px 7px 0;
                    border-bottom: 2px solid #761E6A;
                    box-sizing: border-box;
                    font-family: STSongti-SC, STSongti-SC;
                    font-weight: bold;
                    font-size: 9px;
                    color: #111111;
                    line-height: 16px;
                    margin-top: 10px;
                }
                p{
                    font-family: STSongti-SC, STSongti-SC;
                    font-weight: 400;
                    font-size: 9px;
                    color: #111111;
                    line-height: 14px;
                    padding: 7px 0 0 0;
                    &:last-child{
                        margin-top: 14px;
                    }
                }
                &.jp1{
                    border: 2px solid #833479;
                    .jbp_zm{
                        background: #833479;
                    }
                    .jbp_title{
                        color: #833479;
                        border-bottom: 2px solid #833479;
                    }
                    .jbp_title{
                        color: #833479;
                    }
                }
                &.jp2{
                    border: 2px solid #009191;
                    .jbp_zm{
                        background: #009191;
                    }
                    .jbp_title{
                        color: #009191;
                        border-bottom: 2px solid #009191;
                    }
                }
                &.jp3{
                    border: 2px solid #193D59;
                    .jbp_zm{
                        background: #193D59;
                    }
                    .jbp_title{
                        color: #193D59;
                        border-bottom: 2px solid #193D59;
                    }
                }
                &.jp4{
                    border: 2px solid #FFD750;
                    .jbp_zm{
                        background: #FFD750;
                    }
                    .jbp_title{
                        color: #FFD750;
                        border-bottom: 2px solid #FFD750;
                    }
                }
                &.jp5{
                    border: 2px solid #AFCDF5;
                    .jbp_zm{
                        background: #AFCDF5;
                    }
                    .jbp_title{
                        color: #AFCDF5;
                        border-bottom: 2px solid #AFCDF5;
                    }
                }
            }
        }
        .js_single_box{
            margin-top: 20px;
            width: 100%;
            height: 112px;
            border-radius: 0px 18px 0px 18px;
            border: 2px solid #898989;
            padding-bottom: 10px;
            position: relative;
            .jsb_zm{
                width: 32px;
                height: 32px;
                background: #898989;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 22px;
                color: #FFFFFF;
                line-height: 32px;
                text-align: center;
                position: absolute;
                left: 0;
                right: 0;
            }
            .jsb_l{
                width: 111px;
                img{
                    width: 48px;
                    height: 48px;
                    margin-top: 30px;
                }
                p{
                    font-family: STSongti-SC, STSongti-SC;
                    font-weight: 400;
                    font-size: 10px;
                    color: #898989;
                    line-height: 16px;
                    margin-top: 0px;
                }
            }
            .jsb_r{
                border-left: 2px solid #898989;
                padding: 10px 22px;
                flex: 1;
                font-family: STSongti-SC, STSongti-SC;
                font-weight: 400;
                font-size: 10px;
                color: #111111;
                line-height: 16px;
            }

        }
    }


    .mddj_title{
        img{
            width: 65px;
            height: 45px;
        }
        span{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 800;
            font-size: 32px;
            color: #009191;
            line-height: 40px;
            margin-left: 8px;
        }
    }
    .mddj_tip{
        font-size: 12px;
        margin-top: 30px;
    }
    .mddj_top{
        justify-content: space-between;
        margin-top: 42px;
        .tt_pre{
            width: calc(100% / 3 - 5px);
            .ttp_l{
                width: 27px;
                height: 48px;
                &.tl1{
                    background: #D6BBD2;
                }
                &.tl2{
                    background: #FFE796;
                }
                &.tl3{
                    background: #AD78A6;
                }
            }
            .ttp_r{
                width: calc(100% - 27px);
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 10px;
                color: #252525;
                line-height: 14px;
                padding-left: 4px;
                box-sizing: border-box;
            }
        }
    }
    .mddj_table{
        margin-top: 33px;
        .mt_l{
            flex: 1;
            box-sizing: border-box;
        }
        .mt_r{
            .mr_pre{
                font-size: 10px;
                color: #FFFFFF;
                width: 27px;
                padding: 0 4px;
                box-sizing: border-box;
                height: 100px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }
        .mt_top{
            background: #833479;
            .mt_l{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 20px;
                color: #FFFFFF;
                line-height: 20px;
                padding-left: 14px;
            }
        }
        .mt_list{
            border: 3px solid #833479;
            .ml_pre{
                border-bottom: 1px solid #E5E7EB;
                &:last-child{
                    border: none;
                }
                &:nth-child(odd){
                    background: #F4F4F4;
                }
                &:nth-child(even){
                    background: #FFFFFF;
                }

                .mt_l{
                    padding: 10px 12px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 10px;
                    color: #252525;
                    line-height: 16px;
                    box-sizing: border-box;
                }

                .mp_pre{
                    width: 27px;
                    height: 100%;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 10px;
                    color: #1D2129;
                    line-height: 13px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    &.mp1{
                        background: #D6BBD2;
                    }
                    &.mp2{
                        background: #FFE796;
                    }
                    &.mp3{
                        background: #AD78A6; 
                    }
                }
            }
        }
    }

    .pjgx_title{
        font-size: 32px;
        color: #F09216;
        margin-top: 20px;
    }

    .mddj_boxs{
        margin-top: 10px;
        .mb_item{
            padding: 20px 0;
            border-bottom: 1px dotted #833478;

            .mbi_title{
                background: rgba(131,52,120,0.12);
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 10px;
                color: #761E6A;
                line-height: 14px;
                padding: 5px;
                display: inline;
            }
            .mbi_text{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 10px;
                color: #111111;
                line-height: 14px;
                margin-top: 10px;
            }
        }
    }

    .cyfx_boxs{
        margin-top: 5px;
        display: flex;
        .cyfxb_box{
            width: calc(100% / 4 - 1px);
            border-left: 1px dotted #C1C7D2;
            padding: 0 5px;
            box-sizing: border-box;
            .cbb_top{
                padding: 9px 0;
                border-bottom: 1px dotted #C1C7D2;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 20px;
                color: #761E6A;
                line-height: 24px;
                text-align: right;
                &.red{
                    color: #AD78A6;
                }
            }
            .cbb_bottom{
                .cbbb_item{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 10px;
                    min-height: 64px;
                    .ci_l{
                        width: calc(100% - 42px);
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 10px;
                        color: #252525;
                        line-height: 16px;
                        padding-right: 10px;
                        box-sizing: border-box;
                    }
                    .ci_r{
                        width: 42px;
                        height: 42px;
                        .circle {
                            position: relative;
                            width: 39px;
                            height: 39px;
                            border-radius: 50%;
                            border: 3px solid #FFE796;
                            background-color: transparent;
                        }
                
                        .semi-circle {
                            position: absolute;
                            top: -3px;
                            right: -3px;
                            width: 39px;
                            height: 39px;
                            border-radius: 100%;
                            background: conic-gradient(
                                #761E6A 0deg,                          /* 起始点 */
                                #761E6A calc(var(--percentage, 0) * 3.6deg), /* 切割范围 */
                                transparent calc(var(--percentage, 0) * 3.6deg), /* 切割的部分，使用透明 */
                                transparent 360deg                 /* 圆的结束 */
                            );
                            z-index: 2;
                            &.red{
                                background: conic-gradient(
                                    #AD78A6 0deg,                          /* 起始点 */
                                    #AD78A6 calc(var(--percentage, 0) * 3.6deg), /* 切割范围 */
                                    transparent calc(var(--percentage, 0) * 3.6deg), /* 切割的部分，使用透明 */
                                    transparent 360deg                 /* 圆的结束 */
                                );
                            }
                        }
                
                        .number {
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            left: 0;
                            top: 0;
                            background: #FFFFFF;
                            font-family: PingFang-SC, PingFang-SC;
                            font-weight: 800;
                            font-size: 18px;
                            color: #761E6A;
                            z-index: 3;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            border-radius: 50%;
                            &.red{
                                color: #AD78A6;
                            }
                        }
                    }
                }
            }
        }
    }
    
    .jxpjmddj_box{
        border-radius: 0px 6px 0px 6px;
        border: 1px solid #E5E7EB;
        margin-top: 20px;
        padding: 8px;
        .jb_title{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #252525;
            line-height: 16px;
        }
        .jb_title2{
            margin-top: 12px;
            font-family: PingFangSC, PingFang SC;
            font-weight: bold;
            font-size: 20px;
            color: #833479;
            line-height: 16px;
        }
        .jb_text{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #252525;
            line-height: 16px;
            margin-top: 10px;
        }
    }

    .xxfx_title{
        margin-top: 40px;
        .xt_pre{
            width: 58px;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 16px;
            color: #666666;
            line-height: 16px;
            text-align: center;
        }
    }
    .xxfx_list{
        .xl_item{
            margin-top: 20px;
            .xli_l{
                width: 177px;
                .xl_pre{
                    width: 58px;
                    font-family: PangMenZhengDaoBiaoTiTiMianFeiBan, PangMenZhengDaoBiaoTiTiMianFeiBan;
                    font-weight: bolder;
                    font-size: 20px;
                    color: #666666;
                    line-height: 16px;
                    text-align: center;
                    &.red{
                        color: #833478;
                    }
                }
            }
            .xli_r{
                width: calc(100% - 177px);
                .xr_p{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 10px;
                    color: #252525;
                    line-height: 10px;
                }
                .xr_tb{
                    width: 100%;
                    height: 4px;
                    margin-top: 26px;
                    position: relative;
                    .xt_pre{
                        width: calc(100% / 3);
                        height: 100%;
                        &.p1{
                            background: #761E6A;
                        }
                        &.p2{
                            background: rgba(118,30,106,0.6);
                        }
                        &.p3{
                            background: #FFE796;
                        }
                    }
                    .xt_score{
                        position: absolute;
                        left: 14px;
                        top: -20px;
                        .xts_num{
                            background: #FFFFFF;
                            box-shadow: 0px 4px 10px 0px rgba(118,30,106,0.08);
                            border-radius: 8px;
                            border: 1px solid rgba(131,52,120,0.19);
                            font-family: PangMenZhengDao, PangMenZhengDao;
                            font-weight: bold;
                            font-size: 12px;
                            line-height: 16px;
                            padding: 10px 8px;
                            white-space: nowrap;
                            &.red{
                                color: #833478;
                            }
                            &.green{
                                color: #AD78A6;
                            }
                        }
                        .xts_box{
                            flex: 1;
                            height: 13px;
                            background: #8F2E7C;
                        }
                    }
                }
            }
        }
    }

    .next_box{
        margin-top: 10px;
        background: rgba(118,30,106,0.05);
        border-radius: 0px 6px 0px 6px;
        padding: 8px 8px;
        .nb_title{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 12px;
            color: #761E6A;
            line-height: 16px;
        }
        .nb_p{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #111111;
            line-height: 16px;
            margin-top: 6px;
        }
        .nb_sj{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #252525;
            line-height: 20px;
            padding-left: 18px;
        }
    }
    .next_tip{
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 10px;
        color: #252525;
        line-height: 16px;
        margin-top: 20px;
    }

    .team_title{
        margin-top: 20px;
        font-size: 20px;
        font-weight: bold;
        line-height: 24px;
        color: #111111;
    }
    .team_p{
        font-size: 10px;
        line-height: 16px;
        color: #111111;
        margin-top: 6px;
    }

    .cc_table{
        margin-top: 11px;
        table{
            width: 100%;
            border-collapse: separate;
            border-spacing: 1px;
            background-color: #EFEFEF;
            tr{
                td{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 10px;
                    color: #111111;
                    line-height: 16px;
                    min-height: 28px;
                    background: #FFFFFF;
                    padding: 5px 5px;
                    &.red{
                        background: #761E6A;
                        color: #FFFFFF;
                    }
                    &.pink{
                        width: 58px;
                        background: #DCBAD4;
                    }
                    &.yellow{
                        background: #FFD750;
                    }
                    &.th{
                        text-align: center;
                    }
                    &.title{
                        width: 27px;
                        text-align: center;
                    }
                }
            }
        }
    }

    .team_table{
        margin-top: 10px;
        table{
            width: 100%;
            border-collapse: separate;
            border-spacing: 1px;
            background-color: #EFEFEF;
            tr{
                td{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 10px;
                    color: #252525;
                    line-height: 16px;
                    padding: 6px 10px;
                    background: #FFFFFF;
                    &.mw{
                        width: 50px;
                        padding: 5px;
                    }
                    &.tc{
                        height: 140px;
                    }
                }
                &.th td{
                    background: #761E6A;
                    color: #FFFFFF;
                }
            }
        }
    }

    .ztzdfx_box{
        width: 320px;
        margin-top: 16px;
        .zb_text{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 12px;
            color: #009191;
            line-height: 24px;
        }
        .zb_title{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 10px;
            color: #252525;
            line-height: 10px;
            margin-top: 6px;
        }
        .zb_line{
            width: 100%;
            height: 1px;
            background: #1D2129;
            margin-top: 9px;
        }
        .zb_pre{
            margin-top: 8px;
            .zbp_dian{
                width: 10px;
                height: 10px;
                border-radius: 5px;
                &.zd1{
                    background: #FFD650;
                }
                &.zd2{
                    background: #751E6A;
                }
                &.zd3{
                    background: #012846;
                }
            }
            span{
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 10px;
                color: #252525;
                line-height: 10px;
                margin-left: 8px;
            }
        }
        .zb_memo{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 10px;
            color: #252525;
            line-height: 14px;
            margin-top: 7px;
        }
    }

    
    .cb_content{
        &.box_dj{
            .mddj_title span{
                color: #833479;
            }
            .p3{
                color: #111111;
            }
            .mbi_title{
                background: #833479;
                font-weight: bold;
                font-size: 10px;
                color: #FFFFFF;
                line-height: 14px;
            }
            .mb_item{
                border-bottom: 1px dotted #833479;
            }
        }

        &.box_wbjg{
            .mddj_title span{
                color: #009191;
            }
            .p3{
                color: #111111;
            }
            .mbi_title{
                background: #009191;
                font-weight: bold;
                font-size: 10px;
                color: #FFFFFF;
                line-height: 14px;
            }
            .mb_item{
                border-bottom: 1px dotted #009191;
            }
        }

        &.box_gx{
            .mddj_title span{
                color: #002846;
            }
            .p3{
                color: #111111;
            }
            .mbi_title{
                background: #002846;
                font-weight: bold;
                font-size: 10px;
                color: #FFFFFF;
                line-height: 14px;
            }
            .mb_item{
                border-bottom: 1px dotted #002846;
            }
        }

        &.box_nbjg{
            .mddj_title span{
                color: #FFD750;
            }
            .p3{
                color: #111111;
            }
            .mbi_title{
                background: #FFD750;
                font-weight: bold;
                font-size: 10px;
                color: #FFFFFF;
                line-height: 14px;
            }
            .mb_item{
                border-bottom: 1px dotted #FFD750;
            }
            .mbi_title{
                color: #252525;
            }
        }

        &.box_xx{
            .mddj_title span{
                color: #AFCDF5;
            }
            .p3{
                color: #111111;
            }
            .mbi_title{
                background: #AFCDF5;
                font-weight: bold;
                font-size: 10px;
                color: #FFFFFF;
                line-height: 14px;
            }
            .mb_item{
                border-bottom: 1px dotted #AFCDF5;
            }
            .mbi_title{
                color: #252525;
            }
        }

        &.box_ldl{
            .mddj_title span{
                color: #898989;
            }
            .p3{
                color: #111111;
            }
            .mbi_title{
                background: #898989;
                font-weight: bold;
                font-size: 10px;
                color: #FFFFFF;
                line-height: 14px;
            }
            .mb_item{
                border-bottom: 1px dotted #898989;
            }
            .mbi_title{
                color: #FFF;
            }
        }

        &.other{
            .mddj_title span{
                font-weight: 800;
                font-size: 32px;
                color: #252525;
                line-height: 32px;
            }
            .nb_title{
                font-weight: bold;
                font-size: 12px;
                color: #252525;
                line-height: 16px;
            }
            .next_box{
                background: #F7FAFE;
            }
        }
    }
}