{"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\\homePage.vue?vue&type=style&index=0&id=084b3d30&lang=scss&scoped=true&","dependencies":[{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\src\\views\\BigScreen\\homePage.vue","mtime":1700680101171},{"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\r\n@import '../../views/BigScreen/bigScreen.scss';\r\n.screen-page{\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    position: relative;\r\n    background-color: #333640;\r\n    \r\n}\r\n.screen-page-mask{\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    background: url('../../assets/img/bigScreen/modelbg-mask.png') no-repeat center / 100% 100%;\r\n    pointer-events: none;\r\n}\r\n.tollstation-infor{\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.section1{\r\n    width: 100%;\r\n    height: 35%;\r\n    margin-top: 16px;\r\n    position: relative;\r\n    .circle{\r\n        width: 268px;\r\n        height: 268px;\r\n        margin: 0 auto;\r\n        background: url('../../assets/img/bigScreen/diwen-circle.png') no-repeat center / 100% 100%;\r\n        animation: circle 10s linear infinite;\r\n    }\r\n    .target{\r\n        position: absolute;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        width: 164px;\r\n        height: 80px;\r\n        background: url('../../assets/img/bigScreen/dikuang-home.png') no-repeat center / 100% 100%;\r\n        .label{\r\n            color: #FFFFFF;\r\n            font-size: 12px;\r\n            line-height: 18px;\r\n        }\r\n        .count{\r\n            color: #FFFFFF;\r\n            font-size: 22px;\r\n            font-weight: 700;\r\n            line-height: 29px;\r\n        }\r\n    }\r\n    .target1{\r\n        left: 0;\r\n        top: 5%;\r\n        align-items: flex-start;\r\n    }\r\n    .target2{\r\n        right: 0;\r\n        top: 14%;\r\n        align-items: flex-end;\r\n    }\r\n    .zhiban{\r\n        position: absolute;\r\n        left: 0;\r\n        bottom: 0;\r\n        width: 100%;\r\n        height: 112px;\r\n        padding: 16px;\r\n        box-sizing: border-box;\r\n        background: url('../../assets/img/bigScreen/content-dk.png') no-repeat center / 100% 100%;\r\n    }\r\n    .avator{\r\n        width:80px;\r\n        height: 80px;\r\n        border: 1px solid #177EE5;\r\n    }\r\n    .zhiban-info{\r\n        height: 80px;\r\n        color: #fff;\r\n        margin-left: 16px;\r\n        justify-content: space-around;\r\n        div{\r\n            font-size: 14px;\r\n        }\r\n    }\r\n}\r\n\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\r\n\r\n\r\n.section-content-block{\r\n    width: 100%;\r\n    height: 17%;\r\n    display: flex;\r\n    margin-top: 4%;\r\n    padding: 16px;\r\n    box-sizing: border-box;\r\n    background: url('../../assets/img/bigScreen/content.png') no-repeat center / 100% 100%;\r\n}\r\n\r\n.icon-transit-time{\r\n    height: 100px;\r\n    width: 100px;\r\n    background: url('../../assets/img/bigScreen/icon-transit-time.png') no-repeat center / 100% 100%;\r\n}\r\n.icon-transaction-rate{\r\n    height: 100px;\r\n    width: 100px;\r\n    background: url('../../assets/img/bigScreen/icon-transaction-rate.png') no-repeat center / 100% 100%;\r\n}\r\n.section-content-container{\r\n    width: calc(100% - 110px);\r\n    margin-left: 10px;\r\n    height: 100px;\r\n    justify-content: center;\r\n    gap: 8px;\r\n}\r\n.container-name{\r\n    width: 100%;\r\n    font-size: 12px;\r\n    font-weight: 400;\r\n    color: #FFFFFF;\r\n}\r\n.container-content{\r\n    width: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    color: #fff;\r\n    overflow-y: hidden;\r\n    \r\n}\r\n.number-blocks-wrapper{\r\n    flex: 1;\r\n    width: 32px;\r\n    max-width: 36px;\r\n    height: 46px;\r\n    transform: translate(0, 0);\r\n    transition: transform 1s ease-in-out;\r\n}\r\n\r\n.number-blocks-wrapper~.number-blocks-wrapper{\r\n    margin-left: 2px;\r\n}\r\n.number-block{\r\n    width: 100%;\r\n    height: 46px;\r\n    background: #3D4953;\r\n    border-radius: 8px;\r\n    line-height: 46px;\r\n    text-align: center;\r\n    font-size: 30px;\r\n    font-weight: bold;\r\n    vertical-align: middle;\r\n    position: relative;\r\n    transition: transform 1s ease-in-out;\r\n    \r\n}\r\n.number-block::before{\r\n    content:'';\r\n    position:absolute;\r\n    left: 0;\r\n    top: calc(50% - 1px);\r\n    width: 100%;\r\n    height: 2px;\r\n    background: #3D4953;\r\n}\r\n.container-content-unit{\r\n    width: 16px;\r\n    height: 46px;\r\n    margin: 0 2px;\r\n    display: flex;\r\n    align-items: flex-end;\r\n    span{\r\n        color: #FFFFFF;\r\n        font-size: 16px;\r\n    }\r\n}\r\n.container-content-unit.point{\r\n    width: 6px;\r\n    span{\r\n        font-size: 40px;\r\n    }\r\n}\r\n.section-bottom{\r\n    height: 20%;\r\n    width: 100%;\r\n    margin-top: 4%;\r\n    justify-content: space-between;\r\n    position: relative;\r\n}\r\n\r\n.section-content-wrapper{\r\n    width: 100%;\r\n    height: 36%;\r\n    background: linear-gradient(270deg, #405980 0%, rgba(64,89,128,0) 40%,rgba(64,89,128,0) 60% , #405980 100%);\r\n    border-radius: 8px;\r\n    padding:0 10px;\r\n    box-sizing: border-box;\r\n}\r\n.type-content{\r\n    position: relative;\r\n    .label{\r\n        font-size: 14px;\r\n        color: #A0AAB2;\r\n    }\r\n    .count{\r\n        font-size: 18px;\r\n        font-family: Arial, Arial;\r\n        font-weight: 700;\r\n        color: #FFFFFF;\r\n    }\r\n    .unit{\r\n        font-size: 12px;\r\n        color: #A0AAB2;\r\n        margin-left: 6px;\r\n    }\r\n    &::after{\r\n        content:\"\";\r\n        position: absolute;\r\n        width: 2px;\r\n        height: 10px;\r\n        top: calc(50% - 5px);\r\n    }\r\n}\r\n.type-content.type1{\r\n    &::after{\r\n        left: -6px;\r\n        background: #3399FF;\r\n    }\r\n}\r\n.type-content.type2{\r\n    text-align: right;\r\n    &::after{\r\n        right: -6px;\r\n        background: #FD9854;\r\n    }\r\n}\r\n.type-content.type3{\r\n    &::after{\r\n        left: -6px;\r\n        background: #55EDB0;\r\n    }\r\n}\r\n.type-content.type4{\r\n    text-align: right;\r\n    &::after{\r\n        right: -6px;\r\n        background: #F4DE79;\r\n    }\r\n}\r\n.center-wrapper{\r\n    position: absolute;\r\n    width: 150px;\r\n    height: 150px;\r\n    left: 50%;\r\n    top: 50%;\r\n    transform: translate(-50%, -50%);\r\n    background: linear-gradient(90deg, rgba(105,155,255,0) 8%, rgba(107, 156, 255,0.15), rgba(105,155,255,0) 92%);\r\n    border-radius: 150px;\r\n    #pie-chart{\r\n        width: 140px;\r\n        height: 140px;\r\n    }\r\n}\r\n\r\n\r\n.lane-info{\r\n    width: 100%;\r\n    height: 250px;\r\n}\r\n.lane-wrapper{\r\n    width: 100%;\r\n    height: calc(100% - 46px);\r\n    margin-top:16px;\r\n}\r\n.lane-total{\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n    padding: 0 20px;\r\n    height: 88px;\r\n    background: linear-gradient(90deg, rgba(51,153,255,0) 0%, rgba(51,153,255,0.2) 52%, rgba(51,153,255,0) 100%);\r\n    border: 1px solid;\r\n    border-image: linear-gradient(90deg, rgba(51.00000075995922, 153.00000607967377, 255, 0), rgba(178.49999696016312, 216.75006687641144, 255, 0.5), rgba(51.00000075995922, 153.00000607967377, 255, 0)) 1 1;\r\n\r\n    .lane-label{\r\n        font-size: 16px;\r\n        font-weight: 700;\r\n        color: #FFFFFF;\r\n    }\r\n    .lane-count{\r\n        font-size: 40px;\r\n        font-weight: 700;\r\n        color: #FFFFFF;\r\n    }\r\n    .img-lane{\r\n        width: 88px;\r\n        height: 68px;\r\n    }\r\n\r\n    .img-arrow{\r\n        width: 28px;\r\n        height: 24px;\r\n    }\r\n}\r\n.lane-type{\r\n    height: 58px;\r\n    margin-top: 34px;\r\n}\r\n.lane-type-item{\r\n    width: 60px;\r\n    .label{\r\n        font-size: 14px;\r\n        font-weight: 700;\r\n        line-height: 18px;\r\n        background: linear-gradient(180deg, #CCFFFF 14%, #3399FF 100%);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n    }\r\n    .count{\r\n        width: 60px;\r\n        height: 40px;\r\n        line-height: 40px;\r\n        font-size: 20px;\r\n        font-weight: 700;\r\n        color: #FFFFFF;\r\n        text-align: center;\r\n        position: relative;\r\n    }\r\n    .count::before{\r\n        content: '';\r\n        position: absolute;\r\n        left: 0;\r\n        bottom: 0;\r\n        width: 100%;\r\n        height: 13px;\r\n        background: url('../../assets/img/bigScreen/icon-lane2.png') no-repeat center / 100% 100%;\r\n    }\r\n}\r\n.device-info{\r\n    width: 100%;\r\n    height: calc(100% - 266px);\r\n}\r\n.device-wrapper{\r\n    width: 100%;\r\n    height: calc(100% - 46px);\r\n    margin-top:16px;\r\n}\r\n.guage-wrapper{\r\n    width: 100%;\r\n    height: 172px;\r\n    gap: 10px;\r\n}\r\n.guage-content{\r\n    width: 172px;\r\n    text-align: center;\r\n    position: relative;\r\n    img.pan{\r\n        width: 172px;\r\n        height: 172px;\r\n    }\r\n    img.zhen{\r\n        width: 10px;\r\n        height: 73px;\r\n        position: absolute;\r\n        left: 50%;\r\n        top: 12%;\r\n        transform: rotate(-132deg);  // 136deg\r\n        transform-origin: 50% 93.15%;\r\n        transition: transform 2s ease-in-out;\r\n    }\r\n    .device-rate-count{\r\n        position: absolute;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 31px;\r\n        font-size: 20px;\r\n        font-weight: 700;\r\n        color: #FFFFFF;\r\n    }\r\n    .device-rate-label{\r\n        position: absolute;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 15px;\r\n        color: #FFFFFF;\r\n        font-size: 12px;\r\n    }\r\n}\r\n.device-status{\r\n    width: calc(100% - 180px);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n}\r\n.status-item{\r\n    width: 134px;\r\n    height: 50px;\r\n    padding: 10px;\r\n    box-sizing: border-box;\r\n    align-items: flex-start;\r\n    justify-content: center;\r\n    background: url(\"../../assets/img/bigScreen/status-border.png\");\r\n    position: relative;\r\n    .label{\r\n        font-size: 12px;\r\n    }\r\n    .count{\r\n        font-size: 14px;\r\n        font-weight: bold;\r\n    }\r\n    ::before{\r\n        content:'';\r\n        position: absolute;\r\n        right: 0;\r\n        bottom: 15%;\r\n        height: 4px;\r\n        width: 3px;\r\n        border-radius: 2px;\r\n       \r\n    }\r\n}\r\n.status-item.item1{\r\n    color: #00E5E5;\r\n    ::before{\r\n        background: #00E5E5;\r\n    }\r\n}\r\n.status-item.item2{\r\n    color: #FFDA81;\r\n    ::before{\r\n        background: #FFDA81;\r\n         animation: shine 2s linear infinite;\r\n    }\r\n}\r\n.status-item.item3{\r\n    color: #FD9854;\r\n    ::before{\r\n        background: #FD9854;\r\n        animation: shine 2s linear infinite;\r\n    }\r\n}\r\n@keyframes shine {\r\n    0% {\r\n        transform: scale(1);\r\n        opacity: 0.1;\r\n    }\r\n    50% {\r\n        transform: scale(1.5);\r\n        opacity: 1;\r\n    }\r\n    100% {\r\n        transform: scale(1);\r\n        opacity: 0.1;\r\n    }\r\n}\r\n.table-wrapper{\r\n    width: 100%;\r\n    height:calc(100% - 188px);\r\n    margin-top: 16px;\r\n}\r\n",null]}