.user-info{ height:460rpx; position: relative; overflow: hidden; position: relative; background-color: var(--main-color); border-radius: 0 0 20rpx 20rpx; border-radius: 0 0 20rpx 20rpx; } .user-info .content{ display: flex; align-items: center; margin:218rpx 40rpx 0 46rpx; position: relative; z-index: 1; } .user-info .content .avatar{ width:112rpx;height:112rpx; border: 2px solid #FFFFFF; border-radius: 50%; } .user-info .content .name{ font-size: 36rpx; font-weight: 600; flex:1; margin-left:30rpx; } .user-info .content .setting{ background-color: #fff; width:66rpx;height:66rpx; border-radius: 50%; display: flex; align-items: center; padding:18rpx 16rpx; box-sizing: border-box; } .user-info .content .setting .icon{ width:36rpx;height:30rpx; } .property{ padding:52rpx 0; display: flex; margin-top: -100rpx; position: relative; } .property .item{ flex:1; text-align: center; } .property .item:first-child{ border-right:1rpx solid rgba(124, 134, 149, 0.3); } .property .item .key{ margin-top: 36rpx; font-size: 28rpx; } .property .item .value{ font-size:56rpx; font-weight: bold; } .invite-cell{ display:flex; justify-content: space-between; } .invite-cell .spec{ font-size: 26rpx; position: relative; color:var(--main-color); } .invite-cell .spec::before{ content:''; position: absolute; bottom: -16rpx; background: rgba(153, 153, 153, 0.2); width:100%; height: 8rpx; } .cell.is-button{ background-color: #fff; font-weight: normal; text-align: left; } .cell.is-button:hover{ background-color: #fff; }