$lineColor:#191F33; $titColor:#192233; // SubTile公共样式 .handle-model{ display: flex; margin-left: 38px; .leftBtn{ padding: 3px 0; width: 88px; text-align: center; background: #263042; font-weight: 400; color: #FFFFFF; font-size: 14px; height: 24px; box-sizing: border-box; line-height: 18px; border-radius: 2px 0px 0px 2px; } .Rbtn{ border-radius: 0px 2px 2px 0px; } .active{ background: #91FDB9; color: #000000; } } .content { width: 100%; display: flex; flex-direction: column; justify-content: space-between; .marginL{ margin-left: 12px !important; } //第一排盒子开始 .box-first { display: flex; justify-content: space-between; .carInfo{ width: 584px !important; } .machineStatus { width: 440px; height: 230px; background-color: #111827; display: flex; flex-direction: column; .bottom { width: 100%; height: 230px; box-sizing: border-box; padding: 16px 20px; display: flex; flex-direction: column; justify-content: space-between; .list { display: flex; justify-content: space-between; .plcConnect { width: 196px; padding-right: 14px; box-sizing: content-box; } .plcModel { flex: 1; } .carLeft { width: 265px; padding-right: 14px; } .carRight { flex: 1; display: flex; flex-wrap: wrap; .statusLeft { width: 280px; margin-right: 24px; display: flex; flex-direction: column; } .statusRight { flex: 1; display: flex; flex-direction: column; } } } } } } //第一排盒子结束 //选电模式开始 .getModel{ width: 100%; height: 240px; background-color: #111827; margin-top: 18px; .storeList{ width: 1000px; display: flex; padding: 16px 20px; overflow: hidden; .scroll_x { width: 100%; height: 100%; // border: 1px solid red; ::v-deep .uni-scroll-view-content { display: flex; view:first-child { .battery-info { margin-left: 0px; } } } } } } //选电模式结束 //底部样式开始 .box-last{ display: flex; justify-content: space-between; margin-top: 16px; .Exchange-done{ width: 460px; display: flex; flex-direction: column; .Exchange-bottom{ width: 100%; height: 183px; box-sizing: border-box; padding: 16px; display: flex; background-color: #111827; flex-direction: column; justify-content: space-between; .Exchange-times{ display: flex; justify-content: space-between; height: 66px; width: 100%; .Progress-btn{ width: 135px; height: 66px; background: #263042; border-radius: 2px; font-weight: 400; color: #000; font-size: 14px; text-align: center; line-height: 66px; background: #91FDB9; } .Exchange-status{ width: 290px; padding-left: 12px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; // border: 1px solid red; .Exchange-status-left{ width: 100%; height: 100%; // border: 1px solid green; display: flex; justify-content: space-between; .Exchange-status-left-box{ width: 131px; height: 33px; line-height: 33px; // border: 1px solid yellow; .text1{ color: rgba(153,174,197,0.65); font-size: 12px; } .text2{ display: inline-block; margin-left: 10px; font-size: 12px; color: #91FDB9; } } .change-store{ .text1{ width: 45px; display: inline-block; } } } .lock{ display: flex; justify-content: space-between; span:first-child{ font-size: 12px; font-weight: 500; color: #ED7735; line-height: 21px; text-shadow: 0px 0px 4px rgba(39,69,201,0.5); } .time{ font-size: 12px; font-weight: 500; color: #99AEC5; line-height: 19px; text-shadow: 0px 0px 4px #0027D8; font{ font-weight: 500; color: #91FDB9; line-height: 21px; } } } .percent{ display: flex; justify-content: space-between; .percent-bar{ flex: 1; padding-right: 5px; box-sizing: border-box; .bar{ width: 100%; height: 4px; margin-top: 8px; background: #99AEC5; border-radius: 4px; .bar-green{ position: relative; height: 4px; border-radius: 4px; background-color: #91FDB9; .bar-percent{ width: 36px; height: 20px; background: #91FDB9; border-radius: 10px; color: black; font-size: 12px; text-align: center; line-height: 20px; position: absolute; right: 0; top: -8px; } .bar-ten{ left: 0px; } } } } .count-step{ width: 28px; 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-handle{ display: flex; justify-content: space-between; flex-wrap: wrap; justify-items: center; .handle{ width: 131px; height: 28px; text-align: center; background: #263042; border-radius: 2px 2px 2px 2px; line-height: 28px; font-weight: 400; color: #FFFFFF; font-size: 14px; margin-top: 12px; } } } } // 换电日志 .Exchange-log{ width: 564px; display: flex; flex-direction: column; .log_bottom{ width: 100%; height: 183px; box-sizing: border-box; padding: 16px; padding-top: 0; padding-bottom: 4px; display: flex; background-color: #111827; flex-direction: column; .scroll_x{ height: 100%; } // .log-list:first-child{ // color: #ED7735; // } .log-list{ display: flex; height: 36px; box-sizing: border-box; border-bottom: #292D46 solid 1px; justify-items: center; font-size: 14px; font-weight: 400; color: #C7D2DF; line-height: 36px; .log-times{ width: 182px; } .log-action{ width:100px } .log-info{ flex: 1; } .logRed{ color: #ED7735; } } } } // 换电日志结束 } // 底部样式结束 }