@import "./user.skeleton.wxss";
page{
    background: #f7f7f7 !important;
}
.topBackImage{
    position: absolute;
    z-index: -1;
    top: -2rpx;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 240rpx;
}
.userPage{
    /* padding: 0 32rpx; */
}
.container{
    background: #ffffff !important;
    border-radius: 16rpx;
    margin-top: 24rpx;
    overflow: hidden;
}
.userInfoContainer{
    
}
.notLogContent{
    padding-bottom: 16rpx;
    padding-left: 32rpx;
    padding-top: 26rpx;
}
.logOnContent{
    padding-left: 32rpx;
}
.userCode{
    padding-right: 32rpx;
}
.userCode .icon{
    width: 68rpx;
    height: 68rpx;
}
.newUserTagContent{
    padding-top: 16rpx;
}
.changeBtn{
    font-size: 24rpx;
    color: #5F6268;
    border-radius: 30rpx;
    padding: 0 16rpx;
    position: relative;
}
.changeBtn::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border: 2rpx solid #AAAAAA ;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 60rpx;
  }
  .changeBtn.chara{
    color: #FFFFFF;
  }
  .changeBtn.chara::after{
    border: 2rpx solid rgba(255, 255, 255, 0.5);
  }
.leftInfo{
    font-size: 36rpx;
    font-weight: bold;
    color: #161719 ;
}
.leftInfo .defaultHead{
    width: 132rpx;
    height: 132rpx;
    margin-right: 24rpx;
}
.toRight{

}
.toRight image{
    
}
.menuItem{
    flex: 1;
    font-size: 24rpx;
    color: #5F6268;
    align-items: center;
    padding: 24rpx 0;
 
}
.menuItem .icon{
    margin-bottom: 8rpx;
}
.menuItem .iconBox{
    position: relative;
    width: 48rpx;
    height: 48rpx;
}
.menuItem .menuNumner{
    position: absolute;
    top: 0;
    left: 36rpx;
    min-width: 28rpx;
    height: 28rpx;
    padding: 0 4rpx;
    background: #e73e2d !important;
    border: 1px solid #ffffff !important;
    border-radius: 14rpx 14rpx 14rpx 0;
    font-size: 20rpx;
    color: #ffffff !important;
    z-index: 0;
}
.orderHead{
    height: 96rpx;
}
.orderHead .orderTitle{
    padding-left: 24rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #161719 ;
}
.allOrder{
    padding: 0 24rpx;
    font-size: 24rpx;
    color: #909297;
    height: 100%;
}
.allOrder .icon{
    margin-left: -8rpx;
}
.orderItem{
    flex: 1;
    font-size: 24rpx;
    color: #161719 !important;
    padding-bottom: 20rpx;
    flex-direction: column;
}

.orderItem.bot{
    padding: 0 0 20rpx 0 !important;
    margin: 0 !important;
    line-height: normal !important;
    width: auto !important;
}
.iconBox{
    position: relative;
    width: 56rpx;
    height: 56rpx;
    margin-bottom: 8rpx;
}
.orderItem .icon{
    width: 56rpx;
    height: 56rpx;
}
.iconBox .iconNumber{
    position: absolute;
    top: 0;
    left: 40rpx;
    min-width: 28rpx;
    height: 28rpx;
    padding: 0 4rpx;
    background: #e73e2d !important;
    border: 1px solid #ffffff !important;
    border-radius: 14rpx 14rpx 14rpx 0;
    font-size: 20rpx;
    color: #ffffff !important;
}

