.page { padding: 32rpx; background: #FFF8F7; min-height: 100vh; } .header { text-align: center; margin-bottom: 32rpx; } .title { font-size: 36rpx; font-weight: bold; color: #1A1A1A; } .loading-state, .error-state { text-align: center; padding: 80rpx; color: #999; } .checkin-card { background: #fff; border-radius: 24rpx; padding: 40rpx; margin-bottom: 24rpx; } .activity-info { text-align: center; margin-bottom: 32rpx; } .activity-title { display: block; font-size: 32rpx; font-weight: bold; color: #1A1A1A; margin-bottom: 8rpx; } .activity-location { display: block; font-size: 26rpx; color: #999; } .qr-section { text-align: center; padding: 32rpx 0; border-top: 1rpx solid #f5f5f5; border-bottom: 1rpx solid #f5f5f5; margin-bottom: 32rpx; } .qr-placeholder { width: 300rpx; height: 300rpx; margin: 0 auto 20rpx; background: #F5F5F5; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; } .qr-icon { font-size: 120rpx; color: #CCC; } .qr-hint { font-size: 26rpx; color: #999; } .token-section { margin-bottom: 24rpx; } .token-label { font-size: 26rpx; color: #666; display: block; margin-bottom: 12rpx; } .token-value { display: block; font-size: 24rpx; color: #333; background: #F5F5F5; padding: 20rpx; border-radius: 12rpx; word-break: break-all; margin-bottom: 16rpx; } .btn-copy { width: 100%; height: 72rpx; line-height: 72rpx; background: #FFF3F2; color: #E96B6B; border-radius: 36rpx; font-size: 26rpx; border: none; } .expire-info { text-align: center; font-size: 24rpx; color: #E59A32; padding: 16rpx; background: #FFF8E1; border-radius: 12rpx; } .btn-refresh-page { background: #E96B6B; color: #fff; border-radius: 44rpx; height: 88rpx; line-height: 88rpx; font-size: 30rpx; margin-top: 24rpx; } .btn-refresh { margin-top: 24rpx; background: #E96B6B; color: #fff; border-radius: 44rpx; height: 72rpx; line-height: 72rpx; font-size: 28rpx; border: none; }