.coupon-carve { background: #ff3c00; padding-bottom: 50rpx; } .coupon-carve .header { height: 838rpx; position: relative; background-size: 100% 100%; } .carve-title { text-align: center; font-size: 30rpx; color: #fff; font-weight: bold; height: 110rpx; line-height: 110rpx; } .carve-title image { display: inline-block; width: 35rpx; height: 35rpx; vertical-align: middle; } .carve-title span { margin: 0 28rpx; position: relative; top: 2rpx; } .content-card { width: 686rpx; height: auto; padding: 20rpx; margin: 0 auto; border-radius: 20rpx; box-shadow: 0 16rpx 16rpx rgba(228,69,65,0.5); background: linear-gradient(to bottom,#ff6f47,#ff4746)!important; } .content-card .inner { background: #fff8f2; border-radius: 20rpx; } .coupon-blank .inner { height: 280rpx; text-align: center; } .coupon-blank-image { width: 129rpx; height: 126rpx; margin: 48rpx auto 0; } .coupon-blank .inner .text { font-size: 26rpx; color: #9e6d35; margin-top: 24rpx; } .luck-list .inner { padding-top: 20rpx; padding-bottom: 20rpx; } .luck-list .item { display: flex; line-height: 80rpx; font-size: 26rpx; color: #9e6d35; padding: 12rpx 76rpx 12rpx 40rpx; } .luck-list .item .adver { width: 80rpx; height: 80rpx; border-radius: 40rpx; margin-right: 40rpx; } .luck-list .item .name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .luck-list .look { width: 280rpx; height: 70rpx; font-size: 30rpx; text-align: center; line-height: 70rpx; color: #ff4946; font-weight: bold; margin: 30rpx auto 0; border-radius: 36rpx; border: 1px solid #ff4946; margin-bottom: 16rpx; } .explain .inner { padding-top: 32rpx; padding-bottom: 1rpx; } .explain .explain-title { width: 163rpx; height: 46rpx; line-height: 46rpx; border-radius: 23rpx; text-align: center; color: #fff; font-size: 26rpx; font-weight: bold; margin: 0 auto 30rpx; background: linear-gradient(to bottom,#ff6f47,#ff4746)!important; } .explain .explain-con view { font-size: 24rpx; color: #666; padding: 0 28rpx; line-height: 38rpx; } .explain .explain-con view span { color: #ca3a0e; } .explain-step { font-size: 24rpx; color: #666; line-height: 38rpx; margin-bottom: 24rpx; padding: 0 28rpx; } .header .get { width: 610rpx; margin: 0 auto; padding-top: 336rpx; text-align: center; } .header .get image { width: 169rpx; height: 167rpx; } .header .get .price { font-size: 88rpx; color: #ff3c00; height: 192rpx; box-sizing: border-box; padding-top: 75rpx; } .header .get .price span { display: inline-block; font-size: 26rpx; width: 42rpx; height: 42rpx; border-radius: 50%; margin-left: 8rpx; color: #fff; text-align: center; line-height: 42rpx; position: relative; top: -10rpx; background: linear-gradient(to bottom,#fb6238,#ff3c00)!important; } .header .get .txt { font-size: 30rpx; color: #fff3b3; } .header .success { width: 610rpx; margin: 0 auto; padding-top: 336rpx; text-align: center; } .header .success .text { font-size: 30rpx; font-weight: bold; color: #ff4746; padding-top: 68rpx; } .header .success .text .price { font-size: 60rpx; color: #ff3c00; } .header .success .text .price span { font-size: 26rpx; color: #ff3c00; } .header .success .text .txt { font-size: 26rpx; color: #9e6d35; } .header .success .btns { display: flex; margin-top: 90rpx; } .header .success .btns .btn,.header .share .btns .btn { width: 260rpx; height: 80rpx; line-height: 80rpx; border-radius: 40rpx; border: none; color: #fff; font-size: 28rpx; font-weight: bold; text-align: center; background: linear-gradient(to bottom,#ffd235,#fd842c)!important; } .header .share { width: 610rpx; margin: 0 auto; padding-top: 336rpx; text-align: center; } .header .share .text { padding-top: 80rpx; position: relative; } .header .share .text .name { font-size: 30rpx; color: #ff4746; font-weight: bold; } .header .share .text .price { font-size: 30rpx; color: #9e6035; margin-top: 16rpx; } .header .share .text .price span,.header .share .text .txt span { color: #ff3c00; } .header .share .text .txt { font-size: 26rpx; color: #9e6035; margin-top: 16rpx; } .header .share .btns { display: flex; justify-content: space-between; margin-top: 75rpx; } .coupon-model { background: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 101; } .coupon-model .inner { width: 630rpx; height: 340rpx; border-radius: 16rpx; background: #fff; margin: 320rpx auto 0; position: relative; } .coupon-model .inner .title { font-size: 34rpx; color: #333; font-weight: bold; line-height: 1; padding-top: 52rpx; text-align: center; } .coupon-model .inner .content { height: 164rpx; font-size: 28rpx; color: #666; text-align: center; padding: 0 120rpx; display: flex; flex-direction: column; justify-content: center; } .coupon-model .inner .btns { display: flex; position: relative; } .coupon-model .inner .btns:before { content: ""; position: absolute; border-top: 1rpx solid #ededed; top: 0; left: 0; right: 0; } .coupon-model .inner .btns .btn1 { flex: 1; text-align: center; line-height: 90rpx; color: #333; font-size: 30rpx; height: 90rpx; position: relative; } .coupon-model .inner .btns .btn1.line:after { content: ""; position: absolute; border-right: 1rpx solid #ededed; top: 0; right: 0; bottom: 0; } .receive { border: none; background: none; display: inline-block; } .receive::after,.receive::before { display: none; }