yiliangyiyun-app/components/master-keyboard/master-keyboard.scss

.master_wrap{
	width: 100%;
	background-color: #eee;
	position: fixed;
	bottom: 0;
	left: 0;
	padding-top: 10rpx;
	padding-bottom: 20rpx;
	.down_wrap{
		width: 100%;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 48rpx;
			height: 48rpx;
		}
	}
	.kerboard_number{
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		flex-flow: wrap;
		.number_item{
			width: 30%;
			height: 80rpx;
			margin-top: 10rpx;
			background-color: white;
			border-radius: 10rpx;
			text-align: center;
			line-height: 80rpx;
			box-sizing: border-box;
			display: block;
		}
		.number_item_active{
			width: 30%;
			height: 80rpx;
			margin-top: 10rpx;
			background-color: #888;
			border-radius: 10rpx;
			text-align: center;
			line-height: 80rpx;
			box-sizing: border-box;
			display: block;
			color: white;
		}
		.number_empty{
			background-color: #eeeeee;
			width: 30%;
			height: 80rpx;
			margin-top: 10rpx;
			border-radius: 10rpx;
		}
		.number_empty_active{
			background-color: #eeeeee;
		}
		.number_delete{
			width: 30%;
			height: 80rpx;
			margin-top: 10rpx;
			background-color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			.delete_img{
				width: 65rpx;
				height: 64rpx;
			}
		}
		.number_delete_active{
			width: 30%;
			height: 80rpx;
			margin-top: 10rpx;
			background-color: #e64d3a;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			.delete_img{
				width: 65rpx;
				height: 64rpx;
			}
		}
	}
	
	.keyboard_car{
		width: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		.car_down{
			position: absolute;
			top: 10rpx;
			left: 15rpx;
			width: 48rpx;
			height: 48rpx;
		}
		.tab_wrap{
			height: 65rpx;
			margin: 0 auto;
			background-color: white;
			border-radius: 20rpx;
			display: flex;
			padding-left: 25rpx;
			padding-right: 25rpx;
			image{
				width: 48rpx;
				height: 48rpx;
			}
			.tab_item{
				height: 100%;
				text-align: center;
				line-height: 65rpx;
				font-size: 26rpx;
				margin: 0 20rpx;
			}
			.tab_item_active{
				height: 100%;
				text-align: center;
				line-height: 65rpx;
				font-size: 26rpx;
				margin: 0 20rpx;
				text-decoration: underline;
				color: #e64d3a;
			}
		}
		
		.car_content{
			width: 100%;
			position: relative;
			.car_province{
				width: 100%;
				display: flex;
				justify-content: space-evenly;
				flex-flow: wrap;
				margin: 0;
				.province_item{
					width: 9.5%;
					height: 80rpx;
					margin-top: 10rpx;
					background-color: white;
					border-radius: 10rpx;
					text-align: center;
					line-height: 80rpx;
					box-sizing: border-box;
					display: block;
					font-size: 28rpx;
					font-weight: 450;
				}
				.province_item_active{
					width: 9.5%;
					height: 80rpx;
					margin-top: 10rpx;
					background-color: #888;
					border-radius: 10rpx;
					text-align: center;
					line-height: 80rpx;
					box-sizing: border-box;
					display: block;
					font-size: 28rpx;
					font-weight: 450;
					color: white;
				}
				.province_item_disable{
					width: 9.5%;
					height: 80rpx;
					margin-top: 10rpx;
					background-color: #fff;
					border-radius: 10rpx;
					text-align: center;
					line-height: 80rpx;
					box-sizing: border-box;
					display: block;
					font-size: 28rpx;
					font-weight: 450;
					opacity: 0.5;
				}
			}
			.car_province_1{
				width: 100%;
				display: flex;
				margin: 0;
				.province_item1{
					margin: 0;
					width: 9.5%;
					height: 80rpx;
					margin-top: 10rpx;
					background-color: white;
					border-radius: 10rpx;
					text-align: center;
					line-height: 80rpx;
					box-sizing: border-box;
					display: block;
					font-size: 28rpx;
					font-weight: 450;
				}
				.province_item_active{
					width: 9.5%;
					height: 80rpx;
					margin-top: 10rpx;
					background-color: #888;
					border-radius: 10rpx;
					text-align: center;
					line-height: 80rpx;
					box-sizing: border-box;
					display: block;
					font-size: 28rpx;
					font-weight: 450;
					color: white;
				}
				.province_item_disable{
					width: 9.5%;
					height: 80rpx;
					margin-top: 10rpx;
					background-color: #fff;
					border-radius: 10rpx;
					text-align: center;
					line-height: 80rpx;
					box-sizing: border-box;
					display: block;
					font-size: 28rpx;
					font-weight: 450;
					opacity: 0.5;
				}
			}
			.car_latter{
				width: 100%;
				display: flex;
				justify-content: space-evenly;
				flex-flow: wrap;
				.latter_item{
					width: 9.5%;
					height: 80rpx;
					margin-top: 10rpx;
					background-color: white;
					border-radius: 10rpx;
					text-align: center;
					line-height: 80rpx;
					box-sizing: border-box;
					display: block;
					font-size: 28rpx;
					font-weight: 450;
				}
				.province_item_active{
					width: 9.5%;
					height: 80rpx;
					margin-top: 10rpx;
					background-color: #888;
					border-radius: 10rpx;
					text-align: center;
					line-height: 80rpx;
					box-sizing: border-box;
					display: block;
					font-size: 28rpx;
					font-weight: 450;
					color: white;
				}
				.province_item_disable{
					width: 9.5%;
					height: 80rpx;
					margin-top: 10rpx;
					background-color: #fff;
					border-radius: 10rpx;
					text-align: center;
					line-height: 80rpx;
					box-sizing: border-box;
					display: block;
					font-size: 28rpx;
					font-weight: 450;
					opacity: 0.5;
				}
			}
			.car_delete{
				width: 15%;
				height: 80rpx;
				margin-top: 10rpx;
				background-color: white;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				.delete_img{
					width: 65rpx;
					height: 64rpx;
				}
			}
			.car_delete_active{
				width: 15%;
				height: 80rpx;
				margin-top: 10rpx;
				background-color: #e64d3a;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				.delete_img{
					width: 65rpx;
					height: 64rpx;
				}
			}
		}
	}
}