.userinfo-container.data-v-875c692e { background-color: #f5f5f5; height: 100vh; } .top-bar.data-v-875c692e { display: flex; align-items: center; padding: 30rpx 20rpx; background-color: #fff; border-bottom: 1px solid #eee; } .title.data-v-875c692e { width: 100vw; text-align: center; font-size: 34rpx; font-weight: bold; } .avatar-all.data-v-875c692e { display: flex; flex-direction: column; align-items: center; padding: 60rpx 0; background-color: #fff; margin-bottom: 20rpx; } .avatar.data-v-875c692e { width: 180rpx; height: 180rpx; border-radius: 50%; background-color: #e6f7ff; display: flex; align-items: center; justify-content: center; margin-bottom: 30rpx; } .name.data-v-875c692e { font-size: 36rpx; font-weight: bold; color: #333; margin-bottom: 15rpx; } .room.data-v-875c692e { font-size: 28rpx; color: #666; background-color: #f0f9ff; padding: 8rpx 20rpx; border-radius: 20rpx; } .info-list.data-v-875c692e { background-color: #fff; padding: 0 20rpx; } .info-item.data-v-875c692e { display: flex; align-items: center; padding: 30rpx; border-bottom: 1px solid #eee; } .info-label.data-v-875c692e { font-size: 30rpx; color: #666; } .info-value.data-v-875c692e { flex: 1; font-size: 30rpx; text-align: right; } .status-in.data-v-875c692e { padding: 5rpx 20rpx; border-radius: 20rpx; font-size: 26rpx; background-color: #e6fffb; color: #00b42a; } .logout-btn.data-v-875c692e { display: flex; align-items: center; justify-content: center; width: 40vw; height: 4vh; background-color: #36bffa; color: #fff; border-radius: 40rpx; font-size: 30rpx; margin-top:5vh; }