page{
    height: 100%;
    background: #F5F5F4;
    font-size: 28rpx;
  }
  /* 榜三 */
  .no-data{
    height: 150rpx;
  }
  .content{
    height: 40%;
    background: url('https://img.bbztx.com/image_test/upload/thumbs/20220809/logo/1660017722119024507.jpg') no-repeat;
    background-size: 100% auto;
    position: relative;
  }
  
  .rank-top-three{
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .rank-top-three .top-three-option{
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    padding-bottom: 20rpx;
  }
  .rank-top-three .leader-info .crown{
    font-size: 60rpx;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    line-height: 1;
    margin-bottom: 6rpx;
  }
  
  .rank-top-three .leader-info .headImg-box{
    margin: 0 auto;
    padding: 4rpx;
    display: inline-block;
    border-radius: 50%;
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,.3);
  }
  .rank-top-three .leader-info .headImg{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
  }
  .rank-top-three .leader-info .leader-name{
    font-weight: 700;
    margin: 0 0 12rpx;
  }
  .rank-top-three .leader-info .sigle{
    margin-bottom: 6rpx;
  }
  .rank-top-three .leader-info .info-sigle{
    background: rgba(255,255,255,.2);
    color: #fff;
  }
  .rank-top-three .leader-info .leadGroup-num{
    font-size: 20rpx;
    margin-bottom: 22rpx;
  }
  /* 第一名 */
  .rank-top-three .one{
    flex: 1.1;
    margin: 0 -20rpx;
    z-index: 999;
  }
  .rank-top-three .one .leader-info{
    background: url('https://img.bbztx.com/image_test/upload/thumbs/20220810/logo/1660123736911054162.png') no-repeat;
    background-position: center 100%;
    background-size: 100%;
  }
  .rank-top-three .one .box-h{
    height: 180rpx;
    /* background-image: linear-gradient(to top, rgba(237,58,67,1), rgb(251 93 101)); */
    background: url('data:image/jpeg;base64,[encoded data, 40228 characters]') no-repeat;
    background-size: 100% auto;
  }
  .rank-top-three .one .leader-info .crown{
    background-image: linear-gradient(to top,rgba(234,177,4),rgba(234,245,4));
  }
  .rank-top-three .one .leader-info .headImg-box{
    background-image: linear-gradient(to top,rgba(234,177,4),rgba(234,245,4));
  }
  /* 第二名 */
  .rank-top-three .two .box-h{
    height: 130rpx;
    /* background-image: linear-gradient(to top, rgba(250,84,4,1), rgb(255, 125, 0)); */
    background: url('data:image/jpeg;base64,[encoded data, 41316 characters]') no-repeat;
    background-size: 100% auto;
  }
  .rank-top-three .two .leader-info .crown{
    background-image: linear-gradient(to top,rgba(191,190,190),rgba(237,237,237));
  }
  .rank-top-three .two .leader-info .headImg-box{
    background-image: linear-gradient(to top,rgba(191,190,190),rgba(237,237,237));
  }
  /* 第三名 */
  .rank-top-three .three .box-h{
    height: 100rpx;
    /* background-image: linear-gradient(to top, rgb(255 83 0), rgb(255 113 18)); */
    background: url('data:image/jpeg;base64,[encoded data, 38112 characters]') no-repeat;
    background-size: 100% auto;
  }
  .rank-top-three .three .leader-info .crown{
    background-image: linear-gradient(to top,rgba(255,145,0),rgba(252,180,32));
  }
  .rank-top-three .three .leader-info .headImg-box{
    background-image: linear-gradient(to top,rgba(255,145,0),rgba(252,180,32));
  }
  .rank-top-three .top-three-option .leader-info{
  
  }
  .rank-top-three .top-three-option .box-h{
    box-shadow: 0rpx 0rpx 16rpx 5rpx rgb(207,33,42,.4);
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    font-size: 46rpx;
    font-weight: 700;
    line-height: 2;
  }
  
  /* 列表 */
  .list{
    background: #fff;
    padding: 40rpx 20rpx 220rpx;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    box-shadow: 0rpx -18rpx 10rpx 0rpx rgba(211,68,5,.1);
    min-height: calc(50% - 60rpx);
    margin-top: -20rpx;
    position: relative;
    z-index: 999;
  }
  .list-item{
    display: flex;
    align-items: center;
    padding: 14rpx 0;
  }
  .list-item .item-rankingNum{
    color: #ED3A43;
    font-weight: 700;
    min-width: 40rpx;
    text-align: center;
    font-size: 32rpx;
  }
  .list-item .item-rankingNum .no-rank{
    font-size: 24rpx;
  }
  .list-item .leader-info{
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
  }
  .list-item .leader-info .info-img{
    width: 70rpx;
    height: 70rpx;
    display: block;
    background: #ED3A43;
    border-radius: 50%;
  }
  
  .oneself .list-item .leader-info .info-sigle{
    background: rgba(255,255,255,.2);
    border: 1px solid #fff;
  }
  .oneself .list-item .leader-info .info-sigle .level text{
    color: #fff;
  }
  .oneself .list-item .item-rankingNum{
    color: #fff;
  }
  .list-item .leader-info .info-name{
    margin: 0 10rpx;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 200rpx;
  }
  
  .list .list-item .leader-info .info-sigle{
    background: #fff;
    color: #EA5404;
  }
  .info-sigle{
    font-size: 20rpx;
    line-height: 1.5;
    border-radius: 40rpx;
    margin-right:4rpx;
  }
  .list-item .item-times{
    font-size: 20rpx;
  }
  /* 个人 */
  .oneself{
    position: fixed;
    width: 100%;
    bottom: 60rpx;
    background: #ED3A43;
    z-index: 9999;
    color: #fff;
    border-radius: 30rpx;
  }
  .oneself .list-item{
    padding: 20rpx;
  }
  .oneself .leader-info .info-img{
    background: #fff;
  }
  .oneself .item-rankingNum .no-rank{
    color: rgba(255,255,255,.5);
  }

  /* 分享家等级 */
  .sigle .level,.info-sigle .level{
    background: #fff;
    padding: 0 10rpx;
    color: #B3B3B4;
    border-radius: 40rpx;
    font-size: 22rpx;
    position: relative;
    display: inline-block;
  }
  .oneself .leader-info .info-sigle .level{
    background: none;
    border: none;
  }
  .sigle .level .icon,.info-sigle .level .icon{
    position: absolute;
    bottom: -1rpx;
    left: 0rpx;
    font-size: 50rpx;
  }
  .sigle .level text:last-child,.info-sigle .level text:last-child {
    margin-left: 40rpx;
    font-weight: 700;
  }
  .info-sigle .level text:last-child{
    font-size: 20rpx;
  }
  
