$deviceWidth: 750;

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

@mixin record-content {
  height: vmin(878);
  .record-list{
    margin: vmin(32);
    padding-top: 0;

    .record-item{
      height: vmin(152);
      padding: vmin(28) vmin(32);
      box-sizing: border-box;
      border-radius: vmin(16);
      background: #fff;
      margin-bottom: vmin(24);


      .item-line{
        display: flex;
        justify-content: space-between;
      
        .top-title{
          color: #333333;
          font-size: vmin(31.5);
          display: flex;
          align-items: center;

          .pin{
            display: inline-block;
            color: #fff;
            font-size: vmin(20);
            width:vmin(36);
            height: vmin(31.5);
            border-radius:vmin(7.5);
            opacity: 1;
            margin-left:vmin(7.5);
            border: 0 solid rgba(0.5920000076293945, 0.5920000076293945, 0.5920000076293945, 1);
            background: rgba(240,181,95,1);
            text-align: center;
            line-height: vmin(31.5);
          } 

        }

        .money{
          color: #333333;
          font-size: vmin(28);
          display: flex;
          align-items: center;

          .right_icon{
            width: vmin(31.5);
            height: vmin(31.5);
          }

        }
        
      }

      .bottom{
        margin-top: vmin(16);
        font-size: vmin(28);
        color: #999999;

        .bottom-desc{
          display: flex;
          align-items: center;

          .nickname{
            display: inline-block;
            max-width:vmin(248) ;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: vmin(16);
          }

        }

        .status{
          padding-right: vmin(31.5);

          .state{
            margin-right: vmin(16);
          }

          .on{
            color: #E6AE5B;
          }

        }

      }

    }

  }

  .empty{
    padding-top: vmin(180);
    text-align: center;

    .empty_icon{
      width: vmin(176);
      height: vmin(176);
      margin-bottom: vmin(31.5);
    }
    
    .empty_text{
      font-size: vmin(31.5);
      color: #999;
    }

  }

}

.record-content{
  @include record-content
}

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

  .record-content{
    @include record-content
  }

}


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

  .record-content{
    @include record-content
  }

}

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

  .record-content{
    @include record-content
  }

}