app-station-control-frontend_v1/pages/power-changer/index.scss

$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{
			display: flex;
			justify-content: space-between;
			padding: 16px 20px;
		}
	}
	//选电模式结束
	//底部样式开始
	.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;
					 }
				}
			}
		}
		// 换电日志结束
	}
	// 底部样式结束
}