/* 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: 322rpx; } .my-rank .head-rank-0 { position: absolute; left: 70rpx; top: 32rpx; width: 152rpx; text-align: center; } .my-rank .head-rank-1 { position: absolute; left: 262rpx; top: 0rpx; width: 176rpx; text-align: center; } .my-rank .head-rank-2 { position: absolute; left: 485rpx; top: 52rpx; width: 116rpx; text-align: center; } .my-rank .head-rank-1 .head{ position: absolute; left: 0; top: 0; z-index: 9; width: 176rpx; height: 256rpx; } .my-rank .head-rank-0 .head { position: absolute; left: 0; top: 0; z-index: 9; width: 152rpx; height: 222rpx; } .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: 66rpx; border-radius: 50%; width: 172rpx; height: 172rpx; } .my-rank .head-rank-0 .big-head-img { position: absolute; left: 2rpx; top: 60rpx; border-radius: 50%; width: 148rpx; height: 148rpx; } .my-rank .head-rank-2 .big-head-img { position: absolute; left: 2rpx; top: 75rpx; border-radius: 50%; width: 112rpx; height: 112rpx; } .my-rank .head-rank-0 .txt { display: flex; flex-direction: column; align-items: center; margin-top: 222rpx; } .my-rank .head-rank-1 .txt { display: flex; flex-direction: column; align-items: center; margin-top: 254rpx; } .my-rank .head-rank-2 .txt { display: flex; flex-direction: column; align-items: center; margin-top: 200rpx; } .name { width: 100%; font-size: 28rpx; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/ } .medal-num { font-size: 28rpx; color: #878787; } /* 勋章列表*/ .rank-list { overflow: hidden; margin-top: 20rpx; } .rank-friend { display: flex; justify-content: space-between; align-items: center; height: 79rpx; 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-text { width: 86rpx; text-align: center; } .rank-head text { font-size: 28rpx; } /* 我自己排名 */ .my-rank-list { display: flex; justify-content: space-between; align-items: center; height: 79rpx; padding: 0 20rpx; background: #E1E9FE; } /*查看更多*/ .particular { position: absolute; right: 30rpx; bottom: 30rpx; color: #5E86F8; font-size: 28rpx; }