.serviceTitle{
    padding-left: 24rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #161719 !important;
    height: 96rpx;
}
.serviceList{
    flex-wrap: wrap;
}
.serviceItem{
    width: 25% !important;
    flex-direction: column;
    font-size: 24rpx;
    color: #5f6268 !important;
    padding: 0 !important;
    padding-bottom: 24rpx !important;
    margin: 0 !important;
    background: #FFFFFF !important;
    font-weight: normal !important;
}
.serviceItem .icon{
    margin-bottom: 8rpx;
}
.userHead{
    width: 132rpx;
    height: 132rpx;
    background: #f7f7f7;
    border-radius: 50%;
    margin-right: 24rpx;
    position: relative;
}
.userHead .avatar-wrapper {
    width: 100%;
    height: 100%;
    background-color: #00000000 !important;
}
.userHead image{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.userHead .menmberIcon{
    position: absolute;
    z-index: 1;
    width: 32rpx;
    height: 32rpx;
    bottom: 0;
    right: 0;
}
.nameBox{

}
.nameBox .userName{
    font-size: 36rpx;
    font-weight: bold;
    color: #161719;
    max-width: 400rpx;
}
.nameBox .userName.chara{
    color: #FFFFFF !important;
}
.userCom{
    padding: 0rpx 32rpx 32rpx 32rpx;
}
.userCom.chara{
    padding: 44rpx 32rpx 32rpx 32rpx;
}
.profitContent{
    padding: 0 32rpx;
}
.profitInfo{
    width: 100%;
    height: 308rpx;
    background: #FFFFFF !important;
    border-radius: 16rpx;
    overflow: hidden;
    position: relative;
    bottom: -44rpx;
    padding: 24rpx 32rpx;
}
.profitContent .topTag{
    position: absolute;
}
.profitBack{
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    height: 28rpx;
}
.profitTop{
    flex: 1;
}
.toShareCode{
    margin-top: 24rpx;
    height: 56rpx;
    border-radius: 8px;
    background: #FFFFFF;
    overflow: hidden;
}
.toShareCode .box{
    padding: 0 8rpx;
}
.toShareCode .box{
    font-size: 26rpx;
    color: #A46F1F;
}
.toShareCode .icon{
    margin-right: 8rpx;
}
.profitWarp{
    display: flex;
}
.profitWarp.bot{
    position: relative;
}
.profitWarp.bot::after{
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    background: #EEEEEE !important;
    width: 100%;
    height: 2rpx;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    z-index: 10;
}
.profitWarp .profitItem{
    padding-bottom: 10rpx;
    position: relative;
}
.profitWarp.bot .profitItem{
    padding-bottom: 0;
    padding-top: 22rpx;
}
.profitWarp.bot .profitItem.noPt{
    /* padding-top: 18rpx; */
}
.profitItem{
    flex: 1;
   
}
.profitItem.left{
    position: relative;
    margin-right: 20rpx;
}
.profitItem.left::after{
    content: '';
    position: absolute;
    right: 0;
    top: 8rpx;
    bottom: 0rpx;
    background: #EEEEEE !important;
    width: 2rpx;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    z-index: 10;
}
.profitWarp.bot .profitItem.left::after{
    top: 0rpx;
}
.profitItem .title{
    font-size: 24rpx;
    color: #5F6268 !important;
    display: flex;
    align-items: baseline;
}
.profitItem .title .goBot{
    height: 36rpx;
    line-height: 36rpx;
    text-align: center;
    background: rgba(255, 255, 255,0.2);
    border-radius: 30rpx;
    font-size: 20rpx;
    color: #FFFFFF !important;
    margin-left: 8rpx;
    background: #DF3120 !important;
    border-radius: 36rpx;
    overflow: hidden;
    padding: 0 12rpx;
}
.profitItem .profit{
    font-size: 24rpx;
    color: #DF3120 !important;
    margin-top: 8rpx;
    display: flex;
    align-items: baseline;
}
.profitItem .profit .pr{
    font-size: 40rpx;
    font-weight: bold;
    margin-right: 8rpx;
}
.profitItem .profitBot{
    position: relative;
    font-size: 20rpx;
    color: #ffd3b6;
    width: 116rpx;
    height: 38rpx;
    margin-top: 16rpx;
}
.profitItem .profitBot::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border: 2rpx solid #ffd3b6;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 16rpx;
}
.profitItem .tool{
    font-size: 22rpx;
    color: #AAAAAA !important;
}
.userTag{
    /* display: inline-block; */
}
.profitItem .iconCon{
    padding-right: 24rpx;
    padding-top: 14rpx;
    font-size: 0;
    position: absolute;
    left: 166rpx;
    top: 0;
    z-index: 1;    
}
.tui-modal-custom{
    padding: 40rpx 32rpx;
}
.mTitle{
    font-size: 36rpx;
    color: #161719;
    text-align: center;
}
.mTable{
    position: relative;
    margin-top: 24rpx;
}
.mTable::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border: 2rpx solid #e0e1e5;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}
.mTr{
    position: relative;
}
.mTr::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: #e0e1e5;
    width: 100%;
    height: 2rpx;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    z-index: 10;
}
.mTable .mTr:last-child:after{
    display: none;
}
.mTh{
    position: relative;
    text-align: center;
    padding: 8rpx 0;
}
.mTh.one{
    width: 80rpx;
}
.mTh.tow, .mTh.three{
    flex: 1;
    position: relative;
}
.mTh.tow::after, .mTh.three::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: #e0e1e5;
    width: 2rpx;
    height: 100%;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    z-index: 10;
}
.mTh{
    font-size: 24rpx;
    color: #5f6268;
    height: 98rpx;
}
.mTh .hTool{
    font-size: 24rpx;
    color: #909297;
}
.mTr.number{
    font-size: 28rpx !important;
    color: #161719 !important;
}
.mTr.number .mTh{
    height: 60rpx;
}
.mTr.number .one{
    color: #5f6268 !important;
}
.closeModal{
    padding: 42rpx 32rpx 0 24rpx;
}
.mToolList{
    margin-top: 16rpx;
}
.mToolItem{
    font-size: 24rpx;
    color: #5f6268;
}
.mBotBox{
    padding-top: 40rpx;
}
.mBotBox .bot{
    width: 176rpx;
    height: 72rpx;
    background: #e73e2d;
    border-radius: 48rpx;
    font-size: 28rpx;
    color: #ffffff;
}
.newModalTool.kw{
    padding-top: 10rpx;
    text-align: left;
}
.newModalTool.kw.one{
    padding-top: 24rpx;
}
.ordinaryContent{
    height: 180rpx;
    position: relative;
    padding: 0 32rpx;
    margin-top: 52rpx;
}
.ordinaryYY{
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 1;
}
.ordinaryInfo{
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
}
.ordinaryInfo .oBack{
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 1;
}
.infoMain{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.mLogoBox{
    padding-left: 32rpx;
    padding-top: 24rpx;
}
.mLogoBox .icon{
    width: 36rpx;
    height: 36rpx;
}
.mLogoBox .logo{
    width: 225rpx;
    height: 30rpx;
    margin-left: 8rpx;
}
.menmberBtnBox{
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    padding: 24rpx 16rpx 0 16rpx;
}
.menmberBtn{
    padding-left: 16rpx;
    padding-right: 32rpx;
    height: 44rpx;
    background: #625646;
    border-radius: 68rpx;
    overflow: hidden;
    font-size: 24rpx;
    color: #F9DCB0;
    position: relative;
}
.menmberBtn .icon{
    width: 44rpx;
    height: 44rpx;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
}
.menmberTextBox{
    justify-content: space-between;
    align-items: center;
    padding: 0 32rpx;
    margin-bottom: 18rpx;
}
.menmberTextBox .textItem{
    text-align: center;
}
.textItem .key{
    font-size: 24rpx;
    color: #A87931;
}
.textItem .value{
    font-size: 22rpx;
    color: rgba(168, 121, 49, 0.8);
    padding-top: 4rpx;
}
.menmberTextBox .link{
    height: 50rpx;
    width: 2rpx;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}   
.logOnBox{
    padding-top: 26rpx;
    position: relative;
}
.logOnBox.chara{
    min-height: 464rpx;
}
.newHeadBack{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 464rpx;
    top: 0;
    left: 0;
}
.newHeadMain{
    position: relative;
    z-index: 2;
}
.rightsContent{
    height: 88rpx;
    background: linear-gradient(90deg, #352B27 0%, #3B332C 100%) !important;
    border-radius: 16rpx;
    overflow: hidden;
    padding: 0 16rpx;
    margin-top: 24rpx;
}
.rightsContent .leftText{
    font-size: 28rpx;
    color: #E4C692 !important;
}
.rightsContent .leftText .icon{
    margin-right: 4rpx;
}
.rightsContent .rightBtn{
    height: 46rpx;
    background: #E4C692 !important;
    border-radius: 36rpx;
    font-size: 24rpx;
    color: #333333 !important;
    padding: 0 16rpx;
}