.time-box{
  position: fixed;
  right: 0;
  bottom: 50%;
  border-radius: 20rpx;
}
.time-view{
  width: 125rpx;
  height: 96rpx;
  background: url('data:image/png;base64,[encoded data, 28292 characters]') no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: 90rpx;
}
.time-view .receive-coin{
  width: 40%;
  margin-left: 18rpx;
  vertical-align: middle;
}
.time-view .time{
  color: #fff;
  /* margin-right: -18rpx; */
  padding-left: 18rpx;
  font-weight: 700;
  font-size: 34rpx;
}
.progress-box{
  height: 30rpx;
  background: rgba(247, 164, 171, .5);
  margin-top: -15rpx;
  border-radius: 15rpx;
  overflow: hidden;
}
.progress-box .pro-line{
  background: url('data:image/png;base64,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') no-repeat;
  height: 100%;
  background-size: 160rpx;
  overflow: hidden;
  border-radius: 15rpx;
  box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(255,255,255,.75) inset;
  transition: width 1s linear;
}
.progress-box .pro-line .pro-line-bg{
  margin: 15rpx;
  box-shadow: 0rpx 0rpx 8rpx 6rpx rgba(255,255,255,.7);
}
.tip{
  position: absolute;
  top: -50rpx;
  width: 80%;
  text-align: center;
  background: rgba(247, 164, 171, 1);
  color: #ee3a43;
  border-radius: 20rpx;
  font-size: 28rpx;
  margin: 0 auto;
  left: 20rpx;
  right: 0;
}
.tip .tip-arrow{
  width: 15rpx;
  height: 16rpx;
  background: rgba(247, 164, 171, 1);
  transform: rotate(45deg);
  position: absolute;
  bottom: -6rpx;
  left: 0;
  right: 0;
  margin: auto;
}