proginn-frontend/assets/css/otherpage/user/userCard.scss

@import "../../scssCommon.scss";

.userCard {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: #fff;
  margin: 0;
  -webkit-overflow-scrolling: touch;

  position: relative;

  .userList {
    padding-left: pxtovw(10);

    .cell {
      height: pxtovw(80);
      display: flex;
      justify-content: center;
      align-items: center;

      .userImg {
        flex-shrink: 0;
        width: pxtovw(50);
        height: pxtovw(50);
        font-size: 0;
        position: relative;
        img {
          width: pxtovw(50);
          height: pxtovw(50);
          border-radius: 50%;
        }
        &.vip1:after,  &.vip2:after, &.vip3:after{
          /*个人会员*/
          background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAzFBMVEUAAADspRfxvC7spRfyvC/xvS/vvS7tpBPxuy/wvCvsoxHuriXxvDHxvDHwvS/spRjwvC7rpBfwvC/rpRbrpRfspRfuphbqoxfyvi7rphjroxTtpxXyvS/spBnyvi7yqgDtwSztpxL/sTvrnRTwvDDrpRj+/v3+/Pj++vL99+v0zm7zyGDyxlbvtlPus0j89eP88uH88tn67Nf77c/658v66ML44b333qT21Jz2143zyYXwvWTwu2Hxw03xwEPxvjzurjztqzPsqCnrpRsZrKOpAAAAJHRSTlMA+vj0saCLi2NBQTT78erq4eHMzLOvo5x1dWRiUVEnJx0dDQ0NCF6ZAAAArElEQVQY05XP1xKCMBBA0bUr2Huv2VAE7L3r//+TGwOKvHFnkpmch2QDoRqXmQhFlYmLcfZDrEpLMj9iSlia/SO2ATJROk89tGlFlM+FFj9IPHKH9hoMi3TecVPgie/JSiOAfp50o1sMHX37QiwMgFJzjN0Ws+tjvnwixlRh8q2LsVobdzIF3LpZGkDTbHq5J8Wb1TwjYgd8NeVIrS94fxU/DJRg2AgaaR3C9wYKgRx4iNBrzQAAAABJRU5ErkJggg==') no-repeat;
          content: " ";
          position: absolute;
          right: 0px;
          bottom: 0px;
          width: pxtovw(13.33);
          height: pxtovw(13.33);
          background-size: cover;
        }
        &.vip3:after {
          /*企业标识*/
          background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAvVBMVEUAAAAAx10A13wAyF0A1nwAx10A130AyF0AxlwA1nwAyF0A0mwAym4AxGIA13wA2H0A2HwA1nwAx10A130Ax10A130Axl0A2HwAx14A2HwAyV4A1H0A1X0A1n4AxlsA2HsAyV0A13wAyF7///8A25P5/vzf+vDT+OoA57EA5acA3poA2IEA0HMAymTz/frz/Pnr/fbr/PXB+OXC9N+X8taZ7ctv7sdz6LsA4qIa3qIA4p8A2IwA24sA14oA04DLdbGUAAAAIXRSTlMA+PrunZ2Li2NAQCcdDffx6uHhysqzs6iodXVkYlFRNDSJn4b6AAAAqklEQVQY05XP1w7DIAxAUXc3TdK9tyG76d7z/z+rJlCh5i33AYkjIWzIlN1BERN1bYU91Mj60sqokaoIm+A/siqAkUdchT901ozlajCg641fJF75k84hWC26n3gg8M7PZG0LwGzS+4P7QPZ2j/S6YAK1aCC+vJ0T772YbAlJRh0x2vj+9pP8oprRBCHnDtlcLzpFxCCSM+pGcqSxFrWr2DBVEVkpbaRkmfsC64QaGgNTrsMAAAAASUVORK5CYII=') no-repeat;
          background-size: cover;
        }
        &.vip1:after {
          /*企业初创*/
          background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAulBMVEUAAAAAtP8Amf8Atf8Amf8As/8Amv8Atv8Amf8Ap/8Ao/8Amf8Amf8Atf8Amf8Atf8Amv8AtP8AmP8Atv8Amf8As/8AmP8Atf8Amf8AtP8Am/8Atf8Al/8Atf8Amf8As/8Amv8Atf8AmP8Asf8Aif8AtP8Amf////8Axv8Au//5/f/s+f/g9v/V8v/E7f8AzP8Atv8Apv/0+//0+v+b5/933/+e3v990/8u0/8O0f9Aw/8vwP8Av/8Arf+J2XHQAAAAJXRSTlMA+fmdnWNjQEAnHf338fHq6uHhysqzs6iojIyJiXV1UVE0NA0NhW9hXwAAAKdJREFUGNOVztcOgzAMQFF3A91779phU7rn//9WHQVU4I0rJVKOFNmQq30fZSQbHCIc4h9ppGyKSaSZtAqmkaoAtQLiMYjR4lPUYMxPU1wV3oW8J2B0+X0RD4kvcWPrGQB6m//7tomEts/W0YHbNhEt1/mEjhsStXbS1Czz5HnnL1FDg6g1ayCExZM3SuJdn2+iehUSLdVKK0g1l7iATCWkcoaksuXuBz+cHHE5qD7TAAAAAElFTkSuQmCC') no-repeat;
          background-size: cover;
        }
      }
      &:last-child {
        .right {
          //border-bottom: 0;
        }
      }

      .right {
        margin-left: pxtovw(10);
        width: pxtovw(295);
        height: pxtovw(80);
        border-bottom: 1px solid #f4f4f4;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .userInfo {
          width: pxtovw(230);
          .name {
            height: pxtovw(22);
            font-size: pxtovw(16);
            font-weight: 500;
            color: rgba(34, 34, 34, 1);
            line-height: pxtovw(22);
          }
          .tips {
            margin-top: pxtovw(px);
            height: pxtovw(17);
            font-size: pxtovw(12);
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: pxtovw(17);
          }
        }
        .addTime {
          margin-top: pxtovw(15);
          align-self: flex-start;
          margin-right: pxtovw(10);

          p {
            height: pxtovw(17);
            font-size: pxtovw(12);
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: pxtovw(17);
          }
        }
      }
    }
  }

  .noneList {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;

    p {
      height: pxtovw(21);
      font-size: pxtovw(15);
      color: #999;
      line-height: pxtovw(21);
    }
  }

  .popUp {
    position: absolute;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.7);

    display: flex;
    justify-content: center;
    align-items: center;

    .toastBox {
      width: pxtovw(300);
      height: pxtovw(427);
      border-radius: pxtovw(8);
      background-color: #fff;
      position: relative;

      .content {
        width: 100%;
        height: 100%;
        padding: pxtovw(30) pxtovw(20);

        .userImg {
          margin: 0 auto;
          width: pxtovw(75);
          height: pxtovw(75);
          position: relative;
          img {
            width: pxtovw(75);
            height: pxtovw(75);
            border-radius: 50%;
          }
          &.vip1:after,  &.vip2:after, &.vip3:after{
            /*个人会员*/
            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAzFBMVEUAAADspRfxvC7spRfyvC/xvS/vvS7tpBPxuy/wvCvsoxHuriXxvDHxvDHwvS/spRjwvC7rpBfwvC/rpRbrpRfspRfuphbqoxfyvi7rphjroxTtpxXyvS/spBnyvi7yqgDtwSztpxL/sTvrnRTwvDDrpRj+/v3+/Pj++vL99+v0zm7zyGDyxlbvtlPus0j89eP88uH88tn67Nf77c/658v66ML44b333qT21Jz2143zyYXwvWTwu2Hxw03xwEPxvjzurjztqzPsqCnrpRsZrKOpAAAAJHRSTlMA+vj0saCLi2NBQTT78erq4eHMzLOvo5x1dWRiUVEnJx0dDQ0NCF6ZAAAArElEQVQY05XP1xKCMBBA0bUr2Huv2VAE7L3r//+TGwOKvHFnkpmch2QDoRqXmQhFlYmLcfZDrEpLMj9iSlia/SO2ATJROk89tGlFlM+FFj9IPHKH9hoMi3TecVPgie/JSiOAfp50o1sMHX37QiwMgFJzjN0Ws+tjvnwixlRh8q2LsVobdzIF3LpZGkDTbHq5J8Wb1TwjYgd8NeVIrS94fxU/DJRg2AgaaR3C9wYKgRx4iNBrzQAAAABJRU5ErkJggg==') no-repeat;
            content: " ";
            position: absolute;
            right: 0px;
            bottom: 0px;
            width: pxtovw(20);
            height: pxtovw(20);
            background-size: cover;
          }
          &.vip3:after {
            /*企业标识*/
            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAvVBMVEUAAAAAx10A13wAyF0A1nwAx10A130AyF0AxlwA1nwAyF0A0mwAym4AxGIA13wA2H0A2HwA1nwAx10A130Ax10A130Axl0A2HwAx14A2HwAyV4A1H0A1X0A1n4AxlsA2HsAyV0A13wAyF7///8A25P5/vzf+vDT+OoA57EA5acA3poA2IEA0HMAymTz/frz/Pnr/fbr/PXB+OXC9N+X8taZ7ctv7sdz6LsA4qIa3qIA4p8A2IwA24sA14oA04DLdbGUAAAAIXRSTlMA+PrunZ2Li2NAQCcdDffx6uHhysqzs6iodXVkYlFRNDSJn4b6AAAAqklEQVQY05XP1w7DIAxAUXc3TdK9tyG76d7z/z+rJlCh5i33AYkjIWzIlN1BERN1bYU91Mj60sqokaoIm+A/siqAkUdchT901ozlajCg641fJF75k84hWC26n3gg8M7PZG0LwGzS+4P7QPZ2j/S6YAK1aCC+vJ0T772YbAlJRh0x2vj+9pP8oprRBCHnDtlcLzpFxCCSM+pGcqSxFrWr2DBVEVkpbaRkmfsC64QaGgNTrsMAAAAASUVORK5CYII=') no-repeat;
            background-size: cover;
          }
          &.vip1:after {
            /*企业初创*/
            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAulBMVEUAAAAAtP8Amf8Atf8Amf8As/8Amv8Atv8Amf8Ap/8Ao/8Amf8Amf8Atf8Amf8Atf8Amv8AtP8AmP8Atv8Amf8As/8AmP8Atf8Amf8AtP8Am/8Atf8Al/8Atf8Amf8As/8Amv8Atf8AmP8Asf8Aif8AtP8Amf////8Axv8Au//5/f/s+f/g9v/V8v/E7f8AzP8Atv8Apv/0+//0+v+b5/933/+e3v990/8u0/8O0f9Aw/8vwP8Av/8Arf+J2XHQAAAAJXRSTlMA+fmdnWNjQEAnHf338fHq6uHhysqzs6iojIyJiXV1UVE0NA0NhW9hXwAAAKdJREFUGNOVztcOgzAMQFF3A91779phU7rn//9WHQVU4I0rJVKOFNmQq30fZSQbHCIc4h9ppGyKSaSZtAqmkaoAtQLiMYjR4lPUYMxPU1wV3oW8J2B0+X0RD4kvcWPrGQB6m//7tomEts/W0YHbNhEt1/mEjhsStXbS1Czz5HnnL1FDg6g1ayCExZM3SuJdn2+iehUSLdVKK0g1l7iATCWkcoaksuXuBz+cHHE5qD7TAAAAAElFTkSuQmCC') no-repeat;
            background-size: cover;
          }
        }

        .name {
          margin-top: pxtovw(5);
          height: pxtovw(21);
          font-size: pxtovw(15);
          font-weight: 600;
          color: rgba(34, 34, 34, 1);
          line-height: pxtovw(21);
          text-align: center;
        }

        .userInfo {
          margin-top: pxtovw(35);
          width: 100%;
          .cell {
            width: 100%;
            height: pxtovw(40);
            display: flex;
            align-self: center;

            .cname {
              width: pxtovw(50);
              font-size: pxtovw(14);
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              text-align: left;
            }

            .cvalue {
              width: pxtovw(160);
              font-size: pxtovw(14);
              font-weight: 500;
              color: rgba(34, 34, 34, 1);
              text-align: left;
            }
            .cbutton {
              width: pxtovw(50);
              font-size: pxtovw(14);
              font-weight: 400;
              color: rgba(48, 142, 255, 1);
              text-align: right;
            }
          }
        }

        .button {
          margin-top: pxtovw(27);
          height: pxtovw(43);
          background: rgba(48, 142, 255, 1);
          box-shadow: 0 pxtovw(4) pxtovw(9) 0 rgba(0, 147, 253, 0.29);
          border-radius: pxtovw(24);
          display: flex;
          justify-content: center;
          align-items: center;
          p {
            font-size: pxtovw(15);
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: pxtovw(21);
          }
        }
      }

      .closeIcon {
        position: absolute;
        bottom: pxtovw(-50);
        left: 50%;
        transform: translateX(-50%);
        width: pxtovw(30);
        height: pxtovw(30);
        background: url('~@/assets/img/other/closeIcon@2x.png') no-repeat;
        background-size: cover;
      }
    }
  }

}


.page-infinite-loading {
  text-align: center;
  height: pxtovw(50);
  line-height: pxtovw(50);

  display: flex;
  justify-content: center;
  align-items: center;

  span {
    display: inline-block;
    vertical-align: middle;
    margin-right: pxtovw(5);
  }
}

.pageLoading {
  width: 100vw;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}