@import "../../../css/base.less";

@baseColor: #0099ff;
.ald-container {
  width: 100%;
  min-height: 100vh;
  padding-bottom: .8rem;
  max-width: 750px;
  margin: 0 auto;
  background: url("../images/bg.jpg") no-repeat center top;
  background-size: 100% 100%;
  font-family: PingFang;

  .login-info {
    font-size: .32rem;
    padding: .2rem 0 .2rem .18rem;
    color: #FFFFFF;
    text-shadow: 2px 1px 13px #FF5B00;

    a {
      font-weight: bold;
      text-decoration: underline;
      color: #FBFF85;
    }
  }

  .sign-container {
    width: 100%;
    min-height: 5rem;
    background: url("../images/sign_slogan.png") no-repeat center top;
    background-size: 100% auto;
    padding-top: 2.2rem;

    .sign-content {
      width: 100%;
      min-height: 5.41rem;
      background: url("../images/sign_bg.png") no-repeat center top;
      background-size: 100% auto;
    }

    .task-container {
      .pr();
      padding: 0 .3rem;

      .scroll-container {
        .pr();
        width: 6.5rem;
        height: 1.8rem;
        margin: 0 auto;
        overflow-x: scroll;

        &.scroll-container-gift {
          height: 3.3rem;
        }
      }

      .progress-date {
        .pa();
        left: 0;
        top: 1.15rem;
        z-index: 9;
        width: 7.2rem;
        height: 2px;
        background: #fff;
        border: 2px solid #FFE7CF;
        border-radius: 2px;
        box-sizing: border-box;

        span {
          .pa();
          left: 0;
          top: -1px;
          width: 30%;
          height: 4px;
          background: #FF6600;
          border-radius: 2px;
          .transition();
        }
      }

      .progress-gift {
        .pa();
        left: 0;
        top: .4rem;
        z-index: 9;
        width: 27.75rem;
        height: 3.2px;
        background: #FFEAB0;
        opacity: 0.51;
        border-radius: 2px;
      }

      .task-date {
        .pa();
        width: 7.2rem;

        dl {
          .fl();
          width: .6rem;
          padding-top: .3rem;
          .fs(.2rem, #999);
          text-align: center;

          dt {
            .pr();
            width: .6rem;
            height: .68rem;
            &:hover{
              span{
                .show();
              }
            }
            span{
              .pa();
              top: .3rem;
              right: 0;
              .hide();
              z-index: 11;
              min-width: 1.2rem;
              padding: .1rem .2rem;
              word-break: break-all;
              .fs(.2rem,#fff);
              background: #FEB42F;
              border-radius: .1rem;
              &:after{
                .pa();
                right: .2rem;
                top: -.16rem;
                margin-left: -.25rem;
                content: "";
                width: 0;
                height: 0;
                border-left: .08rem solid transparent;
                border-right: .08rem solid transparent;
                border-bottom: .16rem solid #FEB42F;
              }
            }
          }

          .line {
            width: .03rem;
            height: .06rem;
            display: inline-block;
            background: #d6d3cc;
            margin: .1rem 0 .06rem;
          }

          &.gift {
            .line {
              height: .16rem;
              margin: .05rem 0 .01rem;
              background: #4a4a4a;
            }

            dt {
              background: url("../images/gift.png") no-repeat center;
              background-size: 100% auto;
            }
          }

          &.done {
            .line {
              background: #ffbe8f;
            }
            &.gift{
              dt {
                .pr();
                &:after{
                  content: "";
                  .pa();
                  left: 0;
                  bottom: .1rem;
                  width: .6rem;
                  height: .68rem;
                  background: url("../images/icon_success.png") no-repeat center;
                  background-size: 100% auto;
                }
              }
            }
          }

          &.current {
            .line {
              height: .16rem;
              margin: .05rem 0 .01rem;
              background: #ff6600;
            }

            dt {
              background: url("../images/gift_on.png") no-repeat center;
              background-size: 100% auto;
              .css3(animation,TransScale 1s linear infinite);
              span{
                .hide();
              }
            }
          }
        }
      }
    }
    .gift-award {
      .pa();
      width: 27.75rem;

      dl {
        .fl();
        .pr();
        width: 1.85rem;
        padding-top: .3rem;
        height: 3rem;
        .fs(0, #999);
        text-align: center;
        background: url("../images/gift_bg.png") no-repeat center bottom;
        background-size: 1.69rem auto;

        dt {
          display: inline-block;
          width: .2rem;
          height: .25rem;
          background: url("../images/icon.png") no-repeat center;
          background-size: 100% auto;
        }

        .num {
          width: .6rem;
          .lh(.6rem);
          margin: .1rem auto ;
          .fs(.26rem, #5d5d5d);
          transform: rotate(5deg);
        }

        .gift-img {
          .pr();
          width: .86rem;
          height: .76rem;
          margin: 0 auto;

          span {
            display: block;
            width: .86rem;
            height: .86rem;
            .gray(100%)
          }
        }
        .gift-img2{

        }
        .gift-img1{
          span{
            background: url("../images/gift_1.png?v=2021052801") no-repeat center;
            background-size: 60% auto;
          }
        }
        .gift-img2{
          span{
            background: url("../images/gift_2.png") no-repeat center;
            background-size: 60% auto;
          }
        }
        .gift-img3{
          span{
            background: url("../images/gift_3.png") no-repeat center;
            background-size: 60% auto;
          }
        }
        .gift-img4{
          span{
            background: url("../images/gift_4.png") no-repeat center;
            background-size: 60% auto;
          }
        }
        .gift-img5{
          span{
            background: url("../images/gift_5.png") no-repeat center;
            background-size: 60% auto;
          }
        }
        .gift-img6{
          span{
            background: url("../images/gift_6.png") no-repeat center;
            background-size: 60% auto;
          }
        }
        .gift-img7{
          span{
            background: url("../images/gift_7.png") no-repeat center;
            background-size: 60% auto;
          }
        }
        .gift-img8{
          span{
            background: url("../images/gift_8.png") no-repeat center;
            background-size: 60% auto;
          }
        }
        .gift-img9{
          span{
            background: url("../images/gift_9.png") no-repeat center;
            background-size: 60% auto;
          }
        }
        .gift-img10{
          span{
            background: url("../images/gift_10.png") no-repeat center;
            background-size: 60% auto;
          }
        }
        .gift-img11{
          span{
            background: url("../images/gift_11.png") no-repeat center;
            background-size: 60% auto;
          }
        }
        .gift-img12{
          span{
            background: url("../images/gift_12.png") no-repeat center;
            background-size: 60% auto;
          }
        }
        .gift-img13,.gift-img14,.gift-img15{
          span{
            background: url("../images/gift_13.png") no-repeat center;
            background-size: 60% auto;
          }
        }
        .gift-name {
          .fs(.2rem, #5D5D5D);
          padding: .05rem 0 .1rem;
          .css3(transform,scale(.7));
        }
        .gift-name2,.gift-name3,.gift-name4,.gift-name9,.gift-name10,.gift-name11{
            padding: .3rem 0 0;
        }
        .status {
          .fs(.24rem, #fff);
          .pa();
          left: 0;
          bottom: .1rem;
          width: 100%;
        }

        &.done {
          background: url("../images/gift_bg_done.png") no-repeat center bottom;
          background-size: 1.69rem auto;
          dt {
            background: url("../images/icon_on.png") no-repeat center;
            background-size: 100% auto;
          }

          .gift-img {
            &:after {
              content: "";
              .pa();
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background: url("../images/icon_success.png") no-repeat center;
              background-size: 100% auto;

            }
          }


        }

        &.current {
          background: url("../images/gift_bg_on.png") no-repeat center bottom;
          background-size: 1.69rem auto;
          .gift-name{
            color: #9f33d1;
          }
          .num {
            color: #A75314;
          }

          .gift-img {
            span {
              .gray(0)
            }
          }
        }
      }
    }
  }

  //::-webkit-scrollbar {
  //    display: none; /* Chrome Safari */
  //}
  .rules-container {
    text-align: center;

    .title {
      .pr();
      display: inline-block;
      padding: .66rem 0 .25rem;
      text-align: center;
      .fs(.34rem, #fff);
      text-shadow: 0px 0px 35px rgba(255, 144, 54, 0.58);

      &:after, &:before {
        content: '';
        .pa();
        top: .8rem;
        width: .69rem;
        height: .24rem;
        background: url("../images/title_line.png") no-repeat center;
        background-size: 100% auto;
      }

      &:after {
        left: -1rem;
      }

      &:before {
        right: -1rem;
        transform: rotate(-180deg);
      }
    }

    .rules {
      text-align: left;
      .fs(.28rem, #343434);
      width: 90%;
      padding: .5rem 0 .4rem;
      margin: 0 auto;
      background: #fff;
      border-radius: .2rem;

      p {
        .pr();
        padding: 0 .3rem .2rem .7rem;

        span {
          .pa();
          left: .25rem;
          top: .1rem;
          .fs(.22rem, #fff);
          width: .3rem;
          height: .3rem;
          line-height: .3rem;
          text-align: center;
          background: linear-gradient(176deg, #FFBE71, #FF8429);
          border-radius: 100%;
        }
      }
    }
  }


  .dialog {
    overflow: auto;
    .pf();
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: rgba(0, 0, 0, .6);
    z-index: 9;
  }


  .form-container {
    width: 100%;
    overflow: hidden;

    .close {
      .pa();
      top: .3rem;
      right: .3rem;
      width: .5rem;
      height: .5rem;
      background: url("../../../images/close.png") no-repeat center;
      background-size: 100% auto;
      .transition();
    }

    .form {
      width: 80%;
      background: #fff;
      font-size: 0;

      li {
        border-bottom: 1px solid #f1f1f1;
        padding-left: .7rem;

        &.icon-server {
          background: url("../../../images/icon_server.png") no-repeat left center;
          background-size: .4rem auto;
        }

        &.icon-role {
          background: url("../../../images/icon_role.png") no-repeat left center;
          background-size: .4rem auto;
        }

        input, select {
          .fs(.4rem, #343434);
          margin: .1rem 0;
          width: 100%;
          background: none;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }

    .btn {
      display: block;
      width: 90%;
      height: .8rem;
      line-height: .8rem;
      text-align: center;
      margin: .4rem auto;
      .transition(.1s);
      &.btn-bind-role{
        margin: 1rem auto .1rem;
      }
      &.btn-small {
        font-size: .32rem;
      }

      &:active {
        box-shadow: 0 0 0;
      }
    }


    .toast-msg {
      text-align: center;
      padding: .3rem;
      .fs(.24rem, #646464)
    }
  }

  .form-container {
    .pr();
    min-height: auto;
    margin: 2rem auto 0;
    background: #fff;
    width: 86%;
    max-width: 540px;
    padding: 0;

    .form {
      margin: 0 auto;
      padding: 0;
      box-shadow: 0 0 0 #fff;
      border-radius: 0;
    }

    .btn {
      box-shadow: 0 0 0;
      width: 60%;
    }

    h3 {
      text-align: center;
      .fs(.42rem, #343434);
      font-weight: normal;
      padding: .6rem 0 .4rem;
    }
  }

  .selct-container {
    .select {
      width: 100%;
      height: 1rem;
      display: inline-block;
      vertical-align: middle;
      .fs(.3rem, #343434);
    }

    .select {
      .pr();

      span {
        display: block;
        line-height: 1rem;
        cursor: pointer;
        background: url("../../../images/icon_select.png") no-repeat 96% center;
        background-size: .3rem auto;
      }

      .select-option {
        .pa();
        left: -14%;
        top: 1rem;
        z-index: 1;
        .hide();
        border: 1px solid #f1f1f1;
        width: 113%;
        max-height: 2.4rem;
        overflow: auto;
        background: #fff;

        li {
          .lh(.6rem);
          cursor: pointer;
          padding-left: .2rem;

          &:last-child {
            border-bottom: 0;
          }

          &:hover {
            background: @baseColor;
            color: #fff;
          }
        }
      }
    }
  }
  .dialog-received-gift{
    .form-container{
      padding-bottom: .5rem;
    }
    .form{
      padding-top: .4rem;
    }
  }
  .red-color{
    color: #f00;
    font-size: .2rem;
    text-align: center;
    display: block;
  }
}

// message
.toast-item-wrapper {
  min-width: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  padding: .2rem;
  box-sizing: border-box;
  font-size: .3rem;
  color: #343434;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  background: #fff;

  &.toast-top-left {
    left: 20px;
    top: 20px;
  }

  &.toast-top-right {
    right: 20px;
    top: 20px;
  }

  &.toast-top-center {
    margin: 0 auto;
    top: 40%;
  }

  &.toast-bottom-left {
    left: 20px;
    bottom: 20px;
  }

  &.toast-bottom-right {
    right: 20px;
    bottom: 20px;
  }

  &.toast-bottom-center {
    margin: 0 auto;
    bottom: 20%;
  }

  p {
    margin: 0
  }

  .toast-message {
    font-size: .34rem;
    color: #343434;
    word-break: break-all;

    svg {
      display: inline-block;
      vertical-align: middle;
      margin-right: .1rem;
    }
  }

  &.success {
    .toast-message {
      svg {
        color: #0E9A00;
      }
    }
  }

  &.error {
    .toast-message {
      svg {
        color: #f00;
      }
    }
  }
}

.message-container {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, .65);
  font-size: .35rem;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  position: fixed;
  top: 40%;
  left: 0;
  z-index: 1010;
  width: 100%;
  pointer-events: none;
  text-align: center;
  .transition();

  .message-content {
    display: inline-block;
    padding: .25rem .35rem;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    pointer-events: all;

    i {
      vertical-align: middle;
      margin-right: .1rem;
    }

    &.success {
      i {
        color: #52c41a;;
      }
    }
  }
}

.keyframes(TransScale, {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.05);
  }
  100%{
    transform: scale(1);
  }
});
.m-img{
  width: 100%;
  display: block;
}
@media screen and ( min-width: 414px ) {
  .ald-container .sign-container .gift-award dl .gift-name7{
            padding: .3rem 0 0;
  }
}