efunbox-schedule-miniApps/compontents/ranking/ranking.wxss

/* compontents/ranking/ranking.wxss */
.ranking {
  position: relative;
  width: 100%;
  margin: 20rpx 0;
  border-radius: 25rpx;
  padding: 28rpx 28rpx 80rpx 28rpx;
  box-sizing: border-box;
  background: #fff;
}

.ranking .title text{
  font-size: 36rpx;
  font-weight: 600;
}

.my-rank {
    position: relative;
    height: 266rpx;
}

.head-rank {
    text-align: center;
}

.my-rank .head-rank:nth-child(1) {
    position: absolute;
    left: 120rpx;
    top: 0rpx;
    width: 116rpx;
}

.my-rank .head-rank:nth-child(2) {
    position: absolute;
    left: 295rpx;
    top: 0rpx;
    width: 136rpx;
}

.my-rank .head-rank:nth-child(3) {
    position: absolute;
    left: 485rpx;
    top: 0rpx;
    width: 116rpx;
}

.my-rank .head-rank:nth-child(even) .head{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    width: 136rpx;
    height: 200rpx;
}

.my-rank .head-rank:nth-child(odd) .head{
    position: absolute;
    left: 0;
    top: 30rpx;
    z-index: 9;
    width: 116rpx;
    height: 172rpx;
}

.bg {
    width: 100%;
    height: 100%;
}


.my-rank .head-rank:nth-child(even) .big-head-img{
    position: absolute;
    left: 5rpx;
    top: 55rpx;
    border-radius: 50%;
    width: 130rpx;
    height: 130rpx;
}

.my-rank .head-rank:nth-child(odd) .big-head-img{
    position: absolute;
    left: 2rpx;
    top: 75rpx;
    border-radius: 50%;
    width: 112rpx;
    height: 112rpx;
}

.txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 200rpx;
}

.name {
    font-size: 24rpx;
}

.medal-num {
    font-size: 24rpx;
    color: #aaa;
}

/* 勋章列表*/
.rank-list {
    margin-top: 20rpx;
}

.rank-friend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 78rpx;
    padding: 0 20rpx;
    border-top: 2rpx solid #ccc;
}

.rank-head {
    display: flex;
    align-items: center;  
}

.head-img {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    margin: 0 22rpx 0 38rpx;
}

.rank-head text {
    font-size: 28rpx;
}

/* 我自己排名 */
.my-rank-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 78rpx;
    padding: 0 20rpx;
    background: #E1E9FE;
}

/*查看更多*/
.particular {
  position: absolute;
  right: 30rpx;
  bottom: 30rpx;
  color: #5E86F8;
  font-size: 28rpx;
}