reader/pages/ranking/index.wxss

.rankingBox {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.rankingBox .podiumBox {
  position: relative;
  height: 362rpx;
}
.rankingBox .podiumBox .podiumContent {
  width: 100%;
  height: 100%;
}
.rankingBox .podiumBox .podiumContent .user {
  position: absolute;
  width: 150rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rankingBox .podiumBox .podiumContent .user .avatar {
  width: 90rpx;
  height: 90rpx;
}
.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: 70rpx;
  left: 312rpx;
}
.rankingBox .podiumBox .podiumContent .second {
  top: 124rpx;
  left: 118rpx;
}
.rankingBox .podiumBox .podiumContent .second .avatar {
  width: 82rpx;
  height: 82rpx;
}
.rankingBox .podiumBox .podiumContent .third {
  top: 144rpx;
  right: 102rpx;
}
.rankingBox .podiumBox .podiumContent .third .avatar {
  width: 80rpx;
  height: 80rpx;
}
.rankingBox .podiumBox .tips {
  position: absolute;
  right: 0px;
  top: 10rpx;
  padding: 6rpx 10rpx 6rpx 24rpx;
  border-top-left-radius: 25rpx;
  border-bottom-left-radius: 25rpx;
  font-size: 26rpx;
  color: white;
  background-color: rgba(0, 0, 0, 0.15);
}
.rankingBox .podiumBox .tips2 {
  position: absolute;
  right: 24rpx;
  top: 80rpx;
  padding: 10rpx 5rpx;
  border-radius: 50%;
  font-size: 26rpx;
  background-color: white;
  font-size: 18rpx;
}
.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;
}
.rankingBox .podiumList .scrollBox .row .left .avatar {
  margin: 0rpx 28rpx 0rpx 44rpx;
  width: 78rpx;
  height: 78rpx;
  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;
  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;
}
.invitation {
  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-1.jpg') no-repeat;
  background-size: cover;
}