{"remainingRequest":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\sfz-lh-fvue\\src\\views\\BigScreen\\deviceMonitor.vue?vue&type=style&index=0&id=7629a0d5&scoped=true&lang=scss&","dependencies":[{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\src\\views\\BigScreen\\deviceMonitor.vue","mtime":1703216434089},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n@import '../../views/BigScreen/bigScreen.scss';\r\n.videoMonitoring{\r\n   width: 100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    position: relative;\r\n    background: url('../../assets/img/bigScreen/bg.png') no-repeat center / 100% 100%;\r\n}\r\n.sidebar-container{\r\n    width: 100%;\r\n    height: 33.3%;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n}\r\n.bottom-sidebar{\r\n    position: absolute;\r\n    bottom: 55px;\r\n    left: 424px;\r\n    width: calc(100% - 848px);\r\n    padding: 8px 16px;\r\n    height:calc(29.4%  - 16px);\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: space-between;\r\n    background:rgba(#0d1825, 0.1);\r\n    border-radius: 4px;\r\n    opacity: 1;\r\n    z-index: 99;\r\n    backdrop-filter: blur(40px);\r\n    -webkit-backdrop-filter: blur(40px); \r\n    box-sizing: border-box;\r\n    background: url('../../assets/img/bigScreen/decoration-bottom.png') no-repeat center / 100% 100%;\r\n}\r\n.bottom-section-header{\r\n    width: 100%;\r\n    height: 30px;\r\n    font-weight: 700;\r\n    color: #FFFFFF;\r\n    line-height: 30px;\r\n    background: url('../../assets/img/bigScreen/bottom-title-large.png') no-repeat center / 100% 100%;\r\n}\r\n.bottom-section-header span{\r\n    margin-left: 32px;\r\n    font-size: 14px;\r\n}\r\n.section1{\r\n    position: relative;\r\n    .section1-container-count{\r\n        position: absolute;\r\n        top: 2%;\r\n        left: 76px;\r\n        width: 176px;\r\n        height: 40px; \r\n\r\n        background:url('../../assets/img/bigScreen/border.png') no-repeat center / 100% 100%; ;\r\n        text-align: center;\r\n        line-height: 40px;\r\n        font-size: 14px;  \r\n        font-weight: 400;\r\n        color: #FFFFFF;\r\n        span{\r\n          font-size: 20px; \r\n          font-weight: 700;\r\n          height: 100%;\r\n          padding: 4px\r\n        } \r\n        \r\n    }\r\n    .section1-container-img{\r\n        position: absolute;\r\n        top: 27%;\r\n        left: -44px;\r\n        width: 228px;\r\n        height: 69%;\r\n        background:url('../../assets/img/bigScreen/icon-EquipmentCount.png') no-repeat center / 100% 100%; \r\n    }\r\n    .section1-container-value{\r\n        position: absolute;\r\n        top: 34%;\r\n        left: 180px;\r\n        width: 147px;\r\n        height: 50%;\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        align-items: center;\r\n.section1-container-box{\r\n  width: 100%;\r\n  display: flex;\r\n}\r\n    }\r\n    .point{\r\n    width: 16px;\r\n    height: 16px;\r\n    position: relative;\r\n    .point-color{\r\n    position: absolute;\r\n    left: 0;\r\n    width: 16px;\r\n    height: 16px;\r\n    border-radius:16px;\r\n    opacity: 0.1;\r\n\r\n    }\r\n    .color{\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    margin-top: -3px;\r\n    margin-left: -3px;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 6px;\r\n    }\r\n   }\r\n.value{\r\n    width: 120px;\r\n    height: 18px;\r\n    font-size: 14px;\r\n    font-weight: 400;\r\n    color: #FFFFFF;\r\n    margin-left: 8px;\r\n    opacity: 0.8;\r\n  }\r\n.blue{\r\n    background-color: #00E6E6;\r\n    animation: breath 2s linear infinite alternate;\r\n}\r\n.orange{\r\n    background-color: #FF884D;\r\n    animation: breath 1.5s ease-in-out infinite alternate;\r\n}\r\n.yellow{\r\n    background-color: #FFDA81 ;\r\n    animation: breath 2.4s ease-out infinite alternate;\r\n}\r\n\r\n}\r\n@keyframes breath {\r\nfrom {\r\n    transform:scale(1.2);\r\n}\r\nto {\r\n    transform:scale(0.7);\r\n}\r\n}\r\n.section2{\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    .section2-container{\r\n        width: 50%;\r\n        height: 33.3%;\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n    }\r\n}\r\n\r\n.section2-container-img{\r\n            width: 60px;\r\n            height: 100%;\r\n            margin-left: 18px;\r\n            display: flex;\r\n            img{\r\n                width: 60px;\r\n                height: 90%;\r\n            }\r\n        }\r\n.section2-container-value{\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    width:calc( 100% - 60px - 18px - 10px);\r\n    height: calc(100% - 20px);\r\n    padding: 10px 5px;\r\n    .value{\r\n        width: 100%;\r\n        height: 30px;\r\n        font-size: 18px;\r\n        font-weight: 700;\r\n        line-height: 30px;\r\n        background: linear-gradient(180deg, #B2D9FF 65%, #0080FF 70%);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n   \r\n    }\r\n    .name{\r\n        width: 100%;\r\n        height: 40%;\r\n        font-size: 12px;\r\n        font-weight: 400;\r\n        color: #B3D9FF;\r\n    }\r\n        }\r\n\r\n.section6{\r\n    position: relative;\r\n}\r\n.section6-container{\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 35%;\r\n    display: flex;\r\n    align-items: center;\r\n    .section6-name{\r\n        position: relative;\r\n        margin-left: 21px;\r\n        width: 110px;\r\n        height: 100%;\r\n        background:url('../../assets/img/bigScreen/shape.png') no-repeat center / 100% 100%; \r\n        .name{\r\n        position: absolute;\r\n        width: 60px;\r\n        height: 18px;\r\n        font-size: 14px;\r\n        font-weight: 400;\r\n        color: #fff;\r\n        left: 51%;\r\n        top: 44%;\r\n        opacity: 0.9;\r\n        transform: translate(-50%,-50%);\r\n        text-align: center;\r\n        }\r\n    }\r\n    .section6-line{\r\n        width: 170px;\r\n        height: 8.5%;\r\n        margin-left: -10px;\r\n        background:url('../../assets/img/bigScreen/line.png') no-repeat center / 100% 100%; \r\n    }\r\n    .section6-value{\r\n        margin-left: 12px;\r\n        width: calc(100% - 110px - 170px - 12px);\r\n        height: 25px;\r\n        color: #fff;\r\n        font-weight: 400;\r\n        font-size: 18px;\r\n    }\r\n    }\r\n    .find{\r\n        top: 5%;\r\n        z-index: 199;\r\n    }\r\n    .maintenance{\r\n        top: 23%;\r\n        z-index: 189;\r\n    }\r\n    .check{\r\n        top: 41%;\r\n        z-index: 179;\r\n    }\r\n    .end{\r\n        top: 59%;\r\n        z-index: 169;\r\n    }\r\n    .section3{\r\n        position: relative;\r\n        #section3-pie-chart{\r\n            position: absolute;\r\n            width: 160px;\r\n            height: 80%;\r\n            top: 10%;\r\n            left: 5%;\r\n\r\n        }\r\n        .section3-content{\r\n            position: absolute;\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            width: 132px;\r\n            height: 55%;\r\n            top: 24%;\r\n            left: 57%;\r\n        }\r\n        .section3-content-container{\r\n            width: 100%;\r\n            height: 33%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            background: url('../../assets/img/bigScreen/dikuang-home.png') no-repeat center / 100% 100%;\r\n            .section3-content-box{\r\n              width: 100%;\r\n              display: flex;\r\n            }\r\n            .point{\r\n                width: 8px;\r\n                height: 8px;\r\n                border-radius: 50% 50%;\r\n            }\r\n            .name{\r\n                width: 65px;\r\n                height: 16px;\r\n                font-size: 12px;\r\n                font-weight: 400;\r\n                color: #FFFFFF;\r\n                line-height: 16px;\r\n                text-align: center;\r\n                opacity: 0.8;\r\n            }\r\n            .value{\r\n                width: calc(100% - 8px - 65px);\r\n                height: 16px;\r\n                text-align: right;\r\n                font-size: 12px;\r\n                font-weight: 400;\r\n                color: #FFFFFF;\r\n                line-height: 16px;\r\n                opacity: 0.8;\r\n            }\r\n        }\r\n\r\n    }\r\n    .section4{\r\n        position: relative;\r\n        #section4-pie-chart{\r\n            position: absolute;\r\n            width: 160px;\r\n            height: 80%;\r\n            top: 8%;\r\n            left: 5%;\r\n        }\r\n        .section4-content{\r\n            position: absolute;\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            width: 132px;\r\n            height: 75%;\r\n            top: 10%;\r\n            left: 55%;\r\n        }\r\n    }\r\n    .section4-content-container{\r\n            width: 100%;\r\n            height: 25%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            background: url('../../assets/img/bigScreen/dikuang-home.png') no-repeat center / 100% 100%;\r\n            .point{\r\n                width: 8px;\r\n                height: 8px;\r\n                border-radius: 50% 50%;\r\n            }\r\n            .name{\r\n                width: 60px;\r\n                height: 16px;\r\n                font-size: 12px;\r\n                font-weight: 400;\r\n                color: #FFFFFF;\r\n                line-height: 16px;\r\n                text-align: left;\r\n                opacity: 0.8;\r\n                margin-left: 10px;\r\n            }\r\n            .value{\r\n                width: calc(100% - 8px - 70px);\r\n                height: 16px;\r\n                text-align: right;\r\n                font-size: 12px;\r\n                font-weight: 400;\r\n                color: #FFFFFF;\r\n                line-height: 16px;\r\n                opacity: 0.8;\r\n            }\r\n        }\r\n    .pieBlue{\r\n        background-color: #699BFF;\r\n    }\r\n    .pieYellow{\r\n        background-color: #F4DE79;\r\n    }\r\n    .pieGreen{\r\n        background-color: #55EDB0;\r\n    }\r\n    .pieRed{\r\n        background-color: #F35675;\r\n    }\r\n    .pieOrange{\r\n        background-color: #FF884D;\r\n    }\r\n    .section5{\r\n        display: flex;\r\n        justify-content: center;\r\n        flex-wrap: wrap;\r\n        .section5-analysis{\r\n            margin-top: 5px;\r\n            width: 270px;\r\n            height: calc(24% - 16px);\r\n            padding:8px 0;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            background: url('../../assets/img/bigScreen/content-dk.png') no-repeat center / 100% 100%;\r\n            .analysis-container{\r\n                width: 49%;\r\n                height: 100%;\r\n                display: flex;\r\n                flex-wrap: wrap;\r\n                align-content: space-between;\r\n            \r\n                .analysis-value{\r\n                    width: 100%;\r\n                    height: 60%;\r\n                    font-size: 20px;\r\n                    font-weight: 700;\r\n                    color: #FFFFFF;\r\n                    text-align: center;\r\n                    i{\r\n                      font-size: 20px;\r\n                      font-weight: 700;\r\n                    }\r\n                    .el-icon-top{\r\n                      color: #F45675;\r\n                     }\r\n                     .el-icon-bottom{\r\n                      color: #0DFFFF;\r\n                     }\r\n                }\r\n                .analysis-name{\r\n                    width: 100%;\r\n                    height: 40%;\r\n                    font-size: 14px;\r\n                    font-weight: 400;\r\n                    color: #FFFFFF;\r\n                    text-align: center;\r\n                    opacity: 0.8;\r\n                }\r\n            }\r\n\r\n        }\r\n        .section5-line{\r\n            width: 2px;\r\n            height: 80%;\r\n            background-color: #fff;\r\n            opacity: 0.5;\r\n        }\r\n        #analysis-chart{\r\n                width: 100%;\r\n                height: 72%;\r\n            }\r\n    }\r\n    .table-wrapper{\r\n        width: 100%;\r\n        height: calc(100% - 36px);\r\n    }\r\n    .dot2{\r\n        background: rgba(184, 194, 204, 0.15) !important;\r\n    }\r\n    .dot2::after{\r\n        background: #B8C2CC !important;\r\n    }\r\n    .column-status{\r\n        display: flex;\r\n        align-items: center;\r\n        margin-left: 30%;\r\n    }\r\n\r\n    .main-container{\r\n    position: absolute;\r\n    top: 130px;\r\n    left: 410px;\r\n    opacity: 1;\r\n    width: 56.6%;\r\n    height: calc(100% - 27.4% - 240px );\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    z-index: 199;\r\n    }\r\n    .rate-container{\r\n        width: 736px;\r\n        height: 20%;\r\n        position: absolute;\r\n        top: 0;\r\n        left: 50%;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        padding:0 120px;\r\n        transform: translateX(-50%);\r\n    }\r\n    .rate-section{\r\n        width: 70px;\r\n        height: 100%;\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        .rate-section-name{\r\n            width: 100%;\r\n            height: 20%;\r\n            text-align: center;\r\n            font-size: 14px;\r\n            font-weight: 400;\r\n            color: #FFFFFF;\r\n            opacity: 0.8;\r\n        }\r\n        .rate-section-value{\r\n            position: relative;\r\n            margin-top: 5px;\r\n            width: 100%;\r\n            height: 77%;\r\n            background: url('../../assets/img/bigScreen/icon-zhu.png') no-repeat center / 100% 100%;\r\n           .value{\r\n            width: 100%;\r\n            height: 21px;\r\n            position: absolute;\r\n            text-align: center;\r\n            font-size: 16px;\r\n            font-weight: 700;\r\n            top: 48%;\r\n            transform: translateY(-50%);\r\n            color: #00E5FF;\r\n           }\r\n        }\r\n    }\r\n    .rate-data{\r\n        width: 130px;\r\n        height: 130px;\r\n        position: absolute;\r\n        top: 32%;\r\n        left: 18%;\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        \r\n        .img{\r\n            position: absolute;\r\n            width: 100%;\r\n            height: 100%;\r\n            top: 0;\r\n            left: 0;\r\n            background: url('../../assets/img/bigScreen/rate-blue.png') no-repeat center / 100% 100%;\r\n            animation: mincircle 6s linear infinite;\r\n        }\r\n        .name{\r\n            width: 100%;\r\n            height: 20%;\r\n            text-align: center;\r\n            font-size: 14px;\r\n            font-weight: 400;\r\n            color: #fff;\r\n            margin-bottom: 28%;\r\n            z-index: 999;\r\n           \r\n        }\r\n        .value{\r\n            width: 100%;\r\n            height: 20%;\r\n            text-align: center;\r\n            font-size: 20px;\r\n            font-weight: 700;\r\n            color: #fff;\r\n            margin-top: 30%;\r\n            z-index: 999;\r\n        }\r\n    }\r\n    .rate-data2{\r\n        width: 130px;\r\n        height: 130px;\r\n        position: absolute;\r\n        top: 32%;\r\n        left: 72%;\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        .img{\r\n            position: absolute;\r\n            width: 100%;\r\n            height: 100%;\r\n            top: 0;\r\n            left: 0;\r\n            background: url('../../assets/img/bigScreen/rate-orange.png') no-repeat center / 100% 100%;\r\n            animation: mincircle 4s linear infinite;\r\n        }\r\n        .name{\r\n            width: 100%;\r\n            height: 20%;\r\n            text-align: center;\r\n            font-size: 14px;\r\n            font-weight: 400;\r\n            color: #fff;\r\n            margin-bottom: 28%;\r\n           z-index: 999;\r\n        }\r\n        .value{\r\n            width: 100%;\r\n            height: 20%;\r\n            text-align: center;\r\n            font-size: 20px;\r\n            font-weight: 700;\r\n            color: #fff;\r\n            margin-top: 30%;\r\n            z-index: 999;\r\n        }\r\n    }\r\n    .rate-data-large{\r\n        width: 15.5vw;\r\n        height: 15.5vw;\r\n        // width: 288px;\r\n        // height: 288px;\r\n        position: absolute;\r\n        top: 27%;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        .img{\r\n            position: absolute;\r\n            width: 100%;\r\n            height: 100%;\r\n            top: 0;\r\n            left: 0;\r\n            background: url('../../assets/img/bigScreen/rate-large.png') no-repeat center / 100% 100%;\r\n            \r\n        }\r\n        .name{\r\n            position: absolute;\r\n            width: 100%;\r\n            height: 15%;\r\n            bottom: 0;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            text-align: center;\r\n            font-size: 16px;\r\n            font-weight: 700;\r\n            color: #fff;\r\n        }\r\n        .value{\r\n            position: absolute;\r\n            width: 100%;\r\n            height: 30%;\r\n            text-align: center;\r\n            font-size: 30px;\r\n            font-weight: 700;\r\n            color: #fff;\r\n            top:  57%;\r\n            left: 50%;\r\n            transform: translate(-50%,-50%);\r\n        }\r\n    }\r\n    .rate-warn{\r\n        width: 320px;\r\n        height: 28%;\r\n        position: absolute;\r\n        top: 60%;\r\n        left: 1%;\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        align-items: center;\r\n        .rate-warn-title{\r\n            width: calc(100% - 16px);\r\n            height: calc(19% - 5px);\r\n            padding: 2.5px 8px;\r\n            display: flex;\r\n            background: url('../../assets/img/bigScreen/warn-title.png') no-repeat center / 100% 100%;\r\n            .icon-warn{\r\n                width: 16px;\r\n                height: 85%;\r\n                background: url('../../assets/img/bigScreen/icon-warn.png') no-repeat center / 100% 100%;\r\n            }\r\n            .warn-title{\r\n                width: 60px;\r\n                height: 100%;\r\n                font-size: 14px;\r\n                font-weight: 700;\r\n                color: #FFFFFF;\r\n                margin-left: 6px;\r\n            }\r\n        }\r\n\r\n    }\r\n    .rate-warn-box{\r\n        width: 100%;\r\n        height: calc(100% - 19% - 5px);\r\n        overflow: hidden;\r\n       }\r\n    .rate-warn-content{\r\n        width: 100%;\r\n        height: 40%;\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        padding: 5px 0px;\r\n        border-bottom: 2px solid rgba(255, 255, 255, 0.2);\r\n        box-sizing: border-box;\r\n        .warn-time{\r\n            width: 100%;\r\n            height:calc(50% - 8px);\r\n            padding-top: 8px;\r\n            font-size: 14px;\r\n            font-weight: 700;\r\n            display: flex;\r\n            color: #FFFFFF;\r\n   \r\n        }\r\n        .warn-cause{\r\n            width: 100%;\r\n            height: 48%;\r\n            font-size: 14px;\r\n            font-weight: 400;\r\n            color: #FFFFFF;\r\n            margin-top: 1%;\r\n            span{\r\n            font-size: 14px;\r\n            font-weight: 400;\r\n            }\r\n        }\r\n\r\n        .warnMsg{\r\n        display: inline-block;\r\n          width: 110px;\r\n          white-space:nowrap;\r\n          overflow:hidden;\r\n          text-overflow: ellipsis;\r\n          \r\n        }\r\n    }\r\n    .warn-point{\r\n                width: 15px;\r\n                height: 100%;\r\n                margin-right: 5px;\r\n            }\r\n    .warn{\r\n    animation: warn 1.5s ease-out infinite alternate;\r\n}\r\n@keyframes warn {\r\nfrom {\r\n    transform:scale(1.3);\r\n}\r\nto {\r\n    transform:scale(0.8);\r\n}\r\n}\r\n    .rate-road{\r\n        width: 560px;\r\n        height: 27%;\r\n        position: absolute;\r\n        top: 76%;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        background: url('../../assets/img/bigScreen/rate-road.png') no-repeat center / 100% 100%;\r\n    }\r\n    @keyframes circle {\r\n    0% {\r\n        transform: rotate(0deg);\r\n        opacity: 1;\r\n    }\r\n    50% {\r\n        transform: rotate(180deg);\r\n        opacity: 0.8;\r\n    }\r\n    100% {\r\n        transform: rotate(360deg);\r\n        opacity: 1;\r\n    }\r\n}\r\n@keyframes mincircle {\r\n    0% {\r\n        transform: rotate(0deg);\r\n        opacity: 1;\r\n    }\r\n    50% {\r\n        transform: rotate(-180deg);\r\n        opacity: 0.8;\r\n    }\r\n    100% {\r\n        transform: rotate(-360deg);\r\n        opacity: 1;\r\n    }\r\n}\r\n",null]}