.content-wrap { background: #F9F9F9; height: 100%; } .tabBarView { position: fixed; bottom: 0; } .head-wrap { position: relative; width: 750rpx; height: 100%; overflow: hidden; display: flex; flex-direction: column; } .content { position: absolute; top: 20%; left: 34rpx; right: 30rpx; border-radius: 12rpx; } .user-info { display: flex; position: relative; background-color: transparent; } .user-name { height: 48rpx; font-size: 32rpx; font-weight: 500; color: #333333; line-height: 48rpx; } .user-desc { height: 40rpx; font-size: 24rpx; font-weight: 400; color: #333333; line-height: 40rpx; } .head-right{ transform: translateY(40rpx); } .user-head { margin-right: 6px; border-radius: 50%; border: 6rpx solid rgba(184, 27, 27, 0); } .user-image { width: 152rpx; height: 152rpx; box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(237, 86, 159, 0.1); border: 2rpx solid #FFFFFF; border-radius: 50%; } .balance-info { width: 686rpx; height: 268rpx; background: #d11515; box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(255, 224, 92, 0.05); border-radius: 20rpx; position: relative; z-index: 2; } .balance-name { font-size: 32rpx; font-weight: 700; color: #333333; line-height: 48rpx; position: absolute; top: 30rpx; left: 30rpx; } .h-content { width: 100%; margin: 24rpx; display: flex; justify-content: space-around; position: absolute; bottom: 10rpx; } .button-wrap{ display: flex; justify-content: center; align-items: center; } .nav-bar{ width: 686rpx; background: #FFFFFF; box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(255, 224, 92, 0.05); border-radius: 20rpx; position: relative; } .nav-bar1{ }