epdc-resident-mp-js/subpages/heart/pages/leaderboardNew/leaderboardNew.wxss

page {
    background: #f7f7f7;
}

.tab-bar {
    margin-top: 16rpx;
    width: 100%;
    height: 90rpx;
    background: #fff;
    display: flex;
    justify-content: space-around;
    position: relative;
}

.tab-bar .tab {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    width: 50%;
    font-size: 32rpx;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
}

.tab-bar .select-tab {
    color: #E50F00;
    font-size: 32rpx;
    font-weight: bold;
}

.tab-bar .select-bar {
    width: 40rpx;
    height: 8rpx;
    border-radius: 5rpx;
    background: #E50F00;
    position: absolute;
    bottom: 0rpx;
}

.tab-bar .select-bar.tab1 {
    left: calc(25% - 15rpx);
    transition: left linear 0.4s;
}

.tab-bar .select-bar.tab2 {
    left: calc(75% - 15rpx);
    transition: left linear 0.4s;
}

/* 参与记录 */
.tab-item {
    background: #fff;
    height: 80rpx;
    width: calc(100% - 60rpx);
    padding: 0 30rpx;
    display: flex;
    align-items: center;
}

.tab-item button {
    position: relative;
    display: inline-block;
    /* margin: 0 42rpx 0 0; */
    flex-shrink: 0;
    /* width: auto !important; */
    width: 164rpx;
    height: 52rpx;
    min-height: 52rpx !important;
    line-height: 52rpx;
    border-radius: 30rpx;
    padding: 0 20rpx;
}

button::after {
    border: 0rpx;
}

.tab-item .font-w {
    font-size: 30rpx;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(to right, #e95027, #db1a1f);
}

.tab-item .font-b {
    background: #fff;
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
    border: 1rpx solid #dbdbdb;
}

.tab-item .hover-btn {
    box-shadow: 0px 0px 10px 0px rgba(188, 0, 5, 0.22);
}


/* 爱心排行 */
.bottom {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    /* margin-top: 4rpx; */
    /* padding: 0 30rpx; */
}
.padding{
    padding: 0 30rpx;
}


.bottom .love-ranking-list {
    width: 100%;
    background: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    position: relative;
    top: -10rpx;
}

.bottom .list-item {
    width: 100%;
    height: 140rpx;
    display: flex;
    align-items: center;
    background-color: #fff;
}

.bottom .list-item+.list-item {
    border-top: 1px solid #e5e5e5;
}

.bottom .list-item .num {
    font-size: 36rpx;
    color: #333;
    font-weight: bolder;
    width: 60rpx;
    text-indent: 6rpx;
}

.bottom .list-item .num.color1 {
    color: #D42E31;
}

.bottom .list-item .num.color2 {
    color: #DD5800;
}

.bottom .list-item .num.color3 {
    color: #FFA800;
}

.bottom .list-item .avatar {
    width: 90rpx;
    height: 90rpx;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 15rpx;
}

.bottom .list-item .info {
    width: calc(100% - 105rpx);
}

.bottom .list-item .info .name {
    font-size: 32rpx;
    color: #333;
    line-height: 52rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: flex;
    align-items: center;
}
.bottom .list-item .info .name image {
    width: 30rpx;
    height: 30rpx;
    margin-left: 10rpx;
}

.bottom .list-item .info .info-detail {
    font-size: 24rpx;
    color: #999;
    display: flex;
    align-items: center;
}

.bottom .list-item .info .info-detail .heart-time {
    width: 24rpx;
    height: 24rpx;
    object-fit: cover;
    margin-right: 6rpx;
}

.bottom .list-item .info .info-detail .enter-times {
    width: 24rpx;
    height: 24rpx;
    object-fit: cover;
    margin-right: 6rpx;
    /* margin-left: 20rpx; */
}

.project-nodata {
    width: 100%;
    height: calc(100vh - 300rpx);
    background: #f7f7f7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.project-nodata .nodata-image {
    width: 256rpx;
    height: 245rpx;
    object-fit: cover;
}

.project-nodata .nodata-tip {
    font-size: 28rpx;
    color: #bcbcbc;
    height: 50rpx;
    line-height: 50rpx;
}


/* 参与记录样式 */

.activity-list {
    width: 100%;
    min-height: calc(100vh - 500rpx);
    box-sizing: border-box;
    padding: 15rpx 20rpx;
  }
  .activity-list .no-data {
    width:100%;
    height: calc(100vh - 538rpx);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    color: #999;
    background: #f7f7f7;
  }
  .banner{
      width: 100%;
      height: 500rpx;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-around;
  }
  .banner image{
      width: 310rpx;
      height: 440rpx;
  }

  .banner .swiper {
      width: 100%;
      height: 100%;
  }
  .banner .swiper .swiper-item {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
  }
  
.scroll-tag {
    height: 80rpx;
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
}
.volunteer-tag {
    background: rgba(255, 255, 255, 1);
    display: flex;
    white-space: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 80rpx;
}
.volunteer-tag .tag {
    border: 1px solid #999999;
    border-radius: 32rpx;
    padding: 0 10rpx;
    margin: 0 10rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    min-width: 140rpx;
    text-align: center;
    height: 48rpx;
    line-height: 48rpx;
}
.volunteer-tag .sel {
    border: 1px solid #da433d;
    background-color: #da433d;
    color: #fff;
    font-weight: bold;
}
.bottom .list-item-2 {
    width: 100%;
    height: 160rpx;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    background-color: #fff;
    flex-direction: column;
}

.bottom .list-item-2+.list-item-2 {
    border-top: 1px solid #e5e5e5;
}
.bottom .list-item-2 .act-title {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap:break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;  
    font-size: 32rpx;  
}
.bottom .list-item-2 .act-desc {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #999;
}
.bottom .list-item-2 .act-desc .option {
    display: flex;
}
.bottom .list-item-2 .act-desc .option-green {
    color: #32a332;
}
.bottom .list-item-2 .act-desc .option-red {
    color: #da433d;
}