$deviceWidth: 750;

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

@keyframes popping {
    from {
        transform: translateY(vmin(11.2));
        opacity: 0.5;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@mixin container-friends {
    animation: popping ease 300ms;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #fff !important;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 999;
}

@mixin viewAreaPackUp {
    height: calc(100vh - 80px);
}

@mixin viewUnPackUp {
    height: 100%;
}

@mixin wrapper {
    height: 100%;

    .header {
        height: vmin(96);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: vmin(32);
        color: #333333;
        text-align: center;
        font-weight: 700;
        font-family: "PingFang SC";
        line-height: vmin(48);
    }

    .invite-num-rules {
        width: 100%;
        height: vmin(72);
        padding: vmin(16) vmin(42) vmin(16) vmin(32);
        margin-bottom: vmin(24);
        box-sizing: border-box;
        display: flex;
        color: #333333;
        font-size: vmin(28);
        font-weight: 500;
        text-align: left;
        font-family: "PingFang SC";
        line-height: vmin(40);
        position: relative;

        .num {
            color: #FF781F;
        }

        .rules {
            position: absolute;
            top: vmin(16);
            right: vmin(42);
            color: #1472FF;
        }
    }

    .count-style {
        color: rgba(50, 50, 51, 1);
        font-size: vmin(28);
        font-weight: 700;
        text-align: center;
        line-height: vmin(40);
    }

    .icon-left-back {
        position: absolute;
        left: vmin(32);
        top: vmin(32);
        width: vmin(32);
        height: vmin(32);
    }

    .close-icon {
        position: absolute;
        top: vmin(32);
        right: vmin(32);
        width: vmin(32);
        height: vmin(32);
    }

    .detail {
        padding: vmin(32);
    }

    .friend-list {
        min-height: calc(100% - 90px);
        overflow: scroll;
        padding: 0 vmin(34) vmin(16) vmin(36);
        box-sizing: border-box;

        .friend-item {
            float: left;
            text-align: center;
            width: vmin(136);
            height: vmin(152);
            margin-bottom: vmin(40);
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: flex-start;
            flex: auto;
        }

        .img-avatar {
            width: vmin(96);
            height: vmin(96);
            border-radius: 100%;
        }

        .name {
            margin-top: vmin(12);
            font-family: PingFangSC-Medium;
            font-size: vmin(24);
            color: #333333;
            text-align: center;
            max-width: vmin(96);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .data-title{
        padding: vmin(24) vmin(32) 0;
        display: flex;
        align-items: center;
    
        height: 0.8rem;
        &-content {
          color: #333333;
          text-align: left;
          font-family: "PingFang SC";
          font-size: vmin(24);
          font-style: normal;
          font-weight: 500;
          line-height: vmin(32);
          width: vmin(304);
    
        }
        &-right {
          text-align: right;
          width: vmin(160);
        }
    
        .mr{
          margin-right: vmin(32);
        }
    }

    .data-list {

        .data-item {
          display: flex;
          align-items: center;
          height: vmin(96);
          padding: vmin(24) vmin(32);
    
          &-content {
            text-align: left;
            width: vmin(304);
            display: flex;
    
            .avatar {
              display: flex;
              flex-direction: column;
              width: vmin(96);
              height: vmin(96);
              position: relative;
              margin-right: vmin(16);
              &-img{
                width: vmin(96);
                height: vmin(96);
                border-radius: vmin(96);
                border: vmin(2) solid #FFF;
                box-sizing: border-box;
              }
              &-img-off {
                opacity: 0.4;
              }
              .online {
                display: flex;
                height: vmin(32);
                padding: 0 vmin(8);
                justify-content: center;
                align-items: center;
                gap: vmin(8);
                position: absolute;
                left: vmin(20);
                bottom: 0;
                border-radius: vmin(4);
                background: #EBF3FF;
    
                color: #1472ff;
                text-align: center;
                font-family: "PingFang SC";
                font-size: vmin(20);
                font-style: normal;
                font-weight: 500;
                line-height: vmin(24);
              }
              .offline {
                display: flex;
                padding: vmin(4) vmin(8);
                justify-content: center;
                align-items: center;
                gap: vmin(8);
                position: absolute;
                left: vmin(20);
                bottom: 0;
                border-radius: vmin(4);
                background: #F5F5F5;
                backdrop-filter: blur(5.44px);
    
                color: #666666;
                text-align: center;
                font-family: "PingFang SC";
                font-size: vmin(20);
                font-style: normal;
                font-weight: 500;
                line-height: vmin(24);
              }
            }
    
            .details {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: baseline;
    
              .nickname {
                width: vmin(192);
                overflow: hidden;
                color: #333333;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-family: "PingFang SC";
                font-size: vmin(24);
                font-style: normal;
                font-weight: 400;
                line-height: normal;
              }
    
              .enter-time {
                color: #999999;
                font-family: "PingFang SC";
                font-size: vmin(24);
                font-style: normal;
                font-weight: 400;
                line-height: normal;
              }
    
            }
          }
    
          &-right {
            text-align: right;
            width: vmin(160);
            color: #999999;
            font-family: "PingFang SC";
            font-size: vmin(24);
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            display: block;
          }
    
          .mr{
            margin-right: vmin(32);
          }
    
        }
    
    }

    .finished-text {
        text-align: center;
        font-size: vmin(24);
        color: #999999;
        height: 40px;
        line-height: 40px;
    }
}

.container-friends {
    @include container-friends;
}

.viewAreaPackUp {
    @include viewAreaPackUp;
}

.viewUnPackUp {
    @include viewUnPackUp;
}

.wrapper {
    @include wrapper;
}


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

    .container-friends {
        @include container-friends;
    }

    .viewAreaPackUp {
        @include viewAreaPackUp;
    }

    .viewUnPackUp {
        @include viewUnPackUp;
    }

    .wrapper {
        @include wrapper;
    }
}

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

    .container-friends {
        @include container-friends;
    }

    .viewAreaPackUp {
        @include viewAreaPackUp;
    }

    .viewUnPackUp {
        @include viewUnPackUp;
    }

    .wrapper {
        @include wrapper;
    }
}