.container.data-v-0d235e2a { width: 100%; height: 100vh; background-color: #FFFFFF; display: flex; flex-direction: column; padding-top: 30px; box-sizing: border-box; } .top-header.data-v-0d235e2a { display: flex; align-items: center; padding: 20rpx 30rpx; background-color: #81C784; position: relative; } .back-btn.data-v-0d235e2a { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; } .back-icon.data-v-0d235e2a { font-size: 40rpx; color: #FFFFFF; font-weight: bold; } .tabs-primary.data-v-0d235e2a { flex: 1; display: flex; background-color: rgba(255, 255, 255, 0.2); border-radius: 30rpx; padding: 4rpx; } .tab-item.data-v-0d235e2a { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12rpx 0; border-radius: 26rpx; transition: all 0.3s; } .tab-item.active.data-v-0d235e2a { background-color: #FFFFFF; } .tab-item.active .tab-text.data-v-0d235e2a { color: #333333; font-weight: bold; } .tab-text.data-v-0d235e2a { font-size: 28rpx; color: #FFFFFF; } .tabs-secondary.data-v-0d235e2a { display: flex; background-color: #FFFFFF; padding: 0 30rpx; border-bottom: 1rpx solid #F0F0F0; } .tab-item-secondary.data-v-0d235e2a { padding: 20rpx 40rpx; position: relative; } .tab-item-secondary.active .tab-text-secondary.data-v-0d235e2a { color: #333333; font-weight: bold; } .tab-item-secondary.active.data-v-0d235e2a::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60rpx; height: 4rpx; background-color: #81C784; border-radius: 2rpx; } .tab-text-secondary.data-v-0d235e2a { font-size: 28rpx; color: #999999; } .scroll-content.data-v-0d235e2a { flex: 1; width: 100%; background-color: #FFFFFF; padding-bottom: env(safe-area-inset-bottom); } .top-three-section.data-v-0d235e2a { display: flex; justify-content: space-around; align-items: flex-end; padding: 60rpx 30rpx 40rpx; background-color: #FFFFFF; } .top-three-item.data-v-0d235e2a { display: flex; flex-direction: column; align-items: center; } .top-three-item.rank-1.data-v-0d235e2a { order: 2; transform: scale(1.1); } .top-three-item.rank-2.data-v-0d235e2a { order: 1; } .top-three-item.rank-3.data-v-0d235e2a { order: 3; } .top-avatar.data-v-0d235e2a { width: 140rpx; height: 140rpx; border-radius: 50%; margin-bottom: 20rpx; background-color: #F5F5F5; border: 4rpx solid #81C784; } .top-three-item.rank-1 .top-avatar.data-v-0d235e2a { width: 160rpx; height: 160rpx; border-color: #FFD700; } .top-name.data-v-0d235e2a { font-size: 28rpx; color: #333333; margin-bottom: 10rpx; font-weight: bold; } .top-rank.data-v-0d235e2a { font-size: 36rpx; color: #333333; font-weight: bold; } .top-three-item.rank-1 .top-rank.data-v-0d235e2a { font-size: 48rpx; color: #FFD700; } .rank-list.data-v-0d235e2a { padding: 0 30rpx; background-color: #FFFFFF; } .rank-item.data-v-0d235e2a { display: flex; align-items: center; padding: 25rpx 0; border-bottom: 1rpx solid #F0F0F0; } .rank-item.data-v-0d235e2a:last-child { border-bottom: none; } .rank-number.data-v-0d235e2a { font-size: 32rpx; font-weight: bold; color: #333333; width: 60rpx; text-align: center; } .rank-avatar.data-v-0d235e2a { width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 20rpx; background-color: #F5F5F5; } .rank-name.data-v-0d235e2a { flex: 1; font-size: 30rpx; color: #333333; } .rank-duration.data-v-0d235e2a { font-size: 26rpx; color: #999999; } .user-rank-section.data-v-0d235e2a { display: flex; align-items: center; padding: 30rpx; background-color: #F5F5F5; margin-top: 20rpx; } .user-rank-label.data-v-0d235e2a { font-size: 28rpx; color: #666666; width: 120rpx; } .user-rank-avatar.data-v-0d235e2a { width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 20rpx; background-color: #FFFFFF; } .user-rank-name.data-v-0d235e2a { flex: 1; font-size: 30rpx; color: #333333; } .user-rank-duration.data-v-0d235e2a { font-size: 26rpx; color: #999999; }