/* parents//pages/growth_track/growth_track.wxss */
@import '../../../templates/footer/footer.wxss';
@import '../../../templates/nodata/nodata.wxss';
@import '../../../templates/loading/loading.wxss';
page{
  background: #fff;
}
.li{
  margin: 0 40rpx 98rpx 40rpx;
  padding: 0;
}
.li-img{
  height: 205rpx;
  width: 100%;
  margin: 40rpx 0;
  border-radius:20rpx;
}
ff-canvas {
  width: 100%;
  height: 100%;
}
.li-rank{
  margin: 30rpx 0;
  padding: 0;
}
.li-rank-title{
  color: #41414C;
  font-size: 36rpx;
  margin-bottom: 24rpx;
}
.li-rank-items{
  position: relative;
  height: 157rpx;
  margin: 10rpx 0;
}
.li-rank-items-bg{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
.li-rank-item{
  position: relative;
  z-index: 100;
  top: 40rpx;
  display: flex;
  justify-content: space-between;
  font-size: 30rpx;
  color: #fff;
  padding: 0 53rpx;
  text-align: center;
}
.head-month{
  width:226rpx;
  height:48rpx;
  border:2rpx solid rgba(0,183,255,1);
  border-radius:29rpx;
  text-align: center;
  line-height: 48rpx;
  color: rgba(0,183,255,1);
  font-size: 28rpx;
  margin: 30rpx auto;
}
.li-rank-item-content{
  top: 45rpx;
}
.li-rank-item-month{
  font-size: 26rpx;
}
.li-rank-item-img{
  width: 180rpx;
  height: 83rpx;
}
.li-canvas{
  width:100%;
  height: 400rpx;
}
.li-balls{
  position: relative;
  margin: 40rpx 0;
  font-size: 28rpx;
  text-align: center;
  height: 400rpx;
  width: 100%;
}
.head-item-month{
  margin: 70rpx 40rpx 0rpx 40rpx;

}
.li-balls-one{
  width:170rpx;
  height:170rpx;
  background:rgba(119,143,242,0.8);
  border-radius:50%;
  color: #2342C5;
  position: absolute;
  top: 70rpx;
  left: 249rpx;
}
.li-balls-two{
  width:135rpx;
  height:135rpx;
  background:rgba(0,183,255,0.56);
  border-radius:50%;
  color: #0073A0;
  position: absolute;
  top: 150rpx;
  left: 85rpx;
}
.li-balls-three{
  width:59rpx;
  height:59rpx;
  background:rgba(121,189,232,0.8);
  border-radius:50%;
  position: absolute;
  top: 90rpx;
  left: 185rpx;
}
.li-balls-four{
  width:141rpx;
  height:141rpx;
  background:rgba(250,202,106,0.8);
  border-radius:50%;
  color: #9D6F13;
  position: absolute;
  top: 0rpx;
  right: 100rpx;
}
.li-balls-five{
  width:136rpx;
  height:136rpx;
  background:rgba(143,232,121,0.8);
  border-radius:50%;
  color: #3DB021;
  position: absolute;
  bottom: 85rpx;
  right: 80rpx;
}
.li-rank-biao{
  background:rgba(246,245,251,1);
  border-radius:20rpx;
  padding: 0 32rpx 2rpx 32rpx;
}
.li-rank-biao-title{
  color: #fff;
  background: blue;
  text-align: center;
  line-height: 72rpx;
  height: 72rpx;
  border-radius:0  0 20rpx 20rpx;
  margin: auto;
  width: 200rpx;
}
.li-rank-biao-num{
  color: #6C6C80;
  font-size: 28rpx;
  padding: 30rpx 0;
}
.li-rank-canvas{
  height: 400rpx;
  position: relative;
  color: #41414C;
  font-size: 26rpx;
}
.li-rank-canvas-text{
  position: absolute;
  left: 40%;
  top: 44%;
  width: 142rpx;
  line-height: 52rpx;
}
.head-month-img{
  width: 25rpx;
  height: 15rpx;
  margin: 5rpx 0rpx 0rpx 15rpx;
}
.head-item{
  margin: 40rpx;
}
.picker-day{
  width:20%;
  display:inline-block;
  font-weight:700;
}
.picker-Info{
  width:20%;
  display:inline-block;
  float:right;
  margin-top:25rpx;
  font-size:30rpx;
  color:#00B7FF;
  text-align:center;
}
.picker{
  width:20%;
  display:inline-block;
}
.sign_in_num{
font-family:PingFang SC;
font-weight:500;
color:rgba(65,65,76,1);
  font-size:32rpx;
  width:20%;
  display:inline-block;
}
.sign_in_proportion{
  width:10%;
  float:right;
  margin: 0 10rpx;
  display:inline-block;
  font-size:30rpx;
color:rgba(108,108,128,1);
}
.sign_in_percent{
  width:60%;
  display:inline-block;
}
.sign_month{
  bottom: 5%;
  margin:0 40rpx;
  background:#F6F5FB;
  border-radius:5%;
  line-height:120rpx;
}
.sign_month_num{
  width:60%;
  margin-left:10%;
  display:inline-block;
}
.sign_month_info{
  margin-right:40rpx;
  display:inline-block;
  float:right;
  font-weight:700;
  font-size:30rpx;
  color:#00B7FF;
}
page {
	width: 100%;
	height: 100%;
}
 
.left {
	width: 300rpx;
	height: 300rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
  margin:0 auto;
}
 
.white {
	width: 136rpx;
	height: 136rpx;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	background-color: #fff;
	transform: translate(-50%, -50%);
}