wpfw_ewei_wxapp/pages/order/pay/coupons/coupons.wxss

.coupon-headblock {
    position: relative;
    height: 480rpx;
    background: #fe5d5c;
    overflow: hidden;
}

.coupon-headblock .line-layer {
    width: 0;
    height: 110rpx;
    border-left: 800rpx solid #ffcf6f;
    border-right: 800rpx solid #ffcf6f;
    border-top: 100rpx solid transparent;
    position: absolute;
    left: 50%;
    margin-left: -800rpx;
    bottom: 0;
    z-index: 3;
}

.coupon-headblock .bottom-layer {
    width: 0;
    height: 110rpx;
    border-left: 800rpx solid #fe5d5c;
    border-right: 800rpx solid #fe5d5c;
    border-top: 100rpx solid transparent;
    position: absolute;
    left: 50%;
    margin-left: -800rpx;
    bottom: -10rpx;
    z-index: 4;
}

.coupon-headblock .top-layer {
    width: 0;
    height: 200rpx;
    border-left: 800rpx solid #f74a4a;
    border-right: 800rpx solid #f74a4a;
    border-bottom: 100rpx solid transparent;
    position: absolute;
    left: 50%;
    margin-left: -800rpx;
    top: 0;
    z-index: 1;
}

.coupon-headblock .gold {
    height: 100rpx;
    width: 100rpx;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    position: absolute;
    left: 50%;
    margin-left: -48rpx;
    bottom: 50rpx;
    z-index: 5;
}

.coupon-headblock .paper {
    height: 320rpx;
    width: 360rpx;
    background: #fff;
    position: absolute;
    top: 80rpx;
    left: 50%;
    margin-left: -180rpx;
    z-index: 2;
}

.coupon-headblock .paper .line {
    height: 0;
    position: absolute;
    top: 120rpx;
    left: 20rpx;
    right: 20rpx;
    border-bottom: 1px dashed #d5d5d5;
}

.coupon-headblock .paper .dot-1,.coupon-headblock .paper .dot-2,.coupon-headblock .paper .dot-3,.coupon-headblock .paper .dot-4,.coupon-headblock .paper .dot-5,.coupon-headblock .paper .dot-6 {
    height: 24rpx;
    width: 24rpx;
    border-radius: 24rpx;
    background: #f74a4a;
    position: absolute;
    top: -14rpx;
    left: 12rpx;
}

.coupon-headblock .paper .dot-2 {
    left: 48rpx;
}

.coupon-headblock .paper .dot-3 {
    left: 84rpx;
}

.coupon-headblock .paper .dot-4 {
    left: auto;
    right: 84rpx;
}

.coupon-headblock .paper .dot-5 {
    left: auto;
    right: 48rpx;
}

.coupon-headblock .paper .dot-6 {
    left: auto;
    right: 12rpx;
}

.coupon-headblock .paper .dot-top {
    height: 80rpx;
    width: 80rpx;
    border-radius: 80rpx;
    position: absolute;
    top: -60rpx;
    left: 50%;
    margin-left: -40rpx;
    background: #f74a4a;
}

.coupon-headblock .paper .dot-left,.coupon-headblock .paper .dot-right {
    height: 28rpx;
    width: 28rpx;
    border-radius: 28rpx;
    background: #f74a4a;
    position: absolute;
    top: 108rpx;
    left: -14rpx;
}

.coupon-headblock .paper .dot-right {
    left: auto;
    right: -14rpx;
}

.coupon-headblock .paper .title {
    line-height: 144rpx;
    text-align: center;
    display: block;
    font-size: 48rpx;
    color: #f74a4a;
}

.coupon-headblock .paper .text {
    height: 160rpx;
    left: 20rpx;
    right: 20rpx;
    top: 142rpx;
    position: absolute;
    border: 1px solid #fad64f;
    text-align: center;
    display: block;
}

.coupon-headblock .paper .text .t1 {
    font-size: 36rpx;
    color: #eb3d3f;
    line-height: 58rpx;
    padding-top: 16rpx;
}

.coupon-headblock .paper .text .t1 span {
    font-size: 56rpx;
}

.coupon-headblock .paper .text .d1 {
    height: 28rpx;
    width: 28rpx;
    border-radius: 28rpx;
    border-style: solid;
    border-color: #fad64f transparent transparent transparent;
    border-width: 1px;
    background: #fff;
    position: absolute;
    top: -16rpx;
    left: -16rpx;
    transform: rotate(135deg);
}

