/* static/nativeComponents/SharePicture/index.wxss */
@import "/static/font/common_icon.wxss";
.waterfall-content {
  font-size: 20rpx;
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
}
.waterfall-content .tab-wrap{
  display: flex;
  justify-content: space-around;
  padding: 32rpx 0;
  box-sizing: border-box
}
.waterfall-content .tab-wrap .tab-item{
  transition: all 0.2s;
  border-radius: 40rpx;
  width: 96rpx;
  height: 44rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.waterfall-content .tab-wrap .tab-item text{
  font-size: 26rpx;
}

.checked {
    background-color: var(--main-color);
    color: #ffffff;
  }

  .waterfall-wrap{
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
  }
  .waterfall-l,.waterfall-r{
    width: 50%;
    box-sizing: border-box;
    float: left;
  }
    .waterfall-l .item, .waterfall-r .item{
      border-radius: 12rpx;
      margin-top: 20rpx;
      overflow: hidden;
      background-color: white;
    }
  .waterfall-l .item:first-child, .waterfall-r .item:first-child{
    margin-top: 0
  }
   .waterfall-wrap .img-wrap{
     position: relative;
  }
   .waterfall-wrap .img-wrap image{
     display: block;
   }
     .waterfall-wrap .img-wrap .iconfont-common {
      color: #fff;
      position: absolute;
      font-size: 60rpx;
    }
    .icon0 {
      left: 4rpx;
      bottom: 4rpx;
    }
    .icon1 {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .icon2 {
      right: 4rpx;
      top: 4rpx;
    }

    .content{
      padding : 19rpx 17rpx 20rpx 17rpx;
    }
     .content .title{
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .bottom{
      display: flex;
      justify-content: space-between;
      margin-top: 28rpx;
      height: 52rpx;
      color: rgba(153, 153, 153, 1);
    }
    .bottom .user{
      display: flex;
      align-items: center;
      width: 70%;
    }
    .bottom .user .icon{
      width: 52rpx;
      height: 52rpx;
      border-radius: 50%;
      overflow: hidden;
      object-fit: cover;
    }
    .bottom .user .name{
      font-size: 24rpx;
      margin-left: 10rpx;
      width: 60%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bottom .like{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 30%;
    }
    .bottom .like i{
      font-size: 36rpx;
    }
    .bottom .like .like-icon{
      color: var(--main-color);
    }
    .bottom .like .amount {
      font-size: 24rpx;
      margin-left: 10rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      text-align: center;
    }

  .more {
    text-align: center;
     margin-top: 20rpx;
  }
  .more text{
    font-size: 26rpx;
   
  }