@import 'press-ui/common/style/smoba/mixin.scss';

.press-entrance {
  width: vw(292);
  height: vw(72);
  display: flex;

  .press-entrance__swiper {
    position: relative;
    // animation: scaleAnimation 5s infinite ease-in-out;
    background-repeat: no-repeat;
    background-size: 100%;

    &::after {
      content: '';
      position: absolute;
      top: vw(5);
      left: vw(3.5);
      width: vw(37);
      height: vw(36.5);
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }

  .press-entrance__item {
    position: absolute;
    top: vw(6);
    left: 0;

    .press-award__img {
      transform: scale(.8);
      opacity: 0;
      transition: all 2.5s ease-in-out;
    }

    .press-award__name {
      opacity: 0;
      transition: all 2.5s ease-in-out;
    }

    &.press-entrance__item-show {
      .press-award__img {
        opacity: 1;
        transform: scale(1);
      }

      .press-award__name {
        opacity: 1;
      }
    }
  }

  &__long {
    width: vw(596);
    height: vw(72);
    margin-bottom: vw(8);

    .press-entrance__task {
      margin-right: vw(12);
      width: vw(292);
      height: vw(72);
      background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/task-entrance-bg-l.png) no-repeat;
      background-size: 100%;

      .press-task__award {
        margin-left: vw(30);
      }

      .press-task__btn {
        margin-right: vw(27);
      }
    }

    .press-entrance__signin {
      width: vw(292);
      height: vw(72);
      background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/signin-entrance-bg-l.png) no-repeat;
      background-size: 100%;

      .press-signin__award {
        margin-left: vw(30);
      }

      .press-signin__btn {
        margin-right: vw(27);
      }
    }
  }

  &__task {
    display: flex;
    justify-content: space-between;
    margin-right: vw(8);
    width: vw(142);
    height: vw(72);
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/task-entrance-bg.png) no-repeat;
    background-size: 100%;
  }

  .press-task__award {
    position: relative;
    width: vw(60);
    height: vw(64.5);
    padding-top: vw(9);
    margin: vw(2) 0 0 vw(5);
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/task-entrance.png) no-repeat;
    background-size: 100%;

    .press-entrance__swiper {
      width: vw(45);
      height: vw(53.5);
      margin-left: vw(8.5);
      padding-top: vw(6);
      background-image: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/task-entrance-card.png);

      &::after {
        background-image: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/task-entrance-line.png);
      }
    }

    &-img {
      width: vw(34);
      height: vw(34);
      margin-left: vw(6);
      border-radius: 0 vw(3) 0 0;
    }

    &-name {
      font-size: vw(5.5);
      color: #66573b;
      text-align: center;

      @include single-line-ellipsis;
      width: vw(38);
      max-width: vw(38);
      line-height: vw(10);
      margin-left: vw(4);
      letter-spacing: vw(-.4);
    }
  }

  .press-task__btn {
    margin-top: vw(48);
    width: vw(79.5);
    height: vw(28);
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/task-btn.png) no-repeat;
    background-size: 100%;
  }

  &__signin {
    display: flex;
    justify-content: space-between;
    width: vw(142);
    height: vw(72);
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/signin-entrance-bg.png) no-repeat;
    background-size: 100%;
  }

  .press-signin__award {
    position: relative;
    width: vw(60);
    height: vw(64.5);
    padding-top: vw(9);
    margin: vw(2) 0 0 vw(5);
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/signin-entrance.png) no-repeat;
    background-size: 100%;

    .press-entrance__swiper {
      width: vw(44.5);
      height: vw(53);
      margin-left: vw(9.2);
      padding-top: vw(6);
      background-image: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/signin-entrance-card.png);

      &::after {
        background-image: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/signin-entrance-line.png);
      }
    }

    &-img {
      width: vw(34);
      height: vw(34);
      margin-left: vw(6);
      border-radius: 0 vw(3) 0 0;
    }

    &-name {
      font-size: vw(5.5);
      color: #252276;
      text-align: center;

      @include single-line-ellipsis;
      width: vw(38);
      max-width: vw(38);
      line-height: vw(10);
      margin-left: vw(4);
      letter-spacing: vw(-.4);
    }
  }

  .press-signin__btn {
    margin-top: vw(48);
    width: vw(75);
    height: vw(28);
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/signin-btn.png) no-repeat;
    background-size: 100%;
  }

  .press-red-dot {
    position: relative;

    &:after {
      position: absolute;
      right: .14rem;
      top: 0;
      content: '';
      width: .2rem;
      height: .2rem;
      background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/red-dot.png) no-repeat center center;
      background-size: contain;
    }
  }
}