// 运动主题色 :root { --ion-color-primary: #ff7f50; // 活力橙 --ion-color-primary-rgb: 255,127,80; --ion-color-success: #4CAF50; // 完成绿 } .sport-content { --offset-bottom: auto!important; background: linear-gradient(135deg, #fff3e0, #fff8e1); overflow-y: auto !important; height: calc(100vh - 44px); // 适配iOS状态栏高度 contain: strict; // 滚动条样式 &::-webkit-scrollbar { width: 6px; &-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; } } } // 统计卡片 .stats-card { padding: 16px; background: linear-gradient(135deg, var(--ion-color-primary), #ffc107); border-radius: 20px 20px 0 0; color: white; .stat-row { gap: 16px; .stat-item { text-align: center; padding: 16px; border-radius: 12px; background: rgba(255,255,255,0.1); transition: transform 0.3s; h2 { font-size: 2.4rem; margin: 0; color: inherit; } p { font-size: 0.9rem; opacity: 0.8; margin: 4px 0 0; } ion-icon { font-size: 2.4rem; color: inherit; } &.active { background: rgba(76,175,80,0.2); transform: scale(1.05); } } } } // 功能卡片 .feature-card { margin: 16px; border-radius: 16px; overflow: hidden; .card-item { padding: 16px; border-bottom: 1px solid rgba(0,0,0,0.05); h3 { margin: 0; font-size: 16px; color: #333; } p { margin: 4px 0 0; font-size: 0.9rem; color: #666; } ion-icon { color: #ff9800; font-size: 1.8rem; } } } // 训练日历 .calendar-card { margin: 16px; border-radius: 16px; overflow: hidden; .calendar-body { padding: 16px; .week-grid { gap: 8px; .day-header { text-align: center; padding: 8px; font-size: 0.8rem; color: #999; } .day { aspect-ratio: 1; background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: bold; &.active { background: var(--ion-color-success); color: white; } } } } } // 底部按钮 .action-footer { padding: 16px; background: var(--ion-color-primary); .start-btn { --background: white; --color: var(--ion-color-primary); font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 24px; height: 56px; ion-icon { margin-right: 8px; font-size: 1.4rem; } } }