.rankingBox { width: 100vw; height: 100vh; display: flex; flex-direction: column; } .rankingBox .podiumBox { position: relative; height: 510rpx; background-size: cover; } .rankingBox .podiumBox .dateBox { position: relative; margin-top: 56rpx; font-size: 28rpx; text-align: center; color: white; } .rankingBox .podiumBox .dateBox .dataTitle { position: absolute; left: 194rpx; } .rankingBox .podiumBox .dateBox .interval { position: absolute; left: 314rpx; } .rankingBox .podiumBox .podiumContent { position: absolute; top: 222rpx; width: 100%; } .rankingBox .podiumBox .podiumContent .user { position: absolute; width: 150rpx; display: flex; flex-direction: column; align-items: center; } .rankingBox .podiumBox .podiumContent .user .avatar { width: 92rpx; height: 92rpx; border-radius: 50%; } .rankingBox .podiumBox .podiumContent .user .iconBox { margin: 8rpx 0rpx 4rpx; display: flex; align-items: center; } .rankingBox .podiumBox .podiumContent .user .iconBox .icon { width: 30rpx; height: 30rpx; } .rankingBox .podiumBox .podiumContent .user .iconBox .num { margin-left: 6rpx; color: white; font-size: 28rpx; } .rankingBox .podiumBox .podiumContent .user .nickName { text-align: center; font-size: 24rpx; color: white; width: 100%; } .rankingBox .podiumBox .podiumContent .first { top: 0rpx; left: 304rpx; } .rankingBox .podiumBox .podiumContent .second { top: 53rpx; left: 114rpx; } .rankingBox .podiumBox .podiumContent .second .avatar { width: 84rpx; height: 84rpx; } .rankingBox .podiumBox .podiumContent .third { top: 72rpx; right: 112rpx; } .rankingBox .podiumBox .podiumContent .third .avatar { width: 84rpx; height: 84rpx; } .rankingBox .podiumList { flex: 1; overflow: hidden; } .rankingBox .podiumList .scrollBox { height: 100%; padding: 0rpx 30rpx; box-sizing: border-box; } .rankingBox .podiumList .scrollBox .row { display: flex; align-items: center; justify-content: space-between; padding: 23rpx 0rpx; border-bottom: 1rpx solid #ddd; } .rankingBox .podiumList .scrollBox .row .left { display: flex; align-items: center; justify-content: space-between; } .rankingBox .podiumList .scrollBox .row .left .num { font-size: 37rpx; width: 28rpx; } .rankingBox .podiumList .scrollBox .row .left .avatar { margin: 0rpx 28rpx 0rpx 44rpx; width: 78rpx; height: 78rpx; background-color: #EBEBEB; border-radius: 50%; } .rankingBox .podiumList .scrollBox .row .left .nickName { font-size: 34rpx; width: 240rpx; } .rankingBox .podiumList .scrollBox .row .right { text-align: center; } .rankingBox .podiumList .scrollBox .row .right .icon { width: 30rpx; height: 30rpx; } .rankingBox .podiumList .scrollBox .row .right .num { font-size: 32rpx; color: #666; } .rankingBox .footer { width: 100%; padding: 26rpx 60rpx 30rpx 90rpx; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; background-color: white; box-shadow: 0 2rpx 24rpx 0 rgba(0, 0, 0, 0.5); } .rankingBox .footer .left { font-size: 26rpx; font-weight: bold; } .rankingBox .footer .left text { color: #4AC4FF; font-size: 38rpx; margin-left: 10rpx; } .rankingBox .footer .rigth { padding: 12rpx 34rpx; padding-left: 26rpx; border-radius: 50rpx; background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%); box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46); color: white; font-size: 26rpx; } .rankingBox .footer .rigth .share { width: 26rpx; height: 24rpx; margin-right: 14rpx; } .invitation { background: url('http://reader-wx.ai160.com/images/reader/v3/podium-5.jpg') no-repeat; } .invitation .tips2 { color: #2DCE66; } .hot { background: url('http://reader-wx.ai160.com/images/reader/v3/podium-4.jpg') no-repeat; } .hot .tips2 { color: #FF7F6C; } .pk { background: url('http://reader-wx.ai160.com/images/reader/v3/podium-6.jpg') no-repeat; } .pk .tips2 { color: #967DFF; } .iconPk { width: 42rpx !important; }