Starboth-Cloud-H5/static/microserviceUserH5/static/css/awardActivity.css

@media screen and (max-width: 750px) {
  html {
    font-size: calc(100vw / 7.5);
  }
}

@media screen and (min-width: 750px) {
  html {
    font-size: calc(450px / 7.5);
  }
}

html, body, div, ul, li, p {
  padding: 0;
  margin: 0;
}

ul, li {
  list-style: none;
}

.container{
  position: relative;
}

.all-bg-wrap{
  width: 7.5rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.all-bg-img{
  width: 100%;
}

.rule-wrap{
  position: absolute;
  top: 0.6rem;
  right: 0;
  width: 0.44rem;
  height: 1.22rem;
  line-height: 0.28rem;
  text-align: center;
  padding-top: 0.1rem;
  background: #FFFFFF;
  opacity: 0.5;
  border-radius: 0.16rem 0 0 0.16rem;
  font-size: 0.24rem;
  font-weight: 600;
  color: #5C96FF;
}

.time-position{
  height: 1.73rem;
}

.time-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.92rem;
  height: 0.54rem;
  margin: 0 auto;
  border-image: linear-gradient(0deg, #A9CFFD, #97C8FF, #ABEFF2) 10 10;
  background: linear-gradient(90deg, #8FB5FB 0%, #61AAF9 49%, #59C8DD 100%);
  border-radius: 0.26rem;
  font-size: 0.24rem;
  font-weight: 800;
  color: #FFFFFF;
}


.top-container{
  display: flex;
  justify-content: center;
  position: relative;
}

.top-bg-one{
  width: 7.12rem;
  height: 8.44rem;
  margin-top: 0.32rem;
  display: none;
}

.top-bg-two{
  width: 7.12rem;
  height: 7.34rem;
  margin-top: 0.32rem;
}

.get-award-container{
  position: absolute;
  top: 1.2rem;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5.84rem;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  border-radius: 0.3rem;
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFF8E5;
  overflow: hidden;
}

.award-lists{
  width: 5.84rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 6rem;
}

.award-text{
  font-size: 0.24rem;
  color: #ffffff;
}

.all-award-wrap{
  width: 6.2rem;
  position: absolute;
  top: 2.36rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  margin-left: 0.12rem;
}

.curr-award-item{
  width: 1.32rem;
  height: 1.44rem;
  background: #FDFCFA;
  border-radius: 0.08rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 0.12rem;
  margin-bottom: 0.12rem;
}

.award-img{
  width: 1.08rem;
  height: 0.88rem;
  background: #FFE3B7;
  border-radius: 0.08rem;
}

.curr-award-name{
  margin-top: 0.12rem;
  font-size: 0.2rem;
  color: #E4402F;
}

.curr-award-id{
  display: none;
}

.curr-award-item-one{
  width: 1.78rem;
  height: 1.78rem;
  margin-left: 0.16rem;
}

.curr-award-img-one{
  width: 1.46rem;
  height: 1.08rem;
}

.rest-wrap{
  width: 7.5rem;
  /* min-height: 66vh; */
  margin: 0 auto;
  margin-top: -0.04rem;
  padding-bottom: 1.56rem;
  background-image: url('../img/awardActivity/rest-bg.png');
  background-repeat: repeat-y;
  background-size: cover;
  position: relative;
}

.award-btn-wrap{
  width: 5rem;
  height: 1.58rem;
  margin: 0 auto;
  padding-top: 0.34rem;
}

.start-award{
  width: 100%;
  height: 100%;
}

.get-time-wrap{
  display: flex;
  justify-content: space-between;
  margin: 0 0.56rem;
  margin-top: 1.2rem;
}

.rest-time{
  font-size: 0.28rem;
  color: #F9F0D4;
}

.get-time-btn{
  margin-right: 0.1rem;
  font-size: 0.32rem;
  font-weight: 600;
  color: #DC0622;
}

.tab-wrap{
  width: 6.82rem;
  height: 5.75rem;
  margin: 0 auto;
  margin-top: 0.6rem;
  position: relative;
}

.tab-bg1{
  width: 100%;
  height: 100%;
}

.tab-bg2{
  width: 100%;
  height: 100%;
  display: none;
}

.tab-bg3{
  width: 100%;
  height: 100%;
  display: none;
}

.tab-bg4{
  width: 100%;
  height: 100%;
  display: none;
}

.no-award-data{
  width: 3.65rem;
  height: 1.67rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.no-award-img{
  width: 100%;
  height: 100%;
  margin-left: 0.2rem;
}

.no-award-text{
  width: 4rem;
  font-size: 0.28rem;
  color: #999999;
}

.no-distribution-data{
  width: 3.65rem;
  height: 1.67rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: none;
}

.no-distribution-img{
  width: 1.76rem;
  height: 1.68rem;
}

.no-distribution-text{
  width: 4rem;
  font-size: 0.28rem;
  color: #999999;
}

.award-title-wrap{
  width: 100%;
  display: flex;
  position: absolute;
  top: 0.3rem;
  font-size: 0.32rem;
  font-weight: 500;
  color: #010101;
  opacity: 0.5;
}

.award-title{
  flex: 1;
  text-align: center;
}

.active-title{
  font-weight: 600;
  opacity: 1;
}

.award-list{
  position: absolute;
  top: 1.3rem;
}

.award-list-title-wrap{
  width: 6.22rem;
  padding-left: 0.6rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.28rem;
  color: #333333;
  border-bottom: 0.02rem solid #F4EDDC;
  padding-bottom: 0.23rem;
}

.red{
  color: #FF482E;
}

.distribution-total-wrap{
  width: 100%;
  padding: 0.46rem 0;
  font-size: 0.24rem;
  color: #999999;
  display: flex;
  justify-content: center;
}

.award-total-data:not(:first-child){
  margin: 0 0.06rem;
  padding-left: 0.06rem;
  border-left: 0.01rem solid rgba(135,135,135,1);
}

.award-list-title, .award-list-content{
  flex: 1;
}

.award-list-wrap{
  margin-top: 0.32rem;
  height: 3.48rem;
  overflow-y: scroll;
}

.distribution-container{
  height: 5.28rem;
  overflow-y: scroll;
}

.award-list-item{
  width: 6.02rem;
  padding-left: 0.6rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.28rem;
  color: #333333;
  margin-bottom: 0.34rem;
}

.distribution-list-wrap{
  width: 100%;
  position: absolute;
  top: 1rem;
  display: none;
}

.distribution-list{
  background: rgba(255,255,255,1);
  margin: 0 0.1rem;
  padding-bottom: 0.42rem;
}

.distribution-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.38rem;
}

.distribution-main-content{
  display: flex;
  align-items: center;
}

.phone-logo{
  width: 0.74rem;
  height: 0.74rem;
  margin-left: 0.46rem;
}

.distribution-info{
  margin-left: 0.14rem;
}

.distribution-name{
  font-size: 0.32rem;
  font-weight: 500;
  color: #000000;
}

.distribution-time{
  margin-top: 0.22rem;
  font-size: 0.22rem;
  color: #9E9693;
}

.change-num-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1.84rem;
  height: 0.56rem;
  background: #FFFFFF;
  border: 0.01rem solid #DDDDDD;
  border-radius: 0.1rem;
  margin-right: 0.46rem;
}

.cut, .add{
  width: 0.56rem;
  height: 0.56rem;
  text-align: center;
  font-size: 0.32rem;
  color: #999999;
}

.cut{
  border-right: 0.01rem solid #DDDDDD;
}

.add{
  border-left: 0.01rem solid #DDDDDD;
}

.num-ipt{
  width: 0.36rem;
  height: 0.38rem;
  margin: 0 0.1rem;
  border-radius: 0.04rem;
  text-align: center;
  border: none;
}

input:focus{ 
  outline:none; 
}

.distribution-award-btn{
  width: 5.7rem;
  height: 0.88rem;
  line-height: 0.88rem;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(90deg, #FFDD71 0%, #FEC047 100%);
  border-radius: 0.44rem;
  font-size: 0.36rem;
  font-weight: bold;
  color: #DC0622;
}

.award-record-list{
  min-height: 5.6rem;
  padding: 0 0.56rem;
  margin: 0 0.1rem;
  margin-top: 0.24rem;
  background: rgba(255,255,255,1);
  border-radius: 0.16rem;
  display: none;
}

.record-list-title{
  width: 3.71rem;
  height: 0.72rem;
  line-height: 0.72rem;
  text-align: center;
  margin: 0 auto;
  background: #FEDFB3;
  border-radius: 0 0 0.24rem 0.24rem;
  font-size: 0.32rem;
  font-weight: 500;
  color: #7D271A;
}

.award-record-list-title-wrap{
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 0.32rem;
  font-weight: 500;
  color: #010101;
  opacity: 0.5;
  margin-top: 0.3rem;
}

.award-record-list-wrap{
  margin-top: 0.3rem;
  height: 3.48rem;
  overflow-y: scroll;
}

.award-record-list-item{
  display: flex;
  font-size: 0.28rem;
  color: #666666;
  padding-bottom: 0.4rem;
}

.award-record-list-name{
  min-width: 1.5rem;
}

.award-record-list-day{
  min-width: 0.6rem;
  text-align: right;
}

.result-mask,.rule-mask{
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}

.result-dialog,.rule-result-dialog{
  width: 5.86rem;
  height: 6.49rem;
  background: linear-gradient(0deg, #FFFFFF 74%, #FFEDEE 100%);
  border-radius: 0.32rem;
  position: absolute;
  left: 50%;
  top: -10.86rem;
  transform: translateX(-50%);
}

.rule-title-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
}

.rule-title-icon{
  width: 0.56rem;
  height: 0.08rem;
  background: linear-gradient(90deg, #FFE2E0 0%, #FFF4F4 100%);
}

.rule-title{
  margin: 0 0.2rem;
  text-align: center;
  font-size: 0.36rem;
  font-weight: bold;
  color: #333333;
}

.rule-content{
  width: 5.86rem;
  padding: 0.2rem 0;
  border-radius: 0.1rem;
  position: absolute;
  top: 0.2rem;
}

.rule-point-wrap{
  height: 4.9rem;
  margin: 0 0.4rem;
  margin-top: 0.34rem;
  font-size: 0.28rem;
  line-height: 0.4rem;
  overflow-y: scroll;
}

.rule-point{
  margin: 0 0.3rem;
  font-size: 0.24rem;
  line-height: 0.48rem;
}

.card-close,.rule-close{
  width: 0.68rem;
  height: 0.68rem;
  position: absolute;
  left: 50%;
  bottom: -1rem;
  transform: translateX(-50%);
}

.sure-distribution-wrap{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.24);
  z-index: 999;
  display: none;
}
.sure-distribution-box{
  width: 6.22rem;
  height: 2.28rem;
  background: #FFFFFF;
  border-radius: 0.2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.sure-distribution-title{
  text-align: center;
  padding: 0.48rem;
  font-size: 0.32rem;
        color: #333333;
}
.sure-distribution-btn-list{
  width: 100%;
  height: 0.86rem;
  display: flex;
  justify-content: space-between;
  border-top: 0.01rem solid #E5E5E5;
  font-size: 0.28rem;
}
.sure-distribution-btn{
  height: 0.86rem;
  line-height: 0.86rem;
  text-align: center;
  flex: 1;
}
.sure-distribution-sure{
  border-left: 0.01rem solid #b4bbc5;
  color: #3B7FFF;
}
.sure-distribution-cannel:active{
  background-color: #E5E5E5;
  border-bottom-left-radius: 0.2rem;
}
.sure-distribution-sure:active{
  background-color: #E5E5E5;
  border-bottom-right-radius: 0.2rem;
}

.result-title-wrap{
  margin-top: 0.5rem;
}

.main-contain{
  margin-top: 0.48rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-img{
  width: 1.52rem;
  height: 1.52rem;
  background: #FFF0DB;
  border-radius: 0.24rem;
}

.card-title{
  margin-top: 0.24rem;
  font-size: 0.32rem;
  color: #333333;
}

.card-tips{
  margin-top: 0.14rem;
  font-size: 0.24rem;
  color: #888888;
}

.card-btn{
  width: 4rem;
  height: 0.96rem;
  line-height: 0.96rem;
  text-align: center;
  margin-top: 0.56rem;
  background: linear-gradient(90deg, #FF0200 0%, #FF7900 100%);
  border-radius: 0.48rem;
  font-size: 0.32rem;
  color: #FFFFFF;
}

.card-rest-times{
  margin-top: 0.26rem;
  font-size: 0.24rem;
  color: #B5B5B5;
}

#toast-container>.toast-error {
  background-image: none !important;
}

.toast-error {
  background-color: rgba(0, 0, 0, 0.8);
}

#toast-container>div {
  font-size: 14px;
  min-width: 80px !important;
  padding: 12px !important;
  box-shadow: none;
}

.toast-center-center {
  position: fixed;
  min-width: 220px;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translateX(-50%);
  color: #FFFFFF;
  border-radius: 0.1rem;
}

@media (max-width: 480px) and (min-width: 241px) {
  #toast-container>div {
    min-width: 80px !important;
    width: auto;
  }
}