@@ -125,6 +249,40 @@ const liveScoreText = computed(() => {
>
{{ bettingOpen ? t('bet.place_bet_short') : t('bet.view_match') }}
+
+
+
+
+
+ {{ t('bet.all') || '全部' }} →
+
+
+
+
+
+
+
+ {{ t('bet.no_market_odds') || '暂无盘口' }}
+
+
+
@@ -132,7 +290,7 @@ const liveScoreText = computed(() => {
.match-card {
position: relative;
background: var(--gradient-card);
- border: 1px solid rgba(255, 255, 255, 0.11);
+ border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 10px 10px;
display: flex;
@@ -140,6 +298,7 @@ const liveScoreText = computed(() => {
align-items: center;
gap: 10px;
min-width: 0;
+ min-height: 130px;
overflow: hidden;
cursor: pointer;
box-shadow: var(--shadow-card-sm);
@@ -173,6 +332,7 @@ const liveScoreText = computed(() => {
align-items: center;
width: 100%;
gap: 4px;
+ transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.3s ease;
}
.team {
@@ -183,6 +343,7 @@ const liveScoreText = computed(() => {
gap: 6px;
min-width: 0;
transform: translateY(8px);
+ transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.team-name {
@@ -199,6 +360,7 @@ const liveScoreText = computed(() => {
padding: 0 6px;
align-self: stretch;
letter-spacing: -0.02em;
+ transition: font-size 0.25s ease;
}
.match-card--phase .team-name {
@@ -211,12 +373,14 @@ const liveScoreText = computed(() => {
object-fit: cover;
border-radius: 3px;
display: block;
+ transition: transform 0.25s ease, opacity 0.2s ease, height 0.25s ease, width 0.25s ease, margin 0.25s ease;
}
.team-flag.flag-logo {
width: 48px;
height: 48px;
object-fit: contain;
+ transition: transform 0.25s ease, opacity 0.2s ease, height 0.25s ease, width 0.25s ease, margin 0.25s ease;
}
.center-col {
@@ -226,7 +390,7 @@ const liveScoreText = computed(() => {
align-items: center;
justify-content: center;
gap: 5px;
- min-width: 72px;
+ min-width: 56px;
}
.kickoff {
@@ -238,6 +402,7 @@ const liveScoreText = computed(() => {
text-align: center;
max-width: 96px;
overflow-wrap: anywhere;
+ transition: opacity 0.2s ease, height 0.2s ease, margin 0.2s ease;
}
.live-score {
@@ -246,35 +411,43 @@ const liveScoreText = computed(() => {
color: var(--text);
line-height: 1;
letter-spacing: 0.02em;
+ transition: font-size 0.25s ease;
+}
+
+.vs {
+ font-size: 22px;
+ font-weight: 900;
+ color: var(--text);
+ letter-spacing: 0.08em;
+ line-height: 1;
+ transition: font-size 0.25s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.status-tag {
position: absolute;
top: 0;
- left: 0;
- right: auto;
+ right: 0;
z-index: 3;
font-size: 10px;
- font-weight: 600;
- padding: 4px 10px 4px 8px;
- border-radius: 0 0 10px 0;
+ font-weight: 700;
+ padding: 3px 10px;
+ border-radius: 0 6px 0 8px;
line-height: 1.3;
white-space: nowrap;
- letter-spacing: 0;
+ letter-spacing: 0.02em;
+}
+
+.status-tag--open {
+ background: rgba(255, 255, 255, 0.12);
+ color: var(--primary-light);
+ border: 1px solid var(--border-gold-soft);
}
.status-tag--settled {
- background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 20, 40, 0.7) 100%);
+ background: rgba(255, 255, 255, 0.06);
color: var(--text-muted);
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
- border-right: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.status-tag--pending {
- background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(10, 53, 88, 0.55) 100%);
- color: var(--text-muted);
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
- border-right: 1px solid rgba(255, 255, 255, 0.1);
+ border-bottom: 1px solid var(--border);
+ border-left: 1px solid var(--border);
}
.bet-btn {
@@ -287,6 +460,8 @@ const liveScoreText = computed(() => {
font-size: 13px;
letter-spacing: 0.04em;
line-height: 1.2;
+ overflow: hidden;
+ transition: opacity 0.2s ease, transform 0.2s ease, height 0.25s ease, padding 0.25s ease, min-width 0.25s ease, min-height 0.25s ease, margin 0.25s ease;
}
.bet-btn--view {
@@ -294,4 +469,184 @@ const liveScoreText = computed(() => {
border: 1px solid var(--border);
color: var(--text-muted);
}
+
+/* --- Morphing Quick Bet panel --- */
+.card-quick-bet {
+ position: absolute;
+ left: 8px;
+ right: 8px;
+ bottom: 8px;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ opacity: 0;
+ pointer-events: none;
+ transform: translateY(12px);
+ transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+ z-index: 5;
+}
+
+@media (hover: hover) {
+ .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) {
+ border-color: var(--border-gold);
+ box-shadow: var(--shadow-sm);
+ }
+
+ .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .teams-row {
+ transform: translateY(0);
+ padding: 0 40px;
+ }
+
+ .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .team {
+ transform: translateY(0);
+ gap: 3px;
+ }
+
+ .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .team-flag {
+ width: 40px;
+ height: 28px;
+ }
+
+ .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .team-flag.flag-logo {
+ width: 28px;
+ height: 28px;
+ }
+
+ .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .team-name {
+ font-size: 10px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
+ }
+
+ .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .kickoff {
+ opacity: 0;
+ height: 0;
+ margin: 0;
+ overflow: hidden;
+ pointer-events: none;
+ }
+
+ .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .vs,
+ .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .live-score {
+ font-size: 16px;
+ }
+
+ .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .bet-btn {
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .card-quick-bet {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateY(0);
+ }
+
+ .match-card.no-quick-bet:hover {
+ border-color: var(--border-gold);
+ box-shadow: var(--shadow-sm);
+ }
+}
+
+.quick-bet-tabs {
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid var(--border);
+ padding-bottom: 4px;
+ margin-bottom: 2px;
+}
+
+.quick-bet-tab-btn {
+ padding: 2px 6px;
+ font-size: 9px;
+ font-weight: 700;
+ color: var(--text-muted);
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ border-radius: 3px;
+ transition: all 0.15s;
+}
+
+.quick-bet-tab-btn:hover {
+ color: var(--primary-light);
+}
+
+.quick-bet-tab-btn.active {
+ color: var(--primary-light);
+ background: var(--border-gold-soft);
+}
+
+.quick-bet-all-link {
+ margin-left: auto;
+ font-size: 9px;
+ font-weight: 700;
+ color: var(--primary-light);
+ cursor: pointer;
+ padding: 2px 4px;
+ transition: opacity 0.15s;
+}
+
+.quick-bet-all-link:hover {
+ opacity: 0.7;
+}
+
+.quick-bet-odds {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+}
+
+.quick-bet-odds :deep(.odds-btn) {
+ min-height: 26px !important;
+ padding: 1px 4px !important;
+ gap: 1px !important;
+}
+
+.quick-bet-odds :deep(.odds) {
+ font-size: 11px !important;
+}
+
+.quick-bet-odds :deep(.label) {
+ font-size: 8px !important;
+}
+
+.quick-bet-no-odds {
+ font-size: 10px;
+ color: var(--text-muted);
+}
+
+/* --- VS Selection Highlight: scale selected team --- */
+.teams-row .team {
+ transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, filter 0.3s ease;
+}
+.teams-row.home .team:first-child {
+ transform: scale(1.08);
+ filter: brightness(1.3) saturate(1.2);
+ z-index: 2;
+}
+.teams-row.home .team:last-child {
+ opacity: 0.35 !important;
+ transform: scale(0.94);
+ filter: grayscale(0.6) brightness(0.7);
+}
+
+.teams-row.away .team:last-child {
+ transform: scale(1.08);
+ filter: brightness(1.3) saturate(1.2);
+ z-index: 2;
+}
+.teams-row.away .team:first-child {
+ opacity: 0.35 !important;
+ transform: scale(0.94);
+ filter: grayscale(0.6) brightness(0.7);
+}
+
+.teams-row.draw .team {
+ transform: scale(1.05);
+ filter: brightness(1.15) saturate(1.1);
+}
diff --git a/apps/player/src/components/MessageListPanel.vue b/apps/player/src/components/MessageListPanel.vue
index 0fca05b..c84cf4d 100644
--- a/apps/player/src/components/MessageListPanel.vue
+++ b/apps/player/src/components/MessageListPanel.vue
@@ -251,7 +251,7 @@ onActivated(tryLoad);
flex: 1;
min-width: 0;
font-size: 15px;
- color: #d8d8d8;
+ color: var(--text-muted);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
@@ -264,7 +264,7 @@ onActivated(tryLoad);
border-radius: 4px;
font-size: 10px;
font-weight: 600;
- color: #888;
+ color: var(--text-muted);
background: rgba(255, 255, 255, 0.06);
}
@@ -283,7 +283,7 @@ onActivated(tryLoad);
.date {
font-size: 12px;
- color: #777;
+ color: var(--text-muted);
}
.chevron {
@@ -301,7 +301,7 @@ onActivated(tryLoad);
border: none;
border-radius: 8px;
background: transparent;
- color: #666;
+ color: var(--text-muted);
cursor: pointer;
}
diff --git a/apps/player/src/components/MouseRippleGrid.vue b/apps/player/src/components/MouseRippleGrid.vue
new file mode 100644
index 0000000..9a6990f
--- /dev/null
+++ b/apps/player/src/components/MouseRippleGrid.vue
@@ -0,0 +1,284 @@
+
+
+
+
+
+
+
diff --git a/apps/player/src/components/TeamEmblem.vue b/apps/player/src/components/TeamEmblem.vue
index 06d5b70..d7b8690 100644
--- a/apps/player/src/components/TeamEmblem.vue
+++ b/apps/player/src/components/TeamEmblem.vue
@@ -7,7 +7,7 @@ const props = withDefaults(
teamCode?: string;
teamName?: string;
logoUrl?: string | null;
- size?: 'sm' | 'md' | 'lg';
+ size?: 'sm' | 'md' | 'lg' | 'xl';
}>(),
{ size: 'md' },
);
@@ -80,6 +80,11 @@ watch(
height: 52px;
}
+.team-emblem--xl {
+ width: 72px;
+ height: 72px;
+}
+
/* 国旗：横向比例 + 铺满 */
.team-emblem:not(.team-emblem--logo) {
object-fit: cover;
@@ -102,6 +107,11 @@ watch(
height: 36px;
}
+.team-emblem--xl:not(.team-emblem--logo) {
+ width: 80px;
+ height: 54px;
+}
+
/* 队徽：正方形容器 + 完整显示 */
.team-emblem--logo {
object-fit: contain;
@@ -129,4 +139,8 @@ watch(
.team-emblem--lg.team-emblem--placeholder {
font-size: 22px;
}
+
+.team-emblem--xl.team-emblem--placeholder {
+ font-size: 30px;
+}
diff --git a/apps/player/src/components/desktop/AccountSideNav.vue b/apps/player/src/components/desktop/AccountSideNav.vue
new file mode 100644
index 0000000..fb68313
--- /dev/null
+++ b/apps/player/src/components/desktop/AccountSideNav.vue
@@ -0,0 +1,121 @@
+
+
+
+
+
+
+
diff --git a/apps/player/src/components/desktop/BetSlipPanel.vue b/apps/player/src/components/desktop/BetSlipPanel.vue
new file mode 100644
index 0000000..5fba4cd
--- /dev/null
+++ b/apps/player/src/components/desktop/BetSlipPanel.vue
@@ -0,0 +1,2033 @@
+
+
+
+
+
+
{{ t('bet.bet_slip') || '投注单' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ oddsWarningText }}
+
+
+
+
+
+
+
+
+
+
{{ t('history.empty') }}
+
+
+
+ {{ historyPickLabel(bet) }}
+
+ {{ historyStatusLabel(bet.status) }}
+
+
+
+ {{ bet.matchTitle }}
+
+
+
+ {{ bet.betNo }}
+ {{ bet.placedAt ? new Date(bet.placedAt).toLocaleString(locale) : '' }}
+
+
+
+
+
+
+
+
{{ activeTab === 'parlay' ? t('bet.slip_parlay_empty_hint') : t('bet.slip_empty_hint') }}
+
{{ parlayWarning }}
+
+
+
+ {{ item.matchName }}
+ {{ item.marketName }}
+
+
+
+
+ {{ item.selectionName }}
+
+
+
+ {{ oddsDeltaFor(item.selectionId)!.oldOdds.toFixed(2) }} →
+ {{ oddsDeltaFor(item.selectionId)!.newOdds.toFixed(2) }}
+
+
+ {{ item.odds.toFixed(2) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('bet.slip_est_return') }}
+ {{ formatMoney(itemEstReturn(item), locale) }}
+
+
+
+ {{ t('bet.slip_parlay_count', { n: slip.parlayItems.length }) }}
+ {{ t('bet.slip_parlay_odds', { odds: totalOddsText }) }}
+
+
+
+
+
+
+ {{ t('bet.slip_currency') || 'CNY' }}
+
+
+
+
+
+
+
+
+
+
+
{{ error }}
+ {{ success }}
+
+
+
+
+
+ {{ t('bet.slip_history_view_all') }}
+
+
+
+
+
+
+ {{ t('bet.slip_total_stake') }}
+ {{ stakeText }}
+
+
+ {{ t('bet.slip_est_return') }}
+ {{ estimatedReturnText }}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/player/src/components/desktop/DataTable.vue b/apps/player/src/components/desktop/DataTable.vue
new file mode 100644
index 0000000..e39e1e2
--- /dev/null
+++ b/apps/player/src/components/desktop/DataTable.vue
@@ -0,0 +1,123 @@
+
+
+
+
+
+
+
+ |
+ {{ h.label }}
+ |
+
+
+
+
+ |
+
+ |
+
+
+ |
+ {{ t('common.no_data') || '暂无数据' }}
+ |
+
+
+ |
+
+ {{ item[h.key] }}
+
+ |
+
+
+
+
+
+
diff --git a/apps/player/src/components/desktop/DesktopAuthLayout.vue b/apps/player/src/components/desktop/DesktopAuthLayout.vue
new file mode 100644
index 0000000..29db87a
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopAuthLayout.vue
@@ -0,0 +1,233 @@
+
+
+
+
+
+
+
diff --git a/apps/player/src/components/desktop/DesktopBanner3DCarousel.vue b/apps/player/src/components/desktop/DesktopBanner3DCarousel.vue
new file mode 100644
index 0000000..75c1c04
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopBanner3DCarousel.vue
@@ -0,0 +1,471 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/player/src/components/desktop/DesktopBetSlipRail.vue b/apps/player/src/components/desktop/DesktopBetSlipRail.vue
new file mode 100644
index 0000000..b8ecb88
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopBetSlipRail.vue
@@ -0,0 +1,163 @@
+
+
+
+
+
+
+
diff --git a/apps/player/src/components/desktop/DesktopOddsBetPopover.vue b/apps/player/src/components/desktop/DesktopOddsBetPopover.vue
new file mode 100644
index 0000000..0d7bba9
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopOddsBetPopover.vue
@@ -0,0 +1,462 @@
+
+
+
+
+
+
+
{{ pendingItem.matchName }}
+
{{ pendingItem.marketName }}
+
+ {{ pendingItem.selectionName }}
+ @ {{ pendingItem.odds.toFixed(2) }}
+
+
+
+
+
+
+ {{ t('bet.slip_est_return') }}
+ {{ formatMoney(estReturn, locale) }}
+
+
+
{{ error }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/player/src/components/desktop/DesktopOutrightEventCard.vue b/apps/player/src/components/desktop/DesktopOutrightEventCard.vue
new file mode 100644
index 0000000..53c8d32
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopOutrightEventCard.vue
@@ -0,0 +1,330 @@
+
+
+
+
+
+
+
+
+ {{ headTitle }}
+ {{ t('bet.outright_settled') }}
+
+
{{ event.leagueName }}
+
{{ t('bet.outright_teams_count', { n: teamCount }) }}
+
+
![]()
+
+
{{ t('bet.quick_bet') || '快速下注' }}（{{ t('bet.popular_teams') || '热门队伍' }}）
+
+
+
+
+
+
+
diff --git a/apps/player/src/components/desktop/DesktopShell.vue b/apps/player/src/components/desktop/DesktopShell.vue
new file mode 100644
index 0000000..d9c592f
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopShell.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/player/src/components/desktop/DesktopTopNav.vue b/apps/player/src/components/desktop/DesktopTopNav.vue
new file mode 100644
index 0000000..c38e24c
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopTopNav.vue
@@ -0,0 +1,243 @@
+
+
+
+
+
+ 
+ TheBet365
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('auth.register') || '注册' }}
+
+
+
+
+
+
diff --git a/apps/player/src/components/desktop/DesktopWalletSubNav.vue b/apps/player/src/components/desktop/DesktopWalletSubNav.vue
new file mode 100644
index 0000000..db241ef
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopWalletSubNav.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
diff --git a/apps/player/src/components/desktop/LeagueSidebar.vue b/apps/player/src/components/desktop/LeagueSidebar.vue
new file mode 100644
index 0000000..d81dc01
--- /dev/null
+++ b/apps/player/src/components/desktop/LeagueSidebar.vue
@@ -0,0 +1,363 @@
+
+
+
+
+
+
+
diff --git a/apps/player/src/components/desktop/MatchSidebar.vue b/apps/player/src/components/desktop/MatchSidebar.vue
new file mode 100644
index 0000000..263a723
--- /dev/null
+++ b/apps/player/src/components/desktop/MatchSidebar.vue
@@ -0,0 +1,343 @@
+
+
+
+
+
+
+
diff --git a/apps/player/src/components/desktop/OutrightSidebar.vue b/apps/player/src/components/desktop/OutrightSidebar.vue
new file mode 100644
index 0000000..2a40a56
--- /dev/null
+++ b/apps/player/src/components/desktop/OutrightSidebar.vue
@@ -0,0 +1,265 @@
+
+
+
+
+
+
+
diff --git a/apps/player/src/components/desktop/Pagination.vue b/apps/player/src/components/desktop/Pagination.vue
new file mode 100644
index 0000000..53163cc
--- /dev/null
+++ b/apps/player/src/components/desktop/Pagination.vue
@@ -0,0 +1,172 @@
+
+
+
+
+
+
+
diff --git a/apps/player/src/components/desktop/SportsCategoryBar.vue b/apps/player/src/components/desktop/SportsCategoryBar.vue
new file mode 100644
index 0000000..1d9d24f
--- /dev/null
+++ b/apps/player/src/components/desktop/SportsCategoryBar.vue
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+
+
diff --git a/apps/player/src/components/match-detail/CorrectScorePanel.vue b/apps/player/src/components/match-detail/CorrectScorePanel.vue
index eca0bff..aff7c4b 100644
--- a/apps/player/src/components/match-detail/CorrectScorePanel.vue
+++ b/apps/player/src/components/match-detail/CorrectScorePanel.vue
@@ -2,6 +2,8 @@
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { groupCorrectScoreSelections, type CsSelection } from '../../utils/correctScoreLayout';
+import { useDesktopBetPopover } from '../../composables/useDesktopBetPopover';
+
const props = defineProps<{
marketType: string;
@@ -15,13 +17,16 @@ const props = defineProps<{
}>;
isSelected: (id: string) => boolean;
locked?: boolean;
+ /** PC 全宽紧凑：更小单元格、三列均分 */
+ dense?: boolean;
}>();
const emit = defineEmits<{
- pick: [id: string];
+ pick: [id: string, event?: MouseEvent];
}>();
const { t } = useI18n();
+const { cancelClose } = useDesktopBetPopover();
const columns = computed(() =>
groupCorrectScoreSelections(
@@ -34,9 +39,9 @@ const columns = computed(() =>
),
);
-function onPick(sel: CsSelection) {
+function onPick(sel: CsSelection, event?: MouseEvent) {
if (props.locked) return;
- emit('pick', sel.id);
+ emit('pick', sel.id, event);
}
function formatOdds(odds: string) {
@@ -46,7 +51,11 @@ function formatOdds(odds: string) {
-
+
{{ t('bet.col_home') }}
{{ t('bet.col_draw') }}
@@ -61,8 +70,10 @@ function formatOdds(odds: string) {
type="button"
class="score-card"
:class="{ selected: isSelected(sel.id), 'score-card--locked': locked }"
+ :data-bet-selection-id="sel.id"
:disabled="locked"
- @click="onPick(sel)"
+ @mouseenter="onPick(sel, $event)"
+ @click="onPick(sel, $event)"
>
{{ sel.scoreDisplay }}
{{ formatOdds(sel.odds) }}
@@ -98,14 +109,16 @@ function formatOdds(odds: string) {
.cols-grid {
display: grid;
- grid-template-columns: repeat(3, 1fr);
+ grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
+ align-items: start;
}
.col {
display: flex;
flex-direction: column;
gap: 4px;
+ align-self: start;
}
.score-card {
@@ -116,26 +129,34 @@ function formatOdds(odds: string) {
gap: 3px;
min-height: 42px;
padding: 6px 3px;
- background: var(--bg-body);
- border: 1px solid var(--border);
- border-radius: var(--radius-sm);
+ background: #161616;
+ border: 1px solid #282828;
+ border-radius: 3px;
text-align: center;
}
.score-card.selected {
border-color: var(--primary);
- background: var(--surface-accent);
+ background: #2d281a;
+ box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.2);
+}
+
+.score-card.selected .score-line {
+ color: #e8d48a;
+}
+
+.score-card.selected .odds {
+ color: #ffffff;
}
.score-card--locked {
- background: var(--bg-card);
- border-color: var(--border);
+ background: #111;
+ border-color: #333;
}
.score-card--locked .score-line,
.score-card--locked .odds {
- color: var(--text-muted);
- opacity: 0.6;
+ color: #666;
}
.score-line {
@@ -147,6 +168,37 @@ function formatOdds(odds: string) {
.odds {
font-size: 10px;
font-weight: 700;
- color: var(--primary-light);
+ color: #ffffff;
+}
+
+.cs-panel--dense {
+ padding: 4px 6px 6px;
+}
+
+.cs-panel--dense .cols-head {
+ font-size: 9px;
+ margin-bottom: 3px;
+}
+
+.cs-panel--dense .cols-grid {
+ gap: 3px;
+}
+
+.cs-panel--dense .col {
+ gap: 3px;
+}
+
+.cs-panel--dense .score-card {
+ min-height: 34px;
+ padding: 4px 2px;
+ gap: 2px;
+}
+
+.cs-panel--dense .score-line {
+ font-size: 10px;
+}
+
+.cs-panel--dense .odds {
+ font-size: 9px;
}
diff --git a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
index 342d9df..2c565ce 100644
--- a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
+++ b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
@@ -1,6 +1,9 @@
-
-
+
+