.container {
    height: 129px;
    border-radius: 20px;
    // background: linear-gradient(to right, rgba(19, 84, 255, 0.1), rgba(23, 255, 149, 0));

    display: flex;
    justify-content: space-between;

    .topLeft {
        width: 547px;
        height: 129px;
        -webkit-backdrop-filter: blur(5px);
        /* Safari浏览器兼容 */
        backdrop-filter: blur(5px);
        /* 模糊效果 */
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 25px;
        font-family: DingTalk JinBuTi;
        padding-right: 52px;
        position: relative;
        background: linear-gradient(to right, rgba(70, 255, 209, 0.555), rgba(70, 255, 209, 0.195));

        .title {
            font-size: 26px;
            color: rgb(255, 255, 255);

        }

        .tips {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.728);
        }

        .statusWarp {

            .labelWarp {
                display: flex;
                align-items: center;

                .icon {
                    width: 59px;
                    height: 59px;
                }

                .label {
                    font-size: 36px;
                }
            }

        }

        .tipsWarp {
            height: 100%;
            position: absolute;
            width: 260px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: rgba(0, 0, 0, 0.249);
            border-radius: 15px 0 20px 0;
            right: 0;
            bottom: 0;
            padding: 0 15px;

            .statuslab {
                display: flex;
                align-items: center;
                color: rgba(255, 255, 255, 0.373);
                font-size: 14px;

                .dot {
                    width: 5px;
                    height: 5px;
                    border-radius: 50%;
                    margin-right: 5px;
                }
            }

        }
    }

    .cqi {
        height: 100%;
        width: 20%;


        .tag {
            background-color: rgba(62, 146, 199, 0.401);
            width: 163px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 17px 0px 25.5px 0px;
            color: rgb(255, 255, 255);
            font-size: 30px;
            font-family: DingTalk JinBuTi;

        }

        .warp {
            display: flex;
            padding-left: 19px;
            padding-top: 20px;
            cursor: pointer;

            .textWarp {
                font-family: DingTalk JinBuTi;
                width: 60px;
                font-size: 24px;
                color: rgb(189, 206, 233);

            }

            .cqiWarp {
                margin-left: 21px;

                .count {
                    color: rgb(87, 239, 88);
                    font-size: 50px;
                    font-family: DingTalk JinBuTi;
                }

                .status {
                    font-family: D-DIN;
                    color: rgb(255, 255, 255);
                    font-size: 18px;
                }
            }
        }
    }

    .lineChartsWarp {
        margin-left: 20px;
        padding-top: 20px;
    }

    .progress {
        margin-left: 50px;
        padding-top: 20px;
        height: 100%;
        display: flex;
        align-items: center;

    }

    .warningWarp {
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-family: DingTalk JinBuTi;
        width: 545px;
        background: rgba(110, 175, 255, 0.12);
        border-radius: 20px;

        -webkit-backdrop-filter: blur(10px);
        /* Safari浏览器兼容 */
        backdrop-filter: blur(10px);

        /* 模糊效果 */
        .warnItem {
            .count {

                color: rgb(227, 80, 80);
                font-size: 26px;
            }

            .label {
                margin-top: 9px;
                color: rgb(202, 223, 252);
                font-size: 22px;
            }
        }
    }
}

.popWarp {
    width: 483px;
    background-color: #163050;
    padding: 18px 20px;

    .items {
        margin-bottom: 20px;

        .statuslab {
            display: flex;
            align-items: center;
            color: rgb(255, 255, 255);
            font-size: 18px;

            .dot {
                width: 10px;
                height: 10px;
                border-radius: 5px;
                margin-right: 5px;
            }
        }

        .desc {
            margin-top: 5px;
            color: rgb(162, 209, 255);
            font-size: 14px;
        }
    }
}