.activityList { padding: 0rpx 14rpx; padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important; box-sizing: border-box; } .activityList .ranking-class-1 { margin-bottom: 20rpx; width: 100%; padding: 20rpx 20rpx 34rpx; box-sizing: border-box; background-color: white; border-radius: 30rpx; } .activityList .ranking-class-1 .header { display: flex; align-items: center; justify-content: space-between; padding: 0rpx 14rpx; box-sizing: border-box; } .activityList .ranking-class-1 .header .title { font-size: 30rpx; font-weight: bold; } .activityList .ranking-class-1 .header .toAll { font-size: 28rpx; } .activityList .ranking-class-1 .header .toAll .backIcon { width: 12rpx; height: 22rpx; } .activityList .ranking-class-1 .body .top { margin-top: 16rpx; display: flex; justify-content: space-around; align-items: flex-end; } .activityList .ranking-class-1 .body .top .userBox { display: flex; flex-direction: column; align-items: center; } .activityList .ranking-class-1 .body .top .nickName { width: 140rpx; font-size: 20rpx; margin-top: 14rpx; } .activityList .ranking-class-1 .body .top .firstUser { width: 130rpx; height: 130rpx; background: url(http://reader-wx.ai160.com/images/reader/v3/first.png) no-repeat; background-size: 100% 100%; text-align: center; } .activityList .ranking-class-1 .body .top .firstUser .avatar { margin-top: 36rpx; width: 90rpx; height: 90rpx; border-radius: 50%; background-color: #EBEBEB; } .activityList .ranking-class-1 .body .top .secondUser { width: 110rpx; height: 110rpx; background: url(http://reader-wx.ai160.com/images/reader/v3/second.png) no-repeat; background-size: 100% 100%; text-align: center; } .activityList .ranking-class-1 .body .top .secondUser .avatar { margin-top: 26rpx; width: 80rpx; height: 80rpx; border-radius: 50%; background-color: #EBEBEB; } .activityList .ranking-class-1 .body .top .thirdUser { width: 110rpx; height: 110rpx; background: url(http://reader-wx.ai160.com/images/reader/v3/third.png) no-repeat; background-size: 100% 100%; text-align: center; } .activityList .ranking-class-1 .body .top .thirdUser .avatar { margin-top: 26rpx; width: 80rpx; height: 80rpx; background-color: #EBEBEB; border-radius: 50%; } .activityList .ranking-class-1 .body .btm { display: flex; justify-content: space-between; align-items: flex-end; } .activityList .ranking-class-1 .body .btm .userBox { display: flex; flex-direction: column; align-items: center; } .activityList .ranking-class-1 .body .btm .userBox .avatar { margin-top: 26rpx; width: 80rpx; height: 80rpx; border-radius: 50%; background-color: #EBEBEB; } .activityList .ranking-class-1 .body .btm .userBox .nickName { width: 120rpx; font-size: 20rpx; margin-top: 14rpx; } .activityList .ranking-class-2 { margin-bottom: 20rpx; width: 100%; box-sizing: border-box; border-radius: 30rpx; overflow: hidden; } .activityList .ranking-class-2 .header { display: flex; align-items: center; justify-content: space-between; padding: 25rpx 30rpx; box-sizing: border-box; background-color: #6D9FFE; } .activityList .ranking-class-2 .header .left { display: flex; align-items: center; color: white; } .activityList .ranking-class-2 .header .left .icon { width: 26rpx; height: 30rpx; } .activityList .ranking-class-2 .header .left .title { font-size: 30rpx; font-weight: bold; margin: 0rpx 10rpx; } .activityList .ranking-class-2 .header .toAll { font-size: 28rpx; color: white; } .activityList .ranking-class-2 .header .toAll .backIcon { width: 12rpx; height: 22rpx; } .activityList .ranking-class-2 .body { width: 100%; padding: 25rpx 20rpx; box-sizing: border-box; background-image: linear-gradient(180deg, #A6CDFF 0%, #ECF4FF 100%, #FFFFFF 100%); } .activityList .ranking-class-2 .body .row { padding: 14rpx 25rpx; border-radius: 10rpx; margin-bottom: 20rpx; display: flex; align-items: center; justify-content: space-between; background-color: white; } .activityList .ranking-class-2 .body .row .left { display: flex; align-items: center; } .activityList .ranking-class-2 .body .row .left .stand { width: 36rpx; height: 36rpx; } .activityList .ranking-class-2 .body .row .left .avatar { width: 72rpx; height: 72rpx; margin: 0rpx 30rpx; border-radius: 50%; } .activityList .ranking-class-2 .body .row .left .nickName { width: 210rpx; font-size: 26rpx; } .activityList .ranking-class-2 .body .row .right { text-align: center; font-size: 0rpx; } .activityList .ranking-class-2 .body .row .right .playIcon { width: 34rpx; height: 34rpx; } .activityList .ranking-class-2 .body .row .right .num { font-size: 28rpx; }