.coupon-headblock .paper .text .d2 {
    height: 28rpx;
    width: 28rpx;
    border-radius: 28rpx;
    border-style: solid;
    border-color: #fad64f transparent transparent transparent;
    border-width: 1px;
    background: #fff;
    position: absolute;
    top: -16rpx;
    right: -16rpx;
    transform: rotate(-135deg);
}

.coupon-headblock .link-text {
    position: absolute;
    bottom: 158rpx;
    left: 50%;
    z-index: 6;
    width: 360rpx;
    text-align: center;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #e47c48;
    margin-left: -180rpx;
}

.coupon-headblock .link-text a {
    color: #e47c48;
}

.coupon-groupblock {
    height: auto;
    overflow: hidden;
    margin: 20rpx;
    background: #fff;
    border-radius: 12rpx;
    border: 1.5px solid #dcdcdc;
    padding: 20rpx;
}

.coupon-groupblock .group-top {
    border-bottom: 1px dashed #d5d5d5;
    height: auto;
    overflow: hidden;
    padding-bottom: 20rpx;
}

.coupon-groupblock .group-top .inner {
    background: #f74a4a;
    float: left;
    color: #fff;
    padding: 0 8rpx;
    border-radius: 8rpx;
}

.coupon-groupblock .group-top .inner.blue {
    background: #42b5ff;
}

.coupon-groupblock .group-top .inner.pink {
    background: #f4558f;
}

.coupon-groupblock .group-top .inner.orange {
    background: #ff6c00;
}

.coupon-groupblock .group-top .inner.default {
    background: #bcbcbc;
}

.coupon-groupblock .group-top .inner .left {
    font-size: 56rpx;
    float: left;
}

.coupon-groupblock .group-top .inner .left span {
    font-size: 24rpx;
}

.coupon-groupblock .group-top .inner .right {
    float: left;
    padding-left: 12rpx;
    text-align: center;
}

.coupon-groupblock .group-top .inner .right .title {
    font-size: 32rpx;
    position: relative;
}

.coupon-groupblock .group-top .inner .right .title:before {
    content: "";
    position: absolute;
    height: 0;
    width: 100%;
    border-bottom: 1px solid #fff;
    left: 0;
    bottom: 2rpx;
}

.coupon-groupblock .group-top .inner .right .subtitle {
    font-size: 20rpx;
}

.coupon-groupblock .coupon-items {
    height: 360rpx;
    background: #fff;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: normal;
    position: relative;
    margin-top: 20rpx;
}

.coupon-groupblock .coupon-items .container1 {
    z-index: -1;
    height: 376rpx;
    overflow: auto;
    white-space: nowrap;
}

.coupon-groupblock .coupon-items .item {
    height: 360rpx;
    width: 240rpx;
    overflow: hidden;
    text-decoration: none;
    color: #333;
    display: inline-block;
    font-size: 24rpx;
    margin-right: 8rpx;
    vertical-align: top;
}

.coupon-groupblock .coupon-items .item .image {
    height: 240rpx;
    width: 240rpx;
}

.coupon-groupblock .coupon-items .item .image image {
    height: 100%;
    width: 100%;
    border-radius: 8rpx;
    display: block;
}

.coupon-groupblock .coupon-items .item .title {
    height: 40rpx;
    width: 240rpx;
}

.coupon-groupblock .coupon-items .item .price .product {
    text-decoration: line-through;
    color: #999;
}

.coupon-groupblock .coupon-items .item .price .market {
    height: 28rpx;
    font-size: 28rpx;
    color: #fd5454;
    line-height: 28rpx;
}

.coupon-groupblock .coupon-items .item .price .market span {
    background: #fd5454;
    color: #fff;
    font-size: 22rpx;
    padding: 0 4rpx;
    border-radius: 4rpx;
    height: 40rpx;
}

.coupon-groupblock .coupon-items .item .more {
    line-height: 240rpx;
    background: #F4F4F4;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    border-radius: 8rpx;
}

.coupon-index-bg {
    background: #efeff4;
}

.coupon-index-list {
    padding: 32rpx 20rpx 20rpx;
}

.coupon-index-list-a {
    background: #fff;
    display: block;
    border-radius: 8rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
}

.coupon-list {
    padding: 0;
    position: relative;
}

.coupon-index-list-left {
    position: relative;
    height: 240rpx;
}

.coupon-index-list-left>b {
    color: #fff;
    position: absolute;
    left: 24rpx;
    top: 0;
    height: 48rpx;
    line-height: 48rpx;
    font-weight: normal;
    font-size: 24rpx;
    border-bottom-left-radius: 8rpx;
    border-bottom-right-radius: 8rpx;
    padding: 0 20rpx;
}

.coupon-index-list-info {
    border: none;
    padding: 0 20rpx 0 32rpx;
    margin-top: 72rpx;
}

