reader/pages/ranking/index.less

.rankingBox {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
  
    .podiumBox {
      position: relative;
      height: 510rpx;
      background-size: cover;
  
  
      .podiumContent {
        position: absolute;
        top: 222rpx;
        width: 100%;
  
        .user {
          position: absolute;
          width: 150rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
  
          .avatar {
            width: 92rpx;
            height: 92rpx;
            border-radius: 50%;
          }
  
          .iconBox {
            margin: 8rpx 0rpx 4rpx;
            display: flex;
            align-items: center;
  
            .icon {
              width: 30rpx;
              height: 30rpx;
            }
  
            .num {
              margin-left: 6rpx;
              color: white;
              font-size: 28rpx;
            }
          }
  
          .nickName {
            text-align: center;
            font-size: 24rpx;
            color: white;
            width: 100%;
          }
        }
  
        .first {
          top: 0rpx;
          left: 304rpx;
        }
  
        .second {
          top: 53rpx;
          left: 114rpx;
  
          .avatar {
            width: 84rpx;
            height: 84rpx;
          }
        }
  
        .third {
          top: 72rpx;
          right: 112rpx;
  
          .avatar {
            width: 84rpx;
            height: 84rpx;
          }
        }
      }
    }
  
    .podiumList {
      flex: 1;
      overflow: hidden;
  
      .scrollBox {
        height: 100%;
        padding: 0rpx 30rpx;
        box-sizing: border-box;
  
        .row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 23rpx 0rpx;
          border-bottom: 1rpx solid #ddd;
  
          .left {
            display: flex;
            align-items: center;
            justify-content: space-between;
  
            .num {
              font-size: 37rpx;
              width: 28rpx;
            }
  
            .avatar {
              margin: 0rpx 28rpx 0rpx 44rpx;
              width: 78rpx;
              height: 78rpx;
              background-color: #EBEBEB;
              border-radius: 50%;
            }
  
            .nickName {
              font-size: 34rpx;
              width: 240rpx;
            }
          }
  
          .right {
            text-align: center;
  
            .icon {
              width: 30rpx;
              height: 30rpx;
            }
  
            .num {
              font-size: 32rpx;
              color: #666;
            }
          }
        }
      }
    }
  
    .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.50);
  
      .left {
        font-size: 26rpx;
        font-weight: bold;
  
        text {
          color: #4AC4FF;
          font-size: 38rpx;
          margin-left: 10rpx;
        }
      }
  
      .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;
  
        .share {
          width: 26rpx;
          height: 24rpx;
          margin-right: 14rpx;
        }
      }
    }
  }
  
  .invitation {
    background: url('http://reader-wx.ai160.com/images/reader/v3/podium-5.jpg')no-repeat;
  
    .tips2 {
      color: #2DCE66;
    }
  }
  
  .hot {
    background: url('http://reader-wx.ai160.com/images/reader/v3/podium-4.jpg')no-repeat;
  
    .tips2 {
      color: #FF7F6C;
    }
  }
  
  .pk {
    background: url('http://reader-wx.ai160.com/images/reader/v3/podium-6.jpg')no-repeat;
  
    .tips2 {
      color: #967DFF;
    }
  }
  
  .iconPk {
    width: 42rpx !important;
  }