pet_uni/pages/CardDetail/components/index.scss

.app-wallpaper{
	position: relative;
	background:{
		size: 100% 100%;
		repeat: no-repeat;
	};
	padding:0;
	padding-bottom: 30rpx;
	padding-top: 30rpx;
	.item-end{
		font-size: 28rpx;
		font-weight: 400;
		color: #ACB4B6;
		line-height: 30rpx;
		justify-content: center;
		margin-top:8rpx;
	}
	.detail-box-top{
		//height:300rpx;
		width:100%;
		position: relative;
		bottom:3rpx;

		.top-shadow{
			width:100%;
			height:70rpx;
			background: #F7F7F7;
			clip-path: polygon(95% 0%, 100% 100%, 0% 100%, 5% 0%);
			box-shadow: 0rpx -9rpx 27rpx 0rpx rgba(51,72,70,0.2);
			position: absolute;
			bottom:0;
			left:0;
			z-index: 1;
			border-top-left-radius: 150rpx;
			border-top-right-radius: 150rpx;
		}
		.card-padding{
			padding: 0 30rpx 0;
		}
		.card-container{
			background:{
				position: 0 0;
				size: 100% 100%;
			}
			.card-container-background{

			}

			width:100%;
			box-sizing: border-box;
			padding:30rpx 30rpx;
			padding-bottom: 0;
			position: relative;
			z-index: 2;
			.card-container-background{

				width:100%;
				height:90%;
				position: absolute;
				left:0rpx;
				z-index: -1;
				bottom:0rpx;
				//border: 3rpx solid #262626;
				//box-shadow: 2rpx 6rpx 11rpx 0rpx rgba(159,167,185,0.3);
				border-radius: 26rpx;
				//background: {
				//	color:#EED9AD;
				//};
			}
			.card-container-background-main{

				width:100%;
				//background:{
				//	color:#FFFFFF;
				//}
				border-radius: 26rpx;
				//border: 3rpx solid #262626;
				padding:7rpx;
				box-sizing:border-box;
				.card-col{
					width:100%;
					box-sizing: border-box;
					padding:30rpx;
					background:{
						size:100% 100%;
						position: center center;
						repeat:no-repeat;
					}
				}
			}


			.card-right{
				padding-bottom:30rpx;
				width:100%;
				.card-title{
					font-size: 40rpx;
					font-weight: bold;
					color: #18181B;
				}
				.card-desc-container{
					display: flex;
					padding:20rpx 0rpx;
					.card-desc{
						padding:10rpx 0;
						position: relative;
						.card-desc-text{
							position: relative;
							z-index: 2;
							font-size: 30rpx;
							font-weight: 500;
							color: #18181B;
						}
						.card-desc-background{
							position: absolute;
							bottom:0;
							left:0;
							z-index: 1;
							width:100%;
							height:50%;
							background:{
								color:#E3BF77;
							}
						}
					}

				}
				.card-content-container{

					justify-content: flex-start;
					.card-avatar{
						width:70rpx;
						height:70rpx;
						.img{
							width:70rpx;
							height:70rpx;
						}
					}
					.card-content{
						font-size: 24rpx;
						font-weight: 400;
						color: #656565;
						margin-left:22rpx;
					}
				}
				.card-title{
					padding-top:5px;
					font-size:32rpx;
					font-weight: 500;
					line-height: 1;
					color:#131313;
				}

			}
		}
	}
	.detail-box-bottom{
		background:{
			color:#ffffff;
		}
		min-height:200rpx;
		.coupons-list{
			padding:50rpx 30rpx;
			box-sizing: border-box;
			.coupons-item-container{
				padding:{
					bottom:7rpx;
				}
				background:{
					size: 100% 100%;
					repeat: no-repeat;
				};
				.coupons-item{
					box-sizing: border-box;

					height:178rpx;
					padding:{
						top:28rpx;
						bottom:46rpx;
						left:10rpx;
						right:59rpx;
					}
					.coupons-left{
						width:170rpx;
						//padding-top:0rpx;
						height:100%;
						display:flex;
						align-items:center;
						.coupons-big-title-group{
							align-items: flex-end;
							justify-content: center;
							.coupons-big-title{
								text-align: center;
								font-size: 62rpx;
								font-weight: 800;
								color: #FFFFFF;
								line-height: 1;
								text-shadow: 0rpx 0rpx 14rpx rgba(209,145,70,0.21);
							}
							.coupons-big-desc{
								font-size: 32rpx;
								font-weight: bold;
								color: #FFFFFF;
								line-height: 70rpx;
								text-shadow: 0rpx 0rpx 14rpx rgba(209,145,70,0.21);
							}
						}
						.coupons-cause{
							margin-top:15rpx;
							text-align: center;
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FFFFFF;
						}
					}
					.coupons-right{
						padding:10rpx 0 0 20rpx;
						justify-content: space-between;
						.coupons-gq{
							width:80rpx;
							height:80rpx;
							.img{
								width:75rpx;
								height:75rpx;
							}
						}
						.coupons-title{
							font-size: 32rpx;
							font-weight: 500;
							color: #161616;
						}
						.coupons-btn{
							margin-left:auto;
							color:#4EC2B7;
							font-size:28rpx;
							font-weight: 400;
							border:1rpx dashed #4EC2B7;
							border-radius: 10rpx;
							background:{
								color:#E3FEFB;
							}
							padding:3rpx 15rpx;
						}
						.coupons-desc{
							margin:20rpx 0;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}
						.coupons-bottom{
							border-top: 1px solid #F0F1F6;
							align-items: center;
							justify-content: space-between;
							margin:15rpx 0;
							.coupons-rule{

								font-size: 24rpx;
								font-weight: 400;
								color: #999999;
								.u-icon{
									margin-left:3rpx;
									position: relative;
									top:2rpx;
									flex-direction: row;
									align-items: center;

								}
							}
							.coupons-button{
								padding:10rpx;
								font-size: 26rpx;
								font-weight: 500;
								color: #FFFFFF;
								line-height: 30rpx;
								text-shadow: 0rpx 3rpx 2rpx rgba(77,195,184,0.16);
							}
						}
					}
				}
			}
		}
	}
}
.coupons-list{
	padding:50rpx 30rpx;
	box-sizing: border-box;
	.coupons-item-container{
		padding:{
			bottom:7rpx;
		}
		background:{
			size: 100% 100%;
			repeat: no-repeat;
		};
		.coupons-item{
			box-sizing: border-box;

			height:178rpx;
			padding:{
				top:28rpx;
				bottom:46rpx;
				left:10rpx;
				right:59rpx;
			}
			.coupons-left{
				width:170rpx;
				padding-top:0rpx;
				height:100%;
				display:flex;
				align-items:center;
				.coupons-big-title-group{
					align-items: flex-end;
					justify-content: center;
					padding-bottom:10rpx;
					.coupons-big-title{
						text-align: center;
						font-size: 62rpx;
						font-weight: 800;
						color: #FFFFFF;
						line-height: 1;
						text-shadow: 0rpx 0rpx 14rpx rgba(209,145,70,0.21);
					}
					.coupons-big-desc{
						font-size: 32rpx;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 70rpx;
						text-shadow: 0rpx 0rpx 14rpx rgba(209,145,70,0.21);
					}
				}
				.coupons-cause{
					margin-top:15rpx;
					text-align: center;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
			.coupons-right{
				padding:10rpx 0 0 20rpx;
				justify-content: space-between;
				.coupons-gq{
					width:80rpx;
					height:80rpx;
					.img{
						width:75rpx;
						height:75rpx;
					}
				}
				.coupons-title{
					font-size: 32rpx;
					font-weight: 500;
					color: #161616;
				}
				.coupons-btn{
					margin-left:auto;
					color:#4EC2B7;
					font-size:28rpx;
					font-weight: 400;
					border:1rpx dashed #4EC2B7;
					border-radius: 10rpx;
					background:{
						color:#E3FEFB;
					}
					padding:3rpx 15rpx;
				}
				.coupons-desc{
					margin:20rpx 0;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
				.coupons-bottom{
					border-top: 1px solid #F0F1F6;
					align-items: center;
					justify-content: space-between;
					margin:15rpx 0;
					.coupons-rule{

						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						.u-icon{
							margin-left:3rpx;
							position: relative;
							top:2rpx;
							flex-direction: row;
							align-items: center;

						}
					}
					.coupons-button{
						padding:10rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 30rpx;
						text-shadow: 0rpx 3rpx 2rpx rgba(77,195,184,0.16);
					}
				}
			}
		}
	}
}
.addr-container{
	box-sizing: border-box;
	position: relative;
	padding:0 30rpx;
	.addr-content-container{
		padding:10rpx;
		box-sizing: border-box;
		.addr-content{
			box-sizing: border-box;
			background:{
				color:#ffffff;
			}
			padding:4rpx 7rpx;
			border: 3rpx solid #262626;
			border-radius: 26rpx;
			.addr-content-main{
				align-items: center;
				box-sizing: border-box;
				height:150rpx;
				background:{
					size: 100% 100%;
					repeat: no-repeat;
				}
				padding:0 26rpx;
				.main-img{
					.img{
						width:85rpx;
					}
				}
				.main-content{
					margin-left:30rpx;
					.img{
						height:35rpx;
						margin-bottom:5rpx;
					}
					.main-content-text{
						font-size: 30rpx;
						font-weight: 400;
						color: #131313;
					}
				}
				.main-select-btn{
					display: flex;
					margin-left:auto;
					align-items: center;
					justify-content: center;
					text-align: center;
					.main-select-btn-gun{
						height:45rpx;
						width:3rpx;
						background:{
							color:#262626;
						}
					}
					.content-img{
						.img{
							width:45rpx;

						}
					}
					.content-text{
						font-size: 26rpx;
						font-weight: 400;
						color: #131313;
					}
				}
			}
		}
	}
	.addr-background-container{
		position: absolute;
		width:100%;
		height:100%;
		left:0;
		bottom:0rpx;
		z-index: -1;
		padding:{
			top:30rpx;
		}
		box-sizing: border-box;

		.addr-background-content{
			box-sizing: border-box;
			width:100%;
			height:100%;
			background:{
				color:#4DC3B8;
			}
			border: 3rpx solid #262626;
			border-radius: 26rpx;
			position: relative;
			//top:10rpx;
		}
	}
}
.body-background{
	background:{
		size: 110% 110%;
		repeat: no-repeat;
	};
	height:500rpx;
}
.footer-menu{
	align-items: center;
	padding:30rpx;
	position: fixed;
	bottom:0;
	left:0;
	width: 100%;
	background: #FFFFFF;
	border: 2rpx solid #262626;
	box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(0,0,0,0.06);
	border-radius: 26rpx 26rpx 0rpx 0rpx;
	.foot-menu-main-title{
		margin-bottom:15rpx;
		align-items: flex-end;
		.main-title{
			font-size: 28rpx;
			font-weight: 500;
			color: #131313;
		}
		.main-price{
			font-size: 36rpx;
			font-weight: 500;
			color: #F48021;
		}
	}
	.foot-menu-checkbox{
		margin-right:8rpx;
		width: 28rpx;
		height: 28rpx;
		background: #FFFFFF;
		border: 2px solid #131313;
		border-radius: 50%;
	}
	.foot-menu-title{
		font-size: 26rpx;
		.foot-menu-url{
			color:#4DC3B8;
		}
	}
}