.activityBox { position: relative; padding: 35rpx 25rpx calc(140rpx + env(safe-area-inset-bottom)) !important; } .activityBox .rankList, .activityBox .activeyList { margin-bottom: 35rpx; } .activityBox .rankList .headline, .activityBox .activeyList .headline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30rpx; } .activityBox .rankList .headline .left, .activityBox .activeyList .headline .left { display: flex; align-items: center; font-size: 36rpx; font-weight: 400; } .activityBox .rankList .headline .left .logo, .activityBox .activeyList .headline .left .logo { margin-right: 10rpx; width: 49rpx; height: 49rpx; } .activityBox .rankList .scrollView { display: flex; flex-direction: column; align-items: center; width: 100%; } .activityBox .rankList .scrollView .ranking-class-2 { display: inline-block; margin-bottom: 40rpx; width: 672rpx; box-sizing: border-box; border-radius: 30rpx; overflow: hidden; box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px; } .activityBox .rankList .scrollView .ranking-class-2 .header { display: flex; align-items: center; justify-content: space-between; padding: 25rpx 30rpx; box-sizing: border-box; } .activityBox .rankList .scrollView .ranking-class-2 .header .left { display: flex; align-items: center; color: white; } .activityBox .rankList .scrollView .ranking-class-2 .header .left .icon { width: 28rpx; height: 30rpx; } .activityBox .rankList .scrollView .ranking-class-2 .header .left .title { font-size: 30rpx; font-weight: bold; margin: 0rpx 10rpx; } .activityBox .rankList .scrollView .ranking-class-2 .header .toAll { font-size: 28rpx; color: white; } .activityBox .rankList .scrollView .ranking-class-2 .header .toAll .backIcon { width: 14rpx; height: 24rpx; } .activityBox .rankList .scrollView .ranking-class-2 .body { width: 100%; padding: 25rpx 20rpx; box-sizing: border-box; } .activityBox .rankList .scrollView .ranking-class-2 .body .row { padding: 14rpx 25rpx; border-radius: 14rpx; margin-bottom: 20rpx; display: flex; align-items: center; justify-content: space-between; background-color: white; } .activityBox .rankList .scrollView .ranking-class-2 .body .row .left { display: flex; align-items: center; } .activityBox .rankList .scrollView .ranking-class-2 .body .row .left .stand { width: 36rpx; height: 36rpx; } .activityBox .rankList .scrollView .ranking-class-2 .body .row .left .avatar { width: 72rpx; height: 72rpx; margin: 0rpx 30rpx; border-radius: 50%; background-color: #EBEBEB; } .activityBox .rankList .scrollView .ranking-class-2 .body .row .left .nickName { width: 210rpx; font-size: 28rpx; } .activityBox .rankList .scrollView .ranking-class-2 .body .row .right { text-align: center; font-size: 0rpx; } .activityBox .rankList .scrollView .ranking-class-2 .body .row .right .playIcon { width: 34rpx; height: 34rpx; } .activityBox .rankList .scrollView .ranking-class-2 .body .row .right .num { font-size: 28rpx; } .activityBox .rankList .scrollView .yxb .header { background-color: #2DCE66; } .activityBox .rankList .scrollView .yxb .body { background-image: linear-gradient(180deg, #4cd67c 0%, #66ec95 100%); } .activityBox .rankList .scrollView .rbb .header { background-color: #FF7E6C; } .activityBox .rankList .scrollView .rbb .body { background-image: linear-gradient(180deg, #FFB4A8 0%, #FFDCD7 100%); } .activityBox .rankList .scrollView .pkb .header { background-color: #967DFF; } .activityBox .rankList .scrollView .pkb .body { background-image: linear-gradient(180deg, #8265F9 0%, #B8A7FF 100%); } .activityBox .rankList .scrollView .pkb .playIcon { width: 38rpx !important; height: 34rpx !important; }