@import "@/styles/mixin.scss";

.ferrite-page {
    width: 1920px;
    height: 1080px;
    background: #7a809f;
    background-image: url(../../assets/images/Monitoring/ferrite_bg.png);
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;

    .swiper-list-pack {
        position: absolute;
        top: 110px;
        bottom: 10px;
        width: 1920px;
        padding-left: 5px;
        .swiper-container {
            width: 1890px;
        }
        .blue-border {
            border: 1px solid #24fc3f;
            .title-pack {
                background-color: rgba(36, 252, 63, 0.3);
                border-bottom: 1px solid #24fc3f;
            }
            .blue-border {
                .top {
                    background-color: rgba(36, 252, 63, 0.3);
                    border-bottom: 1px solid #24fc3f;
                }
                .content {
                    color: #00b511;
                    font-weight: bold;
                    font-family: DS-Digital;
                }
                .footer {
                    color: #00b511;
                    background-color: rgba(36, 252, 63, 0.3);
                    border-top: 1px solid #24fc3f;
                }
            }
            .green-border {
                .top {
                    color: #fff;
                    background-color: rgba(0, 124, 255, 0.3);
                    border-bottom: 1px solid #007cff;
                }
                .content {
                    color: #fff;
                    font-weight: bold;
                    font-family: DS-Digital;
                }
                .footer {
                    background-color: rgba(0, 124, 255, 0.3);
                    border-top: 1px solid #007cff;
                }
            }
            .red-border {
                .top {
                    background-color: rgba(255, 0, 0, 0.3);
                    border-bottom: 1px solid #ff0000;
                }
                .content {
                    color: #d70803;
                    font-weight: bold;
                    font-family: DS-Digital;
                }
                .footer {
                    color: #d70803;
                    background-color: rgba(255, 0, 0, 0.3);
                    border-top: 1px solid #ff0000;
                }
            }
        }
        .green-border {
            border: 1px solid #007cff;
            .title-pack {
                color: #fff;
                background-color: rgba(0, 124, 255, 0.3);
                border-bottom: 1px solid #007cff;
            }
            .blue-border {
                .top {
                    background-color: rgba(36, 252, 63, 0.3);
                    border-bottom: 1px solid #24fc3f;
                }
                .content {
                    color: #00b511;
                    font-weight: bold;
                }
                .footer {
                    color: #00b511;
                    background-color: rgba(36, 252, 63, 0.3);
                    border-top: 1px solid #24fc3f;
                }
            }
            .green-border {
                .top {
                    color: #fff;
                    background-color: rgba(0, 124, 255, 0.3);
                    border-bottom: 1px solid #007cff;
                }
                .content {
                    color: #fff;
                    font-weight: bold;
                }
                .footer {
                    background-color: rgba(0, 124, 255, 0.3);
                    border-top: 1px solid #007cff;
                }
            }
            .red-border {
                .top {
                    background-color: rgba(255, 0, 0, 0.3);
                    border-bottom: 1px solid #ff0000;
                }
                .content {
                    color: #d70803;
                    font-weight: bold;
                }
                .footer {
                    color: #d70803;
                    background-color: rgba(255, 0, 0, 0.3);
                    border-top: 1px solid #ff0000;
                }
            }
        }
        .red-border {
            border: 1px solid #ff0000;
            .title-pack {
                background-color: rgba(255, 0, 0, 0.3);
                border-bottom: 1px solid #ff0000;
            }
            .blue-border {
                .top {
                    background-color: rgba(36, 252, 63, 0.3);
                    border-bottom: 1px solid #24fc3f;
                }
                .content {
                    color: #00b511;
                    font-weight: bold;
                    font-family: DS-Digital;
                }
                .footer {
                    color: #00b511;
                    background-color: rgba(36, 252, 63, 0.3);
                    border-top: 1px solid #24fc3f;
                }
            }
            .green-border {
                .top {
                    color: #fff;
                    background-color: rgba(0, 124, 255, 0.3);
                    border-bottom: 1px solid #007cff;
                }
                .content {
                    color: #fff;
                    font-weight: bold;
                    font-family: DS-Digital;
                }
                .footer {
                    background-color: rgba(0, 124, 255, 0.3);
                    border-top: 1px solid #007cff;
                }
            }
            .red-border {
                .top {
                    background-color: rgba(255, 0, 0, 0.3);
                    border-bottom: 1px solid #ff0000;
                }
                .content {
                    color: #d70803;
                    font-weight: bold;
                    font-family: DS-Digital;
                }
                .footer {
                    color: #d70803;
                    background-color: rgba(255, 0, 0, 0.3);
                    border-top: 1px solid #ff0000;
                }
            }
        }
        .card-pack {
            @include clearfix;
            width: 460px;
            height: 955px;
            margin-right: 10px;
            .title-pack {
                @include clearfix;
                width: 100%;
                height: 40px;
                line-height: 40px;
                color: #fff;
                .type {
                    padding-left: 20px;
                    font-size: 16px;
                }
                .code {
                    text-align: center;
                    font-size: 24px;
                }
                .img {
                    height: 40px;
                    line-height: 40px;
                    text-align: right;
                    padding-top: 8px;
                    padding-right: 13px;
                    img {
                        width: 68px;
                    }
                }
            }
            .content-pack {
                @include clearfix;
                padding: 10px;
                color: #fff;
                .item-card-pack {
                    .item-pack {
                        height: 110px;
                        width: 100%;
                        .top {
                            @include clearfix;
                            width: 100%;
                            height: 20px;
                            line-height: 20px;
                            text-align: center;
                            font-size: 14px;
                        }
                        .content {
                            @include clearfix;
                            text-align: center;
                            height: 70px;
                            line-height: 70px;
                            text-align: center;
                            font-size: 26px;
                            letter-spacing: 3px;
                        }
                        .footer {
                            @include clearfix;
                            width: 100%;
                            height: 20px;
                            line-height: 20px;
                        }
                    }
                }
                .chart-pack {
                    width: 100%;
                    height: 170px;
                    margin-bottom: 10px;
                }
                .table-pack {
                    width: 100%;
                    height: 470px;
                }
            }
        }
    }
}
