$deviceWidth: 750;

@function vmin($rpx) {
    @return #{$rpx * 100 / $deviceWidth}vmin;
}

@mixin people-list {
  background-image: url(https://wechatapppro-1252524126.cdn.xiaoeknow.com/appAKLWLitn7978/image/b_u_5b2225aa46488_oGKN7IvA/kyri0jo50jyo.png);
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  padding: vmin(2) 0 0 0;
  line-height: vmin(42);
  position: relative;

  .title {
    width: vmin(266);
    height:vmin(50);
    margin: auto;
    margin-top: vmin(36);
    display: block;
  }

  .content {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: vmin(26) vmin(64) 0 vmin(64);
    margin-top:vmin(30);

    .receive-state {

      .text {
        font-size: vmin(24);
        line-height: vmin(36);
        color: #999;
      }

    }
    
    .list {
      text-align: center;
      width: calc(100% + vmin(200));
      box-sizing: border-box;
      height: vmin(518);
      margin-top: vmin(32);
      overflow-y: auto;

      .empty {
        margin-top: vmin(80);

        .empty-tips-img {
          width: vmin(170);
          height: vmin(170);
          margin-bottom: vmin(32);
        }

        .tips {
          font-size: vmin(32);
          line-height: vmin(48);
          color: #999;
        }

      }

      .card {
        width: 100%;
        display: flex;
        color: #333;
        align-items: center;
        justify-content: space-between;
        padding: vmin(10) 0;

        .avatar {
          width: vmin(64);
          height: vmin(64);
          border-radius: 50%;
          margin-right: vmin(12);
        }

        .name-time {
          // width: vmin(261);
          text-align: left;
          flex: 1;

          .name {
            font-size: vmin(24);
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: vmin(32);
            height:vmin(32);
            max-width: vmin(200);
            white-space: nowrap;

          }

          .time {
            font-size: vmin(24);
            line-height: vmin(32);
            height:vmin(32);
            color: #999;
          }


        }

        .money {
          // flex: 1;
          position: relative;
          text-align: right;
          height: vmin(72);

          .number {
            font-size: vmin(24);
            font-weight: 500;
            line-height: vmin(36);
            height: vmin(36);
          }

          .best {
            white-space: nowrap;
            display: flex;
            align-items: right;
            // position: absolute;
            // right: 0;
            // bottom: 0;

            text {
              font-size: vmin(24);
              line-height: vmin(36);
              height: vmin(36);
              color: #E6AE5B;
              font-weight: 500;
            }

            .best-icon {
              width: vmin(32);
              height: vmin(32);
              margin-right: vmin(2);
            }
            
          }

        }

      }

      .my {
        border-bottom: vmin(2) solid #EFEFEF;
      }
      

    }

  }

  .content-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

}

@mixin horizontal {
  .title {
    width: vmin(196);
    height:vmin(40);
    margin: auto;
    margin-top: vmin(24);
    display: block;
  }

  .content {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: vmin(16) vmin(48) 0 vmin(48);
    margin-top:vmin(20);

    .receive-state {

      .text {
        font-size: vmin(20);
        line-height: vmin(24);
        color: #999;
      }

    }
    
    .list {
      text-align: center;
      width: calc(100% + vmin(200));
      box-sizing: border-box;
      height: vmin(382);
      margin-top: vmin(32);
      overflow-y: auto;

      .empty {
        margin-top: vmin(74);

        .empty-tips-img {
          width: vmin(128);
          height: vmin(128);
          margin-bottom: vmin(32);
        }

        .tips {
          font-size: vmin(24);
          line-height: vmin(32);
          color: #999;
        }

      }

      .card {
        width: 100%;
        display: flex;
        color: #333;
        align-items: center;
        // justify-content: space-between;
        padding: vmin(10) 0;

        .avatar {
          width: vmin(48);
          height: vmin(48);
          border-radius: 50%;
          margin-right: vmin(8);
        }

        .name-time {
          // width: vmin(261);
          text-align: left;
          line-height: vmin(24);
          flex: 1;

          .name {
            font-size: vmin(20);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: vmin(160);
          }

          .time {
            font-size: vmin(20);
            color: #999;
          }


        }

        .money {
          // flex: 1;
          position: relative;
          text-align: right;
          height: vmin(52);
          display: flex;
          flex-direction: column;
          align-items: right;
          justify-content: center;

          .number {
            font-size: vmin(20);
            font-weight: 500;
            height: vmin(24);
            line-height: vmin(24);
          }

          .best {
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: baseline;
            // position: absolute;
            // right: 0;
            // bottom: 0;

            text {
              font-size: vmin(20);
              color: #E6AE5B;
              font-weight: 500;
              height: vmin(24);
              line-height: vmin(24);
            }

            .best-icon {
              width: vmin(24);
              height: vmin(24);
              margin-right: vmin(2);
            }
            
          }

        }

      }

      .my {
        border-bottom: vmin(2) solid #EFEFEF;
      }
      

    }

  }

  .content-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.people-list{
  @include people-list
}

.horizontal{
  @include horizontal
}

// 竖屏pad
@media screen and (min-width: 768px) and (orientation: portrait) {
  $deviceWidth: 1536 !global;

  .people-list{
    @include people-list
  }

  .horizontal{
    @include horizontal
  }
  
}


// PC 放大适配
@media screen and (min-height: 630px) and (orientation: landscape) {
  $deviceWidth: 1260 !global; 

  .people-list{
    @include people-list
  }

  .horizontal{
    @include horizontal
  }
  
}

// 横屏pad
@media screen and (min-height: 768px) and (orientation: landscape) {
  $deviceWidth: 1536 !global;

  .people-list{
    @include people-list
  }

  .horizontal{
    @include horizontal
  }  

}