wechat/src/pages/user/mainPage/userCenter/page.scss

.mainPage{
  overflow-y: scroll;
  overflow-x: hidden;
}

.loading{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.long{
  margin-bottom: .65rem;

}
.user-card{
  width: 3.35rem;
  background:rgba(255,255,255,1);
  box-shadow: 0px 0px .1rem 0px rgba(0,0,0,.1);
  border-radius: 8px;
  position: absolute;
  top: .35rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: .2rem .2rem .05rem .2rem;
  box-sizing: border-box;
  >div:nth-of-type(1){
    display: flex;
    margin-bottom: .1rem;
    img{
      width: .56rem;
      height: .56rem;
      margin-right: .1rem;
      border-radius: 50%;
    }
    div{
      color: #7D7D7D;
      font-size: .14rem;
    }
    .user-name{
      color: #000;
      font-size: .18rem;
    }
  }
  .code{
    text-align: center;
    div{
      color: #999999;
      text-align: left;
    }
  }
  .bind{
    margin: .1rem;
    span:nth-of-type(1){
      color: #7D7D7D;
      font-size: .14rem;
    }
    span:nth-of-type(2){
      border:1px solid #FC6243;
      padding: .02rem .1rem .03rem;
      border-radius: .2rem;
      color: #FC6243;
      margin-left: .1rem;
    }
  }
}

.userTop_view {
  position: relative;
  height: 1.7rem;
  .gradient_bg {
    position: absolute;
    width: 100%;
    height: 1.7rem;
    background-image: linear-gradient(24deg, #fa508c 0%, #ffc86e 100%);
    z-index: 2;
  }
  .zIndex_bg {
    position: absolute;
    bottom: -.6rem;
    left: 0;
    width: 120%;
    height: .6rem;
    transform: rotate(351.5deg);
    transform-origin: bottom left;
    z-index: 3;
    background-color: #fff;
  }
  .userAvatar_Border {
    position: absolute;
    bottom: -0.25rem;
    left: 50%;
    border: 0.1rem solid rgba(255, 255, 255, 0.2);
    transform: translateX(-50%);
    width: 1rem;
    height: 1rem;
    z-index: 3;
    border-radius: 50%;
  }
  .userAvatar {
    width: 1rem;
    height: 1rem;
    background-color: #000;
    box-sizing: border-box;
    border-radius: 50%;
    text-align: center;
    img {
      display: inline-block;
      vertical-align: middle;
      border-radius: 50%;
    }
  }
  .uesr-info {
    position: absolute;
    bottom: -1rem;
    left: 0;
    width: 100%;
    z-index: 4;
    .user-name {
      font-size: .24rem;
      text-align: center;
      color:rgba(0,0,0,1);
    }
    .mobile{
      color:rgba(125,125,125,1);
      font-size: .2rem;
      padding-top: .1rem;
      text-align: center;
    }
  }
}

.vip-privilege{
  height: 1.2rem;
  margin: 0 .25rem;
  background:rgba(255,255,255,1);
  border-radius:8px;
  box-sizing: border-box;
  .privilege-item {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    .icon-01{
      position: absolute;
      top: .05rem;
      right: .05rem;
      font-size: .18rem;
    }
    .img-box {
      width: 0.24rem;
      height: 0.18rem;
    }
    span:nth-of-type(1){
      font-size: .14rem;
      color:rgba(102,102,102,1);
      padding: 0.08rem 0 0.04rem;
    }
    span:nth-of-type(2){
      font-size: 12px;
      color:rgba(153,153,153,1);
    }
  }
}

.userCenter-menu{
  padding: 0 0.25rem 0.2rem;
  box-sizing: border-box;
  .menu-item{
    justify-content: space-between;
    padding: 0.1rem 0.05rem;
    border-bottom: 1px solid rgba(242,242,242,1);
    span,i{
      font-size: .14rem;
      color:rgba(102,102,102,1);
    }
  }
}