57 lines
5.7 KiB
Plaintext
57 lines
5.7 KiB
Plaintext
page { min-height: 100%; background: #f5f6f8; color: #18202e; }
|
|
.score-page { min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); }
|
|
.hero { height: 244rpx; padding: 52rpx 36rpx 0; box-sizing: border-box; color: #fff; background: linear-gradient(135deg,#154a9a 0%,#2871cf 100%); position: relative; overflow: hidden; }
|
|
.hero-orb { position: absolute; border-radius: 50%; background: rgba(255,255,255,.09); }
|
|
.hero-orb--one { width: 210rpx; height: 210rpx; right: -42rpx; top: -64rpx; }
|
|
.hero-orb--two { width: 120rpx; height: 120rpx; right: 150rpx; bottom: -72rpx; }
|
|
.hero-title,.hero-subtitle { display: block; position: relative; }
|
|
.hero-title { font-size: 42rpx; font-weight: 700; letter-spacing: 2rpx; }
|
|
.hero-subtitle { margin-top: 14rpx; font-size: 24rpx; color: rgba(255,255,255,.76); }
|
|
.search-card { margin: -54rpx 24rpx 0; padding: 30rpx; background: #fff; border-radius: 22rpx; position: relative; box-shadow: 0 10rpx 32rpx rgba(26,87,178,.12); }
|
|
.field-label { display: block; margin-bottom: 13rpx; color: #3d4655; font-size: 25rpx; font-weight: 600; }
|
|
.field-label--keyword { margin-top: 24rpx; }
|
|
.filter-row { display: flex; gap: 16rpx; margin-top: 18rpx; }
|
|
.filter-picker { flex: 1; min-width: 0; }
|
|
.filter-row .picker-value { min-height: 76rpx; height: 76rpx; padding: 0 20rpx; }
|
|
.picker-value,.keyword-box { height: 82rpx; padding: 0 22rpx; display: flex; align-items: center; box-sizing: border-box; border: 2rpx solid #e7ebf2; border-radius: 14rpx; background: #fafbfc; }
|
|
.picker-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 26rpx; }
|
|
.picker-arrow { width: 14rpx; height: 14rpx; margin: -7rpx 5rpx 0 18rpx; flex-shrink: 0; border-right: 3rpx solid #8792a4; border-bottom: 3rpx solid #8792a4; border-radius: 1rpx; transform: rotate(45deg); }
|
|
.search-symbol { margin-right: 14rpx; color: #758196; font-size: 36rpx; }
|
|
.keyword-input { flex: 1; height: 80rpx; font-size: 26rpx; }
|
|
.placeholder { color: #aeb5c0; }
|
|
.clear-btn { padding: 12rpx; color: #a3aab5; font-size: 32rpx; }
|
|
.search-btn { margin-top: 28rpx; height: 84rpx; line-height: 84rpx; border: 0; border-radius: 16rpx; color: #fff; background: #1a57b2; font-size: 29rpx; font-weight: 600; }
|
|
.search-btn::after { border: 0; }
|
|
.search-btn[disabled] { color: rgba(255,255,255,.8); background: #8cadd9; }
|
|
.result-header { margin: 34rpx 28rpx 20rpx; display: flex; align-items: baseline; justify-content: space-between; }
|
|
.result-title { font-size: 31rpx; font-weight: 700; }
|
|
.result-count { color: #9299a5; font-size: 23rpx; }
|
|
.result-card,.skeleton-card,.empty { margin: 0 24rpx 22rpx; background: #fff; border-radius: 20rpx; box-shadow: 0 6rpx 22rpx rgba(30,52,84,.06); }
|
|
.result-top { padding: 28rpx; display: flex; justify-content: space-between; align-items: center; }
|
|
.athlete-info { display: flex; align-items: center; min-width: 0; }
|
|
.rank-badge { width: 58rpx; height: 58rpx; border-radius: 16rpx; background: #edf4ff; color: #1a57b2; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 800; flex-shrink: 0; }
|
|
.athlete-text { margin-left: 18rpx; min-width: 0; }
|
|
.athlete-name { font-size: 30rpx; font-weight: 700; }
|
|
.athlete-no { margin-left: 12rpx; padding: 3rpx 10rpx; border-radius: 7rpx; background: #f0f2f5; color: #778195; font-size: 20rpx; }
|
|
.event-name { display: block; max-width: 400rpx; margin-top: 9rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #8b94a3; font-size: 21rpx; }
|
|
.score-main { margin-left: 12rpx; text-align: right; }
|
|
.score-num { display: block; color: #1a57b2; font-size: 42rpx; font-weight: 800; }
|
|
.score-unit { display: block; margin-top: 2rpx; color: #969eaa; font-size: 20rpx; }
|
|
.meta-grid { margin: 0 28rpx; padding: 24rpx 0; border-top: 1rpx solid #eef0f4; display: grid; grid-template-columns: 1fr 1fr; row-gap: 22rpx; }
|
|
.meta-item { display: flex; flex-direction: column; }
|
|
.meta-label { color: #9ba3af; font-size: 21rpx; }
|
|
.meta-value { margin-top: 7rpx; color: #3d4654; font-size: 24rpx; font-weight: 500; }
|
|
.meta-value--success { color: #009663; }
|
|
.score-breakdown { margin: 0 28rpx; padding: 20rpx 22rpx; border-radius: 14rpx; background: #f7f9fc; display: flex; justify-content: space-around; }
|
|
.breakdown-item { display: flex; flex-direction: column; align-items: center; }
|
|
.breakdown-label { color: #8993a2; font-size: 20rpx; }
|
|
.breakdown-score { margin-top: 8rpx; font-size: 27rpx; font-weight: 700; }
|
|
.detail-toggle { height: 72rpx; color: #1a57b2; display: flex; align-items: center; justify-content: center; font-size: 23rpx; }
|
|
.toggle-arrow { width: 12rpx; height: 12rpx; margin: -6rpx 0 0 14rpx; border-right: 3rpx solid currentColor; border-bottom: 3rpx solid currentColor; border-radius: 1rpx; transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; }.toggle-arrow.open { margin-top: 6rpx; transform: rotate(225deg); }
|
|
.empty { padding: 70rpx 30rpx; display: flex; flex-direction: column; align-items: center; }
|
|
.empty-icon { width: 82rpx; height: 82rpx; border-radius: 24rpx; background: #edf4ff; color: #1a57b2; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: 700; }
|
|
.empty-title { margin-top: 24rpx; font-size: 29rpx; font-weight: 600; }.empty-desc { margin-top: 10rpx; color: #9aa2ae; font-size: 23rpx; }
|
|
.skeleton-card { margin-top: 28rpx; padding: 30rpx; }.skeleton-line { height: 26rpx; margin-top: 20rpx; border-radius: 8rpx; background: linear-gradient(90deg,#f0f2f5 25%,#e5e8ed 50%,#f0f2f5 75%); background-size: 200% 100%; animation: shine 1.4s infinite; }.skeleton-line:first-child { margin-top: 0; }.skeleton-line--short { width: 42%; }.skeleton-line--middle { width: 68%; }
|
|
@keyframes shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
|
|
.safe-space { height: 30rpx; }
|