.user-info{ height:460rpx; background-color: #1A4DEB; position: relative; overflow: hidden; } .user-info::before{ content:''; position: absolute; width:215rpx;height:215rpx; border: 50rpx solid #2459FF; border-top:0; border-left: 0; top:0;left:0; border-radius: 0 0 100% 0; } .user-info::after{ content:''; position: absolute; width:135rpx;height:135rpx; border: 50rpx solid #2459FF; border-right:0; border-bottom: 0; right:0;bottom:0; border-radius: 100% 0 0 0; z-index: 0; } .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; } .user-info .content .name{ color:#fff; 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; color:#1A4DEB; }