dw_lotter_draw/pages/award-detail/award-detail.wxss

@import '../../lib/wxParse/wxParse.wxss';

button{
  outline: none;
  border: none;
}
button::after{
  border: none;
}

.award-detail {
  padding-bottom: 100rpx;
}

.banner-wrapper{
  width: calc(100% - 50rpx);
  margin: 0 auto;
  border-radius: 25rpx;
  box-shadow:  0 4px 8px 0 rgba(0,0,0,0.1), 0 6px 20px 0 rgba(0,0,0,0.09);
  overflow: hidden;
  margin-bottom: 30rpx;
}

.swiper{
  border-radius: 25rpx 25rpx 0 0;
  overflow: hidden;
  height: 394rpx;
}

.swiper-image{
  width: 100%;
  height: 100%;
}

.preview-list{
  width: calc(100% - 20rpx);
  margin: 0 auto;
  height: 80rpx;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  padding-top: 10rpx;
}

.preview-item{
  width: 120rpx;
  height: 60rpx;
  margin-right: 10rpx;
  border-radius: 15rpx;
}
.preview-item:last-child{
  margin-right: 0rpx;
}

.wrapper-mid{
  position: relative;
  box-sizing: border-box;
  margin: 10rpx 30rpx 20rpx 30rpx;
  border-bottom: 1rpx solid #ddd;
  padding-bottom: 20rpx;
}

.wrapper-mid button.download{
  position: absolute;
  width: 80rpx;
  height: 80rpx;
  background-color: #2d8cf0;
  right: 10rpx;
  top: 25rpx;
  color: #fff;
  padding: 0;
  font-size: 28rpx;
  border-radius: 50%;
  outline: none;
  border: 10rpx solid #c7e6fa;
  box-sizing: content-box;  
  line-height: 80rpx;
  text-align: center;
}

.award-title, .award-quota, .award-time{
  display: block;
  margin-top: 6rpx;
  line-height: 2;
}
.award-quota, .award-time{
  font-size: 26rpx;
  color: #999;
  line-height: 1.7
}

.wrapper-bottom{
  box-sizing: border-box;
  margin: 0rpx 30rpx 20rpx 30rpx;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #999;
}
.award-sponsor{
  flex: 1;
}
.sponsor{
  display: flex;
  align-items: center;
}
.sponsor image{
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}

.award-article{
  box-shadow:  0 4px 8px 0 rgba(0,0,0,0.1), 0 6px 20px 0 rgba(0,0,0,0.09);
  border-top: 1rpx solid #eee;
  box-sizing: border-box;
  padding: 10rpx 25rpx;
  margin-bottom: 30rpx;
  position: relative;
  padding-bottom: 80rpx;
  transition: all ease 1s;
  height: auto;
}
.award-article image{
  width: 100% !important;
}
.award-article.fold{
  height: 500rpx;
  overflow: hidden;
}

.award-article view{
  word-break:break-all; overflow:auto;
}

button.fold{
  border: none;
  outline: none;
  background: transparent;
  font-size: 31rpx;
  color: #64a8d1;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  width: 100%;
}
button.fold::after{
  border: none;
}

.hide{
  display: none;
}

.public-platform{
  margin-top: 30rpx;
  box-sizing: border-box;
  box-shadow:  0 4px 8px 0 rgba(0,0,0,0.1), 0 6px 20px 0 rgba(0,0,0,0.09);
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: center;
  height: 130rpx;
  padding-left: 15rpx;
}

.public-platform image{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 30rpx;
}

.public-platform .info{
  display: flex;
  flex-direction: column;
  font-size: 30rpx;
  flex: 1;
}
.public-platform .info view.name{
  font-weight: bolder;
  margin-bottom: 10rpx;
}

.public-platform .info view:last-child{
  font-size: 22rpx;
  color: #999;
}

.steps{
  margin-top: 80rpx;
  margin-bottom: 50rpx;
}

.btn-draw, .btn-invite{
  width: 200rpx;
  height: 200rpx;
  line-height: 200rpx;
  text-align: center;

  border-radius: 50%;
  text-align: center;
  color: #fff;
  font-size: 30rpx;
  position: relative;
  box-sizing: content-box;
  padding: 0;
}
.btn-draw{
  background-color: #2d8cf0;
}
.btn-invite{
  background-color: #19be6b;
}
.btn-wrapper{
  position: relative;
}

.aniamte-ring{
  position: absolute;
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  left: calc(50% - 100rpx);
  top: calc(50% - 100rpx);
  animation:  scale 3s ease infinite;
  z-index: -1;
}

.aniamte-ring.draw{
  background-color: rgba(45, 140, 240, 0.3);
}
.aniamte-ring.invite{
  background-color: rgba(25, 190, 107, 0.3);
}

@keyframes scale{
  0%{transform: scale(1)}
  50% {transform: scale(1.2)}
  100%{transform: scale(1)}
}

.my-code{
  margin-top: 50rpx;
}

.award-code, .winner-code{
  font-size: 40rpx;
  font-weight: bolder;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Courier New", Courier, monospace;
}

.invited-users{
  box-shadow:  0 4px 8px 0 rgba(0,0,0,0.1), 0 6px 20px 0 rgba(0,0,0,0.09);
  border-top: 1rpx solid #eee;
  box-sizing: border-box;
  padding: 10rpx 25rpx;
}
.invited-users view.title, .results view.title{
  font-size: 28rpx;
  font-weight: bolder;
  margin-bottom: 15rpx;
}
.invited-list{
  white-space: nowrap;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.invited-users .avatar{
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

.results{
  box-shadow:  0 4px 8px 0 rgba(0,0,0,0.1), 0 6px 20px 0 rgba(0,0,0,0.09);
  border-top: 1rpx solid #eee;
  margin-top: 30rpx;
  box-sizing: border-box;
  padding: 10rpx 25rpx;
}
.results .winner{
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  border-bottom: 1rpx solid #eee;
  padding-bottom: 10rpx;
}

.results .winner:last-child{
  margin-bottom: 0;
}

.results .winner:nth-child(2){
  border-top: 1rpx solid #eee;
  padding-top: 10rpx;
}

.results .winner image{
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
}

.all-users{
  box-shadow:  0 4px 8px 0 rgba(0,0,0,0.1), 0 6px 20px 0 rgba(0,0,0,0.09);
  border-top: 1rpx solid #eee;
  box-sizing: border-box;
  padding: 15rpx 25rpx;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.all-users .count{
  font-size: 28rpx;
  text-align: center;
  color: #aaa;
}

.all-users .count .see-all{
  color: #64a8d1;
}

.all-users .users-list{
  margin: 25rpx auto 25rpx auto;
  width: 544rpx;
}

.all-users .users-list .avatar{
  margin-left: 5rpx;
  margin-bottom: 5rpx;
}

.all-users .view-count{
  display: flex;
  justify-content: space-between;
  width: 544rpx;
  margin: 0 auto;
}

.all-users .view-count view{
  font-size: 24rpx;
  color: #aaa;
}
.all-users .view-count view:last-child{
  text-decoration: underline;
}

.winner-code{
  font-size: 40rpx;
  font-weight: bolder;
}