/* pages/cloud_currency_center/cloud_currency_center.wxss */
page{
  width: 100vw;
  height: 100vh;
}
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
  }
.header{
  width: 100%;
  height: 408rpx;
  position: relative;
  background: #3476FE;
  color: white;

  display: flex;
  flex-direction: column;
  align-items: center;

}

.centre {
  width: 226rpx;
  height: 226rpx;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.header .centre>text:nth-of-type(1){
  font-size: 60rpx;
}

.header .centre>text:nth-of-type(2){
  font-size: 26rpx;
}

.centre image{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.header .rule{
  width: 150rpx;
  height: 50rpx;
  border-radius: 30rpx 0 0 30rpx;
  background: white;
  font-size: 22rpx;
  color: #3476FE;

  position: absolute;
  top: 40rpx;
  right: 0;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.header .rule image{
  width: 13rpx;
  height: 13rpx;
}

.container{
  width: 100%;
  box-sizing: border-box;
  padding: 0 30rpx;
  position: relative;
  top: -78rpx;
}

.container .middle{
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 20rpx;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.09);

  display: flex;
  align-items: center;
  justify-content: center;
}

.container .middle view{
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  padding: 20rpx 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  font-size: 28rpx;
}

.container .middle view image{
  width: 72rpx;
  height: 72rpx;
  margin-bottom: 8rpx;

}

.cloud_active text{
  color: #3476FE;
  font-weight: 500;
}

.footer{
  width: 100%;
  border-radius: 12rpx;
  padding-top: 2rpx;
  box-sizing: border-box;
  margin-top: 28rpx;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.09);
  background: white;
  overflow: hidden;
}

/* 云币充值 */
.cloud_recharge {
  padding: 20rpx;
  box-sizing: border-box;
}

.cloud_recharge .recharge_grid{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
}

.recharge_grid .grid{
  width: calc((100% / 3) - 24rpx);
  height: 140rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ECF6FE;
  margin-bottom: 20rpx;
  font-size: 24rpx;
  color: #888888;
  border-radius: 8rpx;
  margin-left: 24rpx;
  position: relative;
}
.recharge_grid .grid text:nth-child(1){
  font-size: 42rpx;
  color: #3476FE;
  font-weight: 600;
}

.recharge_grid text:nth-child(1)::after{
  display: inline-block;
  content: '元';
  font-size: 34rpx;
  font-weight: 400;
}
.recharge_grid .giving{
  position: absolute;
  width: 100%;
  top: 0;
  font-size: 20rpx;
  color: #ffc000;
  text-align: center;
  /* transform: translateX(50%); */
}
.container .recharge_grid .active_grid{
  background: #3476FE;
  color: white;
}

.recharge_grid .active_grid text:nth-child(1){
  font-size: 44rpx;
  color: white;
}

.recharge{
  width: 100%;
  height: 88rpx;
  background: #3476FE;
  border-radius: 10rpx;
  margin-top: 20rpx;
  font-size: 30rpx;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prompt{
  width: 86vw;
  display: flex;
  align-items: center;
  margin: 10rpx 0;
}
.prompt image{  
  width: 52rpx;
  height: 52rpx;
  margin: 0 20rpx;
}
.prompt .prompt_text{
  color: #eb2330;
  font-size: 28rpx;
}
/* 优惠卡 */

.vip_card{
  color: white;
  width: 100%;
  padding-top: 2rpx;
  margin-top: 28rpx;
  background: white;
}
.vip_card_item{
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  justify-content: space-between;
}
.vip_card_item_left{
  
}
.vip_card_item_left view{
  margin-bottom: 10rpx;
}
.vip_card_item_right{
  font-size: 66rpx;
}

/* 云币账单 */
.bill_type{
  width: 630rpx;
  height: 64rpx;
  background: #F9F9F9;
  border-radius: 32rpx;
  margin: 30rpx auto 30rpx;
}

.bill_type text{
  display: inline-block;
  width: calc(100%/3);
  height: 100%;
  border-radius: 28rpx;
  color: #999999;
  font-size: 26rpx;
  line-height: 64rpx;
  text-align: center;
}

.bill_type .active{
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12);
color: #3476FE;
}

.bill_record{
  width: 100%;
  box-sizing: border-box;
  padding: 0 32rpx 0;
  
}

.bill_record scroll-view{
  width: 100%;
  height: 100%;
  background: white;
}



.bill_record_item .month_time{
  color: #333333;
  font-size: 26rpx;
  margin-top: 34rpx;
}
.bill_record_item .headline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30rpx 0 10rpx;
}
.bill_record_item .time{
  color: #999999;
  font-size: 22rpx;
  border-bottom: 2rpx solid #eeeeee;
  padding-bottom: 30rpx; 

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bill_record_item .time .go_detail::after{
  content: '＞';
  width: 10rpx;
  height: 10rpx;
  margin-left: 2rpx;
}

.invite{
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 12rpx;
  background: #fafafa;
}

.invite_item{
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 12rpx;
  margin-bottom: 40rpx;
  background: white;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12);

}

.invite_item_title{
  line-height: 80rpx;
  text-align: center;
  font-size: 36rpx;
  height: 80rpx;
}

.invite .invite_item_clause{
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 26rpx;
}

.invite_item_clause text{
  margin-bottom: 10rpx;
}
.invite .invite_share{
  width: 550rpx;
  height: 74rpx;
  background: #3476FE;
  border-radius: 44rpx;
  margin: 40rpx auto 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.invite_share button{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  line-height: 74rpx;
  color: white;
  background: transparent;
}

.invite_share button::after{
  border: 0;
}

.invite .invite_share text{
  font-size: 34rpx;
  color: #fff;
}

.no_data{
  width: 100%;
  height: 400rpx;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999999;
}

.no_data image{
  width: 300rpx;
  height: 240rpx;
  margin-bottom: 40rpx;
}

.header  .cloud_num{
  font-size: 28rpx;
  margin-bottom: 20rpx;
}

.header  .cloud_num text:nth-child(2){
  margin-left: 20rpx;
}


.image_mask{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.image_mask image{
  width: 608rpx;
  height: 864rpx;
}

.image_mask text{
  width: 608rpx;
  height: 76rpx;
  background: #3476FE;
  color: white;
  font-size: 28rpx;
  border-radius: 8rpx;
  line-height: 76rpx;
  text-align: center;
  margin-top: 50rpx;
}