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;
}

.my-rank .head-rank-0 {
    position: absolute;
    left: 120rpx;
    top: 0rpx;
    width: 116rpx;
    text-align: center;   
    word-break:keep-all;/* 不换行 */   
    white-space:nowrap;/* 不换行 */  
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */   
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

.my-rank .head-rank-1 {
    position: absolute;
    left: 295rpx;
    top: 0rpx;
    width: 136rpx;
    text-align: center;  
    word-break:keep-all;/* 不换行 */   
    white-space:nowrap;/* 不换行 */  
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */   
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/    
}

.my-rank .head-rank-2 {
    position: absolute;
    left: 485rpx;
    top: 0rpx;
    width: 116rpx;
    text-align: center;  
    word-break:keep-all;/* 不换行 */   
    white-space:nowrap;/* 不换行 */  
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */   
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/    
}

.my-rank .head-rank-1 .head{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    width: 136rpx;
    height: 200rpx;
}

.my-rank .head-rank-0 .head,
.my-rank .head-rank-2 .head {
    position: absolute;
    left: 0;
    top: 30rpx;
    z-index: 9;
    width: 116rpx;
    height: 172rpx;
}

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


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

.my-rank .head-rank-0 .big-head-img,
.my-rank .head-rank-2 .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;
}