44 lines
13 KiB
Plaintext
44 lines
13 KiB
Plaintext
page { min-height: 100%; background: #f5f6f8; color: #18202e; }
|
|
.checkin-page { min-height: 100vh; padding: 22rpx 22rpx env(safe-area-inset-bottom); box-sizing: border-box; }
|
|
.top-card { padding: 24rpx 26rpx; border-radius: 22rpx; color: #fff; background: linear-gradient(145deg,#16498f 0%,#1f67be 72%,#2d7bd0 100%); box-shadow: 0 9rpx 26rpx rgba(23,76,145,.2); }
|
|
.top-line { display: flex; justify-content: space-between; align-items: center; }
|
|
.live-pill { padding: 7rpx 16rpx; border-radius: 999rpx; display: flex; align-items: center; background: rgba(255,255,255,.15); font-size: 21rpx; }
|
|
.live-dot { width: 12rpx; height: 12rpx; margin-right: 10rpx; border-radius: 50%; background: #54e4a7; box-shadow: 0 0 0 5rpx rgba(84,228,167,.15); }
|
|
.checkin-sequence { color: rgba(255,255,255,.76); font-size: 21rpx; font-weight: 600; }.event-title { display: block; margin-top: 16rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 29rpx; line-height: 1.4; font-weight: 700; }
|
|
.compact-status { margin-top: 19rpx; padding: 17rpx 20rpx; border: 1rpx solid rgba(255,255,255,.13); border-radius: 15rpx; display: flex; align-items: stretch; background: rgba(255,255,255,.1); }.compact-status-item { min-width: 0; display: flex; flex-direction: column; justify-content: center; }.checkin-status-item { width: 160rpx; }.group-status-item { flex: 1; padding-left: 22rpx; }.compact-divider { width: 1rpx; margin: 2rpx 0; background: rgba(255,255,255,.2); }.compact-label { color: rgba(255,255,255,.65); font-size: 18rpx; }.compact-value { margin-top: 7rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 23rpx; font-weight: 650; }.checkin-name { font-size: 27rpx; }
|
|
.progress-card { margin-top: 22rpx; padding: 27rpx 28rpx; border-radius: 20rpx; background: #fff; box-shadow: 0 5rpx 20rpx rgba(30,52,84,.06); }
|
|
.progress-top,.progress-bottom,.list-heading { display: flex; justify-content: space-between; align-items: center; }.section-title { font-size: 29rpx; font-weight: 700; }
|
|
.progress-count { color: #8e97a5; font-size: 24rpx; }.progress-count-main { color: #1a57b2; font-size: 34rpx; font-weight: 800; }
|
|
.progress-track { height: 14rpx; margin-top: 23rpx; overflow: hidden; border-radius: 999rpx; background: #e9eef5; }.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#1a57b2,#45a0e8); transition: width .25s; }
|
|
.progress-bottom { margin-top: 14rpx; color: #8d96a4; font-size: 21rpx; }
|
|
.list-heading { margin: 34rpx 6rpx 18rpx; }.list-tip { color: #9aa2ae; font-size: 20rpx; }
|
|
.athlete-card { min-height: 108rpx; margin-bottom: 14rpx; padding: 18rpx 20rpx; border-radius: 18rpx; box-sizing: border-box; display: flex; align-items: center; background: #fff; box-shadow: 0 4rpx 18rpx rgba(30,52,84,.055); }
|
|
.bib-box { width: 76rpx; height: 62rpx; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; color: #1a57b2; background: #edf4ff; font-size: 23rpx; font-weight: 700; }
|
|
.athlete-main { flex: 1; min-width: 0; margin-left: 18rpx; display: flex; flex-direction: column; }.athlete-name { font-size: 28rpx; font-weight: 650; }.team-name { margin-top: 7rpx; color: #969eaa; font-size: 20rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.call-btn { margin-right: 12rpx; padding: 11rpx 14rpx; color: #758198; background: #f4f6f9; border-radius: 10rpx; font-size: 20rpx; }
|
|
.status-btn { width: 112rpx; height: 58rpx; border: 2rpx solid #d9dfe8; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; color: #7c8695; background: #fff; font-size: 22rpx; box-sizing: border-box; }
|
|
.status-btn.checked { color: #00875a; border-color: #bdebd9; background: #e8f8f2; }.status-btn.disabled { opacity: .55; }
|
|
.next-tip { margin-top: 24rpx; padding: 25rpx 26rpx; border-radius: 18rpx; display: flex; align-items: center; background: #edf3fa; }.next-label { padding: 5rpx 12rpx; border-radius: 8rpx; color: #fff; background: #7491b2; font-size: 19rpx; }.next-name { flex: 1; margin-left: 16rpx; color: #4c596b; font-size: 24rpx; }.next-arrow { color: #8090a4; font-size: 38rpx; }
|
|
.skeleton { padding: 30rpx; border-radius: 22rpx; background: #fff; }.skeleton view { height: 28rpx; margin-top: 24rpx; border-radius: 8rpx; background: #e9edf2; }.skeleton view:first-child { margin-top: 0; width: 60%; }
|
|
.safe-space { height: 28rpx; }
|
|
.selector-card { margin-top: 22rpx; padding: 26rpx 0; overflow: hidden; border-radius: 22rpx; background: #fff; box-shadow: 0 5rpx 20rpx rgba(30,52,84,.06); transition: opacity .2s; }.selector-card.selector-loading { opacity: .72; }
|
|
.selector-heading { padding: 0 26rpx; display: flex; align-items: center; }.selector-step { width: 38rpx; height: 38rpx; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg,#1a57b2,#438bd8); box-shadow: 0 5rpx 12rpx rgba(26,87,178,.2); font-size: 20rpx; font-weight: 750; }.selector-heading-text { margin-left: 14rpx; display: flex; flex-direction: column; }.selector-title { color: #283448; font-size: 25rpx; font-weight: 700; }.selector-hint { margin-top: 4rpx; color: #9ba4b1; font-size: 18rpx; }
|
|
.project-scroll { width: 100%; height: 174rpx; margin-top: 14rpx; white-space: nowrap; }.project-options { height: 174rpx; padding: 9rpx 26rpx 20rpx; box-sizing: border-box; display: inline-flex; align-items: flex-start; gap: 14rpx; }.project-option { position: relative; width: 270rpx; height: 145rpx; padding: 19rpx 20rpx; overflow: hidden; box-sizing: border-box; border: 2rpx solid #e7ebf1; border-radius: 17rpx; display: flex; flex-direction: column; justify-content: center; background: #fafbfc; transition: border-color .18s, background .18s, box-shadow .18s; }.project-option.active { border-color: #4b83cc; background: linear-gradient(145deg,#edf5ff,#f7fbff); box-shadow: 0 6rpx 14rpx rgba(36,103,184,.13); }.project-option.completed { border-color: #8bd1b5; background: linear-gradient(145deg,#ecfaf4,#f7fcfa); }.project-option.completed.active { border-color: #28a574; box-shadow: 0 6rpx 14rpx rgba(34,168,121,.15); }.project-active-mark { position: absolute; left: 0; top: 22rpx; bottom: 22rpx; width: 5rpx; border-radius: 0 6rpx 6rpx 0; background: transparent; }.project-option.active .project-active-mark { background: #2870c8; }.project-option.completed .project-active-mark { background: #25a474; }.project-option-top { display: flex; align-items: center; min-width: 0; }.project-option-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #344156; font-size: 24rpx; font-weight: 650; }.project-option.active .project-option-name { color: #174f9d; }.project-option.completed .project-option-name { color: #176647; }.project-complete-label { margin-left: 8rpx; padding: 3rpx 7rpx; border-radius: 6rpx; color: #08704d; background: #d8f2e7; font-size: 16rpx; }.project-option-summary { margin-top: 13rpx; display: flex; align-items: center; justify-content: space-between; color: #8d98a7; font-size: 18rpx; }.project-option.completed .project-option-summary { color: #55907a; }.project-progress { height: 7rpx; margin-top: 9rpx; overflow: hidden; border-radius: 999rpx; background: #e5eaf0; }.project-progress-value { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#438bd8,#1f67be); }.project-option.completed .project-progress-value { background: linear-gradient(90deg,#48c18f,#22a879); }
|
|
.selector-separator { height: 1rpx; margin: 24rpx 26rpx; background: #eef1f5; }.group-heading { margin-top: 0; }.group-scroll { width: 100%; margin-top: 19rpx; white-space: nowrap; }.group-options { padding: 0 26rpx 4rpx; display: inline-flex; gap: 12rpx; }.group-option { min-width: 180rpx; min-height: 76rpx; padding: 10rpx 19rpx; box-sizing: border-box; border: 2rpx solid #e3e7ed; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; color: #687486; background: #fafbfc; transition: color .18s, border-color .18s, background .18s; }.group-active-dot { width: 0; height: 0; margin-right: 0; flex-shrink: 0; border-radius: 50%; background: #fff; transition: width .18s, height .18s, margin .18s; }.group-option-content { min-width: 0; display: flex; flex-direction: column; }.group-option-name { max-width: 220rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 22rpx; font-weight: 650; }.group-option-progress { margin-top: 5rpx; color: #9aa4b2; font-size: 17rpx; }.group-option.active { color: #fff; border-color: #1f67be; background: linear-gradient(100deg,#1a57b2,#347dca); box-shadow: 0 6rpx 14rpx rgba(26,87,178,.18); }.group-option.active .group-option-progress { color: rgba(255,255,255,.75); }.group-option.active .group-active-dot { width: 10rpx; height: 10rpx; margin-right: 10rpx; }.group-option.completed { color: #176647; border-color: #8bd1b5; background: #edf9f4; }.group-option.completed .group-option-progress { color: #55907a; }.group-option.completed.active { color: #fff; border-color: #23996d; background: linear-gradient(100deg,#159368,#2db481); box-shadow: 0 6rpx 14rpx rgba(34,168,121,.18); }.group-option.completed.active .group-option-progress { color: rgba(255,255,255,.78); }
|
|
.unit-card { margin-bottom: 16rpx; padding: 24rpx; border-radius: 20rpx; background: #fff; box-shadow: 0 4rpx 18rpx rgba(30,52,84,.055); }.unit-card.locked { opacity: .68; }
|
|
.unit-head { display: flex; justify-content: space-between; align-items: center; }.unit-title { flex: 1; min-width: 0; margin-right: 18rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #253247; font-size: 27rpx; font-weight: 700; }.venue-badge { padding: 8rpx 14rpx; border-radius: 999rpx; flex-shrink: 0; color: #925b00; background: #fff3d5; font-size: 21rpx; font-weight: 650; }
|
|
.unit-meta { margin-top: 15rpx; display: flex; align-items: center; color: #697587; font-size: 22rpx; }.unit-meta-label { margin-right: 12rpx; padding: 4rpx 10rpx; border-radius: 7rpx; color: #4f6f9f; background: #edf4ff; font-size: 19rpx; }.unit-meta-value { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.unit-athletes { margin-top: 16rpx; display: flex; flex-wrap: wrap; gap: 10rpx; }
|
|
.athlete-chip { padding: 9rpx 16rpx; border-radius: 10rpx; color: #34435a; background: #f1f4f8; font-size: 23rpx; }.athlete-chip.checked-chip { color: #08704d; background: #e8f8f2; }
|
|
.unit-action { margin-top: 20rpx; height: 64rpx; border-radius: 14rpx; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(90deg,#1a57b2,#2d7bd0); font-size: 24rpx; font-weight: 650; }.unit-action.checked { color: #08704d; background: #e8f8f2; }.unit-action.disabled { opacity: .5; }
|
|
.empty-tip { padding: 32rpx; border-radius: 18rpx; color: #9aa2ae; background: #fff; text-align: center; font-size: 22rpx; }
|
|
.checked-section-head { margin: 34rpx 0 18rpx; padding: 24rpx; border-radius: 20rpx; background: linear-gradient(135deg,#eff9f5,#f7fcfa); border: 1rpx solid #d9eee5; }
|
|
.checked-section-title { display: flex; align-items: center; justify-content: space-between; }.checked-count { padding: 5rpx 13rpx; border-radius: 999rpx; color: #08704d; background: #daf2e8; font-size: 20rpx; font-weight: 650; }
|
|
.scope-tip { display: block; margin-top: 14rpx; color: #7b9188; font-size: 19rpx; }
|
|
.checked-group-head { margin: 24rpx 6rpx 14rpx; display: flex; align-items: center; justify-content: space-between; }.checked-group-names { min-width: 0; display: flex; align-items: center; }.checked-project-name { max-width: 340rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #26364d; font-size: 26rpx; font-weight: 700; }.checked-group-name { margin-left: 12rpx; padding: 5rpx 11rpx; border-radius: 8rpx; color: #765d18; background: #fff2c9; font-size: 19rpx; }.checked-group-count { color: #839088; font-size: 20rpx; }
|
|
.checked-actions { margin-top: 20rpx; padding-top: 18rpx; border-top: 1rpx solid #edf1ef; display: flex; align-items: center; justify-content: space-between; }.checked-state { display: flex; align-items: center; color: #08704d; font-size: 22rpx; font-weight: 600; }.checked-mark { width: 34rpx; height: 34rpx; margin-right: 10rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: #22a879; font-size: 19rpx; }.cancel-checkin-btn { padding: 10rpx 16rpx; border: 1rpx solid #e7c8c8; border-radius: 10rpx; color: #b54b4b; background: #fff8f8; font-size: 20rpx; }.cancel-checkin-btn.disabled { opacity: .45; }
|
|
.checkin-toolbar { display: flex; gap: 16rpx; margin: 0 24rpx 24rpx; }
|
|
.toolbar-btn { flex: 1; margin: 0; border: 2rpx solid #2463c5; color: #2463c5; background: #fff; font-size: 26rpx; }
|
|
.toolbar-btn--primary { color: #fff; background: #2463c5; }
|
|
.on-stage-btn { color: #fff; background: #1b8f5a; border-radius: 10rpx; padding: 10rpx 18rpx; font-size: 24rpx; }
|