.coupon-index-list-left .fui-list:before {
    border: none;
}

.coupon-index-list-info .fui-list-media image {
    width: 140rpx;
    height: 140rpx;
    border: 2rpx solid #e6e6e6;
}

.coupon-index-list-info .fui-list-inner .h3 {
    font-size: 32rpx;
    color: #051b28;
    height: 60rpx;
    overflow: hidden;
    line-height: 60rpx;
    font-weight: 600;
}

.coupon-index-list-info .fui-list-inner .coupon-full,.coupon-index-list-info .fui-list-inner .coupon-time {
    font-size: 24rpx;
    color: #999999;
    height: 40rpx;
    overflow: hidden;
}

.coupon-list>i {
    width: 24rpx;
    height: 24rpx;
    display: block;
    border-radius: 40rpx;
    background: #efeff4;
    position: absolute;
    z-index: 10;
}

.coupon-top-i {
    right: 148rpx;
    top: -12rpx;
}

.coupon-bot-i {
    right: 148rpx;
    bottom: -12rpx;
}

.coupon-list>span.coupon-ling {
    width: 160rpx;
    height: 160rpx;
    position: absolute;
    display: block;
    right: 40rpx;
    top: -24rpx;
    z-index: 9;
}

.coupon-list>span.coupon-ling image {
    width: 100%;
    height: 100%;
}

.coupon-index-list-right {
    width: 160rpx;
    height: 240rpx;
    display: block;
    margin: auto;
    color: #fff;
    padding: 20rpx 0 20rpx 0;
    text-align: center;
    border-radius: 8rpx;
}

.coupon-list-canvas {
    position: relative;
    text-align: center;
    display: block;
    height: 148rpx;
}

.coupon-list-canvas canvas {
    position: absolute;
    left: 12rpx;
    right: 40rpx;
    width: 136rpx;
}

.coupon-list-canvas strong {
    display: block;
}

.coupon-list-canvas p {
    display: block;
    padding-top: 20rpx;
    height: 60rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    overflow: hidden;
}

.coupon-list-ling {
    display: inline-block;
    font-style: normal;
    font-size: 24rpx;
    height: 40rpx;
    line-height: 40rpx;
    border: 8rpx solid #cccaca;
    background: #fff;
    border-radius: 40rpx;
    color: #4dbaff;
    padding: 0 8rpx;
}

.coupon-list-ling.center {
    margin-top: 80rpx;
}

.coupon-index-list-info .fui-list-inner .coupon-full {
    height: 60rpx;
}

.coupon-full span {
    font-size: 40rpx;
    padding: 0 8rpx 0 0;
    font-weight: bold;
}

.coupon-time {
    font-size: 24rpx;
}

.coupon-time strong {
    font-weight: normal;
}

.blue .coupon-index-list-right {
    background: #42b5fe;
}

.blue .coupon-list-ling {
    border: 8rpx solid #13a1fa;
    color: #4dbaff;
}

.blue .coupon-index-list-left>b {
    background: #43b6ff;
}

.blue .coupon-index-list-info .fui-list-inner .coupon-full {
    color: #42b5fe;
}

.org .coupon-index-list-right {
    background: #ff6c00;
}

.org .coupon-list-ling {
    border: 8rpx solid #e65820;
    color: #ff7038;
}

.org .coupon-index-list-left>b {
    background: #ff6c00;
}

.org .coupon-index-list-info .fui-list-inner .coupon-full {
    color: #ff6c00;
}

.pink .coupon-index-list-right {
    background: #f4558f;
}

.pink .coupon-list-ling {
    border: 8rpx solid #dd2c6c;
    color: #f44b89;
}

.pink .coupon-index-list-left>b {
    background: #f55790;
}

.pink .coupon-index-list-info .fui-list-inner .coupon-full {
    color: #f55790;
}

.red .coupon-index-list-right {
    background: #f74a4a;
}

.red .coupon-list-ling {
    border: 8rpx solid #da363a;
    color: #f74a4a;
}

.red .coupon-index-list-left>b {
    background: #f74a4a;
}

.red .coupon-index-list-info .fui-list-inner .coupon-full {
    color: #f74a4a;
}

.disa .coupon-index-list-right {
    background: #bcbcbc;
}

.disa .coupon-index-list-left {
    background: #e5e5e5;
    border-radius: 8rpx;
}

.disa .coupon-list-ling {
    border: 8rpx solid #cccaca;
    color: #848484;
    background: #e5e5e5;
}

.disa .coupon-index-list-left>b {
    background: #bcbcbc;
}

.disa .coupon-index-list-info .fui-list-inner .coupon-full {
    color: #bcbcbc;
}