From 091dc5c15ccf41d08da452a0c9362a9e09db0efc Mon Sep 17 00:00:00 2001 From: mars <3361409208@qq.com> Date: Fri, 10 Jul 2026 18:03:18 +0800 Subject: [PATCH] feat(player): ui-ux-pro-max design system upgrade for desktop --- .../components/desktop/DesktopAuthLayout.vue | 11 +- .../player/src/styles/desktop/interaction.css | 134 ++++++++-- apps/player/src/styles/desktop/layout.css | 61 +++-- apps/player/src/styles/desktop/records.css | 234 ++++++++++++++---- apps/player/src/styles/desktop/tokens.css | 99 +++++++- .../src/views/desktop/DesktopHomeView.vue | 164 +++++++----- .../src/views/desktop/DesktopMyBetsView.vue | 2 + .../views/desktop/DesktopWalletDetailView.vue | 61 +++-- .../src/views/desktop/DesktopWalletView.vue | 3 + 9 files changed, 570 insertions(+), 199 deletions(-) diff --git a/apps/player/src/components/desktop/DesktopAuthLayout.vue b/apps/player/src/components/desktop/DesktopAuthLayout.vue index 5d57fea..5a27a11 100644 --- a/apps/player/src/components/desktop/DesktopAuthLayout.vue +++ b/apps/player/src/components/desktop/DesktopAuthLayout.vue @@ -44,6 +44,7 @@ withDefaults( min-height: 100dvh; background: linear-gradient(135deg, #0a0a0a 0%, #111 50%, #0d0d0d 100%); overflow: hidden; + font-family: var(--font-body); } .desktop-auth-page::before { @@ -114,9 +115,11 @@ withDefaults( width: 100%; max-width: 720px; background: rgba(14, 14, 14, 0.92); + backdrop-filter: var(--blur-lg); + -webkit-backdrop-filter: var(--blur-lg); border: 1px solid rgba(212, 175, 55, 0.28); - border-radius: 12px; - box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg), var(--glow-gold-md); overflow: hidden; } @@ -140,7 +143,7 @@ withDefaults( display: flex; align-items: center; justify-content: center; - padding: 28px 20px; + padding: var(--space-6) var(--space-5); background: rgba(0, 0, 0, 0.25); border-right: 1px solid rgba(212, 175, 55, 0.15); } @@ -157,7 +160,7 @@ withDefaults( display: flex; flex-direction: column; min-width: 0; - padding: 22px 24px 24px; + padding: 22px var(--space-6) var(--space-6); } @media (max-width: 640px) { diff --git a/apps/player/src/styles/desktop/interaction.css b/apps/player/src/styles/desktop/interaction.css index b453f1b..b9e2c9f 100644 --- a/apps/player/src/styles/desktop/interaction.css +++ b/apps/player/src/styles/desktop/interaction.css @@ -1,4 +1,9 @@ -/* Hover Cursors and active resets */ +/* ═══════════════════════════════════════════════════════════ + Desktop Interaction System + Style: Modern Dark + Gold Accent — premium micro-interactions + ═══════════════════════════════════════════════════════════ */ + +/* ── Cursor & Touch ── */ .desktop-shell a, .desktop-shell button, .desktop-shell select, @@ -8,71 +13,111 @@ touch-action: auto; } -/* Scrollbar customizations */ +/* ── Focus Visible (Accessibility) ── */ +.desktop-shell a:focus-visible, +.desktop-shell button:focus-visible, +.desktop-shell select:focus-visible, +.desktop-shell [role="button"]:focus-visible, +.desktop-shell input:focus-visible, +.desktop-shell textarea:focus-visible, +.desktop-shell [tabindex]:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; + border-radius: var(--radius); +} + +/* ── Scrollbar Customization ── */ .desktop-shell ::-webkit-scrollbar { width: 6px; height: 6px; } + .desktop-shell ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); -} -.desktop-shell ::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.15); border-radius: 3px; } -.desktop-shell ::-webkit-scrollbar-thumb:hover { - background: var(--primary-light); + +.desktop-shell ::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.12); + border-radius: 3px; + transition: background var(--duration-normal) var(--ease-smooth); } -/* Hover highlights */ +.desktop-shell ::-webkit-scrollbar-thumb:hover { + background: rgba(212, 175, 55, 0.4); +} + +/* ── Hover Highlights ── */ +.desktop-shell .hover-bg { + transition: background-color var(--duration-normal) var(--ease-smooth); +} .desktop-shell .hover-bg:hover { background-color: var(--bg-hover) !important; } +.desktop-shell .hover-gold-soft { + transition: border-color var(--duration-normal) var(--ease-smooth), + box-shadow var(--duration-normal) var(--ease-smooth); +} .desktop-shell .hover-gold-soft:hover { border-color: var(--border-gold) !important; box-shadow: var(--glow-gold); } +.desktop-shell .hover-gold-text { + transition: color var(--duration-normal) var(--ease-smooth); +} .desktop-shell .hover-gold-text:hover { color: var(--primary-light) !important; } -/* Form elements styling */ -.desktop-shell input { +/* ── Form Elements ── */ +.desktop-shell input, +.desktop-shell textarea { padding: 10px 12px; - font-size: 13px; - border-radius: 4px; + font-family: var(--font-body); + font-size: var(--text-base); + border-radius: var(--radius); + transition: border-color var(--duration-normal) var(--ease-smooth), + box-shadow var(--duration-normal) var(--ease-smooth); } -.desktop-shell input:focus { +.desktop-shell input:focus, +.desktop-shell textarea:focus { border-color: var(--border-gold) !important; box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important; } -/* Button hover overrides */ +/* ── Button System ── */ .desktop-shell .btn-gold-outline { - transition: background-color 0.2s, border-color 0.2s; + transition: background-color var(--duration-normal) var(--ease-smooth), + border-color var(--duration-normal) var(--ease-smooth), + box-shadow var(--duration-normal) var(--ease-smooth), + transform var(--duration-fast) var(--ease-out-expo); } .desktop-shell .btn-gold-outline:hover:not(:disabled) { background: rgba(212, 175, 55, 0.08); border-color: var(--border-gold); + box-shadow: var(--glow-gold); } .desktop-shell .btn-gold-outline:active { - transform: none; /* No mobile shrink on PC */ + transform: translateY(1px); } .desktop-shell .btn-primary { - transition: filter 0.2s, transform 0.1s; + transition: filter var(--duration-normal) var(--ease-smooth), + transform var(--duration-fast) var(--ease-out-expo), + box-shadow var(--duration-normal) var(--ease-smooth); } .desktop-shell .btn-primary:hover:not(:disabled) { filter: brightness(1.1); + box-shadow: var(--glow-gold); } .desktop-shell .btn-primary:active { transform: translateY(1px); } -/* Skeleton rows animation for high density PC loaders */ +/* ── Skeleton Loading Animation ── */ @keyframes desktop-skeleton-glow { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } @@ -82,11 +127,12 @@ background: linear-gradient(90deg, #161616 25%, #222222 37%, #161616 63%); background-size: 400% 100%; animation: desktop-skeleton-glow 1.4s ease infinite; + border-radius: var(--radius); } +/* ── Bet Locate Pulse ── */ @keyframes bet-locate-pulse { - 0%, - 100% { + 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } 50% { @@ -98,5 +144,51 @@ animation: bet-locate-pulse 0.6s ease 3; border-color: var(--border-gold) !important; position: relative; - z-index: 1; + z-index: var(--z-card); +} + +/* ── Fade-in Stagger Utility ── */ +@keyframes desktop-fade-in { + from { + opacity: 0; + transform: translateY(12px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.desktop-shell .anim-fade-in { + animation: desktop-fade-in 0.5s var(--ease-out-expo) both; + animation-delay: var(--stagger-delay, 0ms); +} + +/* ── Scale Press Micro-interaction ── */ +.desktop-shell .press-scale { + transition: transform var(--duration-fast) var(--ease-out-expo); +} +.desktop-shell .press-scale:active { + transform: scale(0.97); +} + +/* ── Hover Lift Effect ── */ +.desktop-shell .hover-lift { + transition: transform var(--duration-normal) var(--ease-out-expo), + box-shadow var(--duration-normal) var(--ease-smooth); +} +.desktop-shell .hover-lift:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +/* ── Reduced Motion Preference ── */ +@media (prefers-reduced-motion: reduce) { + .desktop-shell *, + .desktop-shell *::before, + .desktop-shell *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } } diff --git a/apps/player/src/styles/desktop/layout.css b/apps/player/src/styles/desktop/layout.css index 6229031..9744000 100644 --- a/apps/player/src/styles/desktop/layout.css +++ b/apps/player/src/styles/desktop/layout.css @@ -1,4 +1,8 @@ -/* Desktop Global layout structure */ +/* ═══════════════════════════════════════════════════════════ + Desktop Global layout structure + Style: Modern Dark + Gold Accent — layered depth + glassmorphism + ═══════════════════════════════════════════════════════════ */ + .desktop-shell { position: fixed; inset: 0; @@ -12,23 +16,38 @@ overflow: hidden; } +/* Subtle ambient overlay for depth */ +.desktop-shell::after { + content: ''; + position: fixed; + inset: 0; + background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 175, 55, 0.03) 0%, transparent 60%); + pointer-events: none; + z-index: 0; +} + .desktop-header-wrap { flex-shrink: 0; height: var(--desktop-header-h); - background: #111111; + background: rgba(14, 14, 14, 0.88); + backdrop-filter: var(--blur-md); + -webkit-backdrop-filter: var(--blur-md); border-bottom: 1px solid var(--border); - z-index: 120; + z-index: var(--z-header); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; + transition: background var(--duration-normal) var(--ease-smooth); } .desktop-marquee-wrap { flex-shrink: 0; - z-index: 110; + z-index: var(--z-sticky); border-bottom: 1px solid var(--border); - background: #111; + background: rgba(14, 14, 14, 0.85); + backdrop-filter: var(--blur-sm); + -webkit-backdrop-filter: var(--blur-sm); } .desktop-shell.betslip-hidden { @@ -44,6 +63,8 @@ display: flex; min-height: 0; overflow: hidden; + position: relative; + z-index: var(--z-base); } .desktop-main-container { @@ -55,7 +76,7 @@ position: relative; } -/* Betting Layout: Sports bar + Left Sidebar + Center View + Right Betslip */ +/* ── Betting Layout: Sports bar + Left Sidebar + Center View + Right Betslip ── */ .desktop-layout-betting-wrap { display: flex; flex-direction: column; @@ -70,6 +91,8 @@ padding: 0 16px; border-bottom: 1px solid var(--border); background: rgba(14, 14, 14, 0.85); + backdrop-filter: var(--blur-sm); + -webkit-backdrop-filter: var(--blur-sm); } .desktop-layout-betting { @@ -83,12 +106,14 @@ .desktop-betting-left { border-right: 1px solid var(--border); background: rgba(14, 14, 14, 0.6); + backdrop-filter: var(--blur-sm); + -webkit-backdrop-filter: var(--blur-sm); overflow-y: auto; } .desktop-betting-center { overflow-y: auto; - padding: 14px 16px; + padding: var(--space-4); min-width: 0; } @@ -96,7 +121,7 @@ padding: 0; } -/* Account Layout: full-width records center */ +/* ── Account Layout: full-width records center ── */ .desktop-layout-account { display: flex; flex-direction: column; @@ -112,7 +137,7 @@ min-width: 0; min-height: 0; overflow: hidden; - padding: 28px 40px 40px; + padding: var(--space-7) var(--space-10) var(--space-10); } .desktop-account-center > .desktop-records-page { @@ -141,7 +166,7 @@ overflow: hidden; } -/* Marketing / Home Layout: Single Column centered */ +/* ── Marketing / Home Layout: Single Column centered ── */ .desktop-layout-marketing { display: flex; flex-direction: column; @@ -149,7 +174,7 @@ height: 100%; overflow-y: auto; align-items: center; - padding: 20px; + padding: var(--space-5); -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } @@ -163,7 +188,7 @@ max-width: 1400px; } -/* Hub Layout: Left Sidebar (List) + Right Outlet (Detail) */ +/* ── Hub Layout: Left Sidebar (List) + Right Outlet (Detail) ── */ .desktop-layout-hub { display: grid; grid-template-columns: 320px 1fr; @@ -174,6 +199,8 @@ .desktop-hub-left { border-right: 1px solid var(--border); background: var(--desktop-sidebar-panel-bg); + backdrop-filter: var(--blur-sm); + -webkit-backdrop-filter: var(--blur-sm); overflow: hidden; display: flex; flex-direction: column; @@ -181,11 +208,11 @@ .desktop-hub-right { overflow-y: auto; - padding: 20px; + padding: var(--space-5); background: rgba(10, 10, 10, 0.3); } -/* Auth Layout: Centered container */ +/* ── Auth Layout: Centered container ── */ .desktop-layout-auth { display: flex; align-items: center; @@ -193,7 +220,7 @@ width: 100%; height: 100%; overflow-y: auto; - padding: 40px; + padding: var(--space-10); } .desktop-auth-card { @@ -202,6 +229,6 @@ padding: 30px; background: rgba(20, 20, 20, 0.95); border: 1px solid var(--border-gold-soft); - border-radius: 8px; - box-shadow: var(--shadow); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg), var(--glow-gold); } diff --git a/apps/player/src/styles/desktop/records.css b/apps/player/src/styles/desktop/records.css index fdff43e..a232e11 100644 --- a/apps/player/src/styles/desktop/records.css +++ b/apps/player/src/styles/desktop/records.css @@ -1,25 +1,30 @@ -/* PC account records: bets, wallet, recharge, cashbacks */ +/* ═══════════════════════════════════════════════════════════ + PC account records: bets, wallet, recharge, cashbacks + Style: Modern Dark + Gold Accent — premium data table + ═══════════════════════════════════════════════════════════ */ + .desktop-records-page { width: 100%; max-width: 1480px; margin: 0 auto; display: flex; flex-direction: column; - gap: 16px; + gap: var(--space-4); flex: 1; min-height: 0; height: 100%; overflow: hidden; } +/* ── Header ── */ .desktop-records-header { display: flex; align-items: center; justify-content: space-between; - gap: 20px 32px; + gap: var(--space-5) var(--space-8); flex-wrap: wrap; flex-shrink: 0; - padding-bottom: 14px; + padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); } @@ -34,7 +39,7 @@ .desktop-records-actions { display: flex; align-items: center; - gap: 10px; + gap: var(--space-3); flex-shrink: 0; } @@ -42,27 +47,42 @@ display: inline-flex; align-items: center; justify-content: center; - padding: 8px 18px; - border-radius: 6px; + padding: var(--space-2) 18px; + border-radius: var(--radius-md); border: 1px solid var(--border-gold-soft); background: rgba(212, 175, 55, 0.08); color: var(--primary-light); - font-size: 13px; + font-family: var(--font-body); + font-size: var(--text-base); font-weight: 700; text-decoration: none; cursor: pointer; - transition: background 0.2s, border-color 0.2s; + transition: background var(--duration-normal) var(--ease-smooth), + border-color var(--duration-normal) var(--ease-smooth), + box-shadow var(--duration-normal) var(--ease-smooth), + transform var(--duration-fast) var(--ease-out-expo); } .desktop-records-action-btn:hover { background: rgba(212, 175, 55, 0.14); border-color: var(--border-gold); + box-shadow: var(--glow-gold); } +.desktop-records-action-btn:active { + transform: translateY(1px); +} + +.desktop-records-action-btn:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; +} + +/* ── Filter System ── */ .desktop-records-filter-bar { display: flex; flex-wrap: wrap; - gap: 6px; + gap: var(--space-2); align-items: center; } @@ -70,19 +90,20 @@ display: flex; flex-wrap: wrap; align-items: center; - gap: 10px 14px; + gap: var(--space-3) 14px; } .desktop-records-filter-group { display: flex; flex-wrap: wrap; align-items: center; - gap: 8px; + gap: var(--space-2); } .desktop-records-filter-group-label { - font-size: 11px; - font-weight: 800; + font-family: var(--font-display); + font-size: var(--text-sm); + font-weight: 400; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; @@ -98,45 +119,60 @@ .desktop-records-filter-chip { padding: 7px 16px; - border-radius: 6px; - font-size: 12px; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-sm); font-weight: 700; color: var(--text-muted); background: rgba(255, 255, 255, 0.03); border: 1px solid transparent; cursor: pointer; - transition: color 0.2s, border-color 0.2s, background 0.2s; + transition: color var(--duration-normal) var(--ease-smooth), + border-color var(--duration-normal) var(--ease-smooth), + background var(--duration-normal) var(--ease-smooth), + box-shadow var(--duration-normal) var(--ease-smooth); white-space: nowrap; } .desktop-records-filter-chip:hover { color: #fff; border-color: rgba(212, 175, 55, 0.25); + background: rgba(255, 255, 255, 0.05); } .desktop-records-filter-chip.active { color: var(--primary-light); background: rgba(212, 175, 55, 0.1); border-color: rgba(212, 175, 55, 0.35); + box-shadow: 0 0 8px rgba(212, 175, 55, 0.1); } +.desktop-records-filter-chip:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; +} + +/* ── Wallet Sub Nav ── */ .desktop-wallet-subnav { display: flex; flex-wrap: wrap; - gap: 4px; + gap: var(--space-1); } .desktop-wallet-subnav-link { display: inline-flex; align-items: center; - padding: 8px 16px; - border-radius: 6px; - font-size: 13px; + padding: var(--space-2) var(--space-4); + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-base); font-weight: 700; color: var(--text-muted); text-decoration: none; border: 1px solid transparent; - transition: color 0.2s, background 0.2s, border-color 0.2s; + transition: color var(--duration-normal) var(--ease-smooth), + background var(--duration-normal) var(--ease-smooth), + border-color var(--duration-normal) var(--ease-smooth); } .desktop-wallet-subnav-link:hover { @@ -150,15 +186,24 @@ border-color: rgba(212, 175, 55, 0.28); } +.desktop-wallet-subnav-link:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; +} + +/* ── Panel & Table ── */ .desktop-records-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; - background: rgba(18, 18, 18, 0.94); + background: rgba(18, 18, 18, 0.92); + backdrop-filter: var(--blur-sm); + -webkit-backdrop-filter: var(--blur-sm); border: 1px solid var(--border); - border-radius: 10px; + border-radius: var(--radius-lg); overflow: hidden; + box-shadow: var(--shadow-sm); } .desktop-records-table-wrap { @@ -170,34 +215,53 @@ .desktop-records-table { width: 100%; border-collapse: collapse; - font-size: 13px; + font-family: var(--font-body); + font-size: var(--text-base); } +/* ── Table Header ── */ .desktop-records-table th { position: sticky; top: 0; - z-index: 2; - padding: 12px 16px; + z-index: var(--z-sticky); + padding: var(--space-3) var(--space-4); text-align: left; - font-size: 11px; - font-weight: 800; + font-family: var(--font-display); + font-size: var(--text-sm); + font-weight: 400; color: var(--text-muted); - background: #121212; + background: rgba(12, 12, 12, 0.97); + backdrop-filter: var(--blur-sm); + -webkit-backdrop-filter: var(--blur-sm); text-transform: uppercase; - letter-spacing: 0.06em; + letter-spacing: 0.08em; border-bottom: 1px solid var(--border); white-space: nowrap; } +/* Gold accent line under thead */ +.desktop-records-table thead tr::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent); + pointer-events: none; +} + .desktop-records-table th.num-th { text-align: right; } +/* ── Table Body ── */ .desktop-records-table td { - padding: 12px 16px; - border-bottom: 1px solid rgba(255, 255, 255, 0.04); + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--border-subtle); color: var(--text); vertical-align: middle; + transition: background var(--duration-fast) var(--ease-smooth); } .desktop-records-table tbody tr:nth-child(even) { @@ -205,7 +269,8 @@ } .desktop-records-table tbody tr.hover-row { - transition: background 0.15s; + transition: background var(--duration-fast) var(--ease-smooth), + box-shadow var(--duration-fast) var(--ease-smooth); } .desktop-records-table tbody tr.clickable-row { @@ -214,14 +279,16 @@ .desktop-records-table tbody tr.hover-row:hover, .desktop-records-table tbody tr.clickable-row:hover { - background: rgba(255, 255, 255, 0.04); + background: rgba(212, 175, 55, 0.04); + box-shadow: inset 3px 0 0 var(--primary); } +/* ── Cell Styles ── */ .desktop-records-table .id-cell { color: var(--text); font-weight: 700; - font-family: 'SF Mono', 'Consolas', monospace; - font-size: 12px; + font-family: var(--font-mono); + font-size: var(--text-sm); letter-spacing: 0.03em; } @@ -229,21 +296,27 @@ text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; + font-family: var(--font-mono); } .desktop-records-table .date-cell { white-space: nowrap; color: var(--text-muted); - font-size: 12px; + font-size: var(--text-sm); + font-variant-numeric: tabular-nums; } +/* ── Pagination ── */ .desktop-records-pagination { flex-shrink: 0; - padding: 12px 16px; - border-top: 1px solid rgba(255, 255, 255, 0.06); - background: rgba(10, 10, 10, 0.35); + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--border-subtle); + background: rgba(10, 10, 10, 0.5); + backdrop-filter: var(--blur-sm); + -webkit-backdrop-filter: var(--blur-sm); } +/* ── Loading & Empty States ── */ .desktop-records-loading, .desktop-records-empty { display: flex; @@ -253,9 +326,10 @@ gap: 14px; flex: 1; min-height: 0; - padding: 48px 24px; + padding: var(--space-12) var(--space-6); color: var(--text-muted); - font-size: 14px; + font-family: var(--font-body); + font-size: var(--text-md); font-weight: 600; } @@ -267,15 +341,15 @@ .desktop-records-table-empty { text-align: center; - padding: 56px 16px !important; + padding: 56px var(--space-4) !important; color: var(--text-muted); - font-size: 14px; + font-size: var(--text-md); font-weight: 600; } .desktop-records-table-empty .empty-hint { - margin: 8px 0 0; - font-size: 13px; + margin: var(--space-2) 0 0; + font-size: var(--text-base); font-weight: 500; line-height: 1.6; color: var(--text-muted); @@ -286,27 +360,77 @@ align-items: center; justify-content: center; min-height: 280px; - padding: 48px 24px; + padding: var(--space-12) var(--space-6); } +/* ── Status Badges ── */ .desktop-records-status { display: inline-flex; align-items: center; + gap: 4px; padding: 4px 10px; border-radius: 999px; - font-size: 11px; + font-family: var(--font-body); + font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; + transition: transform var(--duration-fast) var(--ease-out-expo); } -.desktop-records-status.status-won { background: rgba(52, 199, 89, 0.12); color: #4cd964; } -.desktop-records-status.status-lost { background: rgba(255, 69, 58, 0.12); color: #ff453a; } -.desktop-records-status.status-pending { background: rgba(212, 175, 55, 0.12); color: var(--primary-light); } -.desktop-records-status.status-push { background: rgba(100, 100, 100, 0.12); color: #aaa; } -.desktop-records-status.status-cancelled { background: rgba(100, 100, 100, 0.1); color: #777; } -.desktop-records-status.status-default { background: rgba(100, 100, 100, 0.1); color: #888; } +.desktop-records-status::before { + content: ''; + width: 6px; + height: 6px; + border-radius: 50%; + flex-shrink: 0; +} +.desktop-records-status.status-won { + background: rgba(52, 199, 89, 0.12); + color: #4cd964; +} +.desktop-records-status.status-won::before { background: #4cd964; } + +.desktop-records-status.status-lost { + background: rgba(255, 69, 58, 0.12); + color: #ff453a; +} +.desktop-records-status.status-lost::before { background: #ff453a; } + +.desktop-records-status.status-pending { + background: rgba(212, 175, 55, 0.12); + color: var(--primary-light); +} +.desktop-records-status.status-pending::before { + background: var(--primary-light); + animation: pulse-dot 1.6s ease-in-out infinite; +} + +.desktop-records-status.status-push { + background: rgba(100, 100, 100, 0.12); + color: #aaa; +} +.desktop-records-status.status-push::before { background: #aaa; } + +.desktop-records-status.status-cancelled { + background: rgba(100, 100, 100, 0.1); + color: #777; +} +.desktop-records-status.status-cancelled::before { background: #777; } + +.desktop-records-status.status-default { + background: rgba(100, 100, 100, 0.1); + color: #888; +} +.desktop-records-status.status-default::before { background: #888; } + +@keyframes pulse-dot { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(0.7); } +} + +/* ── Amount Colors ── */ .desktop-records-amount.pos { color: var(--primary-light); } .desktop-records-amount.neg { color: var(--danger); } .desktop-records-amount.zero { color: var(--text-muted); } diff --git a/apps/player/src/styles/desktop/tokens.css b/apps/player/src/styles/desktop/tokens.css index c4f8510..b61f93d 100644 --- a/apps/player/src/styles/desktop/tokens.css +++ b/apps/player/src/styles/desktop/tokens.css @@ -1,5 +1,14 @@ +/* ═══════════════════════════════════════════════════════════ + Desktop Design Tokens — TheBet365 + Style: Modern Dark + Gold Accent (Cinema Mobile) + Typography: Russo One / Chakra Petch + ═══════════════════════════════════════════════════════════ */ + +/* ── Google Fonts Import ── */ +@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Russo+One&display=swap'); + .desktop-shell { - /* Color Palette overrides */ + /* ── Color Palette ── */ --primary: #D4AF37; --primary-dark: #A8841F; --primary-light: #F0D875; @@ -7,40 +16,108 @@ --tertiary: #0A0A0A; --neutral: #8E8E93; --bg-body: #050505; - --bg-card: rgba(20, 20, 20, 0.95); + --bg-card: rgba(20, 20, 20, 0.92); + --bg-card-hover: rgba(28, 28, 28, 0.95); --bg-hover: rgba(38, 38, 38, 0.95); --bg-elevated: rgba(45, 45, 45, 0.95); + --bg-surface: rgba(16, 16, 16, 0.88); --text: #FFFFFF; + --text-secondary: #B8B8BD; --text-muted: #8E8E93; --border: #262626; + --border-subtle: rgba(255, 255, 255, 0.06); --border-gold: #D4AF37; --border-gold-soft: rgba(212, 175, 55, 0.25); --border-w: 1px; --border-w-thick: 1px; --danger: #FF453A; + --success: #34C759; + --warning: #FFD60A; --radius: 4px; --radius-sm: 2px; - --shadow: 0 4px 16px rgba(0, 0, 0, 0.65); - --shadow-gold: 0 2px 12px rgba(212, 175, 55, 0.15); - --glow-gold: 0 0 6px rgba(212, 175, 55, 0.15); + --radius-md: 8px; + --radius-lg: 12px; + --radius-xl: 16px; - /* PC Dimensioning */ + /* ── Shadows & Elevation ── */ + --shadow: 0 4px 16px rgba(0, 0, 0, 0.65); + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); + --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7); + --shadow-gold: 0 2px 12px rgba(212, 175, 55, 0.15); + --shadow-gold-lg: 0 4px 24px rgba(212, 175, 55, 0.2); + --glow-gold: 0 0 6px rgba(212, 175, 55, 0.15); + --glow-gold-md: 0 0 16px rgba(212, 175, 55, 0.2); + --glow-gold-lg: 0 0 24px rgba(212, 175, 55, 0.25); + + /* ── Backdrop Blur ── */ + --blur-sm: blur(8px); + --blur-md: blur(16px); + --blur-lg: blur(24px); + + /* ── PC Dimensioning ── */ --desktop-header-h: 56px; --desktop-left-sidebar-w: 220px; --desktop-right-betslip-w: 288px; --desktop-right-betslip-expanded-w: 288px; --desktop-right-betslip-collapsed-w: 40px; - /* Desktop specific added vars */ + /* ── Desktop specific vars ── */ --desktop-bg: #050505; --desktop-border: #262626; --desktop-sidebar-bg: rgba(20, 20, 20, 0.95); --desktop-sidebar-panel-bg: linear-gradient(rgba(16, 16, 16, 0.88), rgba(16, 16, 16, 0.88)), url('../../assets/images/cebian.webp') no-repeat center / cover; - + + /* ── Spacing Scale (8dp rhythm) ── */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-7: 28px; + --space-8: 32px; + --space-10: 40px; + --space-12: 48px; + --space-16: 64px; + + /* ── Typography ── */ + --font-display: 'Russo One', 'Chakra Petch', sans-serif; + --font-body: 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + --font-mono: 'SF Mono', 'Consolas', 'Chakra Petch', monospace; + + --text-xs: 10px; + --text-sm: 11px; + --text-base: 13px; + --text-md: 14px; + --text-lg: 16px; + --text-xl: 18px; + --text-2xl: 22px; + --text-3xl: 28px; + /* Reset typography inside desktop */ - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; - font-size: 13px; - line-height: 1.4; + font-family: var(--font-body); + font-size: var(--text-base); + line-height: 1.5; color: var(--text); -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + /* ── Transition Timings ── */ + --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); + --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1); + --duration-fast: 150ms; + --duration-normal: 200ms; + --duration-smooth: 300ms; + --duration-emphasis: 400ms; + + /* ── Z-index Scale ── */ + --z-base: 0; + --z-card: 10; + --z-sticky: 20; + --z-overlay: 40; + --z-modal: 100; + --z-popover: 110; + --z-header: 120; + --z-tooltip: 1000; } diff --git a/apps/player/src/views/desktop/DesktopHomeView.vue b/apps/player/src/views/desktop/DesktopHomeView.vue index 5e4dcc8..281b2cb 100644 --- a/apps/player/src/views/desktop/DesktopHomeView.vue +++ b/apps/player/src/views/desktop/DesktopHomeView.vue @@ -552,7 +552,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin .desktop-home-view { display: flex; flex-direction: column; - gap: 16px; + gap: var(--space-4); width: 100%; } @@ -581,7 +581,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin .home-marquee-strip { position: relative; height: 34px; - border-radius: 8px; + border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(90deg, rgba(212, 175, 55, 0.02), @@ -589,9 +589,11 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin rgba(212, 175, 55, 0.02)); border: 1px solid var(--border-gold-soft); display: flex; - align-items: stretch; /* let child fill full height */ - padding: 0; /* no padding — child spans edge to edge */ + align-items: stretch; + padding: 0; box-shadow: inset 0 0 12px rgba(212, 175, 55, 0.08); + backdrop-filter: var(--blur-sm); + -webkit-backdrop-filter: var(--blur-sm); } /* force the embedded button to fill the strip completely */ @@ -609,7 +611,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin .main-row { display: grid; grid-template-columns: minmax(0, 1fr) 320px; - gap: 16px; + gap: var(--space-4); align-items: start; } @@ -617,22 +619,25 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin min-width: 0; display: flex; flex-direction: column; - gap: 20px; + gap: var(--space-5); } .content-section { - background: rgba(20, 20, 20, 0.85); + background: rgba(20, 20, 20, 0.88); + backdrop-filter: var(--blur-md); + -webkit-backdrop-filter: var(--blur-md); border: 1px solid var(--border); - border-radius: 12px; - padding: 16px 18px; + border-radius: var(--radius-lg); + padding: var(--space-4) 18px; + box-shadow: var(--shadow-sm); } /* section-title 金线 */ .section-title { display: flex; align-items: center; - gap: 12px; - margin-bottom: 14px; + gap: var(--space-3); + margin-bottom: var(--space-4); } .st-line { @@ -644,8 +649,9 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin } .st-text { - font-size: 15px; - font-weight: 800; + font-family: var(--font-display); + font-size: var(--text-lg); + font-weight: 400; color: var(--text); letter-spacing: 0.5px; } @@ -689,17 +695,18 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin .featured-match { display: flex; flex-direction: column; - gap: 14px; + gap: var(--space-4); padding: 18px 20px; - border-radius: 12px; + border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.04) 50%, rgba(15, 10, 0, 0.1)), url('../../assets/images/card-bg.webp') center/cover no-repeat; border: 1px solid var(--border-gold); - box-shadow: var(--shadow-gold), inset 0 0 20px rgba(212, 175, 55, 0.06); - margin-bottom: 14px; + box-shadow: var(--shadow-gold-lg), inset 0 0 20px rgba(212, 175, 55, 0.06); + margin-bottom: var(--space-4); cursor: pointer; - transition: box-shadow 0.25s, transform 0.15s; + transition: box-shadow var(--duration-smooth) var(--ease-smooth), + transform var(--duration-normal) var(--ease-out-expo); position: relative; overflow: hidden; } @@ -708,14 +715,16 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin content: ''; position: absolute; top: 0; right: 0; - width: 140px; height: 140px; - background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.18), transparent 65%); + width: 180px; height: 180px; + background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.2), transparent 60%); pointer-events: none; + animation: goldGlowPulse 3.5s ease-in-out infinite; + transform-origin: top right; } .featured-match:hover { - transform: translateY(-1px); - box-shadow: 0 0 24px rgba(212, 175, 55, 0.25), inset 0 0 20px rgba(212, 175, 55, 0.08); + transform: translateY(-2px); + box-shadow: var(--glow-gold-lg), inset 0 0 24px rgba(212, 175, 55, 0.08); } .featured-top { @@ -777,8 +786,9 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin } .featured-vs { - font-size: 22px; - font-weight: 900; + font-family: var(--font-display); + font-size: var(--text-2xl); + font-weight: 400; font-style: italic; color: var(--primary-light); text-shadow: 0 0 12px rgba(212, 175, 55, 0.5); @@ -802,8 +812,9 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin } .featured-market-label { - font-size: 11px; - font-weight: 700; + font-family: var(--font-display); + font-size: var(--text-sm); + font-weight: 400; color: #ffffff; text-align: center; letter-spacing: 0.4px; @@ -820,32 +831,38 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin .match-card { display: flex; background: var(--bg-card); + backdrop-filter: var(--blur-sm); + -webkit-backdrop-filter: var(--blur-sm); border: 1px solid var(--border); - border-radius: 8px; + border-radius: var(--radius-md); overflow: hidden; - transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; + transition: border-color var(--duration-normal) var(--ease-smooth), + box-shadow var(--duration-normal) var(--ease-smooth), + transform var(--duration-normal) var(--ease-out-expo); min-height: 76px; } .match-card:is(:hover, .match-card--engaged) { border-color: var(--border-gold); - box-shadow: var(--shadow-gold); - transform: translateY(-1px); + box-shadow: var(--shadow-gold-lg), var(--glow-gold); + transform: translateY(-2px); } .match-info-side { flex: 1; - padding: 8px 12px; + padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; justify-content: center; - gap: 4px; + gap: var(--space-1); border-right: 1px solid var(--border); min-width: 0; cursor: pointer; background: rgba(255, 255, 255, 0.01); position: relative; overflow: hidden; + transition: background var(--duration-fast) var(--ease-smooth), + box-shadow var(--duration-normal) var(--ease-smooth); } .match-info-side > * { @@ -854,7 +871,8 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin } .match-card:is(:hover, .match-card--engaged) .match-info-side { - background: rgba(255, 255, 255, 0.02); + background: rgba(212, 175, 55, 0.03); + box-shadow: inset 3px 0 0 var(--primary); } .match-market-side { @@ -884,12 +902,13 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin } .league-tag { - font-size: 10px; + font-family: var(--font-body); + font-size: var(--text-xs); font-weight: 700; color: var(--primary-light); background: var(--border-gold-soft); padding: 1px 6px; - border-radius: 3px; + border-radius: var(--radius-sm); max-width: 100%; white-space: nowrap; overflow: hidden; @@ -901,20 +920,23 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin } .live-indicator { + font-family: var(--font-display); font-size: 9px; - font-weight: 800; + font-weight: 400; background: var(--danger); color: #fff; padding: 1px 3px; - border-radius: 2px; + border-radius: var(--radius-sm); line-height: 1; } .match-time { - font-size: 10px; + font-family: var(--font-mono); + font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; white-space: nowrap; + font-variant-numeric: tabular-nums; } .teams-versus-compact { @@ -942,7 +964,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin } .team-name { - font-size: 12px; + font-size: var(--text-sm); font-weight: 700; color: var(--text); overflow: hidden; @@ -960,14 +982,16 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin .market-tab-btn { padding: 2px 6px; - font-size: 10px; + font-family: var(--font-body); + font-size: var(--text-xs); font-weight: 700; - border-radius: 4px; + border-radius: var(--radius); background: transparent; color: var(--text-muted); border: none; cursor: pointer; - transition: all 0.15s; + transition: background var(--duration-fast) var(--ease-smooth), + color var(--duration-fast) var(--ease-smooth); white-space: nowrap; } @@ -981,6 +1005,11 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin color: var(--primary-light); } +.market-tab-btn:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 1px; +} + .market-odds-area { flex: 1; display: flex; @@ -990,7 +1019,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin } .no-market-odds { - font-size: 10px; + font-size: var(--text-xs); color: var(--text-muted); text-align: center; } @@ -1000,18 +1029,21 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin min-width: 0; display: flex; flex-direction: column; - gap: 16px; + gap: var(--space-4); } .home-sidebar :deep(.home-announce-card) { - border-radius: 12px; + border-radius: var(--radius-lg); } .side-card { - background: rgba(20, 20, 20, 0.85); + background: rgba(20, 20, 20, 0.88); + backdrop-filter: var(--blur-md); + -webkit-backdrop-filter: var(--blur-md); border: 1px solid var(--border); - border-radius: 12px; - padding: 12px 14px; + border-radius: var(--radius-lg); + padding: var(--space-3) 14px; + box-shadow: var(--shadow-sm); } .side-card-header { @@ -1023,8 +1055,9 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin } .side-card-title { - font-size: 13px; - font-weight: 800; + font-family: var(--font-display); + font-size: var(--text-base); + font-weight: 400; color: var(--primary-light); letter-spacing: 0.3px; } @@ -1042,14 +1075,18 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin display: flex; flex-direction: column; align-items: flex-start; - padding: 8px 10px; - border-radius: 6px; + padding: var(--space-2) var(--space-3); + border-radius: var(--radius-md); cursor: pointer; - transition: background 0.15s; + transition: background var(--duration-fast) var(--ease-smooth), + transform var(--duration-fast) var(--ease-out-expo), + box-shadow var(--duration-fast) var(--ease-smooth); } .side-recommend-item:hover { - background: var(--bg-hover); + background: rgba(212, 175, 55, 0.06); + transform: translateX(3px); + box-shadow: inset 2px 0 0 var(--primary); } .sri-top-row { @@ -1153,10 +1190,6 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin } } -.featured-match::before { - animation: goldGlowPulse 3.5s ease-in-out infinite; - transform-origin: top right; -} /* --- 3. VS 心跳 --- */ @keyframes vsHeartbeat { @@ -1347,17 +1380,20 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin transform: translateY(-50%) translateX(8px); width: 260px; background: rgba(12, 12, 12, 0.97); + backdrop-filter: var(--blur-lg); + -webkit-backdrop-filter: var(--blur-lg); border: 1px solid var(--border-gold); - border-radius: 10px; - padding: 12px 14px; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 175, 55, 0.12); + border-radius: var(--radius-lg); + padding: var(--space-3) 14px; + box-shadow: var(--shadow-lg), var(--glow-gold-md); opacity: 0; pointer-events: none; - transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1); - z-index: 100; + transition: opacity var(--duration-smooth) var(--ease-smooth), + transform var(--duration-smooth) var(--ease-out-expo); + z-index: var(--z-popover); display: flex; flex-direction: column; - gap: 10px; + gap: var(--space-3); } .side-recommend-item:is(:hover, .side-recommend-item--engaged) .sri-preview-card { diff --git a/apps/player/src/views/desktop/DesktopMyBetsView.vue b/apps/player/src/views/desktop/DesktopMyBetsView.vue index ac78e4c..e267b53 100644 --- a/apps/player/src/views/desktop/DesktopMyBetsView.vue +++ b/apps/player/src/views/desktop/DesktopMyBetsView.vue @@ -202,6 +202,8 @@ function statusLabel(status: string) { diff --git a/apps/player/src/views/desktop/DesktopWalletDetailView.vue b/apps/player/src/views/desktop/DesktopWalletDetailView.vue index 9b6df6e..c708fc6 100644 --- a/apps/player/src/views/desktop/DesktopWalletDetailView.vue +++ b/apps/player/src/views/desktop/DesktopWalletDetailView.vue @@ -124,7 +124,7 @@ onActivated(() => loadPage(1)); diff --git a/apps/player/src/views/desktop/DesktopWalletView.vue b/apps/player/src/views/desktop/DesktopWalletView.vue index 2fd60fe..9d4772a 100644 --- a/apps/player/src/views/desktop/DesktopWalletView.vue +++ b/apps/player/src/views/desktop/DesktopWalletView.vue @@ -154,11 +154,14 @@ onActivated(() => fetchData(1));