tmt-workflow-act/act_project/carnival14/css/index-mask.scss

@function px2rem($px, $rem:75) {
  @return $px / $rem+rem;
}

@import '../../../common/css/flex.scss';

body {
  .max {
    .buy-mask {
      width: px2rem(616);
      height: px2rem(596);
      // border-radius:.213333rem;
      // background-color: #FFFFFF;
      position: fixed;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      background: url('../img/index/buy-bg.png') no-repeat 0 0 / 100% 100%;
      z-index: 1001;
      display: none;
      .b-box{
        padding: 0 px2rem(25);
        margin-top: px2rem(63);
        .b-title{
          color:#333;
          line-height: px2rem(52);
          text-align:center;
          font-size: px2rem(35);
          font-weight:bold;
          letter-spacing:.013333rem;
          .giftName{
            font-weight:bold;
          }
        }
        .b-number{
          padding:0 .906667rem;
          margin-top: px2rem(80);
          @include flex();
          .input-box{
            @include flex();
            @include flex-align-center;
            height:.64rem;
            margin-top:-0.066667rem;
            .remove-btn{
              width: px2rem(56);
              height: px2rem(56);
              @include flex();
              @include flex-justify-center;
              @include flex-align-center;
              border-radius: px2rem(24) 0 0 px2rem(24);
              background:rgba($color: #D4F4FF, $alpha: 0.6);
              .remove-icon{
                opacity: .6;
                display:block;
                width: px2rem(20);
                height: px2rem(4);
                background: url('../img/index/remove-icon.png') no-repeat 0 0 / 100% 100%;
                background-size:100% 100%;
              }
            }
            .b-input{
                width: px2rem(102);
                height: px2rem(56);
                background:#D4F4FF;
                text-align:center;
                font-size: px2rem(30);
                font-weight:500;
                color: #8FA4B8;
                margin:0 .106667rem;
                border:0;
                outline:none;
            }
            .add-btn{
              width: px2rem(56);
              height: px2rem(56);
              @include flex();
              @include flex-justify-center;
              @include flex-align-center;
              border-radius: 0 px2rem(24) px2rem(24) 0;
              background:rgba($color: #D4F4FF, $alpha: 0.6);
              .add-icon{
                display:block;
                width: px2rem(20);
                height: px2rem(20);
                background: url('../img/index/add-icon.png') no-repeat;
                background-size:100% 100%;
              }
            }
          }
    
    
        }
        .b-text{
          white-space:nowrap;
          font-size: px2rem(34);
          font-weight:500;
          color:rgba($color: #909090, $alpha: 1.0);
          line-height:.48rem;
          margin-bottom: px2rem(47);
          span:first-child{
            margin-right:.4rem;
          }
        }
        .b-day{
          padding:0 .906667rem;
          span:nth-child(2),span:last-child{
            color:#FE7BA7;
            letter-spacing:.013333rem;
          }
        }
        .b-price{
          padding:0 .906667rem;
          span:nth-child(2),span:last-child{
            color: #FFA530;
            letter-spacing:.013333rem;
          }
         
        }
        .b-btns{
          @include flex();
          @include flex-justify-around;
          margin-top: px2rem(55);
          .close-btn{
            width: px2rem(250);
            height: px2rem(86);
            background:url('../img/index/btn-cancel.png') no-repeat 0 0 / 100% 100%;
            @include flex();
            @include flex-justify-center;
            @include flex-align-center;
          }
          .confirm-btn{
            width: px2rem(250);
            height: px2rem(86);
            background: url('../img/index/btn-confirm.png') no-repeat 0 0 / 100% 100%;
            @include flex();
            @include flex-justify-center;
            @include flex-align-center;
    
          }
        }
      }
    }
    
    .rule-mask {
      width: px2rem(616);
      height: px2rem(596);
      position: fixed;
      left: 50%;
      top: 50%;
      transform:translate(-50%,-50%);
      z-index: 1001;
      // background-color:#FFFFFF;
      background: url('../img/index/buy-bg.png') no-repeat 0 0 / 100% 100%;
      border-radius:.213333rem;
      // overflow: hidden;
      display: none;
      .title {
        width: 100%;
        text-align: center;
        font-size: px2rem(40);
        color: #333;
        margin-top: px2rem(60);
        font-weight: bold;
        // background: linear-gradient(0deg, #FFE691 0%, #FEFAD5 100%);
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
      }
      .content {
        width: px2rem(524);
        height: px2rem(425);
        margin: 0 auto;
        margin-top:.4rem;
        overflow: auto;
        &::-webkit-scrollbar {
          display: none;
        }
        p {
          width: 100%;
          height:13.333333rem;
          img {
            width:100%;
          }
        }
      }
      .cancel {
        width: px2rem(70);
        height:px2rem(70);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: px2rem(-110);
        img {
          width:100%;
          height:100%;
        }
      }
    }
    .statusMask {
      width: px2rem(616);
      height: px2rem(596);
      // border-radius:.213333rem;
      // background-color:#FFFFFF;
      background: url('../img/index/buy-bg.png') no-repeat 0 0 / 100% 100%;
      position: fixed;
      left: 50%;
      top: 50%;
      transform:translate(-50%,-50%);
      z-index: 1001;
      display: none;
      .cancel {
        width: px2rem(70);
        height: px2rem(70);
        position: absolute;
        left: 50%;
        transform: translate(-50%,0);
        bottom: px2rem(-80);
        img {
          width:100%;
          height:100%;
        }
      }
      .title {
        width: 100%;
        text-align: center;
        font-size: px2rem(40);
        color: #333;
        font-weight:bold;
        margin-top: px2rem(60);
      }
    
      .avatar {
        width:  px2rem(120);
        height: px2rem(120);
        margin: 0 auto;
        margin-top: px2rem(64);
    
        img {
          width: 100%;
          height:100%;
        }
      }
    
      .tip {
        width: 100%;
        text-align: center;
        font-size: px2rem(30);
        color: #909090;
      }
    
      .in-btn, .recharge {
        @include flex;
        @include flex-align-center;
        @include flex-justify-between;
        display: block;
        width: px2rem(314);
        height: px2rem(86);
        background:url('../img/index/btn.png') no-repeat 0 0 / 100% 100%;
        background-size:100% 100%;
        font-size: px2rem(36);
        line-height: px2rem(86);
        box-sizing: border-box;
        text-align: center;
        margin: px2rem(60) auto 0;
        font-weight: bold;
        padding-bottom: px2rem(10);
        color: #fff;
      }
    }
  }
}