.page-coupon-center {
  .banner {
    font-size: 0;
    width: 710rpx;
    height: 280rpx;
    margin: 20rpx 20rpx 0;
    position: relative;
    border-radius: 10rpx;
    overflow: hidden;
  }
  .con-box {
    padding: 0 20rpx;
    .c-tit {
      padding: 20rpx;
      font-size: 28rpx;
      font-weight: 600;
      position: relative;
      margin-top: 10rpx;
      &::before {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        width: 0;
        height: 0;
        content: " ";
        font-size: 0;
        border: 10rpx solid transparent;
        border-left: 12rpx solid #fc1b35;
        border-radius: 6rpx;
      }
    }
    /* 通用券 */
    .general-box {
      background: #fff;
      padding: 20rpx;
      width: 710rpx;
      box-sizing: border-box;
      border-radius: 10rpx;
      .general {
        display: flex;
        .item {
          margin-right: 20rpx;
          display: flex;
          &:last-child {
            margin-right: 0;
          }
          .item-box{
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            position: relative;
            width: 310rpx;
            overflow: hidden;
            background: #fef1ef;
            &::before,&::after {
              position: absolute;
              z-index: 1;
              right: 38rpx;
              display: block;
              width: 20rpx;
              height: 20rpx;
              content: " ";
              font-size: 0;
              background: #fff;
              border-radius: 50%;
            }
            &::before {
              top: -10rpx;
            }
            &::after {
              bottom: -10rpx;
            }
            .item-con{
              flex: 1;
              text-align: center;
              padding: 20rpx 16rpx;
              position: relative;
              z-index: 2;
              .number{
                display: flex;
                align-items: baseline;
                justify-content: center;
                color: #fc1b35;
                font-family: PingFangSC-Medium, tahoma;
                font-weight: 600;
                line-height: 1;
                position: relative;
                .text{
                  font-size: 44rpx;
                  margin-right: 2rpx;
                  .small{
                    font-size: 24rpx;
                  }
                }
              }
              .scope {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .condition {
                word-break: break-word;
                line-height: 28rpx;
                margin: 6rpx 0;
              }
              .scope {
                font-size: 20rpx;
                line-height: 24rpx;
                color: #999;
              }
              .progress-box {
                width: 100%;
                height: 22rpx;
                background: #ffb5af;
                border-radius: 30rpx;
                position: relative;
                margin-top: 6rpx;
                overflow: hidden;
                .text {
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 100%;
                  height: 22rpx;
                  line-height: 22rpx;
                  font-size: 20rpx;
                  color: #fff;
                  text-align: center;
                }
                .progress {
                  height: 22rpx;
                  border-radius: 30rpx;
                  background: #fc1b35;
                }
              }
            }
            .item-btn {
              position: relative;
              color: #fff;
              width: 30rpx;
              padding: 0 10rpx;
              height: 100%;
              display: flex;
              align-items: center;
              text-align: center;
              flex-wrap: nowrap;
              line-height: 30rpx;
              background: -webkit-linear-gradient(left, #ff1a49, #fc1b35);
              background: linear-gradient(to right, #ff1a49, #fc1b35);
              &::before {
                position: absolute;
                left: 0;
                top: 28rpx;
                bottom: 28rpx;
                display: none;
                width: 2rpx;
                height: auto;
                content: " ";
                font-size: 0;
                border-left: 2rpx dashed #fc1b35;
                opacity: 0.1;
              }
            }
            .icon{
              position: absolute;
              top: -24rpx;
              right: 60rpx;
              display: none;
              width: 80rpx;
              height: 80rpx;
            }
            &.received,&.robbed{
              .icon{
                display: block;
              }
            }
            &.received{
              .item-btn{
                color: #fc1b35;
                line-height: 32rpx;
                background: none;
                &::before {
                  display: block;
                }
              }
            }
            &.robbed {
              background: #f3f3f3;
              .item-con{
                .number,.condition{
                  color: #999;
                }
                .progress-box{
                  background: #ccc;
                  .progress{
                    background: #ccc;
                  }
                }
              }
              .item-btn {
                color: #999;
                line-height: 32rpx;
                background: none;
                &::before {
                  display: block;
                  border-left: 2rpx dashed #333;
                }
              }
            }
          }
        }
      }
    }
    /* 店铺券 */
    .special{
      .item {
        margin-bottom: 20rpx;
        &:last-child {
          margin-bottom: 0;
        }
        .item-box{
          background: #fff;
          position: relative;
          border-radius: 10rpx;
          display: flex;
          overflow: hidden;
          &::before,
          &::after  {
            position: absolute;
            right: 196rpx;
            display: block;
            width: 24rpx;
            height: 24rpx;
            content: " ";
            font-size: 0;
            background: #f4f4f4;
            border-radius: 50%;
            z-index: 1;
          }
          &::before {
            top: -12rpx;
          }
          &::after {
            bottom: -12rpx;
          }
          &.received,
          &.robbed{
            .icon{
              display: block;
            }
          }
          &.received{
            .item-btn{
              background: #fff;
              .btn-box{
                .btn {
                  border: 2rpx solid #fc1b35;
                  color: #fc1b35;
                  background: #fff;
                  line-height: 46rpx;
                }
              }
            }
            .right{
              .btn-box{
                .btn {
                  border: 2rpx solid #fc1b35;
                  color: #fc1b35;
                  background: none;
                  line-height: 46rpx;
                }
              }
            }
          }
          &.robbed{
            .item-btn{
              background: #fff;
              &::before {
                border-left: 2rpx dashed #333;
              }
              .btn-box{
                .number,.condition{
                  color: #999;
                }
                .progress-box{
                  background: #ccc;
                  .progress{
                    background: #ccc;
                  }
                }
                .btn {
                  border: 2rpx solid #ddd;
                  color: #999;
                  background: #fff;
                  line-height: 46rpx;
                }
              }
            }
            .right{
              .btn-box{
                .btn {
                  border: 2rpx solid #ddd;
                  color: #999;
                  background: none;
                  line-height: 46rpx;
                }
                .progress-text{
                  color: #999;
                }
                .progress-box{
                  background: #eee;
                  .progress{
                    background: #eee;
                  }
                }
              }
            }
          }
          .item-con{
            flex: 1;
            padding: 20rpx;
            .shop-msg{
              display: flex;
              align-items: center;
              .logo{
                width: 40rpx;
                height: 40rpx;
                font-size: 0;
                border-radius: 50%;
                overflow: hidden;
                background: #fff;
                image{
                  border-radius: 50%;
                }
              }
              .name{
                flex: 1;
                margin-left: 10rpx;
                font-weight: 600;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
            .prod-msg{
              display: flex;
              margin-top: 20rpx;
              .p-item{
                margin-left: 20rpx;
                &:first-child{
                  margin-left: 0;
                }
              }
              .img{
                width: 140rpx;
                height: 140rpx;
                border-radius: 10rpx;
                overflow: hidden;
                font-size: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                image{
                  border-radius: 10rpx;
                }
              }
              .price {
                color: #333;
                font-size: 22rpx;
                display: block;
                text-align: center;
                margin-top: 6rpx;
              }
            }
          }
          .item-btn{
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
            padding: 20rpx;
            width: 170rpx;
            background: -webkit-linear-gradient(left, #fef1ef, #fffaf9);
            background: linear-gradient(to right, #fef1ef, #fffaf9);
            &::before {
              position: absolute;
              left: 0;
              top: 30rpx;
              bottom: 30rpx;
              display: block;
              width: 2rpx;
              height: auto;
              content: " ";
              font-size: 0;
              border-left: 2rpx dashed #fc1b35;
              opacity: 0.1;
            }
            .btn-box{
              position: relative;
              z-index: 1;
              flex: 1;
              .number{
                display: flex;
                align-items: baseline;
                justify-content: center;
                color: #fc1b35;
                font-family: PingFangSC-Medium, tahoma;
                font-weight: 600;
                line-height: 1;
                position: relative;
                z-index: 2;
                .text{
                  font-size: 44rpx;
                  margin-right: 2rpx;
                  .small{
                    font-size: 24rpx;
                  }
                }
                .word-style{
                  word-break: break-word;
                  text-align: left;
                }
              }
              .condition{
                line-height: 28rpx;
                margin: 10rpx 0;
                word-break: break-word;
              }
              .progress-box{
                height: 20rpx;
                background: #ffb5af;
                border-radius: 30rpx;
                position: relative;
                margin: 0 6rpx;
                overflow: hidden;
                .text {
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 100%;
                  height: 20rpx;
                  line-height: 20rpx;
                  font-size: 20rpx;
                  color: #fff;
                  text-align: center;
                }
                .progress{
                  height: 20rpx;
                  border-radius: 20rpx;
                  background: #fc1b35;
                }
              }
              .btn{
                width: 170rpx;
                color: #fff;
                margin: 0 auto;
                margin-top: 24rpx;
                height: 50rpx;
                line-height: 50rpx;
                box-sizing: border-box;
                text-align: center;
                border-radius: 50rpx;
                background: -webkit-linear-gradient(left, #ff1a49, #fc1b35);
                background: linear-gradient(to right, #ff1a49, #fc1b35);
              }
            }
          }
          .icon{
            width: 100rpx;
            height: 100rpx;
            position: absolute;
            right: 20rpx;
            top: -30rpx;
            display: none;
          }
          /* 商品券 */
          .left {
            flex: 1;
            display: flex;
            padding: 20rpx;
            overflow: hidden;
            .img {
              width: 180rpx;
              height: 180rpx;
              border-radius: 10rpx;
              overflow: hidden;
              font-size: 0;
              image {
                border-radius: 10rpx;
              }
            }
            .text-box{
              flex: 1;
              margin-left: 20rpx;
              .goods-name{
                width: 260rpx;
                height: 72rpx;
                line-height: 36rpx;
                font-weight: 600;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break:break-all; /* 强制英文单词内断行 */
                position: relative;
              }
              .coupon-number{
                display: flex;
                align-items: baseline;
                margin-top: 40rpx;
                .number {
                  display: flex;
                  align-items: baseline;
                  color: #fc1b35;
                  font-family: PingFangSC-Medium, tahoma;
                  font-weight: 600;
                  line-height: 1;
                  .text {
                    font-size: 44rpx;
                    margin-right: 2rpx;
                  }
                }
                .condition{
                  flex: 1;
                  margin-left: 10rpx;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 1;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }
          }
          .right{
            width: 170rpx;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 20rpx;
            &::before {
              position: absolute;
              left: -2rpx;
              top: 30rpx;
              bottom: 30rpx;
              display: block;
              width: 2rpx;
              height: auto;
              content: " ";
              font-size: 0;
              border-right: 2rpx dashed #fc1b35;
              opacity: 0.1;
            }
            .btn-box{
              flex: 1;
              position: relative;
              z-index: 1;
              .progress-box{
                height: 18rpx;
                background: #f0f0f0;
                border-radius: 30rpx;
                margin: 10rpx 6rpx 0;
                overflow: hidden;
                .progress{
                  height: 18rpx;
                  border-radius: 30rpx;
                  background: #fc1b35;
                }
              }
              .btn{
                width: 170rpx;
                color: #fff;
                height: 50rpx;
                line-height: 50rpx;
                box-sizing: border-box;
                text-align: center;
                border-radius: 50rpx;
                background: -webkit-linear-gradient(left, #ff1a49, #fc1b35);
                background: linear-gradient(to right, #ff1a49, #fc1b35);
                margin-top: 20rpx;
              }
            }
          }
        }
      }
    }
  }

}
/* 底部 */
.coupon-foot {
  z-index: 999;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 750rpx;
  margin: auto;
  width: 750rpx;
  background: #fff;
  border-radius: 10rpx 10rpx 0 0;
  box-shadow: 0 -6rpx 6rpx rgba(0,0,0,.01);
  display: flex;
  align-items: center;
  font-size: 28rpx;
  font-weight: 600;
  text-align: center;
  padding: 36rpx 0;
  padding-bottom: calc(36rpx + env(safe-area-inset-bottom));
  .item {
    flex: 1;
    height: 28rpx;
    line-height: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #aaa;
    .icon {
      width: 28rpx;
      height: 28rpx;
      font-size: 0;
      margin-right: 10rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
    &:first-child {
      color: #fc1b35;
      border-right: 2rpx solid #eee;
    }
  }
}
