wechat/src/pages/user/vipDetail/page.scss

.inner{
  height: 100%;
}
.vip-box{
  width: 100%;
  height: 100%;
  padding: .25rem .2rem;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  .vip-header{
    width: 100%;
    position: relative;
    margin-bottom: .4rem;
    box-shadow: 0 0 .05rem .05rem #eee;
    border-radius: .1rem;
    height: 1.8rem;
    overflow: hidden;
    img{
      position: absolute;
      top: 0;
      left: 0;
    }
    div{
      position: absolute;
      bottom: .2rem;
      left: .2rem;
      width: 80%;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: flex-start;
      .balance{
        color: #FC6243;
        padding-bottom: .1rem;
        font-weight: bold;
        span{
          font-size: .24rem;
          font-weight: bold;
          color: #FC6243;
        }
      }
      .date{
        color: #6D6D6D;
      }
    }
  }
  .vip-detail-list{
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    .title{
      font-size: .16rem;
      font-weight: bold;
      padding-bottom: .15rem;
    }
    .list-box{
      flex: 1;
      overflow-y: scroll;
      overflow-x: hidden;
      .list{
        display: flex;
        align-items: center;
        padding: .05rem 0 ;
        border-bottom: 1px solid rgba(242,242,242,1);
        span{
          width: 30%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-right: .05rem;
        }
        .date{
          color: #999;
          text-align: right;
          flex: 1;
        }
      }
    }
  }
}
.swiper-pagination{
  bottom: .2rem;
  left: 50%;
  transform: translateX(-50%);
}