reader/pages/ranking/index.wxss

.rankingBox {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.rankingBox .podiumBox {
  position: relative;
  height: 540rpx;
  background-size: cover;
}
.rankingBox .podiumBox .switchType {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20rpx auto;
  width: 640rpx;
}
.rankingBox .podiumBox .switchType .ilk {
  width: 180rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: 600;
  color: #FFFFFF;
}
.rankingBox .podiumBox .switchType .current {
  width: 180rpx;
  padding: 10rpx 0;
  text-align: center;
  background: #FFFFFF;
  border-radius: 30rpx;
}
.rankingBox .podiumBox .podiumContent {
  position: absolute;
  top: 252rpx;
  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: 300rpx;
}
.rankingBox .podiumBox .podiumContent .second {
  top: 53rpx;
  left: 71rpx;
}
.rankingBox .podiumBox .podiumContent .second .avatar {
  width: 84rpx;
  height: 84rpx;
}
.rankingBox .podiumBox .podiumContent .third {
  top: 73rpx;
  right: 74rpx;
}
.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('https://reader-wx.ai160.com/images/reader/v3/yx-bg.png') no-repeat;
}
.invitation .tips2 {
  color: #2DCE66;
}
.hot {
  background: url('https://reader-wx.ai160.com/images/reader/v3/rb-bg.png') no-repeat;
}
.hot .tips2 {
  color: #FF7F6C !important;
}
.pk {
  background: url('https://reader-wx.ai160.com/images/reader/v3/pk-bg.png') no-repeat;
}
.pk .tips2 {
  color: #967DFF !important;
}
.iconPk {
  width: 42rpx !important;
  color: #50AE75 !important;
}