@import '../../common/style/act/mixin/mixin.scss';
@import '../../common/style/act/layout/_layout-gp.scss';
@import '../../common/style/act/button/_button-gp.scss';

$dialog-close_bg: 'https://image-1251917893.file.myqcloud.com/tip-privilege-Merchant/gp2.0/img/popup-close.png';

/* 放大出现 */
@keyframes scaleDraw {
  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(0);
    opacity: 0;

    /*开始为原始大小*/
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.press-act:not(.press-act--hidden-tip) {
  &.press__award {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    background: rgba(0, 0, 0, .7);
  }

  .press__main {
    position: relative;
    animation-name: scaleDraw;

    /*关键帧名称*/
    animation-timing-function: ease-in-out;

    /*动画的速度曲线*/
    animation-duration: 1s;

    /*动画所花费的时间*/
  }



  .press__icon--close {
    position: absolute;
    right: .24rem;
    top: .18rem;
    z-index: 20;

    @include icon_img(.42rem, .36rem, $dialog-close_bg, center center, contain);
  }

  .press__text--get,
  .press__text--received,
  .press__text--detail {
    position: absolute;
    left: .56rem;
    top: .20rem;
    font-family: 'MStiffHeiPRC';
    font-size: $font-m;
    color: #2e3438;
  }

  .press__main--big .press__content {
    display: flex;
    width: 8rem;
    padding-left: .56rem;
  }

  .btn-blue {
    background: url(https://image-1251917893.file.myqcloud.com/2020/Tip-wsq/V3.0/img/btn/secondary_large_btn_icon_bg.png) no-repeat;
    background-size: 100%;
    width: 2.24rem;
    height: .56rem;
    line-height: .56rem;
    text-align: center;
    color: #fff;
    font-size: .28rem;
  }

  .press__btn--normal {
    display: block;
    width: 1.72rem;
    height: .6rem;
    line-height: .6rem;
    font-size: $font-xs;
    color: #5a350a;
    text-align: center;
    background: url(https://image-1251917893.file.myqcloud.com/tip-privilege-Merchant/gp2.0/img/primary-large-btn-bg.png) no-repeat center center;
    background-size: contain;
  }

  .press__btn--normal.center {
    position: absolute;
    bottom: .34rem;
    left: 0;
    right: 0;
    margin: auto;
  }

  .press__btn--normal-long {
    width: 3.28rem;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    color: #5a350a;
    font-size: $font-xs;
    background: url(https://image-1251917893.file.myqcloud.com/tip-privilege-Merchant/gp2.0/img/card/privilege-btn-l.png) no-repeat center center;
    background-size: contain;
  }

  .press__btn--normal.center,
  .press__btn--normal-long.center {
    transform: translateX(.13rem);
  }

  .press__content .press__radio-group {
    position: absolute;
    bottom: .5rem;
    right: .66rem;
    display: flex;
    align-items: center;
    font-size: .18rem;
    color: #737a80;
    justify-content: center;
  }

  .press__content .press__radio-group .press__radio {
    width: .24rem;
    height: .26rem;
    background: url(https://image-1251917893.file.myqcloud.com/tip-privilege-Merchant/gp2.0/img/choose.png) no-repeat;
    background-size: contain;
    margin-right: .08rem;
  }

  .press__content .press__radio-group .press__radio.act {
    width: .24rem;
    height: .26rem;
    background: url(https://image-1251917893.file.myqcloud.com/tip-privilege-Merchant/gp2.0/img/choosed.png) no-repeat;
    background-size: contain;
  }

  .press__main--big {
    width: 8rem;
    height: 5rem;
    background: url(https://image-1251917893.file.myqcloud.com/tip-privilege-Merchant/gp2.0/img/popup-meduim-bg.png) no-repeat center;
    background-size: contain;
  }

  /* 最大屏弹窗 */

  .wz-goods-toast {
    background: url(https://image-1251917893.file.myqcloud.com/2021/act/pvp/a20210709summerVacation/toast-bg.png) no-repeat;
    background-size: 100%;
    width: 2.52rem;
    height: 2.52rem;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    transform: translateX(.3rem);
    padding-top: .68rem;
  }

  .wz-goods-toast .icon-gou {
    background: url(https://image-1251917893.file.myqcloud.com/2021/act/pvp/a20210709summerVacation/toast-gou.png) no-repeat;
    background-size: 100%;
    width: .8rem;
    height: .54rem;
    margin: 0 auto;
  }

  .wz-goods-toast .text {
    font-size: .24rem;
    color: rgba(130, 160, 204, 1);
    text-align: center;
    margin-top: .22rem;
  }

  .press__content--goods .press__left {
    width: 5.28rem;
    margin-top: .8rem;
  }

  .press__content--goods .press__left .press__btn--normal,
  .press__content--goods .press__left .press__btn--normal-long {
    margin: .04rem auto 0;
    display: block;
  }

  .press__content--goods .press__left .btn-blue {
    margin: .18rem auto 0;
  }

  .press__bg-get {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 3.24rem;
    padding: .16rem;
    background-color: rgba(46, 52, 56, .7);
    overflow: hidden;
  }

  .no-mini-program .press__bg-get {
    width: 6.4rem;
    height: 4.78rem;
    background-color: rgba(46, 52, 56, .7);
    padding: .14rem;
    position: relative;
  }

  .press__content--goods .no-mini-program .press__btn--normal {
    display: none;
  }

  .press__content--goods .no-mini-program .press__exchange-wrap {
    height: 3.1rem;
  }

  .press__label--got {
    background: url(https://image-1251917893.file.myqcloud.com/2021/act/pvp/a20210709summerVacation/label-got.png) no-repeat;
    background-size: 100%;
    width: 1.44rem;
    height: 1.44rem;
    position: absolute;
    top: -.3rem;
    right: 0;
  }

  .press__label--used {
    background: url(https://image-1251917893.file.myqcloud.com/2021/act/pvp/a20210709summerVacation/label_used.png) no-repeat;
    background-size: 100%;
    width: 1.44rem;
    height: 1.44rem;
    position: absolute;
    top: -.3rem;
    right: 0;
  }

  .press__label--overtime {
    background: url(https://image-1251917893.file.myqcloud.com/2021/act/pvp/a20210709summerVacation/label_overtime.png) no-repeat;
    background-size: 100%;
    width: 1.44rem;
    height: 1.44rem;
    position: absolute;
    top: -.3rem;
    right: 0;
  }

  .press__goods-box {
    display: flex;
    align-items: center;
    margin-bottom: .3rem;
  }

  .press__goods-img {
    position: relative;
    width: 1.08rem;
    height: 1.08rem;
  }

  .press__goods-img .press__label--online {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: '';
    width: .54rem;
    height: .28rem;
    background: url(https://image-1251917893.file.myqcloud.com/TIP_XCX/PUBG/user/online-tag.png) no-repeat center center;
    background-size: contain;
  }

  .press__goods-img .press__label--offline {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: '';
    width: .54rem;
    height: .28rem;
    background: url(https://image-1251917893.file.myqcloud.com/TIP_XCX/PUBG/user/instore-tag.png) no-repeat center center;
    background-size: contain;
  }

  .press__goods-img .press__label--normal {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: '';
    width: .54rem;
    height: .28rem;
    background: url(https://image-1251917893.file.myqcloud.com/TIP_XCX/PUBG/user/both-tag.png) no-repeat center center;
    background-size: contain;
  }

  .press__goods-img img {
    width: 1.12rem;
    height: 1.12rem;
  }

  .press__goods-detail {
    flex: 1;
    padding-left: .2rem;
    overflow: hidden;
  }

  .press__goods-tag {
    font-size: .26rem;
    color: #e4b853;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .press__goods-name {
    font-size: .2rem;
    color: #adceeb;
    margin: .06rem 0;
    color: #fcfcfc;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .press__goods-time {
    font-size: .18rem;
    color: #cdd1d6;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .press__act-title {
    display: none;
  }
  
  .press__goods-task {
    font-size: .18rem;
    color: rgba(255, 181, 43, 1);
  }

  .press__exchange-wrap {
    position: relative;
    flex: 1;
    padding-top: .16rem;
    border-top: .01rem solid rgba(255, 255, 255, .5);
    overflow-y: scroll;
  }

  .press__exchange-wrap .press__exchange-title {
    display: none;
  }

  .press__exchange-wrap .press__exchange-code {
    font-size: .24rem;
    background: rgba(17, 34, 55, .4);
    color: rgba(132, 176, 235, 1);
    height: .64rem;
    text-align: center;
    line-height: .64rem;
    position: relative;
  }

  .press__exchange-wrap .press__exchange-code::before {
    width: 100%;
    height: .02rem;
    background: #2e547f;
    content: '';
    position: absolute;
    bottom: -.12rem;
    left: 0;
  }

  .press__exchange-wrap .press__exchange-title:first-child {
    display: none;
  }

  .press__exchange-wrap .press__exchange-title {
    padding-top: .16rem;
    margin-top: .1rem;
    font-size: .2rem;
    color: #cdd1d6;
    border-top: .01rem solid rgba(255, 255, 255, .5);
  }

  .press__exchange-wrap .press__exchange-title.press__exchange-title--no-border {
    border-top: 0;
  }

  .press__exchange-wrap .press__exchange-title .press__exchange-type {
    font-size: .2rem;
    display: flex;
  }

  .press__exchange-wrap .press__exchange-title .press__exchange-type>span {
    color: #ffb52b;
    display: flex;
  }

  .press__exchange-wrap .press__exchange-title .press__exchange-type .press__name {
    display: block;
    width: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .press__exchange-wrap .press__exchange-title .press__exchange-type>span.press__link {
    text-decoration: underline;
  }

  .press__exchange-wrap .press__des-discount {
    color: #cdd1d6;
    font-size: .2rem;
    padding: .16rem 0;
  }

  .press__exchange-wrap .press__des-discount>img {
    width: 2.4rem;
    height: auto;
    margin-top: .1rem;
  }

  .press__wx-box {
    position: relative;
  }

  .press__wx-box .press__label {
    position: absolute;
    right: 0;
    top: 0;
    width: .44rem;
    height: .24rem;
    background: rgba(255, 255, 255, .05);
    border: .5px solid rgba(255, 255, 255, .05);
  }

  .press__wx-box .press__label::after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    content: '限量';
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .16rem;
    color: #b5ddde;
  }

  .press__wx-box .press__wz-time {
    font-size: .2rem;
    color: #cdd1d6;
  }

  .press__wx-box .press__wz-detail-wrap {
    position: relative;
    display: flex;
    margin-top: .08rem;
  }

  .press__wx-box .press__wz-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .72rem;
    height: .72rem;
    background: rgba(0, 0, 0, .3);
  }

  .press__wx-box .press__wz-img img {
    display: block;
    width: .48rem;
    height: .48rem;
  }

  .press__wx-box .press__wz-detail {
    margin-left: .1rem;
    padding-top: .04rem;
  }

  .press__wz-detail .press__wz-limit {
    font-size: .2rem;
    color: #f4f4f6;
  }

  /* cdk*/
  .press__wx-box--cdk .press__wz-detail .press__wz-limit {
    color: #f4f4f6;
  }

  .press__wz-detail .press__wz-tips {
    font-size: .2rem;
    color: #cdd1d6;
    margin-top: .08rem;
  }

  /* cdk*/
  .press__wx-box--cdk .press__wz-detail .press__wz-tips {
    padding-bottom: .16rem;
  }

  .press__wz-detail .press__wz-props {
    display: flex;
    border-top: .01rem solid rgba(255, 255, 255, .5);
    padding-top: .16rem;
    padding-bottom: .14rem;
  }

  .press__wz-detail .press__wz-props .press__item-props {
    width: .44rem;
    height: .44rem;
    border: .01rem solid rgba(255, 255, 255, .5);
    background: rgba(0, 0, 0, .3);
    margin-right: .04rem;
  }

  .press__wz-detail .press__wz-props img {
    width: .44rem;
    height: .44rem;
  }

  .press__content--goods .press__right {
    flex: 1;
    padding-left: .28rem;
    padding-right: .4rem;
    margin-top: .82rem;
    overflow: hidden;
  }

  .press__content--goods .press__flag-bg {
    width: .96rem;
    height: .96rem;
    margin: 0 auto;
    background: #fff;
  }

  .press__content--goods .press__flag-bg img {
    display: block;
    width: .96rem;
    height: .96rem;
  }

  .press__content--goods .press__flag-name {
    font-size: .2rem;
    color: #212124;
    text-align: center;
    margin-top: .08rem;
  }

  .press__content--goods .press__flag-address {
    font-size: .18rem;
    color: #737a80;
    margin-top: .04rem;
  }

  .press__content--goods .press__btn-more {
    width: 1.12rem;
    height: .44rem;
    font-size: .22rem;
    color: #cdd1d6;
    text-align: center;
    line-height: .44rem;
    margin: .16rem auto 0;
    background: url(https://image-1251917893.file.myqcloud.com/tip-privilege-Merchant/gp2.0/img/card/merchant-dy-btn.png) no-repeat;
    background-size: contain;
  }

  .press__content--goods .press__radio-group .press__radio {
    transform: translateY(0);
  }

  /* 最大弹窗 end */
  .dialog-bar-code {
    width: 5.52rem;
    height: 4rem;
  }

  .press__barcode-bg {
    width: 5.52rem;
    height: 3.76rem;
    background: url(https://image-1251917893.file.myqcloud.com/2021/act/pvp/a20210709summerVacation/dialog-bar-code.png) no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .4rem;
    box-sizing: border-box;
  }

  .press__barcode-bg .press__left {
    width: .96rem;
    height: 3.04rem;
    margin: 0;
  }

  .press__barcode-bg .press__left>img {
    width: .96rem;
    height: 3.04rem;
  }

  .press__barcode-bg .press__right {
    width: 3.04rem;
    height: 3.04rem;
    background: #fff;
    margin: 0;
  }

  .press__barcode-bg .press__right>img {
    width: 3.04rem;
    height: 3.04rem;
  }

  .press__btn--normal-top {
    display: none !important;
  }
  
  .press__expire-time {
    display: none;
  }
  
  /* 多奖励左右滑动 */
  .press__goods-list-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .press__goods-list {
    display: flex;
    width: 100%;
    overflow-x: auto;

    .press__label--got,
    .press__label--used,
    .press__label--overtime {
      top: -.28rem;
      right: .1rem;
    }
  }

  .press__goods-item {
    position: relative;
    width: 5.24rem;
    flex-shrink: 0;

    &:first-child {
      margin-left: .14rem;
    }

    .press__goods-box {
      display: flex;
      flex-shrink: 0;
      background: rgba(17, 34, 55, .4);
      border: 1px solid rgba(17, 34, 55, .4);
      margin: 0;
      margin-right: .14rem;

      .press__goods-img img {
        width: 1rem;
        height: 1rem;
        margin: .06rem;
      }

      .press__goods-detail {
        flex: 1;
        overflow: hidden;

        div {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    &:only-child,
    &:only-child .press__goods-box {
      width: 6.4rem;
    }
  }

  .press__goods-item.press__goods-item--current .press__goods-box {
    border: 1px solid #ecc999;
  }

  .press__goods-item:only-child .press__goods-box {
    margin: 0;
  }
}