.user-header { position: relative; height: 350rpx; background: #FFBF60; color: #FFFFFF; .base-leavel { display: flex; } } .role-tag { display: inline-block; width: 125rpx; height: 34rpx; margin: 19rpx 0; &+& { margin-left: 10rpx; } } .login { padding: 40rpx; } .header-money { position: absolute; bottom: -180rpx; color: #333333; width: 100%; &-list { padding: 0 30rpx; } &-item { height: 300rpx; background: #FFFFFF; border-radius: 30rpx; } } .but { color: #FFBF60; } .user-container { margin-top: 180rpx; padding: 30rpx; } .icon-list { display: flex; flex-direction: column; align-items: center; } .cw-box { background: #fef0f0; } .pet-scroll-container { width: 100%; white-space: nowrap; } .pet-scroll-content { display: flex; padding: 10rpx 0; } .pet-item { display: inline-flex; min-width: 340rpx; margin-right: 20rpx; white-space: normal; flex-shrink: 0; } .pet-name-container { display: flex; align-items: center; } .pet-gender { margin-left: 10rpx; font-size: 28rpx; width: 36rpx; height: 36rpx; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; &-male { background-color: #91C7F5; color: #FFFFFF; } &-female { background-color: #FF9CC2; color: #FFFFFF; } } .no-pet-tip { background: #FFF8EC; border: 1px solid #FFE4B8; align-items: center; justify-content: space-between; margin-bottom: 20rpx; .no-pet-text { font-size: 26rpx; color: #B97132; flex: 1; } } .add-pet-btn { background: #FFBF60; color: #FFFFFF; font-size: 26rpx; padding: 10rpx 30rpx; border-radius: 30rpx; text-align: center; } .pd4 { padding: 1% 4% 2% 4%; box-sizing: border-box; } .btn-share { border: none; padding: 0; display: inline-block; margin: 0; color: #000000; font-size: 28rpx; line-height: 40rpx; }