ysc/thebet365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin,api,player): 优胜赛配置、赛事管理重构与玩家端投注体验优化

Browse Source 
管理端拆分赛事/优胜赛 Tab，新增联赛优胜赔率面板（批量、排序、外侧删除）；统一 list-chrome 工具栏对齐与列表页布局；Dashboard 失败重试、Users 操作下拉、小屏侧栏等体验修复。

API 扩展优胜赛与赛事目录接口，完善投注与钱包查询；玩家端重构赛事卡片、串关面板、注单/钱包页，新增注单详情、下注成功动画与下拉刷新。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mars
2026-06-08 09:55:56 +08:00
parent efff7c27e6
commit 24fa1b275c
66 changed files with 6289 additions and 1426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
apps/player/src/components/BetHistoryCard.vue
View File

@@ -1,12 +1,19 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { formatMoney } from '../utils/localeDisplay';
export interface BetScore {
ht: string | null;
ft: string | null;
}
export interface BetHistoryItem {
betNo: string;
betType: string;
stake: unknown;
totalOdds?: unknown;
potentialReturn: unknown;
actualReturn: unknown;
status: string;
@@ -16,17 +23,20 @@ export interface BetHistoryItem {
pickLabel: string;
isParlay?: boolean;
legCount?: number;
matchScore?: BetScore | null;
legs?: Array<{
marketLabel: string;
selectionName: string;
matchTitle: string;
odds: unknown;
resultStatus?: string | null;
score?: BetScore | null;
}>;
}
const props = defineProps<{ bet: BetHistoryItem }>();
const { t, locale } = useI18n();
const router = useRouter();
const statusKey = computed(() => {
const s = props.bet.status.toUpperCase();
@@ -40,13 +50,11 @@ const statusLabel = computed(() => t(`history.status_${statusKey.value}`));
const placedDate = computed(() =>
new Date(props.bet.placedAt).toLocaleDateString(locale.value, {
year: 'numeric',
month: 'short',
day: 'numeric',
month: 'short', day: 'numeric',
}),
);
const matchTitle = computed(() => {
const title = computed(() => {
if (props.bet.isParlay) {
const n = props.bet.legCount ?? props.bet.legs?.length ?? 0;
return t('history.parlay_title', { n });
@@ -54,319 +62,135 @@ const matchTitle = computed(() => {
return props.bet.matchTitle;
});
const pickLabel = computed(() => {
if (props.bet.isParlay) return '';
// pickLabel format is "marketLabel: selectionName"
const raw = props.bet.pickLabel;
if (locale.value === 'zh-CN' || !raw) return raw;
const colonIdx = raw.indexOf(': ');
if (colonIdx < 0) return raw;
const sel = raw.slice(colonIdx + 2);
return raw.slice(0, colonIdx + 2) + translateSelection(sel);
const subtitle = computed(() => {
if (props.bet.isParlay) return props.bet.leagueName || t('history.parlay_league');
return props.bet.pickLabel || props.bet.leagueName || '';
});
const returnLabel = computed(() =>
statusKey.value === 'pending' ? t('history.est_return') : t('history.return'),
);
const returnAmount = computed(() => {
if (statusKey.value === 'won') return formatMoney(props.bet.actualReturn, locale.value);
if (statusKey.value === 'pending') return formatMoney(props.bet.potentialReturn, locale.value);
if (statusKey.value === 'lost') return formatMoney(0, locale.value);
if (statusKey.value === 'lost') return formatMoney(-parseFloat(String(props.bet.stake ?? 0)), locale.value);
return formatMoney(props.bet.actualReturn ?? props.bet.potentialReturn, locale.value);
});
const returnHighlight = computed(() => statusKey.value === 'won');
const returnPending = computed(() => statusKey.value === 'pending');
const returnLost = computed(() => statusKey.value === 'lost');
// Translate Chinese selection-name snapshots stored in DB
const SEL_TRANS: Record<string, Record<string, string>> = {
'主胜': { 'en-US': 'Home Win', 'ms-MY': 'Rumah Menang' },
'客胜': { 'en-US': 'Away Win', 'ms-MY': 'Tandang Menang' },
'和局': { 'en-US': 'Draw', 'ms-MY': 'Seri' },
'主': { 'en-US': 'Home', 'ms-MY': 'Rumah' },
'客': { 'en-US': 'Away', 'ms-MY': 'Tandang' },
'大': { 'en-US': 'Over', 'ms-MY': 'Atas' },
'小': { 'en-US': 'Under', 'ms-MY': 'Bawah' },
'单': { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
'双': { 'en-US': 'Even', 'ms-MY': 'Genap' },
'冠军': { 'en-US': 'Winner', 'ms-MY': 'Juara' },
};
function translateSelection(name: string): string {
if (locale.value === 'zh-CN') return name;
// exact match
const exact = SEL_TRANS[name];
if (exact) return exact[locale.value] ?? exact['en-US'] ?? name;
// e.g. "大 2.5" → translate first token, keep rest
const spaceIdx = name.indexOf(' ');
if (spaceIdx > 0) {
const head = name.slice(0, spaceIdx);
const tail = name.slice(spaceIdx);
const m = SEL_TRANS[head];
if (m) return (m[locale.value] ?? m['en-US'] ?? head) + tail;
}
return name;
function goDetail() {
router.push(`/bets/${props.bet.betNo}`);
}
// use grid when 3+ legs
const useGrid = computed(() => (props.bet.legs?.length ?? 0) >= 3);
</script>
<template>
<article class="bet-card">
<!-- top strip: meta + badge -->
<header class="card-head">
<div class="meta">
<span class="sport-icon" aria-hidden="true">⚽</span>
<span class="league">{{
bet.isParlay ? t('history.parlay_league') : bet.leagueName || t('history.league_default')
}}</span>
<span class="dot">·</span>
<span class="date">{{ placedDate }}</span>
</div>
<span class="status-badge" :class="statusKey">{{ statusLabel }}</span>
</header>
<!-- title -->
<h3 class="match-title">{{ matchTitle }}</h3>
<p v-if="pickLabel" class="pick-line">{{ pickLabel }}</p>
<!-- parlay legs -->
<div v-if="bet.isParlay && bet.legs?.length" class="parlay-legs" :class="{ grid: useGrid }">
<div v-for="(leg, i) in bet.legs" :key="i" class="leg">
<span class="leg-num">{{ i + 1 }}</span>
<div class="leg-info">
<span class="leg-match">{{ leg.matchTitle }}</span>
<span class="leg-pick">{{ leg.marketLabel }}: {{ translateSelection(leg.selectionName) }}</span>
</div>
</div>
<article class="bet-card" @click="goDetail">
<span
class="watermark"
:class="statusKey"
>{{ statusLabel }}</span>
<div class="card-left">
<span class="title">{{ title }}</span>
<span class="subtitle">{{ subtitle }} · {{ placedDate }}</span>
</div>
<!-- footer -->
<footer class="card-foot">
<div class="money-col">
<span class="money-label">{{ t('history.stake') }}</span>
<span class="money-value stake">{{ formatMoney(bet.stake, locale) }}</span>
</div>
<div class="money-col align-right">
<span class="money-label">{{ returnLabel }}</span>
<span
class="money-value return"
:class="{ highlight: returnHighlight, pending: statusKey === 'pending' }"
>{{ returnAmount }}</span>
</div>
</footer>
<div class="card-right">
<span class="return-amt" :class="{ highlight: returnHighlight, pending: returnPending, lost: returnLost }">
{{ returnAmount }}
</span>
</div>
<span class="chevron">›</span>
</article>
</template>
<style scoped>
.bet-card {
background: #141414;
border: 1px solid #252525;
border-radius: 12px;
padding: 0;
margin-bottom: 10px;
overflow: hidden;
position: relative;
}
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 14px 8px 16px;
background: #181818;
border-bottom: 1px solid #222;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 0.15s;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
}
.meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
font-size: 11.5px;
color: #888;
font-weight: 600;
.bet-card:active {
background: rgba(255, 255, 255, 0.02);
}
.sport-icon {
font-size: 13px;
line-height: 1;
}
.dot { opacity: 0.4; }
.date { color: #666; }
.status-badge {
flex-shrink: 0;
padding: 3px 10px;
border-radius: 20px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.07em;
white-space: nowrap;
text-transform: uppercase;
}
.status-badge.won {
color: #3db865;
background: rgba(61, 184, 101, 0.12);
border: 1px solid rgba(61, 184, 101, 0.3);
}
.status-badge.pending {
color: #e8c84a;
background: rgba(232, 200, 74, 0.1);
border: 1px solid rgba(232, 200, 74, 0.3);
}
.status-badge.lost {
color: #e05050;
background: rgba(224, 80, 80, 0.1);
border: 1px solid rgba(224, 80, 80, 0.28);
}
.status-badge.push {
color: #888;
background: #1e1e1e;
border: 1px solid #333;
}
/* body */
.match-title {
font-size: 16px;
.watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-35deg);
font-size: 28px;
font-weight: 900;
color: #f0f0f0;
line-height: 1.3;
padding: 10px 14px 4px 16px;
letter-spacing: 0.01em;
letter-spacing: 0.06em;
white-space: nowrap;
pointer-events: none;
text-transform: uppercase;
opacity: 0.18;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.pick-line {
font-size: 12.5px;
color: #888;
font-weight: 600;
line-height: 1.4;
padding: 0 14px 8px 16px;
}
.watermark.won { color: #3db865; }
.watermark.lost { color: #e05050; }
.watermark.push { color: #888; }
.watermark.pending { color: #e8c84a; }
/* ── parlay legs ── */
.parlay-legs {
padding: 4px 14px 8px 16px;
.card-left {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
gap: 3px;
}
/* grid mode: 2-column when 3+ legs */
.parlay-legs.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px 8px;
}
.leg {
display: flex;
align-items: flex-start;
gap: 6px;
background: #1a1a1a;
border: 1px solid #252525;
border-radius: 7px;
padding: 6px 8px;
min-width: 0;
}
.leg-num {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background: #2a2a2a;
color: #777;
font-size: 9px;
.title {
font-size: 14px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
line-height: 1;
color: #e8e8e8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.leg-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.leg-match {
.subtitle {
font-size: 11px;
font-weight: 700;
color: #c0c0c0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.leg-pick {
font-size: 10.5px;
color: #777;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* footer */
.card-foot {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
padding: 8px 14px 12px 16px;
border-top: 1px solid #1e1e1e;
margin-top: 2px;
}
.money-col {
display: flex;
flex-direction: column;
gap: 2px;
}
.money-col.align-right {
align-items: flex-end;
text-align: right;
}
.money-label {
font-size: 10px;
color: #666;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.money-value {
font-size: 19px;
.card-right {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.return-amt {
font-size: 15px;
font-weight: 900;
letter-spacing: 0.01em;
color: #888;
}
.money-value.stake {
color: #c8c8c8;
}
.return-amt.highlight { color: #3db865; }
.return-amt.pending { color: #e8c84a; }
.return-amt.lost { color: #e05050; }
.money-value.return {
color: #c8c8c8;
}
.money-value.return.pending {
color: #e8c84a;
text-shadow: 0 0 14px rgba(232, 200, 74, 0.3);
}
.money-value.highlight {
color: #3db865;
text-shadow: 0 0 14px rgba(61, 184, 101, 0.35);
font-size: 21px;
.chevron {
flex-shrink: 0;
font-size: 18px;
color: #333;
margin-left: 2px;
line-height: 1;
}
</style>

140
apps/player/src/components/BetSlipDrawer.vue
View File

@@ -3,6 +3,7 @@ import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { PARLAY_MIN_LEGS, PARLAY_MAX_LEGS } from '@thebet365/shared';
import { useBetSlipStore } from '../stores/betSlip';
import BetSuccessOverlay from './BetSuccessOverlay.vue';
import api from '../api';
const props = defineProps<{ modelValue: boolean }>();
@@ -18,11 +19,18 @@ const show = computed({
const loading = ref(false);
const error = ref('');
const success = ref('');
const showSuccess = ref(false);
function genId() {
return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
}
function onSuccessDone() {
showSuccess.value = false;
show.value = false;
success.value = '';
}
async function placeBet() {
if (!slip.items.length) return;
loading.value = true;
@@ -58,10 +66,14 @@ async function placeBet() {
}
success.value = t('bet.place_success');
slip.clear();
showSuccess.value = true;
setTimeout(() => {
show.value = false;
success.value = '';
}, 1500);
if (showSuccess.value) {
showSuccess.value = false;
show.value = false;
success.value = '';
}
}, 2500);
} catch (e: unknown) {
error.value =
(e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
@@ -75,58 +87,64 @@ async function placeBet() {
<template>
<div v-if="show" class="overlay" @click.self="show = false">
<div class="drawer">
<div class="drawer-header">
<h3>{{ t('bet.bet_slip') }} <span class="count">({{ slip.count }})</span></h3>
<button type="button" class="close-btn" :aria-label="t('bet.cancel')" @click="show = false">
✕
<div class="drawer-body">
<div class="drawer-header">
<h3>{{ t('bet.bet_slip') }} <span class="count">({{ slip.count }})</span></h3>
<button type="button" class="close-btn" :aria-label="t('bet.cancel')" @click="show = false">
✕
</button>
</div>
<div v-if="!slip.items.length" class="empty">{{ t('bet.slip_empty_hint') }}</div>
<div v-for="item in slip.items" :key="item.selectionId" class="slip-item">
<div class="item-name">{{ item.matchName }}</div>
<div class="item-sel">
{{ item.selectionName }} @ <span class="odds">{{ item.odds }}</span>
</div>
<button type="button" class="remove" @click="slip.removeItem(item.selectionId)">
{{ t('bet.slip_remove') }}
</button>
</div>
<p v-if="slip.canPlaceParlay" class="mode-hint mode-hint--parlay">
{{ t('bet.parlay') }} · {{ t('bet.slip_parlay_odds', { odds: slip.totalOdds.toFixed(2) }) }}
</p>
<p v-else-if="slip.canPlaceBatchSingles && slip.count > 1" class="mode-hint">
{{ t('bet.slip_singles_hint', { n: slip.count }) }}
</p>
<div v-if="slip.items.length" class="stake-area">
<label>{{
slip.canPlaceBatchSingles && slip.count > 1
? t('bet.slip_stake_per_bet')
: t('bet.stake')
}}</label>
<input v-model.number="slip.stake" type="number" min="1" />
<div class="return">
{{ t('bet.slip_est_return') }}:
<strong>{{ slip.potentialReturn.toFixed(2) }}</strong>
</div>
</div>
<p v-if="error" class="error">{{ error }}</p>
<p v-if="success" class="success">{{ success }}</p>
</div>
<div class="drawer-foot">
<button
type="button"
class="btn-primary"
:disabled="loading || !slip.canSubmit"
@click="placeBet"
>
{{ loading ? t('bet.placing') : t('bet.place_bet') }}
</button>
</div>
<div v-if="!slip.items.length" class="empty">{{ t('bet.slip_empty_hint') }}</div>
<div v-for="item in slip.items" :key="item.selectionId" class="slip-item">
<div class="item-name">{{ item.matchName }}</div>
<div class="item-sel">
{{ item.selectionName }} @ <span class="odds">{{ item.odds }}</span>
</div>
<button type="button" class="remove" @click="slip.removeItem(item.selectionId)">
{{ t('bet.slip_remove') }}
</button>
</div>
<p v-if="slip.canPlaceParlay" class="mode-hint mode-hint--parlay">
{{ t('bet.parlay') }} · {{ t('bet.slip_parlay_odds', { odds: slip.totalOdds.toFixed(2) }) }}
</p>
<p v-else-if="slip.canPlaceBatchSingles && slip.count > 1" class="mode-hint">
{{ t('bet.slip_singles_hint', { n: slip.count }) }}
</p>
<div v-if="slip.items.length" class="stake-area">
<label>{{
slip.canPlaceBatchSingles && slip.count > 1
? t('bet.slip_stake_per_bet')
: t('bet.stake')
}}</label>
<input v-model.number="slip.stake" type="number" min="1" />
<div class="return">
{{ t('bet.slip_est_return') }}:
<strong>{{ slip.potentialReturn.toFixed(2) }}</strong>
</div>
</div>
<p v-if="error" class="error">{{ error }}</p>
<p v-if="success" class="success">{{ success }}</p>
<button
type="button"
class="btn-primary"
:disabled="loading || !slip.canSubmit"
@click="placeBet"
>
{{ loading ? t('bet.placing') : t('bet.place_bet') }}
</button>
</div>
</div>
<BetSuccessOverlay :show="showSuccess" @done="onSuccessDone" />
</template>
<style scoped>
@@ -144,9 +162,25 @@ async function placeBet() {
width: 100%;
max-height: 80vh;
border-radius: 16px 16px 0 0;
padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0));
overflow-y: auto;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}
.drawer-body {
flex: 1;
overflow-y: auto;
padding: 14px 14px 0;
-webkit-overflow-scrolling: touch;
}
.drawer-foot {
flex-shrink: 0;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(14, 14, 14, 0.98);
border-top: 1px solid var(--border-gold-soft);
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
}
.drawer-header {

154
apps/player/src/components/BetStatsPanel.vue Normal file
View File

@@ -0,0 +1,154 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { formatMoney, parseAmount } from '../utils/localeDisplay';
import type { BetHistoryItem } from './BetHistoryCard.vue';
const props = defineProps<{ items: BetHistoryItem[] }>();
const { t, locale } = useI18n();
const stats = computed(() => {
let total = 0;
let won = 0;
let lost = 0;
let pending = 0;
let push = 0;
let totalStake = 0;
let totalReturn = 0;
for (const bet of props.items) {
total++;
const s = bet.status.toUpperCase();
if (s === 'WON' || s === 'WIN') { won++; totalReturn += parseAmount(bet.actualReturn); }
else if (s === 'LOST' || s === 'LOSE') lost++;
else if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') push++;
else pending++;
totalStake += parseAmount(bet.stake);
if (s === 'WON' || s === 'WIN') totalReturn += parseAmount(bet.actualReturn);
else if (s === 'PENDING') totalReturn += parseAmount(bet.potentialReturn);
}
return { total, won, lost, pending, push, totalStake, totalReturn };
});
</script>
<template>
<div class="stats-panel">
<div class="stats-row">
<div class="stat-item">
<span class="stat-val">{{ stats.total }}</span>
<span class="stat-label">{{ t('history.stats_total') }}</span>
</div>
<div class="stat-item won">
<span class="stat-val">{{ stats.won }}</span>
<span class="stat-label">{{ t('history.stats_won') }}</span>
</div>
<div class="stat-item lost">
<span class="stat-val">{{ stats.lost }}</span>
<span class="stat-label">{{ t('history.stats_lost') }}</span>
</div>
<div class="stat-item pending">
<span class="stat-val">{{ stats.pending }}</span>
<span class="stat-label">{{ t('history.stats_pending') }}</span>
</div>
<div class="stat-item push">
<span class="stat-val">{{ stats.push }}</span>
<span class="stat-label">{{ t('history.stats_push') }}</span>
</div>
</div>
<div class="stats-bar">
<div class="bar-seg won" :style="{ flex: stats.won || 0.001 }" />
<div class="bar-seg lost" :style="{ flex: stats.lost || 0.001 }" />
<div class="bar-seg pending" :style="{ flex: stats.pending || 0.001 }" />
<div class="bar-seg push" :style="{ flex: stats.push || 0.001 }" />
</div>
<div class="stats-row secondary">
<div class="stat-item">
<span class="stat-val small">{{ formatMoney(stats.totalStake, locale) }}</span>
<span class="stat-label">{{ t('history.stats_stake') }}</span>
</div>
<div class="stat-item">
<span class="stat-val small gold">{{ formatMoney(stats.totalReturn, locale) }}</span>
<span class="stat-label">{{ t('history.stats_return') }}</span>
</div>
</div>
</div>
</template>
<style scoped>
.stats-panel {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 12px 10px;
margin-bottom: 12px;
backdrop-filter: blur(10px);
}
.stats-row {
display: flex;
gap: 4px;
margin-bottom: 8px;
}
.stats-row.secondary {
margin-bottom: 0;
margin-top: 8px;
justify-content: space-around;
}
.stat-item {
flex: 1;
text-align: center;
min-width: 0;
}
.stat-val {
display: block;
font-size: 18px;
font-weight: 900;
font-variant-numeric: tabular-nums;
}
.stat-val.small {
font-size: 14px;
color: var(--text-muted);
}
.stat-val.gold {
color: var(--primary-light);
}
.stat-item.won .stat-val { color: #3db865; }
.stat-item.lost .stat-val { color: #e05050; }
.stat-item.pending .stat-val { color: #e8c84a; }
.stat-item.push .stat-val { color: #888; }
.stat-label {
display: block;
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
letter-spacing: 0.04em;
margin-top: 2px;
}
.stats-bar {
display: flex;
height: 4px;
border-radius: 2px;
overflow: hidden;
gap: 2px;
}
.bar-seg {
min-width: 2px;
border-radius: 2px;
transition: flex 0.3s ease;
}
.bar-seg.won { background: #3db865; }
.bar-seg.lost { background: #e05050; }
.bar-seg.pending { background: #e8c84a; }
.bar-seg.push { background: #444; }
</style>

193
apps/player/src/components/BetSuccessOverlay.vue Normal file
View File

@@ -0,0 +1,193 @@
<script setup lang="ts">
import { ref, watch, onUnmounted, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
const props = defineProps<{ show: boolean }>();
const emit = defineEmits<{ done: [] }>();
const { t } = useI18n();
const canvasRef = ref<HTMLCanvasElement | null>(null);
let raf = 0;
let particles: Particle[] = [];
interface Particle {
x: number; y: number; vx: number; vy: number;
life: number; maxLife: number; size: number;
color: string; shape: number;
}
const COLORS = ['#D4AF37', '#FFD700', '#F0C040', '#C8A02E', '#E6C84C', '#B8960C'];
let w = 0;
let h = 0;
function spawnBurst() {
const cx = w / 2;
const cy = h * 0.38;
for (let i = 0; i < 80; i++) {
const angle = Math.random() * Math.PI * 2;
const speed = 1.5 + Math.random() * 5;
const color = COLORS[Math.floor(Math.random() * COLORS.length)];
particles.push({
x: cx + (Math.random() - 0.5) * 60,
y: cy + (Math.random() - 0.5) * 20,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed - 2,
life: 0,
maxLife: 60 + Math.random() * 80,
size: 3 + Math.random() * 5,
color,
shape: Math.floor(Math.random() * 3),
});
}
}
function draw() {
if (!canvasRef.value) return;
const ctx = canvasRef.value.getContext('2d');
if (!ctx) return;
ctx.clearRect(0, 0, w, h);
for (const p of particles) {
p.x += p.vx;
p.y += p.vy;
p.vy += 0.06;
p.life++;
const alpha = 1 - p.life / p.maxLife;
if (alpha <= 0) continue;
ctx.globalAlpha = alpha;
ctx.fillStyle = p.color;
if (p.shape === 0) {
ctx.beginPath();
ctx.arc(p.x, p.y, p.size * 0.5, 0, Math.PI * 2);
ctx.fill();
} else if (p.shape === 1) {
ctx.fillRect(p.x - p.size * 0.35, p.y - p.size * 0.35, p.size * 0.7, p.size * 0.7);
} else {
ctx.beginPath();
ctx.moveTo(p.x, p.y - p.size * 0.5);
ctx.lineTo(p.x + p.size * 0.4, p.y + p.size * 0.3);
ctx.lineTo(p.x - p.size * 0.4, p.y + p.size * 0.3);
ctx.closePath();
ctx.fill();
}
}
ctx.globalAlpha = 1;
particles = particles.filter((p) => p.life < p.maxLife);
raf = requestAnimationFrame(draw);
}
function start() {
setTimeout(() => { emit('done'); }, 2200);
void nextTick(() => {
if (!canvasRef.value) return;
const rect = canvasRef.value.getBoundingClientRect();
w = rect.width;
h = rect.height;
particles = [];
spawnBurst();
cancelAnimationFrame(raf);
raf = requestAnimationFrame(draw);
});
}
function stop() {
cancelAnimationFrame(raf);
particles = [];
}
watch(() => props.show, (v) => {
if (v) start();
else stop();
});
onUnmounted(stop);
</script>
<template>
<Teleport to="body">
<div v-if="show" class="bet-success-overlay" @click="emit('done')">
<canvas ref="canvasRef" class="confetti-canvas" />
<div class="success-card">
<svg class="check" viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
<circle class="check-circle" cx="26" cy="26" r="24" fill="none" stroke="#D4AF37" stroke-width="3" />
<path class="check-mark" d="M14 27l7 7 16-16" fill="none" stroke="#D4AF37" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="success-text">{{ t('bet.place_success') }}</p>
</div>
</div>
</Teleport>
</template>
<style scoped>
.bet-success-overlay {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.82);
display: flex;
align-items: center;
justify-content: center;
}
.confetti-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.success-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
animation: card-pop 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.2);
}
.check {
width: 72px;
height: 72px;
}
.check-circle {
stroke-dasharray: 151;
stroke-dashoffset: 151;
animation: circle-draw 0.5s 0.15s ease forwards;
}
.check-mark {
stroke-dasharray: 42;
stroke-dashoffset: 42;
animation: check-draw 0.35s 0.45s ease forwards;
}
.success-text {
color: var(--primary-light);
font-size: 18px;
font-weight: 800;
letter-spacing: 0.04em;
animation: text-up 0.4s 0.4s ease both;
}
@keyframes card-pop {
0% { transform: scale(0.6); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes circle-draw {
to { stroke-dashoffset: 0; }
}
@keyframes check-draw {
to { stroke-dashoffset: 0; }
}
@keyframes text-up {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
</style>

19
apps/player/src/components/CashBalanceChip.vue
View File

@@ -1,11 +1,12 @@
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import api from '../api';
import { formatMoney } from '../utils/localeDisplay';
const { locale, t } = useI18n();
const open = ref(false);
const root = ref<HTMLElement | null>(null);
const wallet = ref<{ availableBalance?: unknown; frozenBalance?: unknown; currency?: string } | null>(null);
function amountValue(value: unknown): number {
@@ -48,10 +49,24 @@ function toggle() {
function close() {
open.value = false;
}
function onOutsideClick(e: Event) {
if (!root.value?.contains(e.target as Node)) open.value = false;
}
onMounted(() => {
document.addEventListener('click', onOutsideClick);
document.addEventListener('touchend', onOutsideClick);
});
onUnmounted(() => {
document.removeEventListener('click', onOutsideClick);
document.removeEventListener('touchend', onOutsideClick);
});
</script>
<template>
<div class="cash-chip-wrap">
<div ref="root" class="cash-chip-wrap">
<button type="button" class="cash-chip" @click="toggle">
<span class="chip-body">
<span class="chip-label">{{ t('wallet.cash_balance') }}</span>

102
apps/player/src/components/GoldSpinner.vue Normal file
View File

@@ -0,0 +1,102 @@
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps<{
size?: number;
progress?: number;
active?: boolean;
}>();
const rotation = computed(() => (props.progress ?? 0) * 360);
const wrapperStyle = computed(() => {
if (props.active) return {};
return {
transform: `rotate(${rotation.value}deg)`,
transition: 'transform 0.05s linear',
};
});
</script>
<template>
<svg
:class="['gold-spinner', { 'is-active': active }]"
:width="size ?? 48"
:height="size ?? 48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
:style="!active ? wrapperStyle : undefined"
>
<defs>
<linearGradient id="gs-track" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#D4AF37" stop-opacity="0.18" />
<stop offset="50%" stop-color="#F0D875" stop-opacity="0.25" />
<stop offset="100%" stop-color="#D4AF37" stop-opacity="0.18" />
</linearGradient>
<linearGradient id="gs-arc" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFF4C8" />
<stop offset="22%" stop-color="#F0D875" />
<stop offset="50%" stop-color="#D4AF37" />
<stop offset="78%" stop-color="#B8942B" />
<stop offset="100%" stop-color="#8B6914" />
</linearGradient>
<filter id="gs-glow">
<feGaussianBlur stdDeviation="1.2" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<radialGradient id="gs-dot" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFF4C8" />
<stop offset="60%" stop-color="#F0D875" />
<stop offset="100%" stop-color="#D4AF37" />
</radialGradient>
</defs>
<circle cx="24" cy="24" r="20" stroke="url(#gs-track)" stroke-width="3" fill="none" />
<circle
cx="24"
cy="24"
r="20"
stroke="url(#gs-arc)"
stroke-width="3"
fill="none"
stroke-linecap="round"
stroke-dasharray="31.4 94.2"
filter="url(#gs-glow)"
/>
<circle cx="24" cy="4" r="2.5" fill="url(#gs-dot)" filter="url(#gs-glow)">
<animate
v-if="active"
attributeName="r"
values="2.5;3.2;2.5"
dur="1.2s"
repeatCount="indefinite"
/>
</circle>
<circle v-if="active" cx="36" cy="13.5" r="1.8" fill="#F0D875" opacity="0.6">
<animate attributeName="opacity" values="0.6;0.15;0.6" dur="0.9s" repeatCount="indefinite" begin="0.15s" />
</circle>
<circle v-if="active" cx="34" cy="34" r="1.5" fill="#D4AF37" opacity="0.4">
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="1.1s" repeatCount="indefinite" begin="0.35s" />
</circle>
<circle v-if="active" cx="14" cy="34" r="1.5" fill="#D4AF37" opacity="0.4">
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="1s" repeatCount="indefinite" begin="0.55s" />
</circle>
</svg>
</template>
<style scoped>
.gold-spinner {
display: block;
will-change: transform;
}
.gold-spinner.is-active {
animation: gs-spin 0.8s linear infinite;
}
@keyframes gs-spin {
to { transform: rotate(360deg); }
}
</style>

15
apps/player/src/components/LeagueAccordionItem.vue
View File

@@ -52,6 +52,10 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
<style scoped>
.league-block {
margin-bottom: 10px;
border: 1px solid #2e2e2e;
border-radius: 6px;
overflow: hidden;
background: #141414;
}
.league-row {
@@ -60,9 +64,9 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
align-items: center;
gap: 10px;
padding: 12px 12px;
background: #141414;
border: 1px solid #2e2e2e;
border-radius: 6px;
background: none;
border: none;
border-radius: 0;
text-align: left;
cursor: pointer;
}
@@ -117,7 +121,8 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
.match-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 8px;
padding: 0 4px;
}
</style>

12
apps/player/src/components/LocaleSwitcher.vue
View File

@@ -30,12 +30,18 @@ function toggle() {
open.value = !open.value;
}
function onDocClick(e: MouseEvent) {
function onOutsideClick(e: Event) {
if (!root.value?.contains(e.target as Node)) open.value = false;
}
onMounted(() => document.addEventListener('click', onDocClick));
onUnmounted(() => document.removeEventListener('click', onDocClick));
onMounted(() => {
document.addEventListener('click', onOutsideClick);
document.addEventListener('touchend', onOutsideClick);
});
onUnmounted(() => {
document.removeEventListener('click', onOutsideClick);
document.removeEventListener('touchend', onOutsideClick);
});
</script>
<template>

196
apps/player/src/components/MatchBetCard.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import TeamEmblem from './TeamEmblem.vue';
import { teamFlagUrl } from '../utils/teamFlag';
const props = defineProps<{
match: {
@@ -18,44 +18,50 @@ const props = defineProps<{
const emit = defineEmits<{ bet: [id: string] }>();
const { t, locale } = useI18n();
const { t } = useI18n();
const kickoff = computed(() => {
const d = new Date(props.match.startTime);
return d.toLocaleString(locale.value, {
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
hour12: true,
});
});
function teamBgStyle(
code?: string,
name?: string,
logoUrl?: string | null,
) {
const url = teamFlagUrl(code, name, logoUrl);
if (!url) return {};
const isCustomLogo = Boolean(logoUrl?.trim());
return {
backgroundImage: `url(${url})`,
backgroundSize: isCustomLogo ? '36px auto' : '48px auto',
};
}
const homeBgStyle = computed(() =>
teamBgStyle(
props.match.homeTeamCode,
props.match.homeTeamName,
props.match.homeTeamLogoUrl,
),
);
const awayBgStyle = computed(() =>
teamBgStyle(
props.match.awayTeamCode,
props.match.awayTeamName,
props.match.awayTeamLogoUrl,
),
);
</script>
<template>
<article class="match-card">
<div class="kickoff">{{ kickoff }}</div>
<div class="teams-stack">
<div class="side">
<TeamEmblem
size="sm"
:team-code="match.homeTeamCode"
:team-name="match.homeTeamName"
:logo-url="match.homeTeamLogoUrl"
/>
<span class="name">{{ match.homeTeamName }}</span>
</div>
<div class="bg-split" aria-hidden="true">
<div class="bg-half home-bg" :style="homeBgStyle" />
<div class="bg-half away-bg" :style="awayBgStyle" />
<div class="bg-veil" />
</div>
<div class="teams-row">
<span class="name home-name">{{ match.homeTeamName }}</span>
<span class="vs">VS</span>
<div class="side">
<TeamEmblem
size="sm"
:team-code="match.awayTeamCode"
:team-name="match.awayTeamName"
:logo-url="match.awayTeamLogoUrl"
/>
<span class="name">{{ match.awayTeamName }}</span>
</div>
<span class="name away-name">{{ match.awayTeamName }}</span>
</div>
<button type="button" class="bet-btn btn-gold-outline" @click="emit('bet', match.id)">
{{ t('bet.place_bet_short') }}
@@ -65,69 +71,105 @@ const kickoff = computed(() => {
<style scoped>
.match-card {
background: #1a1a1a;
border: 1px solid #2a2a2a;
position: relative;
overflow: hidden;
background: #0d0d0d;
border: 1px solid rgba(255, 215, 0, 0.25);
border-radius: 6px;
padding: 6px 4px 5px;
padding: 8px 10px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 0;
}
.bg-split {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.bg-half {
position: absolute;
inset: 0;
background-repeat: no-repeat;
opacity: 0.48;
}
.home-bg {
clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%);
background-position: 22% 50%;
}
.away-bg {
clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%);
background-position: 78% 50%;
}
.bg-veil {
position: absolute;
inset: 0;
background: linear-gradient(
102deg,
rgba(0, 0, 0, 0.52) 0%,
rgba(0, 0, 0, 0.28) 46%,
rgba(0, 0, 0, 0.28) 54%,
rgba(0, 0, 0, 0.52) 100%
);
}
.teams-row {
position: relative;
z-index: 1;
width: 100%;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 4px;
min-width: 0;
}
.kickoff {
width: 100%;
text-align: center;
font-size: 9px;
line-height: 1.25;
color: var(--text-muted);
font-weight: 600;
}
.teams-stack {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.side {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 0;
min-height: 32px;
}
.name {
width: 100%;
font-size: 10px;
font-weight: 800;
font-size: 14px;
font-weight: 900;
color: var(--primary-light);
line-height: 1.2;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 2px;
line-height: 1.25;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
word-break: keep-all;
}
.home-name {
text-align: left;
padding-left: 2px;
}
.away-name {
text-align: right;
padding-right: 2px;
}
.vs {
font-size: 9px;
flex-shrink: 0;
font-size: 10px;
font-weight: 800;
color: var(--text-muted);
line-height: 1;
letter-spacing: 0.06em;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.bet-btn {
width: 100%;
margin-top: 2px;
padding: 3px 2px;
border-radius: 4px;
font-size: 10px;
position: relative;
z-index: 1;
width: auto;
min-width: 72px;
max-width: 42%;
margin-top: 0;
padding: 5px 18px;
border-radius: 6px;
font-size: 12px;
letter-spacing: 0.04em;
line-height: 1.2;
}

18
apps/player/src/components/UserAvatarMenu.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { playerAvatarUrl, randomAvatarKey } from '@thebet365/shared';
@@ -11,6 +11,7 @@ const auth = useAuthStore();
const router = useRouter();
const { avatarUrl, loadProfile } = usePlayerProfile();
const open = ref(false);
const root = ref<HTMLElement | null>(null);
const displayAvatarUrl = computed(() => {
if (avatarUrl.value) return avatarUrl.value;
@@ -30,6 +31,19 @@ function close() {
open.value = false;
}
function onOutsideClick(e: Event) {
if (!root.value?.contains(e.target as Node)) open.value = false;
}
onMounted(() => {
document.addEventListener('click', onOutsideClick);
document.addEventListener('touchend', onOutsideClick);
});
onUnmounted(() => {
document.removeEventListener('click', onOutsideClick);
document.removeEventListener('touchend', onOutsideClick);
});
function goEdit() {
close();
router.push('/profile/edit');
@@ -43,7 +57,7 @@ function logout() {
</script>
<template>
<div class="avatar-wrap">
<div ref="root" class="avatar-wrap">
<button type="button" class="avatar-btn" :aria-expanded="open" @click="toggle">
<img v-if="displayAvatarUrl" :src="displayAvatarUrl" alt="" class="avatar-img" />
</button>

104
apps/player/src/components/WalletStatsPanel.vue Normal file
View File

@@ -0,0 +1,104 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { formatMoney, parseAmount } from '../utils/localeDisplay';
interface Transaction {
transactionType: string;
amount: string;
createdAt: string;
transactionId?: string;
}
const props = defineProps<{ items: Transaction[] }>();
const { t, locale } = useI18n();
const stats = computed(() => {
let income = 0;
let expense = 0;
for (const tx of props.items) {
const amt = parseAmount(tx.amount);
if (amt >= 0) income += amt;
else expense += Math.abs(amt);
}
const net = income - expense;
return { income, expense, net };
});
</script>
<template>
<div class="wallet-stats-panel">
<div class="stats-row">
<div class="stat-item">
<span class="stat-val income">{{ formatMoney(stats.income, locale) }}</span>
<span class="stat-label">{{ t('wallet.stats_income') }}</span>
</div>
<div class="stat-divider" />
<div class="stat-item">
<span class="stat-val expense">{{ formatMoney(stats.expense, locale) }}</span>
<span class="stat-label">{{ t('wallet.stats_expense') }}</span>
</div>
<div class="stat-divider" />
<div class="stat-item">
<span class="stat-val" :class="stats.net >= 0 ? 'income' : 'expense'">
{{ formatMoney(stats.net, locale) }}
</span>
<span class="stat-label">{{ t('wallet.stats_net') }}</span>
</div>
</div>
</div>
</template>
<style scoped>
.wallet-stats-panel {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 12px;
margin-bottom: 12px;
backdrop-filter: blur(10px);
}
.stats-row {
display: flex;
align-items: center;
}
.stat-item {
flex: 1;
text-align: center;
min-width: 0;
}
.stat-divider {
width: 1px;
height: 32px;
background: var(--border);
flex-shrink: 0;
}
.stat-val {
display: block;
font-size: 15px;
font-weight: 900;
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stat-val.income { color: #3db865; }
.stat-val.expense { color: #e05050; }
.stat-label {
display: block;
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
letter-spacing: 0.04em;
margin-top: 3px;
}
</style>

82
apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue
View File

@@ -52,38 +52,42 @@ function formatOdds(odds: string) {
</button>
</div>
<div class="slip-item">
<div class="item-name">{{ homeTeamName }} vs {{ awayTeamName }}</div>
<div class="item-sel">{{ marketLabel }}</div>
</div>
<div class="drawer-body">
<div class="slip-item">
<div class="item-name">{{ homeTeamName }} vs {{ awayTeamName }}</div>
<div class="item-sel">{{ marketLabel }}</div>
</div>
<div v-for="(line, idx) in lines" :key="idx" class="slip-item">
<div class="item-name">{{ line.scoreDisplay }}</div>
<div class="item-sel">
@ <span class="odds">{{ formatOdds(line.odds) }}</span>
· {{ formatMoney(line.stake, locale) }}
<div v-for="(line, idx) in lines" :key="idx" class="slip-item">
<div class="item-name">{{ line.scoreDisplay }}</div>
<div class="item-sel">
@ <span class="odds">{{ formatOdds(line.odds) }}</span>
· {{ formatMoney(line.stake, locale) }}
</div>
</div>
</div>
<div class="stake-area">
<div class="summary-row">
<span>{{ t('bet.cs_confirm_total_stake') }}</span>
<strong>{{ formatMoney(totalStake, locale) }}</strong>
<div class="drawer-foot">
<div class="stake-area">
<div class="summary-row">
<span>{{ t('bet.cs_confirm_total_stake') }}</span>
<strong>{{ formatMoney(totalStake, locale) }}</strong>
</div>
<div class="return">
{{ t('bet.slip_est_return') }}:
<strong>{{ formatMoney(totalReturn, locale) }}</strong>
</div>
</div>
<div class="return">
{{ t('bet.slip_est_return') }}:
<strong>{{ formatMoney(totalReturn, locale) }}</strong>
</div>
</div>
<button
type="button"
class="btn-primary"
:disabled="loading"
@click="emit('confirm')"
>
{{ loading ? t('bet.placing') : t('bet.place_bet') }}
</button>
<button
type="button"
class="btn-primary"
:disabled="loading"
@click="emit('confirm')"
>
{{ loading ? t('bet.placing') : t('bet.place_bet') }}
</button>
</div>
</div>
</div>
</template>
@@ -103,16 +107,36 @@ function formatOdds(odds: string) {
width: 100%;
max-height: 80vh;
border-radius: 16px 16px 0 0;
padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0));
overflow-y: auto;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}
.drawer-body {
flex: 1;
overflow-y: auto;
padding: 10px 14px 0;
-webkit-overflow-scrolling: touch;
}
.drawer-foot {
flex-shrink: 0;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(14, 14, 14, 0.98);
border-top: 1px solid var(--border-gold-soft);
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
}
.drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding: 14px 14px 12px;
flex-shrink: 0;
background: rgba(14, 14, 14, 0.98);
border-bottom: 1px solid #2a2a2a;
z-index: 2;
}
.drawer-header h3 {

32
apps/player/src/components/match-detail/MarketTypeTile.vue
View File

@@ -21,9 +21,9 @@ const { t } = useI18n();
@click="emit('toggle')"
>
<span class="row-label">{{ label }}</span>
<span v-if="promoLabel" class="row-promo">{{ promoLabel }}</span>
<span v-if="promoLabel" class="row-promo">{{ promoLabel }}</span>
<span v-if="!hasMarket" class="row-muted">{{ t('bet.market_closed') }}</span>
<span v-else class="row-chevron" aria-hidden="true">{{ expanded ? '▾' : '▸' }}</span>
<span v-else class="row-chevron" :class="{ open: expanded }" aria-hidden="true">▸</span>
</button>
</template>
@@ -33,16 +33,35 @@ const { t } = useI18n();
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 12px;
padding: 13px 12px;
background: transparent;
border: none;
text-align: left;
transition: background 0.15s ease;
border-radius: 0;
position: relative;
overflow: hidden;
}
.row:not(.disabled):active {
background: rgba(255, 255, 255, 0.025);
}
.row.expanded {
background: rgba(255, 255, 255, 0.03);
}
.row.expanded::before {
content: '';
position: absolute;
top: 0;
left: 12px;
right: 12px;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--primary) 30%, var(--primary-light) 50%, var(--primary) 70%, transparent 100%);
opacity: 0.6;
}
.row.disabled {
opacity: 0.4;
}
@@ -53,6 +72,7 @@ const { t } = useI18n();
font-size: 13px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.02em;
}
.row-promo {
@@ -73,14 +93,18 @@ const { t } = useI18n();
.row-muted {
font-size: 10px;
color: var(--text-muted);
font-weight: 600;
}
.row-chevron {
font-size: 11px;
color: var(--text-muted);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
flex-shrink: 0;
}
.row.expanded .row-chevron {
.row-chevron.open {
transform: rotate(90deg);
color: var(--primary-light);
}
</style>

5
apps/player/src/components/outright/OutrightBetModal.vue
View File

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
import api from '../../api';
import { formatMoney, parseAmount } from '../../utils/localeDisplay';
import { teamFlagUrl } from '../../utils/teamFlag';
import BetSuccessOverlay from '../BetSuccessOverlay.vue';
export interface OutrightPick {
selectionId: string;
@@ -30,6 +31,7 @@ const error = ref('');
const balance = ref(0);
const successBalance = ref(0);
const successStake = ref(0);
const showSuccess = ref(false);
const flagUrl = computed(() =>
props.pick ? teamFlagUrl(props.pick.teamCode, props.pick.teamName) : null,
@@ -102,6 +104,7 @@ async function submit() {
successBalance.value = balance.value - stake.value;
balance.value = successBalance.value;
step.value = 'success';
showSuccess.value = true;
} catch (e: unknown) {
error.value =
(e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
@@ -206,6 +209,8 @@ function formatOdds(odds: string) {
</template>
</div>
</div>
<BetSuccessOverlay :show="showSuccess" @done="showSuccess = false" />
</template>
<style scoped>

91
apps/player/src/components/outright/OutrightEventSection.vue
View File

@@ -26,20 +26,15 @@ export interface OutrightEvent {
const props = defineProps<{
event: OutrightEvent;
expanded: boolean;
visibleLimit: number;
loadingMore: boolean;
}>();
const emit = defineEmits<{
toggle: [];
loadMore: [];
pick: [selection: OutrightSelection];
}>();
const { t } = useI18n();
const INITIAL_BATCH = 20;
const headTitle = computed(() => {
const raw = props.event.title.replace(/^\*+/, '').trim();
return raw || props.event.leagueName || t('bet.tab_outright');
@@ -49,28 +44,16 @@ const headMeta = computed(() => {
const total = props.event.selectionCount ?? props.event.selections.length;
return t('bet.outright_teams_count', { n: total });
});
const visibleSelections = computed(() =>
props.event.selections.slice(0, props.visibleLimit),
);
const hasMore = computed(
() => props.event.selections.length > props.visibleLimit,
);
const showLoadMore = computed(
() => props.event.selections.length > INITIAL_BATCH && hasMore.value,
);
</script>
<template>
<section class="event-block">
<button type="button" class="event-head" :aria-expanded="expanded" @click="emit('toggle')">
<button type="button" class="event-head" :class="{ 'is-expanded': expanded }" :aria-expanded="expanded" @click="emit('toggle')">
<span class="toggle-icon" :class="{ open: expanded }">
<span class="toggle-mark">{{ expanded ? '−' : '+' }}</span>
</span>
<span class="event-head-text">
<span class="event-title">*{{ headTitle }}</span>
<span class="event-title">{{ headTitle }}</span>
<span v-if="event.leagueName && event.leagueName !== headTitle" class="event-league">
{{ event.leagueName }}
</span>
@@ -79,10 +62,10 @@ const showLoadMore = computed(
<img :src="saishiImg" alt="" class="event-saishi" />
</button>
<div v-show="expanded" class="options-wrap">
<div v-show="expanded" class="options-scroll">
<div class="options-grid">
<OutrightOptionCard
v-for="sel in visibleSelections"
v-for="sel in event.selections"
:key="sel.id"
:team-code="sel.teamCode"
:team-name="sel.teamName"
@@ -91,24 +74,6 @@ const showLoadMore = computed(
@pick="emit('pick', sel)"
/>
</div>
<div v-if="showLoadMore" class="load-more-zone">
<p class="load-more-hint">
{{
t('bet.outright_shown_count', {
shown: visibleSelections.length,
total: event.selections.length,
})
}}
</p>
<button
type="button"
class="load-more-btn"
:disabled="loadingMore"
@click="emit('loadMore')"
>
{{ loadingMore ? t('bet.loading') : t('bet.outright_load_more') }}
</button>
</div>
</div>
</section>
</template>
@@ -116,6 +81,9 @@ const showLoadMore = computed(
<style scoped>
.event-block {
margin-bottom: 10px;
border: 1px solid #2e2e2e;
border-radius: 6px;
overflow: hidden;
}
.event-head {
@@ -125,8 +93,8 @@ const showLoadMore = computed(
gap: 10px;
padding: 12px 10px;
background: #141414;
border: 1px solid #2e2e2e;
border-radius: 6px;
border: none;
border-radius: 0;
text-align: left;
}
@@ -192,43 +160,18 @@ const showLoadMore = computed(
border-left: 1px solid #2a2a2a;
}
.options-wrap {
padding: 10px 0 4px;
.options-scroll {
max-height: 408px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 8px 2px 2px;
scrollbar-width: thin;
scrollbar-color: #333 transparent;
}
.options-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.load-more-zone {
padding: 14px 8px 6px;
text-align: center;
}
.load-more-hint {
margin: 0 0 10px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
.load-more-btn {
width: 100%;
max-width: 280px;
padding: 11px 16px;
border-radius: 8px;
border: 1px solid var(--border-gold-soft);
background: linear-gradient(180deg, #1f1f1f, #141414);
color: var(--primary-light);
font-size: 13px;
font-weight: 800;
font-family: inherit;
letter-spacing: 0.04em;
}
.load-more-btn:disabled {
opacity: 0.65;
gap: 6px;
}
</style>

29
apps/player/src/components/outright/OutrightOptionCard.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
import { teamFlagUrl } from '../../utils/teamFlag';
const props = defineProps<{
@@ -15,6 +15,9 @@ const flag = computed(
() => props.logoUrl?.trim() || teamFlagUrl(props.teamCode, props.teamName),
);
const flagFailed = ref(false);
const imgVisible = ref(false);
const cardRef = ref<HTMLElement | null>(null);
let observer: IntersectionObserver | null = null;
function onFlagError() {
flagFailed.value = true;
@@ -31,16 +34,34 @@ function formatOdds(odds: string) {
const n = parseFloat(odds);
return Number.isFinite(n) ? n.toFixed(2) : odds;
}
onMounted(() => {
if (!cardRef.value) return;
observer = new IntersectionObserver(
(entries) => {
const entry = entries[0];
if (entry.isIntersecting) {
imgVisible.value = true;
observer?.disconnect();
}
},
{ rootMargin: '120px' }
);
observer.observe(cardRef.value);
});
onUnmounted(() => {
observer?.disconnect();
});
</script>
<template>
<button type="button" class="option-card" @click="emit('pick')">
<button ref="cardRef" type="button" class="option-card" @click="emit('pick')">
<img
v-if="flag && !flagFailed"
v-if="imgVisible && flag && !flagFailed"
:src="flag"
alt=""
class="flag"
loading="lazy"
@error="onFlagError"
/>
<span v-else class="flag-placeholder" aria-hidden="true">⚽</span>

104
apps/player/src/components/outright/OutrightPanel.vue
View File

@@ -8,19 +8,15 @@ import OutrightEventSection, {
} from './OutrightEventSection.vue';
import OutrightBetModal, { type OutrightPick } from './OutrightBetModal.vue';
import emptyMatchesImg from '../../assets/images/empty-matches.svg';
import GoldSpinner from '../../components/GoldSpinner.vue';
import { useOnLocaleChange } from '../../composables/useOnLocaleChange';
const { t } = useI18n();
const INITIAL_BATCH = 20;
const LOAD_MORE_STEP = 28;
const loading = ref(true);
const loadError = ref('');
const loadingMoreId = ref<string | null>(null);
const events = ref<OutrightEvent[]>([]);
const expanded = ref<Set<string>>(new Set());
const visibleLimits = ref<Record<string, number>>({});
const modalOpen = ref(false);
const activePick = ref<OutrightPick | null>(null);
@@ -29,60 +25,37 @@ const totalSelections = computed(() =>
events.value.reduce((sum, e) => sum + e.selections.length, 0),
);
function resetVisibleLimits() {
const next: Record<string, number> = {};
for (const e of events.value) {
next[e.id] =
e.selections.length <= INITIAL_BATCH
? e.selections.length
: INITIAL_BATCH;
}
visibleLimits.value = next;
}
function syncExpandedAfterLoad() {
const ids = events.value.map((e) => e.id);
const kept = new Set([...expanded.value].filter((id) => ids.includes(id)));
if (kept.size > 0) {
expanded.value = kept;
// 只保留仍然存在的 id，且最多保留 1 个
const kept = [...expanded.value].filter((id) => ids.includes(id));
if (kept.length > 0) {
expanded.value = new Set([kept[0]]);
return;
}
if (ids.length === 1) {
expanded.value = new Set(ids);
} else if (ids.length <= 3) {
expanded.value = new Set(ids);
} else {
if (ids.length > 0) {
expanded.value = new Set([ids[0]]);
} else {
expanded.value = new Set();
}
}
function hasMoreSelections(event: OutrightEvent) {
const limit = visibleLimits.value[event.id] ?? INITIAL_BATCH;
return event.selections.length > limit;
}
function loadMore(event: OutrightEvent) {
if (loadingMoreId.value || !hasMoreSelections(event)) return;
loadingMoreId.value = event.id;
const current = visibleLimits.value[event.id] ?? INITIAL_BATCH;
visibleLimits.value = {
...visibleLimits.value,
[event.id]: Math.min(current + LOAD_MORE_STEP, event.selections.length),
};
loadingMoreId.value = null;
}
async function load() {
loading.value = true;
const hadData = events.value.length > 0;
if (!hadData) loading.value = true;
loadError.value = '';
try {
const { data } = await api.get('/player/outrights');
const list = (data?.data ?? []) as OutrightEvent[];
events.value = list.filter((e) => e.selections?.length > 0);
resetVisibleLimits();
syncExpandedAfterLoad();
const fresh = list.filter((e) => e.selections?.length > 0);
if (!hadData) {
events.value = fresh;
syncExpandedAfterLoad();
} else {
mergeOddsOnly(fresh);
}
} catch (e: unknown) {
events.value = [];
if (!hadData) events.value = [];
const err = e as { response?: { status?: number; data?: { error?: string } } };
if (err.response?.status === 403) {
loadError.value = t('bet.outright_player_only');
@@ -90,7 +63,26 @@ async function load() {
loadError.value = err.response?.data?.error ?? t('bet.outright_load_failed');
}
} finally {
loading.value = false;
if (!hadData) loading.value = false;
}
}
function mergeOddsOnly(fresh: OutrightEvent[]) {
const freshMap = new Map<string, OutrightEvent>();
for (const e of fresh) freshMap.set(e.id, e);
for (const event of events.value) {
const freshEvent = freshMap.get(event.id);
if (!freshEvent) continue;
const selMap = new Map<string, OutrightSelection>();
for (const s of freshEvent.selections) selMap.set(s.id, s);
for (const sel of event.selections) {
const fs = selMap.get(sel.id);
if (fs) {
sel.odds = fs.odds;
sel.oddsVersion = fs.oddsVersion;
}
}
}
}
@@ -101,18 +93,6 @@ function toggle(id: string) {
if (next.has(id)) next.delete(id);
else next.add(id);
expanded.value = next;
if (next.has(id) && visibleLimits.value[id] == null) {
const event = events.value.find((e) => e.id === id);
if (event) {
visibleLimits.value = {
...visibleLimits.value,
[id]:
event.selections.length <= INITIAL_BATCH
? event.selections.length
: INITIAL_BATCH,
};
}
}
}
function openBet(event: OutrightEvent, sel: OutrightSelection) {
@@ -135,8 +115,9 @@ function closeModal() {
<template>
<div class="outright-panel">
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
<div v-if="loading" class="state">
<GoldSpinner :size="36" />
</div>
<template v-else-if="events.length">
<p v-if="eventCount > 1" class="panel-summary">
{{ t('bet.outright_events_summary', { events: eventCount, teams: totalSelections }) }}
@@ -148,10 +129,7 @@ function closeModal() {
:key="event.id"
:event="event"
:expanded="expanded.has(event.id)"
:visible-limit="visibleLimits[event.id] ?? INITIAL_BATCH"
:loading-more="loadingMoreId === event.id"
@toggle="toggle(event.id)"
@load-more="loadMore(event)"
@pick="openBet(event, $event)"
/>
</div>

400
apps/player/src/components/parlay/ParlayPanel.vue
View File

@@ -6,6 +6,8 @@ import { useBetSlipStore } from '../../stores/betSlip';
import { PARLAY_MAX_LEGS, canSelectForParlay } from '@thebet365/shared';
import { PARLAY_MARKET_TYPES, PARLAY_SELECTION_KEYS } from '../../utils/parlayColumns';
import BetGuideHelp from '../BetGuideHelp.vue';
import GoldSpinner from '../GoldSpinner.vue';
import TeamEmblem from '../TeamEmblem.vue';
import { useOnLocaleChange } from '../../composables/useOnLocaleChange';
type TimeFilter = 'all' | 'today';
@@ -29,8 +31,13 @@ interface Market {
interface ParlayMatch {
id: string;
leagueName: string;
leagueId?: string;
homeTeamName: string;
awayTeamName: string;
homeTeamCode?: string;
awayTeamCode?: string;
homeTeamLogoUrl?: string | null;
awayTeamLogoUrl?: string | null;
startTime: string;
markets: Market[];
}
@@ -41,23 +48,87 @@ const slip = useBetSlipStore();
const loading = ref(true);
const matches = ref<ParlayMatch[]>([]);
const timeFilter = ref<TimeFilter>('all');
const leagueFilter = ref('');
const collapsed = ref<Set<string>>(new Set());
const parlayMarketKeys = PARLAY_MARKET_TYPES.map((c) => c.key);
async function loadParlayMatches() {
loading.value = true;
const hadData = matches.value.length > 0;
if (!hadData) loading.value = true;
try {
const { data } = await api.get('/player/matches');
matches.value = (data.data ?? []).filter(
const fresh = (data.data ?? []).filter(
(m: ParlayMatch) => m.markets?.length && hasParlayMarkets(m),
);
if (!hadData) {
matches.value = fresh;
syncCollapsedAfterLoad();
} else {
mergeOddsOnly(fresh);
}
} finally {
loading.value = false;
if (!hadData) loading.value = false;
}
}
function syncCollapsedAfterLoad() {
const ids = matches.value.map((m) => m.id);
// 只保留仍然存在的 id
const kept = [...collapsed.value].filter((id) => ids.includes(id));
if (kept.length > 0) {
collapsed.value = new Set(kept);
return;
}
// 默认只展开第一个，其余折叠
if (ids.length > 1) {
collapsed.value = new Set(ids.slice(1));
} else {
collapsed.value = new Set();
}
}
function mergeOddsOnly(fresh: ParlayMatch[]) {
const matchMap = new Map<string, ParlayMatch>();
for (const m of fresh) matchMap.set(m.id, m);
for (const match of matches.value) {
const freshMatch = matchMap.get(match.id);
if (!freshMatch) continue;
const marketMap = new Map<string, Market>();
for (const mk of freshMatch.markets) marketMap.set(mk.id, mk);
for (const market of match.markets) {
const freshMarket = marketMap.get(market.id);
if (!freshMarket) continue;
const selMap = new Map<string, Selection>();
for (const s of freshMarket.selections) selMap.set(s.id, s);
for (const sel of market.selections) {
const fs = selMap.get(sel.id);
if (fs) {
sel.odds = fs.odds;
sel.oddsVersion = fs.oddsVersion;
}
}
}
}
}
useOnLocaleChange(loadParlayMatches);
const leagues = computed(() => {
const seen = new Set<string>();
const list: { id: string; name: string }[] = [];
for (const m of matches.value) {
const id = m.leagueId ?? m.leagueName;
if (!seen.has(id)) {
seen.add(id);
list.push({ id, name: m.leagueName });
}
}
list.sort((a, b) => a.name.localeCompare(b.name));
return list;
});
function parseLine(v: string | number | null | undefined) {
if (v == null || v === '') return null;
const n = typeof v === 'number' ? v : parseFloat(String(v));
@@ -100,8 +171,14 @@ function isKickoffToday(startTime: string) {
}
const filteredMatches = computed(() => {
if (timeFilter.value === 'all') return matches.value;
return matches.value.filter((m) => isKickoffToday(m.startTime));
let list = matches.value;
if (timeFilter.value === 'today') {
list = list.filter((m) => isKickoffToday(m.startTime));
}
if (leagueFilter.value) {
list = list.filter((m) => (m.leagueId ?? m.leagueName) === leagueFilter.value);
}
return list;
});
function formatKickoff(startTime: string) {
@@ -163,76 +240,101 @@ const showParlayFoot = computed(() => slip.mode === 'parlay' && slip.count > 0);
const footConfirmLabel = computed(() =>
slip.canPlaceParlay ? t('bet.parlay_confirm_parlay') : t('bet.cs_confirm_cell'),
);
function toggleCollapse(id: string) {
const next = new Set(collapsed.value);
if (next.has(id)) next.delete(id);
else next.add(id);
collapsed.value = next;
}
</script>
<template>
<div class="parlay-panel" :class="{ 'has-fixed-foot': showParlayFoot }">
<div class="toolbar">
<div class="toolbar-filters">
<select v-model="timeFilter" class="filter-select">
<select v-model="timeFilter" class="filter-select">
<option value="all">{{ t('bet.parlay_filter_all') }}</option>
<option value="today">{{ t('bet.tab_today') }}</option>
</select>
<BetGuideHelp
:title="t('bet.parlay_guide_title')"
:aria-label="t('bet.parlay_guide_help')"
storage-key="thebet365_parlay_guide_seen"
>
<p class="intro">{{ t('bet.parlay_desc') }}</p>
<ol>
<li>{{ t('bet.parlay_guide_1') }}</li>
<li>{{ t('bet.parlay_guide_2') }}</li>
<li>{{ t('bet.parlay_guide_3') }}</li>
</ol>
<p class="rules-link">{{ t('bet.guide_rules_link') }}</p>
</BetGuideHelp>
</div>
<div class="col-headers">
<span v-for="col in PARLAY_MARKET_TYPES" :key="col.key" class="col-head">{{ colLabel(col.labelKey) }}</span>
</div>
</select>
<select v-model="leagueFilter" class="filter-select">
<option value="">{{ t('bet.parlay_filter_all') }}</option>
<option v-for="lg in leagues" :key="lg.id" :value="lg.id">{{ lg.name }}</option>
</select>
<BetGuideHelp
:title="t('bet.parlay_guide_title')"
:aria-label="t('bet.parlay_guide_help')"
storage-key="thebet365_parlay_guide_seen"
>
<p class="intro">{{ t('bet.parlay_desc') }}</p>
<ol>
<li>{{ t('bet.parlay_guide_1') }}</li>
<li>{{ t('bet.parlay_guide_2') }}</li>
<li>{{ t('bet.parlay_guide_3') }}</li>
</ol>
<p class="rules-link">{{ t('bet.guide_rules_link') }}</p>
</BetGuideHelp>
</div>
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
<div v-if="loading" class="state">
<GoldSpinner :size="36" />
</div>
<div v-else-if="filteredMatches.length" class="table-wrap">
<div v-for="match in filteredMatches" :key="match.id" class="match-row">
<div class="match-info">
<div class="league">{{ match.leagueName }}</div>
<div class="teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
<div class="time">{{ formatKickoff(match.startTime) }}</div>
</div>
<div class="odds-cells">
<div v-else-if="filteredMatches.length" class="match-list">
<div v-for="match in filteredMatches" :key="match.id" class="match-card" :class="{ collapsed: collapsed.has(match.id) }">
<button type="button" class="match-head" @click="toggleCollapse(match.id)">
<span class="m-league">{{ match.leagueName }}</span>
<TeamEmblem
size="sm"
:team-code="match.homeTeamCode"
:team-name="match.homeTeamName"
:logo-url="match.homeTeamLogoUrl"
/>
<span class="m-teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</span>
<TeamEmblem
size="sm"
:team-code="match.awayTeamCode"
:team-name="match.awayTeamName"
:logo-url="match.awayTeamLogoUrl"
/>
<span class="m-time">{{ formatKickoff(match.startTime) }}</span>
<span class="toggle-dot" :class="{ open: !collapsed.has(match.id) }">{{ collapsed.has(match.id) ? '+' : '−' }}</span>
</button>
<div v-show="!collapsed.has(match.id)" class="market-blocks">
<div
v-for="col in PARLAY_MARKET_TYPES"
:key="col.key"
class="market-cell"
class="market-block"
>
<template
v-if="
getMarket(match, col.key) &&
isParlayEligibleMarket(getMarket(match, col.key)!)
"
>
<button
v-for="sel in getMarket(match, col.key)!.selections"
:key="sel.id"
type="button"
class="odd-btn"
:class="{ picked: isPicked(sel.id) }"
@click="pickSelection(match, getMarket(match, col.key)!, sel)"
<span class="block-label">{{ colLabel(col.labelKey) }}</span>
<div class="block-btns">
<template
v-if="
getMarket(match, col.key) &&
isParlayEligibleMarket(getMarket(match, col.key)!)
"
>
<span class="odd-label">{{ selLabel(sel) }}</span>
<span class="odd-val">{{ formatOdds(sel.odds) }}</span>
</button>
</template>
<span v-else class="market-empty">—</span>
<button
v-for="sel in getMarket(match, col.key)!.selections"
:key="sel.id"
type="button"
class="odd-btn"
:class="{ picked: isPicked(sel.id) }"
@click="pickSelection(match, getMarket(match, col.key)!, sel)"
>
<span class="odd-label">{{ selLabel(sel) }}</span>
<span class="odd-val">{{ formatOdds(sel.odds) }}</span>
</button>
</template>
<span v-else class="market-empty">—</span>
</div>
</div>
</div>
</div>
</div>
<div v-else class="empty">
<span class="empty-icon" aria-hidden="true">📅</span>
<span class="empty-icon" aria-hidden="true">&#9917;</span>
<p>{{ t('bet.parlay_empty') }}</p>
</div>
@@ -267,11 +369,23 @@ const footConfirmLabel = computed(() =>
padding-bottom: 100px;
}
.toolbar-filters {
.toolbar {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
margin-bottom: 8px;
flex-wrap: wrap;
}
.filter-select {
padding: 7px 10px;
border-radius: 6px;
background: #141414;
border: 1px solid var(--border-gold-soft);
color: var(--primary-light);
font-size: 12px;
font-weight: 700;
max-width: 140px;
}
.parlay-foot-fixed {
@@ -297,12 +411,6 @@ const footConfirmLabel = computed(() =>
text-align: center;
}
.foot-hint--info {
color: var(--primary-light);
text-align: center;
font-weight: 600;
}
.foot-meta {
color: var(--primary-light);
font-weight: 600;
@@ -324,102 +432,118 @@ const footConfirmLabel = computed(() =>
opacity: 0.45;
}
.toolbar {
display: flex;
align-items: stretch;
gap: 8px;
margin-bottom: 8px;
overflow-x: auto;
}
.filter-select {
flex-shrink: 0;
min-width: 72px;
padding: 8px 10px;
border-radius: 6px;
background: #141414;
border: 1px solid var(--border-gold-soft);
color: var(--primary-light);
font-size: 12px;
font-weight: 700;
}
.col-headers {
display: grid;
grid-template-columns: repeat(7, minmax(52px, 1fr));
gap: 4px;
flex: 1;
min-width: 360px;
align-items: center;
}
.col-head {
font-size: 10px;
font-weight: 800;
color: var(--text-muted);
text-align: center;
line-height: 1.25;
word-break: keep-all;
}
.table-wrap {
.match-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.match-row {
display: flex;
gap: 8px;
padding: 10px 8px;
.match-card {
background: #141414;
border: 1px solid #2a2a2a;
border-radius: 6px;
overflow-x: auto;
border-radius: 8px;
overflow: hidden;
}
.match-info {
.match-card.collapsed {
border-color: #222;
}
.match-head {
width: 100%;
display: flex;
align-items: center;
gap: 6px;
padding: 10px;
background: none;
border: none;
color: inherit;
font-family: inherit;
cursor: pointer;
}
.match-head:active {
background: rgba(255, 255, 255, 0.015);
}
.toggle-dot {
flex-shrink: 0;
width: 88px;
min-width: 88px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #1a1a1a;
border: 1px solid #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 900;
color: #666;
line-height: 1;
transition: all 0.15s;
}
.league {
font-size: 9px;
.toggle-dot.open {
border-color: var(--border-gold-soft);
color: var(--primary-light);
}
.m-league {
font-size: 10px;
color: var(--text-muted);
margin-bottom: 2px;
font-weight: 600;
flex-shrink: 0;
}
.m-teams {
font-size: 12px;
font-weight: 800;
color: var(--primary-light);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.teams {
font-size: 11px;
font-weight: 800;
color: var(--primary-light);
line-height: 1.25;
margin-bottom: 4px;
}
.time {
font-size: 9px;
.m-time {
font-size: 10px;
color: var(--text-muted);
flex-shrink: 0;
}
.odds-cells {
display: grid;
grid-template-columns: repeat(7, minmax(52px, 1fr));
gap: 4px;
flex: 1;
min-width: 360px;
align-items: stretch;
.match-head :deep(.team-emblem) {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.market-cell {
.market-blocks {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 10px 10px;
}
.market-block {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.block-label {
font-size: 9.5px;
font-weight: 800;
color: var(--text-muted);
letter-spacing: 0.03em;
padding: 0 2px;
}
.block-btns {
display: flex;
gap: 3px;
min-height: 36px;
flex-wrap: wrap;
}
.odd-btn {
@@ -428,12 +552,12 @@ const footConfirmLabel = computed(() =>
align-items: center;
justify-content: center;
gap: 1px;
padding: 4px 2px;
padding: 5px 8px;
border-radius: 4px;
background: #0d0d0d;
border: 1px solid #333;
min-height: 32px;
width: 100%;
min-width: 44px;
min-height: 36px;
}
.odd-btn.picked {
@@ -442,7 +566,7 @@ const footConfirmLabel = computed(() =>
}
.odd-label {
font-size: 9px;
font-size: 8.5px;
font-weight: 700;
color: var(--text-muted);
line-height: 1;
@@ -456,13 +580,13 @@ const footConfirmLabel = computed(() =>
}
.market-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 36px;
color: #444;
font-size: 12px;
min-height: 32px;
}
.state,