.page-rank { display: flex; flex-direction: column; background: #f5f6fb; height: 100vh; } .page-title-card { background: #ffffff; padding: 30rpx 0; text-align: center; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); border-radius: 0; } .page-title-text { font-size: 36rpx; font-weight: 800; color: #3F51F7; letter-spacing: 2rpx; } .scroll-view { flex: 1; height: 0; } .content-wrapper { padding: 32rpx; } /* 模拟资产卡片 */ .portfolio-card { background: linear-gradient(135deg, #5d55e8, #7568ff); border-radius: 24rpx; padding: 40rpx 32rpx; margin-bottom: 32rpx; box-shadow: 0 16rpx 40rpx rgba(93, 85, 232, 0.3); } .portfolio-header { display: flex; align-items: center; margin-bottom: 32rpx; } .portfolio-icon { font-size: 40rpx; margin-right: 16rpx; } .portfolio-title { font-size: 32rpx; font-weight: 600; color: #ffffff; } .portfolio-content { display: flex; justify-content: space-between; align-items: flex-end; } .portfolio-main { flex: 1; } .portfolio-label { font-size: 24rpx; color: rgba(255, 255, 255, 0.8); margin-bottom: 12rpx; } .portfolio-amount { font-size: 56rpx; font-weight: 700; color: #ffffff; line-height: 1.2; } .portfolio-profit { text-align: right; } .profit-label { font-size: 22rpx; color: rgba(255, 255, 255, 0.7); margin-bottom: 8rpx; } .profit-value { font-size: 28rpx; font-weight: 600; } .profit-positive { color: #4fffb0; } .profit-negative { color: #ff6b9d; } /* 排行榜区域 */ .leaderboard-section { background: #ffffff; border-radius: 24rpx; padding: 32rpx; box-shadow: 0 16rpx 40rpx rgba(37, 52, 94, 0.08); } .section-header { display: flex; align-items: center; margin-bottom: 24rpx; } .trophy-icon { font-size: 36rpx; margin-right: 12rpx; } .section-title { font-size: 32rpx; font-weight: 600; color: #222222; } /* 当前用户排名卡片 */ .my-rank-card { background: linear-gradient(135deg, #fff9e6, #fffbf0); border: 2rpx solid #ffd966; border-radius: 16rpx; padding: 24rpx 28rpx; display: flex; align-items: center; margin-bottom: 24rpx; } .rank-number { font-size: 40rpx; font-weight: 700; color: #ff9800; margin-right: 24rpx; min-width: 80rpx; } .rank-info { flex: 1; } .rank-name { font-size: 28rpx; color: #333333; font-weight: 500; } .rank-rate { font-size: 32rpx; font-weight: 700; } .rate-positive { color: #00c853; } .rate-negative { color: #ff5252; } /* 排行榜列表 */ .leaderboard-list { margin-bottom: 24rpx; } .leaderboard-item { display: flex; align-items: center; padding: 24rpx 0; border-bottom: 1rpx solid #f5f6fb; } .leaderboard-item:last-child { border-bottom: none; } .rank-badge { font-size: 32rpx; font-weight: 700; color: #666666; margin-right: 24rpx; min-width: 80rpx; } .rank-first { color: #ff5252; } .rank-second { color: #ff9800; } .rank-third { color: #ffc107; } .user-info { flex: 1; } .user-name { font-size: 28rpx; color: #333333; } .user-rate { font-size: 32rpx; font-weight: 700; } .leaderboard-note { padding-top: 16rpx; border-top: 1rpx solid #f5f6fb; } .note-text { font-size: 22rpx; color: #999999; line-height: 1.6; } .bottom-safe-area { height: 80rpx; } /* 模糊效果 */ .blur-content { filter: blur(8rpx); pointer-events: none; } /* 登录遮罩层 */ .login-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 999; } .login-prompt { width: 560rpx; max-width: 560rpx; background: #ffffff; border-radius: 24rpx; padding: 50rpx 40rpx; margin: 0 auto; text-align: center; box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3); box-sizing: border-box; } .lock-icon { font-size: 72rpx; margin-bottom: 20rpx; } .prompt-title { display: block; font-size: 32rpx; font-weight: 600; color: #222222; margin-bottom: 12rpx; } .prompt-desc { display: block; font-size: 24rpx; color: #999999; line-height: 1.5; margin-bottom: 32rpx; } .login-button-native { width: 100%; height: 80rpx; background: linear-gradient(135deg, #4CAF50, #66BB6A); color: #ffffff; border-radius: 40rpx; font-size: 30rpx; font-weight: 600; box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.4); display: flex; align-items: center; justify-content: center; border: none; padding: 0; line-height: 80rpx; } .login-button-native::after { border: none; } .button-icon { font-size: 32rpx; margin-right: 12rpx; }