hiatmp_htv_new/src/components/CommandPlatform/left/Congestion.less

.congestion {
    width: 100%;

    .tit {
        width: 100%;
        background: url(../../../assets/CommandPlatform/tit.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 58px;
        font-family: PangMenZhengDao;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        line-height: 16px;
        letter-spacing: 6px;
        color: #ffffff;
        box-shadow: 0px 1px 2px 0px rgba(38, 46, 64, 0.27);
        margin-bottom: 40px;
        position: relative;

        img {
            position: absolute;
            left: 120px;
            top: -20px;
            width: 48px;
            height: 42px;
        }

        div {
            position: absolute;
            left: 180px;
            top: -12px;
            font-size: 44px;
        }
    }



    .containerTop {
        width: 100%;
        height: 95px;
        margin-bottom: 44px;
        display: flex;

        .interval {
            margin-bottom: 14px;
        }

        .top1 {
            margin: 0 20px 0 36px;
            line-height: 95px;
            font-size: 30px;
            font-family: MicrosoftYaHei;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 3px;
        }

        .top2 {
            margin-right: 12px;
            display: flex;

            .num {
                width: 82px;
                height: 95px;
                line-height: 95px;
                text-align: center;
                margin-right: 12px;

                font-family: LetsgoDigital-Regular;
                font-size: 50px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 8px;
                color: #ffffff;
                box-shadow: 0px 10px 5px 0px rgba(1, 10, 18, 0.17);
                background: url(../../../assets/CommandPlatform/数字框.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

        }

        .num:last-child {
            margin-right: 0;
        }

        .top3 {
            margin-right: 45px;
            line-height: 95px;
            font-family: MicrosoftYaHei;
            font-size: 29px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #b7dff9;
        }

        .top4 {
            margin-right: 18px;
            font-family: MicrosoftYaHei;
            font-size: 30px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #b7dff9;
        }

        .top5 {
            display: flex;

            img {
                width: 30px;
                height: 32px;
                margin-top: 10px;
            }
        }

        .top5>div:nth-child(1) {
            margin-right: 10px;
            text-align: right;
            font-family: MicrosoftYaHei;
            font-size: 30px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
        }
    }

    .containerBottom {
        width: 100%;
        display: flex;
        justify-content: space-between;

        &>div {
            width: 236px;

            .num1 {
                background: url(../../../assets/CommandPlatform/z4.png);

                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            .num2 {
                background: url(../../../assets/CommandPlatform/z5.png);

                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            .num3 {
                background: url(../../../assets/CommandPlatform/z6.png);

                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            &>div {


                width: 100%;
                height: 82px;
                text-align: center;
                margin-bottom: 12px;
                position: relative;

                .numtop {
                    width: 100%;
                    position: absolute;
                    top: -14px;
                    font-size: 36px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 5px;
                    font-family: MicrosoftYaHei;
                }

                .numbottom {
                    width: 100%;
                    position: absolute;
                    top: 32px;
                    font-family: MicrosoftYaHei;
                    font-size: 30px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 3px;
                }
            }

            .compare {
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding: 0 24px;

                .compareFont {
                    font-family: MicrosoftYaHei;
                    font-size: 30px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #b7dff9;

                }

                .compareNum {
                    display: flex;
                    text-align: right;
                    font-size: 30px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #ffffff;

                    &>div:nth-child(1) {
                        margin-right: 8px;
                    }

                    img {
                        width: 30px;
                        height: 30px;
                        margin-top: -6px;
                    }
                }
            }
        }


    }
}