.pageBgImg { .userInfo { width: 100%; padding: 30rpx 30rpx 100rpx 30rpx; display: flex; align-items: center; .avatar { width: 120rpx; height: 120rpx; border-radius: 50%; overflow: hidden; background: url('../../../static/images/mineIcon/avatar.png'); background-size: 100% 100%; // background: #f4f4f4; image { } } .rightInfo { flex: 1; width: 0; padding-left: 20rpx; .name-row { display: flex; justify-content: space-between; .leftTxt { flex: 1; width: 0; display: flex; align-items: center; .name { font-size: 32rpx; color: #fff; font-weight: 700; } .arrowIcon { width: 36rpx; height: 36rpx; margin-left: 4rpx; } } .scanCode { padding: 0 20rpx 24rpx 20rpx; image { width: 36rpx; height: 36rpx; } } } .phone { font-size: 26rpx; color: #fff; // margin-top: 20rpx; } } } .pad { border-radius: 20rpx 20rpx 0 0; background-color: #f4f4f4; transform: translateY(-22rpx); } .ul { display: flex; width: 100%; height: 154rpx; background: #FFFFFF; border-radius: 20rpx; padding: 20rpx; transform: translateY(-60rpx); .li { flex: 1; display: flex; align-items: center; flex-direction: column; justify-content: center; .icon { width: 77rpx; height: 77rpx; } .text { font-size: 28rpx; color: #333; } } } .ul2 { background: #FFFFFF; border-radius: 20rpx; margin-top: -40rpx; padding: 4rpx 20rpx; .li2 { display: flex; height: 100rpx; display: flex; align-items: center; border-bottom: 1rpx solid #F6F7FA; &:last-child { border: none; } .icon { width: 64rpx; height: 62rpx; image { } } .text { font-size: 28rpx; color: #333; margin-left: 20rpx; } .arrowRight { width: 36rpx; height: 36rpx; margin-left: auto; } } } }