#main,
body,
html,
#main .duo-red-packet-container {
height: 100%;
width: 100%;
}
img {
border: 0;
max-width: 100%;
width: auto;
height: auto;
vertical-align: top;
}
.mobile-container {
margin-left: auto;
margin-right: auto;
max-width: 640px;
background-color: #f2f2f2;
color: #666;
font-size: .24rem;
line-height: 1.4;
}
.rp-main {
width: 100%;
height: 100%;
background-color: #b4292a;
position: relative;
}
#main .duo-red-packet-container .rp-main .main-bg-middle,
#main .duo-red-packet-container .rp-main .main-bg-top {
height: 4rem;
}
#main .duo-red-packet-container .rp-main .main-bg-bottom {
height: 4.06rem;
}
#main .duo-red-packet-container .rp-main .main-bg-ribbon,
#main .duo-red-packet-container .rp-main .main-open-btn,
#main .duo-red-packet-container .rp-main .main-red-packet,
#main .duo-red-packet-container .rp-main .main-sub-title,
#main .duo-red-packet-container .rp-main .main-title {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#main .duo-red-packet-container .rp-main .main-bg-ribbon {
top: 0;
width: 7.5rem;
}
#main .duo-red-packet-container .rp-main .main-title {
top: .88rem;
width: 4.92rem;
}
#main .duo-red-packet-container .rp-main .main-sub-title {
top: 2.02rem;
width: 4.02rem;
}
#main .duo-red-packet-container .rp-main .main-red-packet {
top: 3rem;
width: 5.76rem;
}
#main .duo-red-packet-container .rp-main .main-open-btn {
width: 1.96rem;
height: 1.98rem;
top: 6.48rem;
}
#main .duo-red-packet-container .rp-main .main-open-btn-open {
-webkit-transition: all ease;
transition: all ease;
width: 1.96rem;
height: 1.98rem;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation: openScale 1.8s ease infinite;
animation: openScale 1.8s ease infinite;
}
@-webkit-keyframes openScale {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}
20% {
-webkit-transform: scale(1.15);
transform: scale(1.15)
}
40% {
-webkit-transform: scale(1);
transform: scale(1)
}
60% {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
80% {
-webkit-transform: scale(1);
transform: scale(1)
}
90% {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
to {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes openScale {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}
20% {
-webkit-transform: scale(1.15);
transform: scale(1.15)
}
40% {
-webkit-transform: scale(1);
transform: scale(1)
}
60% {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
80% {
-webkit-transform: scale(1);
transform: scale(1)
}
90% {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
to {
-webkit-transform: scale(1);
transform: scale(1)
}
}
/* 过期 S */
#main .duo-red-packet-container .rp-main .main-overdue {
position: absolute;
top: 2.9rem;
width: 5.78rem;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#main .duo-red-packet-container .rp-main .main-overdue-img {
width: 100%;
}
#main .duo-red-packet-container .rp-main .main-overdue-title {
position: absolute;
width: 100%;
text-align: center;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: 1.7rem;
font-size: .32rem;
height: .74rem;
line-height: .74rem;
font-family: PingFangSC-Regular;
color: #d2d2d2;
}
#main .duo-red-packet-container .rp-main .main-overdue-desc {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: 6.4rem;
font-size: .28rem;
font-family: PingFangSC-Regular;
color: #ff7c62;
}
#main .duo-red-packet-container .rp-main .main-overdue-desc:after,
#main .duo-red-packet-container .rp-main .main-overdue-desc:before {
position: absolute;
content: "";
width: .56rem;
height: .03rem;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#main .duo-red-packet-container .rp-main .main-overdue-desc:before {
left: -.7rem;
background: -webkit-gradient(linear, right top, left top, from(#ff9076), to(#c74d35));
background: linear-gradient(270deg, #ff9076, #c74d35);
}
#main .duo-red-packet-container .rp-main .main-overdue-desc:after {
right: -.7rem;
background: -webkit-gradient(linear, left top, right top, from(#ff9076), to(#c74d35));
background: linear-gradient(90deg, #ff9076, #c74d35);
}
/* 过期 E */
/** **************************** */
.rp-mask {
position: fixed;
z-index: 100;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
max-width: 640px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .8);
overflow: hidden;
}
.rp-mask .rp-container img {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.rp-mask .rp-container {
position: relative;
width: 5.7rem;
height: 7.6rem;
margin: 1.72rem auto 0;
text-align: center;
-webkit-animation: bgScale .8s ease-in;
animation: bgScale .8s ease-in;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: all ease-in;
transition: all ease-in;
}
.rp-mask .rp-container .popup-rp-back {
width: 5.22rem;
top: 0;
}
.rp-mask .rp-container img {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.rp-mask .rp-container .main-title {
position: absolute;
text-align: center;
font: .5rem PingFangSC-Semibold;
color: #c73535;
width: 5.04rem;
height: 3.88rem;
left: 50%;
-webkit-transform: translate(-50%, .4rem);
transform: translate(-50%, .4rem);
-webkit-animation: paperMove 1s ease-in;
animation: paperMove 1s ease-in;
-webkit-transition: all ease-in;
transition: all ease-in;
background-size: cover;
}
.rp-mask .rp-container .main-title-1 {
margin: .7rem auto .04rem;
}
.rp-mask .rp-container .main-title-1,
.rp-mask .rp-container .main-title-2 {
font-size: .48rem;
}
.rp-mask .rp-container .popup-rp-ribbon {
left: .14rem;
-webkit-transform-origin: bottom;
transform-origin: bottom;
width: 5.7rem;
height: 2.42rem;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation: ribbonScale .8s ease-in;
animation: ribbonScale .8s ease-in;
-webkit-transition: all ease-in;
transition: all ease-in;
}
.rp-mask .rp-container .popup-rp-rps {
width: 5.16rem;
-webkit-transform: translate3d(-50%, 2.7rem, 0);
transform: translate3d(-50%, 2.7rem, 0);
-webkit-animation: littleRPsMove 1.4s ease-in;
animation: littleRPsMove 1.4s ease-in;
-webkit-transition: all;
transition: all;
}
@keyframes bgScale {
0% {
-webkit-transform: scale(.6);
transform: scale(.6)
}
40% {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
60% {
-webkit-transform: scale(1);
transform: scale(1)
}
70% {
-webkit-transform: scale(1.01);
transform: scale(1.01)
}
80% {
-webkit-transform: scale(1);
transform: scale(1)
}
90% {
-webkit-transform: scale(1.01);
transform: scale(1.01)
}
to {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes bgScale {
0% {
-webkit-transform: scale(.6);
transform: scale(.6)
}
40% {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
60% {
-webkit-transform: scale(1);
transform: scale(1)
}
70% {
-webkit-transform: scale(1.01);
transform: scale(1.01)
}
80% {
-webkit-transform: scale(1);
transform: scale(1)
}
90% {
-webkit-transform: scale(1.01);
transform: scale(1.01)
}
to {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes paperMove {
0% {
-webkit-transform: translate3d(-50%, 2.6rem, 0);
transform: translate3d(-50%, 2.6rem, 0)
}
60% {
-webkit-transform: translate3d(-50%, .6rem, 0);
transform: translate3d(-50%, .6rem, 0)
}
80% {
-webkit-transform: translate3d(-50%, 1rem, 0);
transform: translate3d(-50%, 1rem, 0)
}
90% {
-webkit-transform: translate3d(-50%, .7rem, 0);
transform: translate3d(-50%, .7rem, 0)
}
to {
-webkit-transform: translate3d(-50%, .4rem, 0);
transform: translate3d(-50%, .4rem, 0)
}
}
@-webkit-keyframes paperMove {
0% {
-webkit-transform: translate3d(-50%, 2.6rem, 0);
transform: translate3d(-50%, 2.6rem, 0)
}
60% {
-webkit-transform: translate3d(-50%, .6rem, 0);
transform: translate3d(-50%, .6rem, 0)
}
80% {
-webkit-transform: translate3d(-50%, 1rem, 0);
transform: translate3d(-50%, 1rem, 0)
}
90% {
-webkit-transform: translate3d(-50%, .7rem, 0);
transform: translate3d(-50%, .7rem, 0)
}
to {
-webkit-transform: translate3d(-50%, .4rem, 0);
transform: translate3d(-50%, .4rem, 0)
}
}
@-webkit-keyframes ribbonScale {
0% {
-webkit-transform: scale(0);
transform: scale(0)
}
55% {
-webkit-transform: scale(.6);
transform: scale(.6)
}
80% {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
to {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes ribbonScale {
0% {
-webkit-transform: scale(0);
transform: scale(0)
}
55% {
-webkit-transform: scale(.6);
transform: scale(.6)
}
80% {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
to {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes littleRPsMove {
0% {
-webkit-transform: translate3d(-50%, 3.2rem, 0);
transform: translate3d(-50%, 3.2rem, 0)
}
40% {
-webkit-transform: translate3d(-50%, 3.2rem, 0);
transform: translate3d(-50%, 3.2rem, 0)
}
60% {
-webkit-transform: translate3d(-50%, 2.6rem, 0);
transform: translate3d(-50%, 2.6rem, 0)
}
73% {
-webkit-transform: translate3d(-50%, 2.7rem, 0);
transform: translate3d(-50%, 2.7rem, 0)
}
86% {
-webkit-transform: translate3d(-50%, 2.6rem, 0);
transform: translate3d(-50%, 2.6rem, 0)
}
to {
-webkit-transform: translate3d(-50%, 2.7rem, 0);
transform: translate3d(-50%, 2.7rem, 0)
}
}
@keyframes littleRPsMove {
0% {
-webkit-transform: translate3d(-50%, 3.2rem, 0);
transform: translate3d(-50%, 3.2rem, 0)
}
40% {
-webkit-transform: translate3d(-50%, 3.2rem, 0);
transform: translate3d(-50%, 3.2rem, 0)
}
60% {
-webkit-transform: translate3d(-50%, 2.6rem, 0);
transform: translate3d(-50%, 2.6rem, 0)
}
73% {
-webkit-transform: translate3d(-50%, 2.7rem, 0);
transform: translate3d(-50%, 2.7rem, 0)
}
86% {
-webkit-transform: translate3d(-50%, 2.6rem, 0);
transform: translate3d(-50%, 2.6rem, 0)
}
to {
-webkit-transform: translate3d(-50%, 2.7rem, 0);
transform: translate3d(-50%, 2.7rem, 0)
}
}
.rp-mask .rp-container .popup-rp-front {
width: 5.38rem;
top: 2.84rem;
}
.rp-mask .rp-container .coupon-detail {
position: absolute;
top: 4.04rem;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 4.88rem;
height: 1.2rem;
background-color: #f4cea8;
border-radius: .06rem;
}
.rp-mask .rp-container .coupon-detail-content {
border: 1px solid #dc9875;
position: absolute;
width: 4.7rem;
height: 1.04rem;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.rp-mask .rp-container .coupon-detail-content .detail-left {
position: absolute;
left: .16rem;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.rp-mask .rp-container .coupon-detail-content .detail-right {
position: absolute;
left: 1.2rem;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.rp-mask .rp-container .coupon-detail-content .detail-left p.price-top {
height: .56rem;
line-height: .56rem;
}
.rp-mask .rp-container .coupon-detail-content .detail-left p .yuan {
font-size: .26rem;
}
.rp-mask .rp-container .coupon-detail-content .detail-left p .money {
font-size: .54rem;
margin-left: -.04rem;
}
.rp-mask .rp-container .coupon-detail-content .detail-left p {
font-family: PingFangSC-Medium;
color: #ae352e;
font-size: .18rem;
}
.rp-mask .rp-container .coupon-detail-content .detail-right-desc {
text-align: left;
font: .22rem PingFangSC-Medium;
color: #ae352e;
}
.rp-mask .rp-container .coupon-detail-content .detail-right .count-down span {
display: inline-block;
height: .28rem;
line-height: .28rem;
text-align: center;
font-size: .18rem;
border-radius: .02rem;
}
.rp-mask .rp-container .coupon-detail-content .detail-right .count-down span.time {
background-color: #8c6038;
color: #fff;
width: .28rem;
}
.double-rp-mask .rp-container .coupon-detail-content .detail-right .count-down span.time-milliseconds {
width: .2rem
}
.rp-mask .rp-container .coupon-detail-content .detail-right .count-down span.symbol {
width: .12rem;
color: #8c6038;
}
.rp-mask .rp-container .coupon-detail-content .detail-right .count-down span.desc {
font-size: .2rem;
color: #8c6038;
margin-left: .08rem;
}
.rp-mask .rp-container .confirm-button,
.rp-mask .rp-container .sub-title {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.rp-mask .rp-container .sub-title {
top: 5.48rem;
width: 4.66rem;
}
.rp-mask .rp-container .confirm-button {
text-align: left;
top: 6.08rem;
width: 4.74rem;
height: .96rem;
line-height: .96rem;
font-size: .4rem;
font-family: PingFangSC-Medium;
text-indent: 1.7rem;
color: #bb341a;
letter-spacing: .1rem;
background-image: url("data:image/png;base64,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");
background-size: cover;
}
.rp-mask .rp-container .confirm-button:before {
content: "";
position: absolute;
left: 1.18rem;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: .38rem;
height: .5rem;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAzCAMAAAAjOuGKAAAAaVBMVEXqTC/nSiznSywAAADoSyzuTy7vVDLHRTDnSiznSyvTRy3nTCznSivnSiy3QjHmSivtuYC5QjHGQy/hSCvaRyzVRy3nVTPssHjrpHDsn2vrilvARDDpeU/obkbnYT3rl2XORi7AVj7ZUTQnVdZaAAAAD3RSTlMjwXQAYh0PdPDhwKKUVsCMUu7bAAAA3ElEQVQ4y+3V2Q6DIBAFUNxbuwCCG67t/39kodgKpuI8to33xWQ8BpxMMiiQiZErkSLShUfszuEcS+fj7XgBijAkIbqA3An5IOf9iUtRwpa1vuuXpfGKEppbJVESGVEYJZbRVDra8LlWE52yMBTN5f3UM8un0yvySqUhV2+Z/g/e0Im2ZI7AjI9Un6ad/krZynBl8yxxuy8sV5SYuckzPvaP3S3Xr/fZcsW6q8374XXXGa51OCzerHbPwTCxYWteOnXHqoXMVfE987y73f2GA+4j6H4D7kvw/oXu8wf6l24GXHtvLgAAAABJRU5ErkJggg==");
background-size: cover
}
/* *************************** */
.rp-recommend,
.rp-recommend-v2 {
background-color: #b4292a;
width: 100%;
min-height: 13.34rem
}
.rp-recommend-v2 {
background-color: #aa292a
}
.rp-recommend-v2 .coupon-info-v2,
.rp-recommend .coupon-info-v2 {
overflow: hidden;
width: 100%;
height: 5.5rem;
position: relative;
}
.rp-recommend-v2 .coupon-info-v2 .img-rectangle,
.rp-recommend .coupon-info-v2 .img-rectangle {
position: absolute;
width: 100%;
height: 6.4rem;
}
.rp-recommend-v2 .coupon-info-v2 .img-ribbon1,
.rp-recommend .coupon-info-v2 .img-ribbon1 {
position: absolute;
width: 1.12rem;
height: .94rem;
left: 0;
top: 0;
}
.rp-recommend-v2 .coupon-info-v2 .img-ribbon2,
.rp-recommend .coupon-info-v2 .img-ribbon2 {
position: absolute;
width: 1.46rem;
height: 1.06rem;
right: 0;
top: 0;
}
.rp-recommend-v2 .coupon-info-v2 .coupon-detail,
.rp-recommend .coupon-info-v2 .coupon-detail {
position: absolute;
width: 7.26rem;
height: 6.24rem;
background-size: contain;
top: .44rem;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
overflow: hidden;
}
.rp-recommend-v2 .coupon-info-v2 .coupon-detail-price,
.rp-recommend .coupon-info-v2 .coupon-detail-price {
font-family: PingFangSC-Semibold;
font-size: .62rem;
color: #c73535;
height: 1.04rem;
line-height: 1.04rem;
margin: 1.44rem auto .1rem;
}
.rp-recommend-v2 .coupon-info-v2 .coupon-detail-count-down,
.rp-recommend .coupon-info-v2 .coupon-detail-count-down {
font-family: PingFangSC-Medium;
margin-bottom: .26rem;
}
.rp-recommend-v2 .coupon-info-v2 .coupon-detail-count-down span,
.rp-recommend .coupon-info-v2 .coupon-detail-count-down span {
display: inline-block;
height: .5rem;
line-height: .5rem;
font-size: .34rem;
border-radius: .04rem;
}
.rp-recommend-v2 .coupon-info-v2 .coupon-detail-count-down span.time,
.rp-recommend .coupon-info-v2 .coupon-detail-count-down span.time {
background-color: #8c6038;
color: #fff;
width: .5rem;
}
.rp-recommend-v2 .coupon-info-v2 .coupon-detail-count-down span.symbol,
.rp-recommend .coupon-info-v2 .coupon-detail-count-down span.symbol {
width: .2rem;
color: #8c6038;
}
.rp-recommend-v2 .coupon-info-v2 .coupon-detail-count-down span.desc,
.rp-recommend .coupon-info-v2 .coupon-detail-count-down span.desc {
font-size: .36rem;
color: #8c6038;
margin-left: .18rem;
}
.rp-recommend-v2 .coupon-info-v2 .coupon-detail-desc,
.rp-recommend .coupon-info-v2 .coupon-detail-desc {
opacity: .6;
font-family: PingFangSC-Regular;
font-size: .32rem;
color: #8c6038;
}
.red-packet-list {
width: 7.02rem;
max-width: 640px;
margin: 0 auto;
background-color: #c74d35;
overflow: hidden;
}
.red-packet-list .duo-opt-wrapper {
position: relative;
width: 7.02rem;
max-width: 640px;
height: 1.06rem;
z-index: 20;
padding: .2rem;
background-color: #c74d35;
}
.red-packet-list .duo-opt-wrapper .duo-opt-container {
border-radius: .66rem;
overflow: hidden;
height: .66rem;
background-color: #c3472f;
}
.red-packet-list .duo-opt-wrapper .duo-opt-list {
position: relative;
width: auto;
height: .8rem;
white-space: nowrap;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.red-packet-list .duo-opt-wrapper .duo-opt-list .opt-item {
position: relative;
display: inline-block;
/*width: 1rem;*/
padding: 0 .2rem;
height: .66rem;
text-align: center;
font-family: PingFangSC-Regular;
color: hsla(0, 0%, 100%, .6);
}
.red-packet-list .duo-opt-wrapper .duo-opt-list .current {
color: #fff;
font-family: PingFangSC-Medium;
background-color: #b73f27;
border-radius: .66rem;
}
.red-packet-list .duo-opt-wrapper .duo-opt-list .opt-item span {
height: .66rem;
line-height: .66rem;
}
.red-packet-list .duo-opt-wrapper .duo-opt-list .opt-item .desc {
font-size: .28rem;
}
.red-packet-list .duo-opt-wrapper .duo-opt-list .current .desc {
width: .55rem;
}
.red-packet-list .duo-goods-list {
position: relative;
}
.react-base-list-wrapper {
position: relative;
padding: 0 .2rem;
width: 7.02rem;
border-radius: .1rem;
margin: 0 auto;
text-align: left;
line-height: 1;
}
.red-packet-list .duo-goods-list .react-base-list-wrapper {
overflow: hidden;
margin: 0 auto;
width: 100%;
}
.double-grid-one {
width: 50%;
position: relative;
display: inline-block;
margin-bottom: .06rem;
}
.react-base-list-wrapper .double-grid-one {
margin-bottom: .18rem;
float: left;
}
.double-grid-item {
position: relative;
overflow: hidden;
background-color: #fff;
}
.react-base-list-wrapper .gap-right {
margin-right: .09rem;
}
.react-base-list-wrapper .gap-left {
margin-left: .09rem;
}
.react-base-list-wrapper .double-grid-item {
border-radius: .02rem;
height: 4.82rem;
}
.double-grid-item .goods-image img,
.double-grid-item img img {
position: relative;
width: 100%;
height: auto;
max-height: 3.72rem;
}
.double-grid-item .goods-image,
.double-grid-item img {
width: 3.72rem;
height: 3.72rem;
overflow: hidden;
}
/* .react-base-list-wrapper .double-grid-item .std-goods-image-square {
background: url(https://pinduoduoimg.yangkeduo.com/jinbao/default_image_square.png) no-repeat;
background-size: auto auto;
background-size: contain;
} */
.react-base-list-wrapper .double-grid-item .goods-image {
position: relative;
width: 3.14rem;
height: 3.14rem;
margin: .04rem auto .02rem;
}
.react-base-list-wrapper .double-grid-item .goods-image .goods-name-bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.02rem;
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .75)), to(transparent));
background-image: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent);
}
.double-grid-item .goods-name {
position: relative;
padding: .16rem .16rem 0;
width: 100%;
overflow: hidden;
word-break: break-all;
word-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: justify;
font-size: .26rem;
color: #333;
height: .88rem;
line-height: 1.5;
}
.react-base-list-wrapper .double-grid-item .goods-image .goods-name-bg .goods-name {
position: absolute;
bottom: .14rem;
left: 0;
width: 100%;
height: .68rem;
font-size: .26rem;
line-height: .34rem;
padding: 0 .18rem;
color: #fff;
}
.double-grid-item .detail {
width: 100%;
padding: .04rem .14rem 0;
position: relative;
height: .62rem;
font-size: 0;
line-height: 1.5;
}
.react-base-list-wrapper .double-grid-item .detail {
height: .74rem;
padding: 0;
width: 2.9rem;
margin: 0 auto;
color: #e02e24;
text-align: left;
}
.double-grid-item .detail b {
color: #ee2e3a;
font-weight: 700;
}
.react-base-list-wrapper .double-grid-item .detail .after-price-hint {
color: #e02e24;
position: relative;
vertical-align: top;
height: .74rem;
line-height: .8rem;
font-size: .24rem;
}
.react-base-list-wrapper .double-grid-item .detail .price-icon {
color: #e02e24;
font-size: .24rem;
font-weight: 700;
}
.react-base-list-wrapper .double-grid-item .detail .after-price,
.react-base-list-wrapper .double-grid-item .detail .price {
color: #e02e24;
font-size: .36rem;
font-weight: 700;
height: .74rem;
line-height: .74rem;
}
.double-grid-item .detail .info {
position: absolute;
right: .14rem;
bottom: .16rem;
top: .1rem;
font-size: .26rem;
color: #9c9c9c;
}
.react-base-list-wrapper .double-grid-item .detail .info {
font-size: .28rem;
top: .2rem;
color: #959595;
right: 0;
}
.react-base-list-wrapper .double-grid-item .buy-btn {
display: block;
margin: 0 auto;
width: 2.9rem;
text-align: center;
height: .72rem;
line-height: .72rem;
background-color: #e02e24;
color: #fff;
font-size: .3rem;
border-radius: .04rem;
}
.available-coupon {
position: fixed;
width: 3.02rem;
bottom: .6rem;
height: 1.54rem;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAS4AAACaBAMAAADlQrinAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAtUExURUdwTOuwkf////RwAPV0APV0AP////////////V0AP////////VzAP////Z1AEVZzjwAAAANdFJOUwAGKSmoqaqrzMyobm6g86d0AAABIUlEQVR42u3bwWkDMRBAUZvE91wDOaSilBBcQlpII+7BjeQYlpgtQarBHQwsSBl59X4FnzWeDzPocAAAAAAAAJ15u9RtrI1YrpHW01atZl7r8h54vdY0r/U78PpJ9LoFXpt/xtLOawm8aqLXymv3Xp+J/8ffwOuU6PUVzftEr2jeHxO9Xlp+r/I/3+s50esceH0kev2Zq3ledW4vHercoTJoh4oO6VDHDlXznlfHDpVBO1R0SIc6dqgO2qGqQ7vwspfToRk7NOperurQLjpkL8drxg65D+mQvZwO8XIf0qHH6ZC9nA7N2CH7Qh2yl9MhHXIfMu/drdyHdGjkDrkP6ZC93HRel0SvpeU7w4Zetwd8lznqO9ZR3/0CAAAAAIAW3AFHtf5DlrgeaAAAAABJRU5ErkJggg==");
background-size: cover;
z-index: 100;
}
.available-coupon-container {
width: 2.5rem;
height: 1.02rem;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-box-shadow: 0 0 10px 1px #e67c00;
box-shadow: 0 0 10px 1px #e67c00;
-webkit-animation: shine 2s linear infinite;
animation: shine 2s linear infinite;
}
.rp-recommend-v2 .coupon-info,
.rp-recommend .coupon-info {
overflow: hidden;
text-align: center;
}
.available-coupon-container .coupon-info {
position: absolute;
left: 0;
width: 1rem;
height: 1.02rem;
text-align: center;
padding-top: .14rem;
}
.available-coupon-container .coupon-info-type {
padding-top: .3rem;
}
.available-coupon-container .coupon-info-amount {
font-family: PingFangSC-Semibold;
color: #fff;
}
.available-coupon-container .coupon-info-amount .amount-icon {
font-size: .22rem;
}
.available-coupon-container .coupon-info-amount .amount-price {
font-size: .32rem;
}
.available-coupon-container .coupon-timer {
position: absolute;
right: 0;
width: 1.5rem;
height: 1.02rem;
padding: .22rem 0 0 .2rem;
color: #58595b;
font-size: .2rem;
font-family: PingFangSC-Regular;
}
.available-coupon-container .coupon-timer .count-down {
color: #e02e24;
font-size: .22rem;
font-family: PingFangSC-Medium;
margin-bottom: .02rem;
}
/* loadding */
.loadding {
width: 100%;
height: 100%;
position: relative;
background-color: #fff;
z-index: 1000;
}
.ring-1 {
position: absolute;
top: 40%;
left: 0;
right: 0;
width: 15px;
height: 15px;
margin: 0 auto;
padding: 10px;
border: 5px dashed #df2127;
border-radius: 100%;
-webkit-animation: loadingD 1.5s .3s cubic-bezier(.17, .37, .43, .67) infinite;
animation: loadingD 1.5s .3s cubic-bezier(.17, .37, .43, .67) infinite;
}
@-webkit-keyframes loadingD {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loadingD {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.no-data {
text-align: center;
color: #fff;
font-size: .26rem;
line-height: 2;
margin-bottom: .5rem;
}