jianbuzou_v2/pages/rank/index.wxss

page {
    width: 100%;
    height: 100%;
	  background-color:#f2f2f2;
}
.main {
    width: 100%;
    height: 100%;
    background-image: url('https://minipro.luochunlvshi.com/uploads/image/jiankangzoupaihang.png');
    background-size: contain; 
    /* position: relative; */
    /* background-size: cover;*/
    background-repeat: no-repeat; 
    /* background-position: center; 确保图片居中显示 */
}
.backImage {
  width: 100%; /* 根据需要设置宽度 */
  height: 100%; /* 高度自动 */
  position: absolute; /* 绝对定位 */
  top: 0;
  left: 0;
  z-index: -1; /* 确保图片在其他内容下方 */
}
.tab {
  float: left;
  width: 50%;
  text-align: center;
  padding: 20rpx 0;
  font-weight:bold;
  font-size:34rpx;
}
 
.topTabSwiper {
  position: relative;
  top: 18%;
  left: 3%;
  width: 45%;
  /* height: 96rpx; */
  background-color:rgba(255, 255, 255, 0.4);
  /* opacity: 0.5; */
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  zoom: 1;
  border-radius: 40rpx;
  color: #FFF;
}
 
.topTabSwiper:after {
  content: "";
  clear: both;
  display: block;
}
 
.tabBorer {
  /* border-bottom: 1px solid #ffffff; */
  background-color: #FFF;
  border-radius: 40rpx;
  color: #D03020;

}

.threetop{
  position: relative;
  top: 22%;
}

.topThreeInfo {
  position: relative;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topThreeInfo .second{
  margin-right: 20rpx;
  display: inline;
  position: relative;
  top: 50rpx;
  /* align-items: center; */
  justify-content: center;
}
.topImages_f{
  width: 220rpx;
  height: 220rpx;
  border-radius: 50%;
}
.topBase_f{
  width: 220rpx;
  height: 220rpx;
}
.topImg_f{
  width: 140rpx;
  height: 130rpx;
  position: relative;
  bottom: 86%;
  left: 43rpx;
  border-radius: 50%;
}
.topInfo{
  max-width: auto;
  position: relative;
  /* left: 48rpx; */
  align-items: center;
  justify-content: center;
  text-align: center;
}

.topImages{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}
.topBase{
  width: 200rpx;
  height: 200rpx;
}
.topImg{
  width: 145rpx;
  height: 144rpx;
  position: relative;
  bottom: 94%;
  left: 27rpx;
  border-radius: 50%;
}
.topInfo_f{
  max-width: auto;
  position: relative;
  /* left: 48rpx; */
  align-items: center;
  justify-content: center;
  text-align: center;
}

.topThreeInfo .first{
  display: inline;
  /* align-items: center; */
  justify-content: center;
}


.topThreeInfo .third{
  margin-left: 20rpx;
  position: relative;
  top: 50rpx;
  display: inline;
  align-items: center;
  justify-content: center;
}


.topThree{
  position: relative;
  top: 35%;
  left: 2%;
  width: 95%;
  height: 171rpx;
}
.topThree .topThreeBase{
  width: 100%;
  height: 171rpx;
}
 
.rankList{
  position: relative;
  top: 21%;
}
.swiper {
  width: 100%;
}
 
.swiper_con {
 
  text-align: center;
  width: 100%;
  height: 500rpx auto;
  padding: 20rpx 0;
}
.top{padding-bottom:20rpx;color:#999;font-size:26rpx;}
.rank_list{padding:0 20rpx;}
.item{padding:20rpx;background-color:#FFF;margin-bottom:20rpx;}
.avatar{width:120rpx;height:120rpx;border-radius:50%;margin:0 20rpx;}
.left .username{font-size:30rpx;color:#000;padding-bottom:10rpx;}
.left .singDays{font-size:26rpx;color:#999;}
.mingci{width:60rpx;}
.mingci image{width:60rpx;height:60rpx;}
.step{color: #D03020;font-size:26rpx;font-weight:bold;}