$lineColor:#191F33;
$titColor:#192233;
// pannelitem公共样式
.status{
    display: flex;
    width: 100%;
    margin-top: 15px;
    .circle{
        width: 16px;
        height: 16px;
        margin-top: 10px;
        margin-right: 8px;
        img{
            width: 16px;
            height: 16px;
        }
    }
    .descript{
        width: 80px;
        height: 40px;
        font-size: 16px;
        font-weight: 500;
        color: rgba(153,174,197,0.65);
        text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
        margin-right: 8px;
        line-height: 38px;
    }
    .frameText{
        color: #C7D2DF;
        text-shadow: 0px 0px 4px #0027D8;
    }
    .frame{
        flex: 1;
        position: relative;
        height: 40px;
        text-indent: 15px;
        font-size: 16px;
        font-weight: 500;
        color: #91FDB9;
        line-height: 40px;
        text-shadow: 0px 0px 4px #0027D8;
        border: 1px solid #181E29;
        box-sizing: border-box;
        .errordata{
            display: inline-block;
            margin-right: 10px;
            color: red;
            cursor: pointer;
        }
        .shinning{
            position: absolute;
            border: 1px solid #c9f8ff;
            border-radius: 1px;
            left: -1px;
            top: -1px;
        }
        .editCar{
            cursor: pointer;
            position: absolute;
            right: 50px;
            top: 3px;
            width: 18px;
            height: 18px;
            img{
                width: 18px;
                height: 18px;
            }
        }
        .carfresh{
            right: 20px;
            top: 4px;
        }
        .isflag{
            color: #ED7735;
            text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
        }
        .isblue{
            color: #148CFA;
        }
        .btn{
            display: flex;
            position: absolute;
            right: 15px;
            top: 5px;
            button{
                width: 48px;
                height: 28px;
                background: #91FDB9;
                border-radius: 2px 2px 2px 2px;
                font-size: 16px;
                font-weight: 400;
                line-height: 28px;
                text-align: center;
                border: none;
                padding: 0;
                color: black;
            }
            button:hover{
                background: #69b889;
            }
        }
    }
}
.tipNo{
    margin-bottom:0px !important;
}
// SubTile公共样式
.top{
    display: flex;
    flex-direction: column;
    border-top:$lineColor solid 1px;
    border-bottom:$lineColor solid 1px;
    width: 100%;
    .title{
        width: 100%;
        background-color: $titColor;
        margin: 1px 0px;
        height: 34px;
        display: flex;
        .icon{
            width: 28px;
            height: 18px;
            background-image: url('./assets/ico2.png');
            background-size: 100% 100%;
            margin-left: 2px;
        }
        .name{
            font-size: 20px;
            margin-left: -15px;
            height: 34px;
            line-height: 34px;
            font-weight: 600;
            letter-spacing: 1px;
            text-shadow: 0 0 2px #1753ce,0 0 2px #1753ce,0 0 2px #1753ce,0 0 2px #1753ce;
            color: white;
        }
        
        .taskNo{
            margin-left: 20px;
            line-height: 36px;
            font-size: 16px;
            font-weight: 500;
            color: rgba(153,174,197,0.65);
            text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
            cursor: pointer;
        }
        .carOnline{
            margin-left: auto;
            font-size: 15px;
            font-weight: 600;
            color: rgba(255,255,255,0.85);
            line-height: 34px;
            text-shadow: 0px 0px 4px #0027D8;
            cursor: pointer;
            font{
                text-decoration: underline;
                color: #91FDB9;
                text-shadow: 0px 0px 4px #0027D8;
                margin-right: 16px;
            }
        }
    }
}
.bottom{
    width: 100%;
    border: #181E29 solid 1px;
    border-top:none;
    height: 230px;
    box-sizing: border-box;
    padding:16px;
    padding-top:0;
    display: flex;
    flex-direction: column;
    .list{
        display: flex;
        .plcConnect{
            width: 186px;
            padding-right: 24px;
            box-sizing: content-box;
        }
        .plcModel{
            flex: 1;
        }
        .carLeft{
            width: 310px;
            padding-right: 24px;
            box-sizing: content-box;
            .status:first-child .descript{
                width: auto;
            }
        }
        .carRight{
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            
            .status .descript{
                width: auto;
            }
            .statusLeft{
                width: 280px;
                margin-right: 24px;
                display: flex;
                flex-direction: column;
            }
            .statusRight{
                flex: 1;
                display: flex;
                flex-direction: column;
            }
            .statusTop{
                width: 100%;
                .status .descript{
                    width: 88px;
                    text-align: right;
                }
            }
        }
    }
}
// SubTile公共样式结束
.pageblock {
    padding: 15px 0px;
    font-size:15px;
    color: #C0C4CC;
    span{
      color: #86EDAB;
    }
}
.main{
    display: flex;
    padding: 20px;
    justify-content:space-between;
    width: 100%;
    .left{
        width: 1418px;
        display: flex;
        flex-direction: column;
        padding-right: 16px;
        box-sizing: border-box;
        // 第一排机器人和车辆信息
        .PlcCar{
            display: flex;
            justify-content: space-between;
            .PlcStatus{
                width: 460px;
                display: flex;
                flex-direction: column;
                margin-right: 16px;
            }
            .CarStatus{
                flex: 1;
            }
        }
        //任务进度
        .Progress{
            display: flex;
            margin-top: 20px;
            flex-direction: column;
            .TaskFoot{
                height: 184px;
                border: #181E29 solid 1px;
                border-top:none;
                box-sizing: border-box;
                padding: 16px;
                padding-top: 0;
                box-sizing: border-box;
                .Exchange{
                    display: flex;
                    .status .descript{
                        width: auto;
                    }
                    .Exchange-status{
                        width: 225px;
                        display: flex;
                        justify-content: space-between;
                        margin-left: 26px;
                        flex-direction: column;
                    }
                    .Exchange-times{
                        width: 292px;
                        display: flex;
                        flex-direction: column;
                        margin:0px 26px;
                        .lock{
                            display: flex;
                            justify-content: space-between;
                            margin-top: 16px;
                            span:first-child{
                                font-size: 16px;
                                font-weight: 500;
                                color: #ED7735;
                                line-height: 21px;
                                text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
                            }
                            .time{
                                font-size: 16px;
                                font-weight: 500;
                                color: #99AEC5;
                                line-height: 19px;
                                text-shadow: 0px 0px 4px #0027D8;
                                font{
                                    font-size: 15px;
                                    font-weight: 500;
                                    color: #91FDB9;
                                    line-height: 21px;
                                    text-shadow: 0px 0px 4px #0027D8;
                                }
                            }
                        }
                        .percent{
                            display: flex;
                            margin-top: 16px;
                            justify-content: space-between;
                            .percent-bar{
                                flex: 1;
                                padding-right: 5px;
                                box-sizing: border-box;
                                .bar{
                                    width: 100%;
                                    height: 8px;
                                    margin-top: 4px;
                                    background: #99AEC5;
                                    border-radius: 8px;
                                    .bar-green{
                                        position: relative;
                                        height: 8px;
                                        border-radius: 8px;
                                        background-color: #91FDB9;
                                        .bar-percent{
                                            width: 38px;
                                            height: 22px;
                                            background: #91FDB9;
                                            border-radius: 27px;
                                            color: black;
                                            font-size: 12px;
                                            text-align: center;
                                            line-height: 22px;
                                            position: absolute;
                                            right: 0;
                                            top: -100%;
                                        }
                                        .bar-ten{
                                            right: -36px;
                                        }
                                    }
                                }
                            }
                            .count-step{
                                width: 44px;
                                font-size: 15px;
                                color: rgba(153,174,197,0.65);
                                text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
                                letter-spacing: 1px;
                                font-weight: 500;
                                font{
                                    color: #91FDB9;
                                }
                            }
                        }
                    }
                    .Exchange-battery{
                        flex: 1;
                        height: 150px;
                        background: rgb(25, 34, 51,0.55);
                        margin-top: 16px;
                        display: flex;
                        padding: 16px;
                        box-sizing: border-box;
                        position: relative;
                        flex-direction: column;
                        .character{
                            width: 5px;
                            height: 5px;
                            position: absolute;
                            left:-1px;
                            top: -1px;
                            background-image: url('./assets/character.png');
                            background-size: 100% 100%;
                        }
                        .handle-battery{
                            display: flex;
                            span{
                                font-weight: 400;
                                color: #91FDB9;
                                font-size: 16px;
                                line-height: 28px;
                                margin-left: 12px;
                            }
                            .leftBtn{
                                padding: 3px 8px;
                                background: #263042;
                                font-weight: 400;
                                color: #C7D2DF;
                                font-size: 15px;
                                height: 28px;
                                margin: 0;
                                border: 0;
                                border-radius: 2px 0px 0px 2px;
                                cursor: pointer;
                                &:hover{
                                    opacity: 0.8;
                                }
                            }
                            .Rbtn{
                                border-radius: 0px 2px 2px 0px;
                            }
                            .info-btn{
                                padding: 3px 8px;
                                background: #263042;
                                font-weight: 400;
                                color: #C7D2DF;
                                font-size: 15px;
                                height: 28px;
                                margin: 0;
                                border: 0;
                                border-radius: 2px;
                                cursor: pointer;
                                &:hover{
                                    opacity: 0.8;
                                }
                            }
                            .active{
                                background: #91FDB9;
                                color: #010101;
                            }
                        }
                        .battery-detail{
                            display: flex;
                            justify-content: space-between;
                            margin-top: 16px;
                            :first-child{
                                flex: 1;
                                margin: 0;
                            }
                            .detail-text{
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                width: 156px;
                                margin-right: 15px;
                                .text{
                                    font-size: 16px;
                                    font-weight: 500;
                                    color: rgba(153,174,197,0.65);
                                    text-shadow: 0px 0px 4px rgba(39,69,201,0.65);
                                    margin-left: 18px;
                                    line-height: 32px;
                                }
                                .frame{
                                    flex: 1;
                                    position: relative;
                                    height: 40px;
                                    text-indent: 15px;
                                    font-size: 16px;
                                    font-weight: 500;
                                    color: #C7D2DF;
                                    line-height: 40px;
                                    text-shadow: 0px 0px 4px #0027D8;
                                    border: 1px solid #273056;
                                    box-sizing: border-box;
                                    .shinning{
                                        position: absolute;
                                        border: 1px solid #c9f8ff;
                                        border-radius: 1px;
                                        left: -1px;
                                        top: -1px;
                                    }
                                   
                                }
                            }
                            :last-child{margin: 0;}
                        }
                    }
                }
                .Progress-btn{
                    width: 92px;
                    height: 92px;
                    background: #91FDB9;
                    border-radius: 4px;
                    font-weight: 600;
                    color: #000000;
                    line-height: 92px;
                    font-size: 32px;
                    margin-top: 46px;
                    text-align: center;
                }
                .Fire{
                    line-height: 36px;
                    font-size: 32px;
                    padding-top: 10px;
                }
                .Fire-status{
                    width: 540px;
                    display: flex;
                    justify-content: space-between;
                    margin:0px 26px;
                    flex-direction: column;
                    .status .descript{
                        width: 64px;
                        text-align: right;
                    }
                }
                .Change-status{
                    width: 540px;
                    margin: 0 26px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .status .descript{
                        width: 64px;
                        text-align: right;
                    }
                    .change-top{
                        display: flex;
                        align-items: center;
                        .jiantou{
                            width: 33px;
                            padding-top: 15px;
                            margin: 0 24px;
                        }
                        .status{
                            width: 245px;
                        }
                        :last-child{
                            flex: 1;
                            .descript{
                                width: auto;
                            }
                        }
                    }
                    .change-bottom{
                        padding-left: 28px;
                    }
                }
            }
        }
        // 选电模式按钮
        .getModel{
            margin-top: 20px;
            display: flex;
            .title{
                height: 40px;
                .name{
                    line-height: 40px;
                }
                .btnList{
                    margin: 5px 16px;
                    padding-left: 24px;
                    flex: 1;
                    text-align: center;
                    font-size: 16px;
                    font-weight: 400;
                    color: #FFFFFF;
                    display: flex;
                    justify-content: space-between;
                    .handle-model{
                        display: flex;
                        .leftBtn{
                            padding: 3px 8px;
                            background: #263042;
                            font-weight: 400;
                            color: #C7D2DF;
                            font-size: 15px;
                            height: 28px;
                            margin: 0;
                            border: 0;
                            border-radius: 2px 0px 0px 2px;
                            cursor: pointer;
                            &:hover{
                                opacity: 0.8;
                            }
                        }
                        .Rbtn{
                            border-radius: 0px 2px 2px 0px;
                        }
                        .active{
                            background: #91FDB9;
                            color: #010101;
                        }
                    }
                    .handle-group{
                        display: flex;
                        button{
                            margin-left: 16px;
                            background: #263042;
                            padding: 3px 8px;
                            color: #C7D2DF;
                            border-radius: 2px;
                            border: 0;
                            font-size: 15px;
                            cursor: pointer;
                            &:hover{
                                opacity: 0.8;
                            }
                        }
                    }
                }
            }
        }
        // 仓位电池
        .store-battery{
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            .line{
                height: 2px;
                background: #191F33;
                border-radius: 2;
                margin-bottom: 1px;
            }
            .store-container{
                height: 368px;
                background: rgb(25, 34, 51,0.55);
                display: flex;
                flex-direction: column;
                .title{
                    width: 100%;
                    height: 34px;
                    display: flex;
                    .icon{
                        width: 28px;
                        height: 18px;
                        background-image: url('./assets/ico2.png');
                        background-size: 100% 100%;
                        margin-left: 2px;
                    }
                    .name{
                        font-size: 20px;
                        margin-left: -15px;
                        height: 34px;
                        line-height: 34px;
                        font-weight: 600;
                        letter-spacing: 2px;
                        text-shadow: 0 0 2px #1753ce,0 0 2px #1753ce,0 0 2px #1753ce,0 0 2px #1753ce;
                        color: white;
                    }
                    .battery-count{
                        display: flex;
                        .circle{
                            width: 16px;
                            height: 16px;
                            margin-top: 9px;
                            margin-left: 30px;
                            img{
                                width: 16px;
                                height: 16px;
                            }
                        }
                        .descript{
                            height: 38px;
                            font-size: 16px;
                            font-weight: 500;
                            color: white;
                            margin: 0px 10px;
                            line-height: 38px;
                        }
                        .count-number{
                            width: 24px;
                            height: 24px;
                            background: #1C263A;
                            border-radius: 50%;
                            font-size: 18px;
                            font-family: Roboto-Medium, Roboto;
                            font-weight: 500;
                            color: #91FDB9;
                            line-height: 24px;
                            text-align: center;
                            margin-top: 6px;
                        }
                    }
                    .battery-btn{
                        margin-left: auto;
                        display: flex;
                        margin-right: 16px;
                        button{
                            padding: 3px 8px;
                            background: #263042;
                            font-weight: 400;
                            color: #C7D2DF;
                            font-size: 15px;
                            height: 28px;
                            margin: 0;
                            margin-left: 16px;
                            margin-top: 10px;
                            border: 0;
                            border-radius: 2px;
                            cursor: pointer;
                            &:hover{
                                opacity: 0.8;
                            }
                        }
                        .active{
                            background: #91FDB9;
                            color: black;
                        }
                    }
                }
                .storeList{
                    display: flex;
                    justify-content: space-between;
                    padding: 0px 16px;
                    margin-top: 15px;
                    
                    .battery-info{
                        width: 158px;
                        height: 300px;
                        background: #1C263A;
                        display: flex;
                        flex-direction: column;
                        cursor: pointer;
                        ul{
                            margin: 0;
                            padding: 0;
                        }
                        li{
                            height: 32px;
                            display: flex;
                            justify-content: flex-end;
                            align-items: center;
                            span{
                                margin-right: 6px;
                                height: 18px;
                                img{
                                    width: 18px;
                                    height: 18px;
                                }
                            }
                            .battery-number{
                                margin-right: auto;
                                font-size: 16px;
                                color: #FFFFFF;
                                margin-left: 10px;
                                border-left: #1C263A solid 1px;
                                border-right: #1C263A solid 1px;
                            }
                        }
                        .battery-center{
                            height: 236px;
                            // background: #292D46;
                            
                            .battery-anmition{
                                width: 141px;
                                height: 212px;
                                background-image: url('./assets/battery-anim.gif');
                                background-size: 100% 100%;
                                margin: 0 8.5px;
                                position: relative;
                            }
                            .battery-box{
                                width: 141px;
                                height: 212px;
                                background-image: url('./assets/battery.png');
                                background-size: 100% 100%;
                                margin: 0 8.5px;
                                padding-bottom: 44px;
                                box-sizing: border-box;
                                position: relative;
                                .batteryList{
                                    position: relative;
                                    height: 168px;
                                    width: 100%;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: flex-end;
                                    align-items: center;
                                    .batteryOne{
                                        position: absolute;
                                        bottom: 0;
                                        z-index: 10;
                                    }
                                    .battery-many{
                                        position: absolute;
                                        width: 78px;
                                        height: 33px;
                                        // span{
                                        //     position: absolute;
                                        //     width: 78px;
                                        //     font-weight: 500;
                                        //     color: #FFFFFF;
                                        //     text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
                                        //     font-size: 12px;
                                        //     left: 0;
                                        //     text-align: center;
                                        //     bottom:-24px;
                                        //     line-height: 14px;
                                        // }
                                        img{
                                            width: 78px;
                                            height: 33px;
                                        }
                                    }
                                }
                            }
                            span{
                                position: absolute;
                                width: 100%;
                                font-weight: 500;
                                color: #FFFFFF;
                                text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
                                font-size: 12px;
                                left: 0;
                                text-align: center;
                                top:41%;
                                line-height: 16px;
                            }
                        }
                    }
                }
            }
        }
    }
    .right{
        width: 456px;
        display: flex;
        flex-direction: column;
        .video{
            width: 456px;
            height: 327px;
            background: #000000;
            #video-1{
                width: 100%;
                height: 100%;
            }
        }
        // 日志记录
        .Exchange-log{
            display: flex;
            flex-direction: column;
            .logHead{
                margin-top: 20px;
                // margin-bottom: 28px;
                .name{
                    
                    white-space: nowrap;
                }
                .logDescript{
                    font-weight: 600;
                    color: #636C97;
                    font-size: 14px;
                    margin-left: 22px;
                    line-height: 34px;
                    white-space: nowrap;
                }
                @media screen and (max-width:1360px){
                    .logDescript{
                        transform: scale(0.9);
                        font-weight: normal;
                        margin-left: 0;
                    }
                    .name{
                        margin-left: 10px;
                    }
                }
            }
            .logFoot{
                border: #181E29 solid 1px;
                height: 580px;
                overflow-y: auto;
                padding-top: 28px;
                box-sizing: border-box;
                padding-left: 15px;
                .logList{
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    padding-bottom: 10px;
                    min-height: 40px;
                    .log-detail{
                        display: flex;
                        font-size: 16px;
                        color: #C7D2DF;
                        font-weight: 500;
                        .logRed{
                            color: #ED7735;
                        }
                        .log-icon{
                            width: 13px;
                            height: 13px;
                            box-shadow: 0px 0px 4px 0px #738AB5;
                            border: 2px solid #7F97C5;
                            border-radius: 50%;
                            margin-right: 5px;
                            margin-top: 2px;
                        }
                        .log-icon-active{
                            border: 2px solid #ED7735;
                            box-shadow: 0px 0px 4px 0px #ED7735;
                        }
                        .log-mr{
                            margin-right:22px;
                            width: 148px;
                            white-space: nowrap;
                        }
                        .logText{
                            flex: 1;
                        }
                        
                    }
                    .log-actve{
                        color: #ED7735;
                    }
                    .line{
                        width: 0px;
                        // height: 30px;
                        box-shadow: 0px 0px 4px 0px #738AB5;
                        border-left: 1px solid #7F97C5;
                        margin-left: 6px;
                        position: absolute;
                        height: calc(100% - 13px);
                        left: 0;
                        top: 13px;
                    }
                    .line-actve{
                        border-left: 1px solid #ED7735;
                        box-shadow: 0px 0px 4px 0px #ED7735;
                    }
                }
                :last-child .line{
                    display: none;
                }
            }
        }
    }
}