ssj_book/parents/pages/ranking/ranking.wxss

/* parents//pages/ranking/ranking.wxss */
@import '../../../templates/nodata/nodata.wxss';
@import '../../../templates/loading/loading.wxss'; 
.bg{
  height: 434rpx;
  margin: 0;
  padding: 0;
  width: 100%;
}
.head{
  position: relative;
}
.head-history{
  width:236rpx;
  height:58rpx;
  text-align: center;
  line-height: 58rpx;
  color: #fff;
  font-size: 28rpx;
  position: absolute;
  top: 40rpx;
  left: 0;
  background:rgba(255,145,128,1);
  border-radius:0px 29px 29px 0px;
}
.head-ranking{
  font-size: 47.72rpx;
  color: #fff;
  position: absolute;
  top: 147rpx;
  left: 39rpx;
}
.title{
  display: flex;
  justify-content: flex-start;
  padding: 0 28rpx 0 40rpx;
  position: relative;
  top: -120rpx;
}
.title-left{
  width:92%;
  height:395rpx;
  background:rgba(255,255,255,1);
  border-radius:20rpx;
  position: relative;
  left: 10rpx;
}
.title-left-one{
  position: absolute;
  top: 34rpx;
  left: 38rpx;
  color: #A1A1B3;
  font-size: 28rpx;
}
.title-left-one-img{
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}
.title-left-two{
  color: #41414C;
  font-size: 28rpx;
  position: absolute;
  top: -34rpx;
  left: 264rpx;
  text-align: center;
}
.title-left-two-img{
  width:134rpx;
  height:134rpx;
  border-radius:50%;
  border:8rpx solid rgba(255, 255, 255, 0.6);
}
.title-left-three{
  color: #F7B93C;
  font-size: 36rpx;
  text-align: center;
  margin-top: 213rpx;
  font-weight: bold;
}
.li-blue{
  color: #778FF2 !important;
}
.li-blue-text{
  color: #16235A !important;
}
.title-left-four{
  color: #86641F;
  font-size: 28rpx;
  margin-top: 60rpx;
  display: flex;
  justify-content: space-around;
}
.title-right{
  font-size: 28rpx;
  color: #fff;
}
.title-right-one{
  width:80rpx;
  height:218rpx;
  background:linear-gradient(90deg,rgba(250,202,106,1),rgba(250,202,106,1),rgba(239,181,64,1));
  border-radius:0px 20rpx 20rpx 0px;
  display: flex;
  flex-direction: column
}
.title-right-two{
  width:60rpx;
  height:174rpx;
  background:rgba(119,143,242,1);
  border-radius:0px 0px 20rpx 0px;
  display: flex;
  flex-direction: column
}
.title-right-one-text{
  margin: auto;
  width: 30rpx;
}
.li{
  background:rgba(255,255,255,1);
  border-radius:20px;
  padding: 30rpx;
  color: #41414C;
  font-size: 30rpx;
  margin: 0 40rpx;
  position: relative;
  top: -80rpx;
}
.li-head{
  color: #6C6C80;
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  padding-bottom: 30rpx;
}
.li-items{
  display: flex;
  justify-content: space-between;
  padding: 25rpx 0;
}
.li-items-img{
  width: 36rpx;
  height: 36rpx;
  text-align: center;
  margin: auto;
}
.li-items-head{
  width: 74rpx;
  height: 74rpx;
  margin: 0 30rpx;
  border-radius: 50%;
}
.model-list{
  color: #A1A1B3;
  font-size: 28rpx;
  text-align: left;
  padding: 0 34rpx 34rpx 34rpx;
}
.model-list-title{
  color: #41414C;
  font-size: 32rpx;
  padding: 37rpx 0;
  text-align: center;
}
.model-list-del{
  position: absolute;
  bottom: -120rpx;
  left: 45%;
}
.model-list-img{
  width: 60rpx;
  height: 60rpx;
}
.head-month{
  width:262rpx;
  height:58rpx;
  background:rgba(255,145,128,1);
  border-radius:29rpx;
  text-align: center;
  line-height: 58rpx;
  color: #FFFFFF;
  font-size: 32rpx;
  margin: 30rpx auto;
}
.head-all{
  color: #FFFFFF;
  font-size: 52rpx;
  margin-bottom: 25rpx;
}
.head-people{
  color: #136FB8;
  font-size: 28rpx;
}
.head-item{
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
}
.xl{
  position: relative;
  top:-100rpx;
  /* display: flex;
  justify-content: flex-start; */
  text-align: center
}
.ul-item{
  width:223rpx;
  height:347rpx;
  background:rgba(255,255,255,1);
  color: #41414C;
  font-size: 26rpx;
  text-align: center;
  display: inline-block
}
.ul-item-img{
  width:139rpx;
  height:139rpx;
  border-radius:50%;
  margin-top: 40rpx;
}
.ul-item-num{
  width: 168rpx;
  height: 70rpx;
  position: relative;
  bottom: 20rpx;
}
.ul-item-name{
  font-size: 28rpx;
  font-weight: bold;
}
.two{
  border-radius:20rpx 20rpx 0px 20rpx;
}
.one{
  border-radius: 20rpx;
  height: 401rpx;
  width: 250rpx;
  position: relative;
  bottom:52rpx;
  box-shadow:0px 2rpx 29rpx 2rpx rgba(0, 0, 0, 0.1);
}
.three{
  border-radius:20rpx 20rpx 20rpx 0px;
}
.title-bottom{
  width: 60rpx !important;
  border-radius:0px 20rpx 0rpx 0px;
}
.title-top{
  width: 80rpx !important;
  border-radius:0px 20rpx 20rpx 0px;
}
.head-month-img{
  width: 12rpx;
  height: 22rpx;
  margin-left:30rpx;
  transform: rotate(90deg)
}
.li-items-one{
  color: #F5AD00;
  font-size: 33rpx;
  font-weight: bold;
  margin: auto
}
.li-items-two{
  color: #ADADAD;
  font-size: 33rpx;
  font-weight: bold;
  margin: auto
}
.li-items-three{
  color: #A87812;
  font-size: 33rpx;
  font-weight: bold;
  margin: auto
}