pet_uni/pages/Draw/components/index.scss

.app-wallpaper{
	position: relative;
	background:{
		size: 100% 100%;
		repeat: no-repeat;
	};
	//padding-left:20rpx;
	//padding-right:20rpx;
	.draw-container{
		padding:{
			left:20rpx;
			right:20rpx;
			top:50rpx;
			bottom:60rpx;
		}
		background:{
			size: 100% 100%;
			repeat: no-repeat;
			position: center center;
		}
		.draw-content{

			box-sizing: border-box;
			.draw-item{
				box-sizing: border-box;
				//padding:5rpx;
				padding:10rpx;
				.draw-item-container{
					padding:5rpx;
					box-sizing: border-box;
					.img{
						width:95rpx;
						height:95rpx;
					}

					border-radius: 20rpx;
					&.start-draw{

						border-radius: 50%;
						padding:5rpx;
						background:{
							color:#4DC3B8;
						}
						.draw-item-content{
							border-radius: 50%;
							border:1rpx solid #D9FFFA;

							color:#fff;
						}
						&.disabled{
							background:{
								color:#dedede;
							}
							.draw-item-content{
								border-radius: 50%;
								border:1rpx solid #f5f5f5;

								color:#fff;
							}
						}
					}
					background:{
						color:#E2FFFB;
					}
				}
				.draw-item-content{
					font-size:24rpx;
					font-weight: 400;
					border:1rpx dashed #4DC3B8;
					padding:{
						top:35rpx;
						bottom:30rpx;
					}
					text-align: center;

					border-radius: 20rpx;
					box-sizing: border-box;
					color:#539188;
				}
				&.active{
					.draw-item-container{
						background:{
							color:#FF8859;
						}
						.draw-item-content{
							border:1rpx dashed #FFFFFF;
							color:#FFFFFF;
						}
					}
				}
			}
		}
	}
	.draw-info-container{
		box-sizing: border-box;
		padding:{
			top:30rpx;
			bottom:70rpx;
			left:40rpx;
			right:40rpx;
		};
		background:{
			size: 100% 100%;
			repeat: no-repeat;
		};
		.draw-title-group{
			position: relative;
			.draw-gun{
				width:100%;
				position: absolute;
				top:-90rpx;
				left:0;
				text-align: center;
				.img{
					height:85rpx;
				}
			}
			.draw-image{
				.img{
					width:65rpx;
				}
				margin-bottom:22rpx;
				margin-top:10rpx;
			}
			.draw-title{
				font-size: 26rpx;
				font-weight: 400;
				color: #151515;
			}
		}
	}
}
.draw-shadow{
	position: fixed;
	top:0;
	left:0;
	z-index: 9999;
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background:{
		color:rgba(0,0,0,0.7)
	}
	.draw-shadow-container{
		position: relative;
		background-color:#fff;
		box-sizing: border-box;
		border-radius: 30rpx;
		width:70%;
		padding: {
			top:160rpx;
			bottom:60rpx;
			left:60rpx;
			right:60rpx;
		};
		.draw-shadow-image{
			text-align: center;
			position: absolute;
			width:100%;
			top:-90rpx;
			left:0;
			.img{
				width:240rpx;
			}
		}
		.draw-shadow-title{
			text-align: center;
			margin-bottom:20rpx;
			.img{
				width:200rpx;
			}
		}
		.draw-shadow-content{
			max-width:440rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #131313;
			line-height: 40rpx;
			margin-bottom:60rpx;
		}
		.draw-shadow-button{
			justify-content: center;
		}
	}
}