/* 等级显示 */
  /* 分享家停用 */
  .leader-info .sigle .stop_user,.leader-info .info-sigle .stop_user{
    background: none;
    border: 1px solid #B3B3B4;
    color: #B3B3B4;
  }
  /* 普通 */
  .leader-info .info-sigle .ordinary{
    border: 1rpx solid #EE3A43;
  }
  .leader-info .sigle .ordinary,.leader-info .info-sigle .ordinary{
    color: #EE3A43;
  }
  /* 超级 */
  .leader-info .info-sigle .super{
    border: 1rpx solid #EE3A43;
  }
  .leader-info .sigle .super text:first-child,.leader-info .info-sigle .super text:first-child{
    background: linear-gradient( 135deg , rgba(238,58,67,0.3) 40%, rgba(238,58,67) 52%,rgba(238,58,67,.3) 64%,rgba(238,58,67) 70%);
    -webkit-background-clip: text;
    color: transparent;
  }
  .leader-info .sigle .super text:last-child,.leader-info .info-sigle .super text:last-child{
    background-image: linear-gradient( 135deg , rgba(238,58,67) 35%, rgba(238,58,67,0.1) 38%,rgba(238,58,67) 41%,rgba(238,58,67) 73%,rgba(238,58,67,.1) 76%,rgba(238,58,67) 79%);
    -webkit-background-clip: text;
    color: transparent;
  }
  /* 金牌 */
  .leader-info .info-sigle .gold{
    border: 1px solid rgba(239,175,46);
  }
  .leader-info .sigle .gold text:first-child,.leader-info .info-sigle .gold text:first-child{
    background: linear-gradient( 135deg , rgba(239,175,46,0.3) 40%, rgba(239,175,46) 52%,rgba(239,175,46,.3) 64%,rgba(239,175,46) 70%);
    -webkit-background-clip: text;
    color: transparent;
  }
  .leader-info .sigle .gold text:last-child,.leader-info .info-sigle .gold text:last-child{
    background-image: linear-gradient( 135deg , rgba(239,175,46) 35%, rgba(239,175,46,0.1) 38%,rgba(239,175,46) 41%,rgba(239,175,46) 73%,rgba(239,175,46,.1) 76%,rgba(239,175,46) 79%);
    -webkit-background-clip: text;
    color: transparent;
  }
  /* 银牌 */
  .leader-info .info-sigle .silver{
    border: 1px solid rgba(143,143,143);
  }
  .leader-info .sigle .silver text:first-child,.leader-info .info-sigle .silver text:first-child{
    background: linear-gradient( 135deg , rgba(143,143,143,0.3) 40%, rgba(143,143,143) 52%,rgba(143,143,143,.3) 64%,rgba(143,143,143) 70%);
    -webkit-background-clip: text;
    color: transparent;
  }
  .leader-info .sigle .silver text:last-child,.leader-info .info-sigle .silver text:last-child{
    background-image: linear-gradient( 135deg , rgba(143,143,143) 35%, rgba(143,143,143,0.1) 38%,rgba(143,143,143) 41%,rgba(143,143,143) 73%,rgba(143,143,143,.1) 76%,rgba(143,143,143) 79%);
    -webkit-background-clip: text;
    color: transparent;
  }
  /* 铜牌 */
  .leader-info .info-sigle .copper{
    border: 1px solid rgba(232,147,63);
  }
  .leader-info .sigle .copper text:first-child,.leader-info .info-sigle .copper text:first-child{
    background: linear-gradient( 135deg , rgba(232,147,63,0.3) 40%, rgba(232,147,63) 52%,rgba(232,147,63,.3) 64%,rgba(232,147,63) 70%);
    -webkit-background-clip: text;
    color: transparent;
  }
  .leader-info .sigle .copper text:last-child,.leader-info .info-sigle .copper text:last-child{
    background-image: linear-gradient( 135deg , rgba(232,147,63) 35%, rgba(232,147,63,0.1) 38%,rgba(232,147,63) 41%,rgba(232,147,63) 73%,rgba(232,147,63,.1) 76%,rgba(232,147,63) 79%);
    -webkit-background-clip: text;
    color: transparent;
  }