diff --git a/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue b/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue index acc4f5d..9216c8f 100644 --- a/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue +++ b/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue @@ -41,46 +41,49 @@ function formatOdds(odds: string) { @@ -89,165 +92,97 @@ function formatOdds(odds: string) { .overlay { position: fixed; inset: 0; + background: rgba(0, 0, 0, 0.75); z-index: 210; - background: rgba(0, 0, 0, 0.72); display: flex; - align-items: center; - justify-content: center; - padding: 20px; - backdrop-filter: blur(4px); + align-items: flex-end; } -.modal { - position: relative; +.drawer { + background: linear-gradient(180deg, #222 0%, #141414 100%); width: 100%; - max-width: 320px; - max-height: 85vh; + max-height: 80vh; + border-radius: 16px 16px 0 0; + padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0)); overflow-y: auto; - background: linear-gradient(165deg, #1a1810 0%, #121212 45%, #0a0a0a 100%); - border: 1px solid var(--border-gold-soft); - border-radius: var(--radius); - padding: 16px 14px 14px; - box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.08); -} - -.close-x { - position: absolute; - top: 10px; - right: 10px; - width: 28px; - height: 28px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.06); - color: var(--text-muted); - font-size: 14px; -} - -.title { - font-size: 16px; - font-weight: 800; - color: var(--primary-light); - text-align: center; - margin-bottom: 6px; - padding-right: 24px; -} - -.match-line { - text-align: center; - font-size: 14px; - font-weight: 700; - color: var(--text); - margin-bottom: 4px; -} - -.market-tag { - text-align: center; - font-size: 12px; - color: var(--text-muted); - margin-bottom: 4px; -} - -.count { - text-align: center; - font-size: 11px; - color: var(--text-muted); - margin-bottom: 12px; -} - -.line-list { - list-style: none; - margin: 0 0 12px; - padding: 0; - max-height: 220px; - overflow-y: auto; - border: 1px solid var(--border); - border-radius: 6px; - background: rgba(0, 0, 0, 0.35); -} - -.line-item { - display: grid; - grid-template-columns: 1fr auto auto; - gap: 8px; - align-items: center; - padding: 9px 10px; - font-size: 13px; - border-bottom: 1px solid var(--border); -} - -.line-item:last-child { - border-bottom: none; -} - -.score { - font-weight: 800; - color: var(--primary-light); -} - -.odds { - color: var(--text-muted); - font-weight: 600; - font-size: 12px; -} - -.stake { - font-weight: 800; - color: var(--text); - text-align: right; - min-width: 56px; -} - -.totals { - padding: 10px; - margin-bottom: 12px; - background: rgba(212, 175, 55, 0.06); - border: 1px solid var(--border-gold-soft); - border-radius: 6px; -} - -.total-row { - display: flex; - justify-content: space-between; - font-size: 13px; - color: var(--text-muted); - font-weight: 600; -} - -.total-row + .total-row { - margin-top: 8px; - padding-top: 8px; border-top: 1px solid var(--border); } -.gold { +.drawer-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; +} + +.drawer-header h3 { + font-size: 16px; + font-weight: 800; +} + +.count { + color: var(--primary-light); +} + +.close-btn { + background: none; + color: var(--text-muted); + font-size: 20px; + padding: 4px; +} + +.slip-item { + padding: 10px 12px; + background: #111; + border: 1px solid var(--border); + border-radius: 6px; + margin-bottom: 8px; +} + +.item-name { + font-size: 13px; + font-weight: 800; +} + +.item-sel { + font-size: 12px; + color: var(--text-muted); + margin-top: 4px; +} + +.odds { color: var(--primary-light); font-weight: 800; } -.actions { - display: grid; - grid-template-columns: 1fr 1.2fr; - gap: 8px; +.stake-area { + margin: 12px 0; } -.btn-cancel { - padding: 10px; - border-radius: 6px; - background: #1a1a1a; - border: 1px solid var(--border); +.summary-row { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 13px; color: var(--text-muted); - font-size: 14px; - font-weight: 700; + font-weight: 600; + margin-bottom: 8px; } -.btn-confirm { - padding: 10px; - border-radius: 6px; - font-size: 14px; +.summary-row strong { + color: var(--primary-light); + font-size: 15px; font-weight: 800; } -.btn-confirm:disabled { - opacity: 0.45; +.return { + font-size: 13px; + color: var(--text-muted); +} + +.return strong { + color: var(--primary-light); + font-size: 18px; + font-weight: 800; }