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

@mixin join-records {
    position: relative;
    height: 100%;
    overflow: hidden;
    .go-back-icon {
      position: absolute;
      top: vmin(30);
      left: vmin(20);
      width: vmin(36);
      height: vmin(36);
    }
    .title-box {
      display: flex;
      justify-content: center;
      padding-bottom: vmin(16);
      .title {
        width: vmin(236);
        height: vmin(96);
      }
    }
    .record-list {
      padding: vmin(32) vmin(32) 0 vmin(32);
    }
    .record-empty {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      height: calc(100% - #{vmin(120)});
      .empty-icon {
        width: vmin(200);
        height: vmin(200);
      }
      .desc {
        padding-top: vmin(40);
        color: #ffbd67;
        font-size: vmin(28);
      }
    }
}

.join-records {
    @include join-records;
}

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

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

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

    .join-records {
        @include join-records;
    }
}