reader/pages/inviteRanking/index.wxss

.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: 52rpx;
  font-size: 30rpx;
  text-align: center;
  font-weight: bold;
  color: #2DCE66;
}
.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: 24rpx 46rpx 20rpx;
  box-sizing: border-box;
  background-color: white;
  box-shadow: 0 2rpx 24rpx 0 rgba(0, 0, 0, 0.5);
}
.rankingBox .footer .detail {
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rankingBox .footer .detail .left {
  display: flex;
  align-items: center;
}
.rankingBox .footer .detail .left .avatar {
  background-color: #EBEBEB;
  width: 68rpx;
  height: 68rpx;
  border-radius: 50%;
  margin-right: 24rpx;
}
.rankingBox .footer .detail .left .nickName {
  font-size: 30rpx;
  width: 200rpx;
}
.rankingBox .footer .detail .right {
  width: 350rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30rpx;
  color: #FF630C;
}
.rankingBox .footer .detail .right .info .i2 {
  font-size: 20rpx;
  color: #666666;
}
.rankingBox .footer .operate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26rpx;
  color: white;
  text-align: center;
}
.rankingBox .footer .operate .record {
  width: 268rpx;
  padding: 14rpx 0rpx;
  background: linear-gradient(141deg, #FC9F02 0%, #FF7C34 100%);
  box-shadow: inset 0rpx -2rpx 3rpx 0rpx #FF7000;
  border-radius: 50rpx;
}
.rankingBox .footer .operate .share {
  width: 268rpx;
  padding: 14rpx 0rpx;
  border-radius: 50rpx;
  background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
  color: white;
  box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
  font-size: 26rpx;
}
.invitation {
  background: url('http://reader-wx.ai160.com/images/reader/v3/rank2.jpg') no-repeat;
}
.invitation .tips2 {
  color: #2DCE66;
}
.popBox {
  height: 100%;
  overflow: hidden;
  background-color: #FFA31D;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  padding-bottom: 30rpx;
}
.popBox .header {
  position: relative;
  padding: 30rpx 0;
  letter-spacing: 2rpx;
  text-align: center;
  font-size: 32rpx;
  color: white;
  background-color: #FFA31D;
  font-weight: bold;
}
.popBox .header .close {
  position: absolute;
  right: 20rpx;
  top: 26rpx;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
}
.popBox .copywriting {
  width: 100%;
  margin: 200rpx 0rpx;
  text-align: center;
  color: white;
}
.popBox .copywriting .text {
  margin-bottom: 40rpx;
}
.popBox .list {
  height: calc(100% - 100rpx);
  padding: 0px 20rpx 20rpx;
  box-sizing: border-box;
}
.popBox .list .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
  padding: 10rpx 30rpx;
  border-radius: 20rpx;
  background-color: #fff;
}
.popBox .list .item .left {
  display: flex;
  align-items: center;
}
.popBox .list .item .left .num {
  font-size: 30rpx;
  width: 60rpx;
}
.popBox .list .item .left .avatar {
  width: 68rpx;
  height: 68rpx;
  border-radius: 50%;
  background-color: #D9D9D9;
}
.popBox .list .item .left .nickName {
  width: 200rpx;
  margin-left: 16rpx;
}
.popBox .list .item .time {
  font-size: 26rpx;
}
.popBox .list .copywriting {
  width: 100%;
  margin: 100rpx 0rpx;
  text-align: center;
}
.popBox .list .copywriting .text {
  margin-bottom: 40rpx;
}
.popBox .list .inviteBtn {
  padding: 30rpx 0;
  width: 390rpx;
  height: 68rpx;
}