page { min-height: 100%; background: #f7f7f7; color: #111; } .page { min-height: 100vh; padding: 0 20rpx calc(36rpx + env(safe-area-inset-bottom)); box-sizing: border-box; } .state-card { min-height: 440rpx; margin-top: 24rpx; padding: 70rpx 38rpx; border-radius: 14rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; color: #8d8d8d; background: #fff; text-align: center; } .state-icon { width: 70rpx; height: 70rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #1d63c3; background: #eef4fc; font-size: 36rpx; font-weight: 700; } .state-title { margin-top: 26rpx; color: #222; font-size: 30rpx; font-weight: 700; } .state-desc { max-width: 560rpx; margin-top: 14rpx; font-size: 23rpx; line-height: 1.65; } .retry-btn { width: 260rpx; margin-top: 32rpx; color: #fff; background: #1d63c3; font-size: 25rpx; } .retry-btn--plain { color: #1d63c3; background: #edf4fc; } .loading-ring { width: 52rpx; height: 52rpx; margin-bottom: 24rpx; border: 6rpx solid #dfe9f6; border-top-color: #1d63c3; border-radius: 50%; } .event-header { min-height: 76rpx; padding: 20rpx 30rpx 14rpx; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: #fff; } .event-name { max-width: 650rpx; color: #000; font-size: 28rpx; line-height: 1.45; font-weight: 700; text-align: center; } .prototype-section { padding: 0 18rpx; } .prototype-title { display: block; font-size: 26rpx; line-height: 1.4; letter-spacing: 2rpx; font-weight: 500; } .current-checkin-section { margin-top: 10rpx; } .current-checkin-card { min-height: 126rpx; margin-top: 10rpx; padding: 26rpx 22rpx; border-radius: 13rpx; display: flex; align-items: center; box-sizing: border-box; color: #fff; background: linear-gradient(115deg, #1d62c5 0%, #3389e2 100%); font-size: 29rpx; line-height: 1.5; letter-spacing: 2rpx; box-shadow: inset -16rpx -14rpx 36rpx rgba(255,255,255,.08); } .current-checkin-card--abnormal { background: linear-gradient(115deg, #b93a3a, #e06969); } .sequence-section { margin-top: 32rpx; } .timeline { margin-top: 20rpx; padding-left: 58rpx; } .timeline-item { position: relative; min-height: 118rpx; display: flex; } .timeline-axis { position: absolute; left: 0; top: 0; bottom: 0; width: 34rpx; } .timeline-dot { position: absolute; z-index: 2; left: 0; top: 4rpx; width: 30rpx; height: 30rpx; border: 3rpx solid #1d63c3; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: #f7f7f7; } .timeline-dot-core { width: 14rpx; height: 14rpx; border-radius: 50%; background: #1d63c3; } .timeline-line { position: absolute; left: 14rpx; top: 33rpx; bottom: -4rpx; width: 2rpx; background: #1d63c3; } .timeline-item:last-child .timeline-line { display: none; } .timeline-content { min-width: 0; padding-left: 52rpx; padding-bottom: 24rpx; } .timeline-name { display: block; color: #111; font-size: 25rpx; line-height: 1.45; letter-spacing: 2rpx; } .timeline-status-line { margin-top: 3rpx; display: flex; align-items: center; } .timeline-status { font-size: 25rpx; font-weight: 700; letter-spacing: 2rpx; } .timeline-progress { margin-left: 14rpx; color: #aaa; font-size: 20rpx; } .timeline-item--status-1 .timeline-status { color: #01b06f; } .timeline-item--status-2 .timeline-status { color: #f49920; } .timeline-item--status-3 .timeline-status { color: #959595; } .timeline-item--status-4 .timeline-status { color: #1d63c3; } .timeline-item--abnormal .timeline-dot { border-color: #cf3e3e; } .timeline-item--abnormal .timeline-status { color: #cf3e3e; } .timeline-abnormal { display: block; margin-top: 5rpx; color: #cf3e3e; font-size: 19rpx; } .timeline-empty { padding: 24rpx 0 34rpx; color: #999; font-size: 23rpx; } .prototype-divider { height: 1rpx; margin: 2rpx 18rpx 24rpx; background: #cfcfcf; } .competing-section { padding-bottom: 26rpx; } .competing-heading { display: flex; align-items: center; justify-content: space-between; } .registration-tag { min-width: 220rpx; padding: 7rpx 18rpx; border: 2rpx dashed #ff5aad; border-radius: 6rpx; box-sizing: border-box; color: #ff3399; font-size: 23rpx; text-align: center; } .competing-card { margin-top: 10rpx; padding: 20rpx 18rpx; border-radius: 12rpx; color: #fff; background: linear-gradient(115deg, #1d62c5 0%, #3389e2 100%); box-shadow: inset -16rpx -14rpx 36rpx rgba(255,255,255,.08); } .competing-row { display: flex; align-items: flex-start; margin-top: 17rpx; font-size: 25rpx; line-height: 1.45; font-weight: 700; letter-spacing: 1rpx; } .competing-row:first-child { margin-top: 0; } .competing-label { width: 92rpx; flex-shrink: 0; text-align: right; } .competing-label--wide { width: 142rpx; } .competing-value { flex: 1; min-width: 0; } .competing-empty { margin-top: 10rpx; padding: 38rpx; border-radius: 12rpx; color: #999; background: #fff; text-align: center; font-size: 23rpx; } .mine-detail-section { margin-top: 16rpx; padding-top: 28rpx; border-top: 14rpx solid #efefef; } .detail-heading,.mine-head,.mine-info,.round-head { display: flex; align-items: center; justify-content: space-between; } .detail-heading { margin: 0 18rpx 16rpx; } .detail-heading-title { font-size: 28rpx; font-weight: 700; } .detail-heading-count { color: #999; font-size: 21rpx; } .mine-card { margin-bottom: 18rpx; padding: 24rpx; border: 2rpx solid transparent; border-radius: 14rpx; background: #fff; } .mine-card--abnormal { border-color: #e9a3a3; background: #fff9f9; } .mine-title-wrap { flex: 1; min-width: 0; margin-right: 18rpx; } .mine-title,.athletes { display: block; } .mine-title { font-size: 26rpx; font-weight: 700; } .athletes { margin-top: 7rpx; color: #888; font-size: 21rpx; } .status-tag { padding: 7rpx 13rpx; border-radius: 999rpx; flex-shrink: 0; color: #777; background: #eee; font-size: 19rpx; } .status-tag--status-1 { color: #087b50; background: #e3f6ee; } .status-tag--status-2,.status-tag--status-3 { color: #175fac; background: #e8f1fc; } .status-tag--abnormal { color: #b83030; background: #fde5e5; } .mine-info { margin-top: 18rpx; color: #777; font-size: 21rpx; } .notice { margin-top: 17rpx; padding: 14rpx 17rpx; border-radius: 8rpx; color: #1d63c3; background: #edf4fc; font-size: 21rpx; } .notice--abnormal { color: #b83030; background: #fde9e9; } .round-list { margin-top: 22rpx; padding-top: 18rpx; border-top: 1rpx solid #e8e8e8; } .round { display: flex; padding-bottom: 22rpx; } .round:last-child { padding-bottom: 0; } .round-marker { width: 40rpx; height: 40rpx; margin-right: 16rpx; border: 2rpx solid #1d63c3; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #1d63c3; background: #fff; font-size: 19rpx; font-weight: 700; } .round--passed .round-marker { color: #fff; border-color: #01b06f; background: #01b06f; } .round--abnormal .round-marker { color: #fff; border-color: #cf3e3e; background: #cf3e3e; } .round-main { flex: 1; min-width: 0; } .round-name { font-size: 23rpx; font-weight: 700; } .round-state { color: #999; font-size: 20rpx; } .round--passed .round-state { color: #01a466; } .round-detail { display: block; margin-top: 7rpx; color: #777; font-size: 20rpx; } .round-empty { padding: 18rpx; color: #999; text-align: center; font-size: 21rpx; }