@import "../../../style/index.less";

.font-public() {
  font-size: 12px;
  color: #666666;
  font-weight: 400;
  line-height: 17px;
}

.activity {
  padding-bottom: 44px;
  background: url('../../../assets/images/home/bg@2x.png') no-repeat 0 0 /cover;

  &:before {
    z-index: 1;
    position: absolute;
    top: 22px;
    left: 0;
    width: 100px;
    height: 32px;
    content: '';
    background: url('../../../assets/logo-top.png') no-repeat 0 0 /cover;
  }

  &-detail {
    position: absolute;
    top: 29px;
    right: 15px;
    z-index: 1;
    display: flex;
    align-items: center;

    &-text {
      margin-right: 4px;
      font-size: 11px;
      color: #FFFFFF;
      line-height: 13px;
    }

    &-svg {
      padding-top: 2px;
      width: 8px;
      height: 8px;
    }
  }

  &-title {
    margin-top: 67px;
    padding: 0 26px;
  }

  &-desc {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 13px;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: 600;
    line-height: 17px;

    span {
      color: #F94C4C;
    }
  }

  &-prize {
    margin: 20px 7px;
    width: 362px;
    height: 362px;
    background: url('../../../assets/images/home/zhuanpan.png') no-repeat 0 0 /contain;

    &-pointer {
      transform: none;
      width: 100%;
      height: 100%;
      // width: 82px;
      // height: 100px;
      background: url('../../../assets/images/home/zhizhen.png') no-repeat center/82px 100px;

    }
  }

  &-award {
    margin: 29px 40px 40px;
    padding: 10px;
    height: 345px;
    background: linear-gradient(123deg, #FFFDFD 0%, #FFF7AF 100%);
    border-radius: 14px;

    &-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100%;
      background: #fff;

      .Aa-container-congratulate {
        margin: 32px 0 8px;
        font-size: 24px;
        color: #F94C4C;
        font-weight: 600;
        line-height: 33px;
      }

      .Aa-container-public {
        .font-public();
      }

      .Aa-container-progress {
        .font-public();
        color: #F94C4C;
      }

      .Aa-container-qrcode {
        margin: 18px 0 16px;
        width: 140px;
        height: 140px;
      }

      .Aa-container-focus {
        font-size: 11px;
        color: #999999;
        line-height: 13px;
      }
    }
  }

  &-swiper {

    margin: 0 38px;
    height: 26px;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: 600;
    line-height: 17px;
    background: url('../../../assets/images/home/zhognjiangxinxi.png') no-repeat 0 0 /contain;

    &-container {
      height: 100%;
      width: 100%;

      @{deep} .cr-swipe-item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 26px !important;

        p:first-child {
          margin-right: 10px;
        }

        span {
          color: #F94C4C;
        }
      }
    }
  }

  &-button {
    display: flex;
    justify-content: center;
    margin: 26px 21px 0;
    padding-top: 18px;
    height: 75px;
    font-size: 20px;
    color: #B94A00;
    font-weight: 600;
    line-height: 28px;
    background: url('../../../assets/images/home/button.png') no-repeat 0 0 /contain;
    -webkit-animation: free_download .8s linear alternate infinite;
    animation: free_download .8s linear alternate infinite;
  }

  &-withdrawal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 20px 24px;
    height: 139px;
    background: url('../../../assets/images/home/jiangpin.png') no-repeat 0 0 /contain;

    p:first-child {
      font-size: 14px;
      color: #333333;
      line-height: 17px;
    }

    p:last-child {
      font-size: 32px;
      color: #FF6702;
      font-weight: 600;
      line-height: 45px;
    }
  }

  &-vote {
    margin: 0 20px 24px;
    padding: 20px 16px;
    background: url('../../../assets/images/home/baoxianbg.png') no-repeat center / 100% 100%;

    &-title {
      font-size: 16px;
      color: #FFFFFF;
      font-weight: 600;
      line-height: 22px;
    }

    &-desc {
      font-size: 12px;
      color: #FFFFFF;
      font-weight: 400;
      line-height: 17px;

      span {
        color: #FFC842;
      }
    }

    &-body {
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 16px;
      background: #FFFFFF;
      border-radius: 14px;

      .Av-body-left {
        display: flex;
        align-items: center;

        .Avb-left-image {
          margin-right: 12px;
          width: 32px;
          height: 32px;
        }

        .Avb-left-text {
          color: #242629;
          font-weight: 600;
          line-height: 17px;

          p:first-child {
            font-size: 12px;
          }

          p:last-child {
            font-size: 17px;
          }
        }
      }

      .Av-body-right {
        width: 76px;
        height: 36px;
        background: #FFC842 !important;
        border-radius: 8px !important;
        font-size: 12px;
        color: #333333 !important;
        font-weight: 600;
        line-height: 17px;
      }
    }
  }

  &-intro {
    margin: 24px 20px 0;
    padding: 20px;
    background: rgba(0, 0, 0, .1);
    border-radius: 14px;
    font-size: 11px;
    color: rgba(255, 255, 255, .7);
    font-weight: 400;
    line-height: 16px;

    p:first-child {
      margin-bottom: 15px;
      font-size: 16px;
      color: #FFFFFF;
      font-weight: 600;
      line-height: 22px;
    }
  }
}