site_8g/src/components/Box/WheelModal.module.scss

.cashMain{
  &.type1{
    padding: .08rem .23rem .02rem;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: .2rem;
    .haveCash {
      font-size: .3rem;
      color: #fb8b05;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      width: 100%
    }
    .needCash {
      color: #fff;
      text-align: center
    }

    .needCashNum {
      color: #fb8b05
    }
  }



  .progress {
    width: 100%;
    margin: .11rem 0 .07rem;
    position: relative;
    .num {
      position: absolute;
      right: 0;
      top: -.18rem;
      color: #fff
    }
    .bar {
      width: 100%;
      height: .08rem;
      background: #6ddf39;
      border-radius: .1rem;
      position: relative;
      span {
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        height: .08rem;
        background: #6ddf39;
        border-radius: .08rem;
        &:after {
          content: "";
          display: inline-block;
          width: .08rem;
          position: absolute;
          height: .08rem;
          border-radius: 50%;
          background-color: #fff;
          right: 0
        }
      }
    }
  }



  .haveCash {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .3rem;
    font-family: Roboto;
    font-weight: 700;
    margin: .06rem 0;
    width: -webkit-calc(100% + .2rem);
    width: calc(100% + .2rem);
    white-space: nowrap;
    .currency {
      text-transform: uppercase
    }
    .cashImg {
      width: .5rem
    }
    .cash {
      //width: .52rem;
      //font-weight: 700;
      //margin-right: .12rem
    }

  }

  .noWithdraw,.haveCash {
    color: #fff;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }

  .needCash {
    height: .22rem;
    border-radius: .14rem;
    font-size: .13rem;
    color: #fff;
    line-height: .22rem;
    margin-bottom: .05rem;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
  }

  .needCashNum {
    font-family: "SWISSC-BT";
    margin: 0 .03rem
  }

  .withdraw {
    width: .65rem;
    height: .2rem;
    padding: .02rem .06rem;
    background: #efb423 -webkit-gradient(linear,left top,right top,from(#49a319),to(#2b8b2f));
    background: #efb423 -webkit-linear-gradient(left,#49a319,#2b8b2f);
    background: #efb423 -o-linear-gradient(left,#49a319 0,#2b8b2f 100%);
    background: #efb423 linear-gradient(90deg,#49a319,#2b8b2f);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .12rem;
    font-family: Roboto;
    font-weight: 700;
    color: #fff;
    border-radius: .1rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    img {
      width: .14rem;
      margin-right: .03rem
    }
  }

  &.button {
      width: 100%;
      height: 0.3472rem;
      background: #6ddf38;
      color: #fff;
      border-radius: 0.0694rem;
    }
}


.winList {
  height: 100%;
  animation: smoothscroll 12.6s linear infinite;
  .item {


    height: .3rem!important;
    font-size: .12rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #8795b1;
    background-color: transparent;
    padding: 0 .05rem;
    .name{
      color: #8795b1;
      display: block;
      width: 1rem
    }
    .tipText {
      color: #8795b1;
      min-width: 1.1rem
    }
    .value {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
      width: .55rem;
      img {
        width: .24rem
      }
    }
    .addCash{
      color: #6ddf39;
      width: .33rem
    }
    .unit {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      font-family: SWISSC-BT;
      color: #fff;
      font-size: .1rem;
      height: .16rem;
      width: .16rem;
      background: #6ddf39;
      border-radius: 50%;
      margin-left: .02rem
    }
  }

  &.type1{
    .item {
      border-radius: 0;
      &:last-child {
        border-bottom: none
      }
    }
  }
}


@keyframes smoothscroll {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-6.14rem);
  }
}