重构
This commit is contained in:
wchino
@@ -123,14 +123,23 @@ onUnmounted(stopAutoPlay);
|
||||
class="slide"
|
||||
@click="onBannerClick(banner)"
|
||||
>
|
||||
<img
|
||||
v-if="imageUrl(banner)"
|
||||
:src="imageUrl(banner)"
|
||||
:alt="title(banner)"
|
||||
class="slide-img"
|
||||
:loading="i === 0 ? 'eager' : 'lazy'"
|
||||
@error="onImgError"
|
||||
/>
|
||||
<template v-if="imageUrl(banner)">
|
||||
<img
|
||||
:src="imageUrl(banner)"
|
||||
alt=""
|
||||
class="slide-backdrop"
|
||||
aria-hidden="true"
|
||||
:loading="i === 0 ? 'eager' : 'lazy'"
|
||||
@error="onImgError"
|
||||
/>
|
||||
<img
|
||||
:src="imageUrl(banner)"
|
||||
:alt="title(banner)"
|
||||
class="slide-img"
|
||||
:loading="i === 0 ? 'eager' : 'lazy'"
|
||||
@error="onImgError"
|
||||
/>
|
||||
</template>
|
||||
<div v-else class="slide-fallback">{{ title(banner) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -157,40 +166,81 @@ onUnmounted(stopAutoPlay);
|
||||
<style scoped>
|
||||
.carousel {
|
||||
position: relative;
|
||||
margin: 0 -16px 14px;
|
||||
margin: -12px -16px 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.media {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #05080d;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: clamp(148px, 41.86vw, 180px);
|
||||
}
|
||||
|
||||
.track {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.slide {
|
||||
position: relative;
|
||||
flex: 0 0 100%;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(7, 18, 31, 0.94), rgba(6, 8, 12, 0.98)),
|
||||
#070d15;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slide-img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
.slide::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.03) 48%, rgba(0, 0, 0, 0.18));
|
||||
box-shadow: inset 0 -1px 0 rgba(212, 175, 55, 0.16);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slide-backdrop {
|
||||
position: absolute;
|
||||
inset: -18px;
|
||||
width: calc(100% + 36px);
|
||||
height: calc(100% + 36px);
|
||||
object-fit: cover;
|
||||
filter: blur(16px);
|
||||
opacity: 0.42;
|
||||
transform: scale(1.04);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slide-img {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slide-fallback {
|
||||
height: 180px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -210,6 +260,7 @@ onUnmounted(stopAutoPlay);
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: var(--primary-light);
|
||||
border: 1px solid var(--border);
|
||||
padding-bottom: 5px;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
|
||||
@@ -1,16 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { PARLAY_MIN_LEGS, PARLAY_MAX_LEGS } from '@thebet365/shared';
|
||||
import { useBetSlipStore } from '../stores/betSlip';
|
||||
import {
|
||||
useBetSlipStore,
|
||||
type ParlaySlipError,
|
||||
type SlipItem,
|
||||
type SlipMode,
|
||||
} from '../stores/betSlip';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import { formatMoney, parseAmount } from '../utils/localeDisplay';
|
||||
import BetSuccessOverlay from './BetSuccessOverlay.vue';
|
||||
import api from '../api';
|
||||
|
||||
const props = defineProps<{ modelValue: boolean }>();
|
||||
const emit = defineEmits<{ 'update:modelValue': [boolean] }>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const { t, locale } = useI18n();
|
||||
const slip = useBetSlipStore();
|
||||
const auth = useAuthStore();
|
||||
const show = computed({
|
||||
@@ -18,68 +24,246 @@ const show = computed({
|
||||
set: (v) => emit('update:modelValue', v),
|
||||
});
|
||||
|
||||
const activeTab = ref<SlipMode>('single');
|
||||
const loading = ref(false);
|
||||
const balanceLoading = ref(false);
|
||||
const balance = ref<number | null>(null);
|
||||
const error = ref('');
|
||||
const success = ref('');
|
||||
const showSuccess = ref(false);
|
||||
const MIN_STAKE = 5;
|
||||
const MAX_STAKE_INTEGER_LENGTH = 9;
|
||||
const stakeInput = ref('');
|
||||
const keypadKeys = ['1', '2', '3', '4', '5', 'backspace', '6', '7', '8', '9', '0', '00'];
|
||||
|
||||
const activeItems = computed<SlipItem[]>(() => {
|
||||
if (activeTab.value === 'parlay') return slip.parlayItems;
|
||||
return slip.singleItem ? [slip.singleItem] : [];
|
||||
});
|
||||
|
||||
const activeCount = computed(() => activeItems.value.length);
|
||||
const activeTotalOdds = computed(() =>
|
||||
activeItems.value.reduce((acc, item) => acc * item.odds, 1),
|
||||
);
|
||||
const activeEstimatedReturn = computed(() => {
|
||||
if (!activeItems.value.length || !Number.isFinite(slip.stake) || slip.stake <= 0) return 0;
|
||||
if (activeTab.value === 'parlay') return slip.stake * activeTotalOdds.value;
|
||||
return slip.stake * activeItems.value[0].odds;
|
||||
});
|
||||
|
||||
const canSubmitActive = computed(() => {
|
||||
if (activeTab.value === 'parlay') {
|
||||
return slip.parlayItems.length >= PARLAY_MIN_LEGS && slip.parlayItems.length <= PARLAY_MAX_LEGS;
|
||||
}
|
||||
return Boolean(slip.singleItem);
|
||||
});
|
||||
|
||||
const balanceText = computed(() => {
|
||||
if (balanceLoading.value) return t('bet.loading');
|
||||
if (balance.value == null) return '--';
|
||||
return formatMoney(balance.value, locale.value);
|
||||
});
|
||||
|
||||
const stakeText = computed(() => formatMoney(slip.stake, locale.value));
|
||||
const estimatedReturnText = computed(() => formatMoney(activeEstimatedReturn.value, locale.value));
|
||||
const totalOddsText = computed(() => activeTotalOdds.value.toFixed(4).replace(/0+$/, '').replace(/\.$/, ''));
|
||||
|
||||
const parlayWarning = computed(() => {
|
||||
if (activeTab.value !== 'parlay') return '';
|
||||
if (slip.lastParlayError) return parlayErrorMessage(slip.lastParlayError);
|
||||
if (slip.parlayItems.length > 0 && slip.parlayItems.length < PARLAY_MIN_LEGS) {
|
||||
return t('bet.parlay_need_more');
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
const singleInParlay = computed(() => {
|
||||
const item = slip.singleItem;
|
||||
return Boolean(item && slip.parlayItems.some((leg) => leg.selectionId === item.selectionId));
|
||||
});
|
||||
|
||||
const showFooterParlayAction = computed(() => activeTab.value === 'single' && Boolean(slip.singleItem));
|
||||
|
||||
function genId() {
|
||||
return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
|
||||
}
|
||||
|
||||
function onSuccessDone() {
|
||||
showSuccess.value = false;
|
||||
function selectTab(tab: SlipMode) {
|
||||
activeTab.value = tab;
|
||||
slip.setMode(tab);
|
||||
error.value = '';
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
show.value = false;
|
||||
error.value = '';
|
||||
success.value = '';
|
||||
}
|
||||
|
||||
function onSuccessDone() {
|
||||
showSuccess.value = false;
|
||||
closeDrawer();
|
||||
}
|
||||
|
||||
async function loadBalance() {
|
||||
if (!auth.token) {
|
||||
balance.value = null;
|
||||
return;
|
||||
}
|
||||
balanceLoading.value = true;
|
||||
try {
|
||||
const { data } = await api.get('/player/profile');
|
||||
balance.value = parseAmount(data.data?.wallet?.availableBalance);
|
||||
} catch {
|
||||
balance.value = null;
|
||||
} finally {
|
||||
balanceLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function parlayErrorMessage(reason: ParlaySlipError) {
|
||||
if (reason === 'MAX_LEGS') return t('bet.parlay_max_legs');
|
||||
if (reason === 'QUARTER_LINE') return t('bet.parlay_block_quarter');
|
||||
if (reason === 'OUTRIGHT') return t('bet.parlay_block_outright');
|
||||
if (reason === 'NOT_ALLOWED') return t('bet.parlay_block_not_allowed');
|
||||
if (reason === 'SAME_MATCH') return t('bet.slip_parlay_same_match');
|
||||
return t('bet.parlay_block_not_allowed');
|
||||
}
|
||||
|
||||
function addCurrentToParlay() {
|
||||
if (singleInParlay.value) {
|
||||
activeTab.value = 'parlay';
|
||||
slip.setMode('parlay');
|
||||
error.value = '';
|
||||
return;
|
||||
}
|
||||
const err = slip.addSingleToParlay();
|
||||
activeTab.value = 'parlay';
|
||||
if (err) {
|
||||
error.value = parlayErrorMessage(err);
|
||||
return;
|
||||
}
|
||||
error.value = '';
|
||||
}
|
||||
|
||||
function removeItem(id: string) {
|
||||
slip.removeItem(id);
|
||||
error.value = '';
|
||||
}
|
||||
|
||||
function stakeAmountToInput(amount: number) {
|
||||
if (!Number.isFinite(amount) || amount <= 0) return '';
|
||||
const rounded = Math.round(amount * 100) / 100;
|
||||
return Number.isInteger(rounded)
|
||||
? String(rounded)
|
||||
: rounded.toFixed(2).replace(/0+$/, '').replace(/\.$/, '');
|
||||
}
|
||||
|
||||
function sanitizeStakeInput(raw: string) {
|
||||
const onlyAmountChars = raw.replace(/[^\d.]/g, '');
|
||||
const [integerRaw, ...fractionParts] = onlyAmountChars.split('.');
|
||||
const integerPart = integerRaw.replace(/^0+(?=\d)/, '').slice(0, MAX_STAKE_INTEGER_LENGTH);
|
||||
if (!fractionParts.length) return integerPart;
|
||||
const fractionPart = fractionParts.join('').slice(0, 2);
|
||||
return `${integerPart || '0'}.${fractionPart}`;
|
||||
}
|
||||
|
||||
function commitStakeInput(raw: string) {
|
||||
const clean = sanitizeStakeInput(raw);
|
||||
stakeInput.value = clean;
|
||||
const amount = Number.parseFloat(clean);
|
||||
slip.stake = Number.isFinite(amount) ? amount : 0;
|
||||
}
|
||||
|
||||
function syncStakeInputFromSlip() {
|
||||
stakeInput.value = stakeAmountToInput(Number(slip.stake) || 0);
|
||||
}
|
||||
|
||||
function onStakeInput(event: Event) {
|
||||
commitStakeInput((event.target as HTMLInputElement).value);
|
||||
}
|
||||
|
||||
function pressStakeKey(key: string) {
|
||||
if (key === 'backspace') {
|
||||
commitStakeInput(stakeInput.value.slice(0, -1));
|
||||
return;
|
||||
}
|
||||
const base = stakeInput.value === '0' ? '' : stakeInput.value;
|
||||
commitStakeInput(`${base}${key}`);
|
||||
}
|
||||
|
||||
function clearStakeInput() {
|
||||
commitStakeInput('');
|
||||
}
|
||||
|
||||
function setStake(amount: number, enforceMinimum = true) {
|
||||
if (!Number.isFinite(amount)) return;
|
||||
const normalized = Math.round((enforceMinimum ? Math.max(MIN_STAKE, amount) : amount) * 100) / 100;
|
||||
slip.stake = normalized;
|
||||
stakeInput.value = stakeAmountToInput(normalized);
|
||||
}
|
||||
|
||||
function addStake(amount: number) {
|
||||
setStake((Number(slip.stake) || 0) + amount);
|
||||
}
|
||||
|
||||
function setMaxStake() {
|
||||
if (balance.value != null && balance.value > 0) setStake(balance.value, false);
|
||||
}
|
||||
|
||||
async function placeBet() {
|
||||
if (!slip.items.length) return;
|
||||
if (!activeItems.value.length) return;
|
||||
if (!auth.token) {
|
||||
auth.showLoginPrompt();
|
||||
return;
|
||||
}
|
||||
if (slip.stake < MIN_STAKE) {
|
||||
error.value = t('bet.slip_min_error', { amount: MIN_STAKE });
|
||||
return;
|
||||
}
|
||||
if (balance.value != null && slip.stake > balance.value) {
|
||||
error.value = t('bet.outright_insufficient');
|
||||
return;
|
||||
}
|
||||
if (activeTab.value === 'parlay' && !canSubmitActive.value) {
|
||||
error.value = slip.parlayItems.length > PARLAY_MAX_LEGS
|
||||
? t('bet.parlay_max_legs')
|
||||
: t('bet.parlay_need_more');
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
success.value = '';
|
||||
|
||||
try {
|
||||
if (slip.canPlaceParlay) {
|
||||
if (slip.items.length > PARLAY_MAX_LEGS) {
|
||||
error.value = t('bet.parlay_max_legs');
|
||||
return;
|
||||
}
|
||||
if (activeTab.value === 'parlay') {
|
||||
await api.post('/player/bets/parlay', {
|
||||
legs: slip.items.map((i) => ({
|
||||
selectionId: i.selectionId,
|
||||
oddsVersion: i.oddsVersion,
|
||||
legs: slip.parlayItems.map((item) => ({
|
||||
selectionId: item.selectionId,
|
||||
oddsVersion: item.oddsVersion,
|
||||
})),
|
||||
stake: slip.stake,
|
||||
requestId: genId(),
|
||||
});
|
||||
} else if (slip.canPlaceBatchSingles) {
|
||||
for (const item of slip.items) {
|
||||
await api.post('/player/bets/single', {
|
||||
selectionId: item.selectionId,
|
||||
oddsVersion: item.oddsVersion,
|
||||
stake: slip.stake,
|
||||
requestId: genId(),
|
||||
});
|
||||
}
|
||||
slip.clearParlay();
|
||||
} else {
|
||||
error.value = t('bet.parlay_need_more');
|
||||
return;
|
||||
const item = slip.singleItem;
|
||||
if (!item) return;
|
||||
await api.post('/player/bets/single', {
|
||||
selectionId: item.selectionId,
|
||||
oddsVersion: item.oddsVersion,
|
||||
stake: slip.stake,
|
||||
requestId: genId(),
|
||||
});
|
||||
slip.clearSingle();
|
||||
}
|
||||
success.value = t('bet.place_success');
|
||||
slip.clear();
|
||||
showSuccess.value = true;
|
||||
await loadBalance();
|
||||
setTimeout(() => {
|
||||
if (showSuccess.value) {
|
||||
showSuccess.value = false;
|
||||
show.value = false;
|
||||
success.value = '';
|
||||
}
|
||||
}, 2500);
|
||||
if (showSuccess.value) onSuccessDone();
|
||||
}, 2200);
|
||||
} catch (e: unknown) {
|
||||
error.value =
|
||||
(e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
|
||||
@@ -88,63 +272,176 @@ async function placeBet() {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(open) => {
|
||||
if (!open) return;
|
||||
activeTab.value = slip.mode;
|
||||
if (activeTab.value === 'single' && !slip.singleItem && slip.parlayItems.length) {
|
||||
activeTab.value = 'parlay';
|
||||
slip.setMode('parlay');
|
||||
}
|
||||
error.value = '';
|
||||
success.value = '';
|
||||
syncStakeInputFromSlip();
|
||||
loadBalance();
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => slip.mode,
|
||||
(mode) => {
|
||||
if (show.value) activeTab.value = mode;
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="show" class="overlay" @click.self="show = false">
|
||||
<div v-if="show" class="overlay" @click.self="closeDrawer">
|
||||
<div class="drawer">
|
||||
<div class="drawer-head">
|
||||
<div>
|
||||
<p class="drawer-kicker">{{ t('bet.bet_slip') }}</p>
|
||||
<h3>{{ t('bet.slip_review_title') }}</h3>
|
||||
</div>
|
||||
<button type="button" class="close-btn" :aria-label="t('bet.cancel')" @click="closeDrawer">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="balance-bar">
|
||||
<span>{{ t('bet.slip_balance') }}</span>
|
||||
<strong>{{ balanceText }}</strong>
|
||||
<button type="button" class="balance-refresh" :disabled="balanceLoading" @click="loadBalance">
|
||||
↻
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="slip-tabs">
|
||||
<button
|
||||
type="button"
|
||||
class="slip-tab"
|
||||
:class="{ active: activeTab === 'single' }"
|
||||
@click="selectTab('single')"
|
||||
>
|
||||
{{ t('bet.slip_tab_single') }}
|
||||
<span v-if="slip.singleCount" class="tab-count">{{ slip.singleCount }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="slip-tab"
|
||||
:class="{ active: activeTab === 'parlay' }"
|
||||
@click="selectTab('parlay')"
|
||||
>
|
||||
{{ t('bet.slip_tab_parlay') }}
|
||||
<span v-if="slip.parlayCount" class="tab-count">{{ slip.parlayCount }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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 v-if="!activeItems.length" class="empty">
|
||||
{{ activeTab === 'parlay' ? t('bet.slip_parlay_empty_hint') : t('bet.slip_empty_hint') }}
|
||||
</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>
|
||||
<template v-else>
|
||||
<div v-if="activeTab === 'single' && slip.singleItem" class="slip-item slip-item--single">
|
||||
<div class="item-main">
|
||||
<div class="item-title">{{ slip.singleItem.matchName }}</div>
|
||||
<div v-if="slip.singleItem.marketName" class="item-market">{{ slip.singleItem.marketName }}</div>
|
||||
<div class="item-pick">{{ slip.singleItem.selectionName }}</div>
|
||||
</div>
|
||||
<div class="item-odds">{{ slip.singleItem.odds.toFixed(2) }}</div>
|
||||
</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>
|
||||
<template v-if="activeTab === 'parlay'">
|
||||
<p v-if="parlayWarning" class="warning">{{ parlayWarning }}</p>
|
||||
<div
|
||||
v-for="item in slip.parlayItems"
|
||||
:key="item.selectionId"
|
||||
class="slip-item"
|
||||
>
|
||||
<div class="item-main">
|
||||
<div class="item-title">{{ item.matchName }}</div>
|
||||
<div v-if="item.marketName" class="item-market">{{ item.marketName }}</div>
|
||||
<div class="item-pick">{{ item.selectionName }}</div>
|
||||
</div>
|
||||
<div class="item-side">
|
||||
<strong>{{ item.odds.toFixed(2) }}</strong>
|
||||
<button type="button" class="remove" @click="removeItem(item.selectionId)">
|
||||
{{ t('bet.slip_remove') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="slip.parlayItems.length" class="parlay-meta">
|
||||
{{ t('bet.slip_parlay_count', { n: slip.parlayItems.length }) }}
|
||||
· {{ t('bet.slip_parlay_odds', { odds: totalOddsText }) }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<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 class="stake-area">
|
||||
<div class="stake-head">
|
||||
<span>{{ activeTab === 'parlay' ? t('bet.slip_total_stake') : t('bet.stake') }}</span>
|
||||
<strong>{{ stakeText }}</strong>
|
||||
</div>
|
||||
<div class="stake-input-row">
|
||||
<span class="currency">{{ t('bet.slip_currency') }}</span>
|
||||
<input
|
||||
:value="stakeInput"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
autocomplete="off"
|
||||
@input="onStakeInput"
|
||||
/>
|
||||
<button type="button" class="input-clear" @click="clearStakeInput">✕</button>
|
||||
</div>
|
||||
<div class="number-pad">
|
||||
<button
|
||||
v-for="key in keypadKeys"
|
||||
:key="key"
|
||||
type="button"
|
||||
class="number-key"
|
||||
:class="{ 'number-key--backspace': key === 'backspace' }"
|
||||
@click="pressStakeKey(key)"
|
||||
>
|
||||
<span v-if="key === 'backspace'" aria-hidden="true">⌫</span>
|
||||
<template v-else>{{ key }}</template>
|
||||
</button>
|
||||
</div>
|
||||
<div class="quick-stakes">
|
||||
<button type="button" @click="setStake(MIN_STAKE)">{{ t('bet.slip_min') }}</button>
|
||||
<button type="button" @click="addStake(50)">+50</button>
|
||||
<button type="button" @click="addStake(100)">+100</button>
|
||||
<button type="button" @click="setMaxStake">{{ t('bet.stake_max') }}</button>
|
||||
</div>
|
||||
<div class="return">
|
||||
<span>{{ t('bet.slip_est_return') }}</span>
|
||||
<strong>{{ estimatedReturnText }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-if="success" class="success">{{ success }}</p>
|
||||
</div>
|
||||
|
||||
<div class="drawer-foot">
|
||||
<div class="drawer-foot" :class="{ 'drawer-foot--split': showFooterParlayAction }">
|
||||
<button
|
||||
v-if="showFooterParlayAction"
|
||||
type="button"
|
||||
class="btn-add-parlay"
|
||||
@click="addCurrentToParlay"
|
||||
>
|
||||
<span aria-hidden="true">+</span>
|
||||
{{ t('bet.slip_add_parlay') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-primary"
|
||||
:disabled="loading || !slip.canSubmit"
|
||||
:disabled="loading || !canSubmitActive"
|
||||
@click="placeBet"
|
||||
>
|
||||
{{ loading ? t('bet.placing') : t('bet.place_bet') }}
|
||||
{{ loading ? t('bet.placing') : t('bet.place_bet_short') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -164,137 +461,395 @@ async function placeBet() {
|
||||
}
|
||||
|
||||
.drawer {
|
||||
background: linear-gradient(180deg, #222 0%, #141414 100%);
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
max-height: 88vh;
|
||||
background: #101010;
|
||||
border-radius: 16px 16px 0 0;
|
||||
border-top: 1px solid var(--border);
|
||||
border-top: 1px solid var(--border-gold-soft);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 -20px 44px rgba(0, 0, 0, 0.48);
|
||||
}
|
||||
|
||||
.drawer-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 14px 14px 10px;
|
||||
background: linear-gradient(180deg, #1d1d1d 0%, #111 100%);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.drawer-kicker {
|
||||
margin: 0 0 3px;
|
||||
font-size: 11px;
|
||||
color: var(--primary-light);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.drawer-head h3 {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--text-muted);
|
||||
font-size: 18px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.balance-bar {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(212, 175, 55, 0.08);
|
||||
border-bottom: 1px solid rgba(212, 175, 55, 0.18);
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.balance-bar strong {
|
||||
justify-self: end;
|
||||
color: var(--primary-light);
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.balance-refresh {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text-muted);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.slip-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
padding: 8px 12px 0;
|
||||
gap: 6px;
|
||||
background: #101010;
|
||||
}
|
||||
|
||||
.slip-tab {
|
||||
min-height: 38px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
border: 1px solid var(--border);
|
||||
background: #171717;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.slip-tab.active {
|
||||
border-color: var(--border-gold-soft);
|
||||
background: rgba(212, 175, 55, 0.13);
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.tab-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 6px;
|
||||
border-radius: 9px;
|
||||
background: var(--primary);
|
||||
color: #111;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.drawer-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 14px 14px 0;
|
||||
padding: 12px 12px 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;
|
||||
}
|
||||
|
||||
.drawer-header h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.count {
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 20px;
|
||||
padding: 4px;
|
||||
padding: 26px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.slip-item {
|
||||
padding: 10px 12px;
|
||||
background: #111;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 11px 12px;
|
||||
background: #151515;
|
||||
border: 1px solid #292929;
|
||||
border-radius: 7px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
.slip-item--single {
|
||||
border-color: var(--border-gold-soft);
|
||||
background: linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(18, 18, 18, 0.94));
|
||||
}
|
||||
|
||||
.item-sel {
|
||||
.item-main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-market {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.item-pick {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.odds {
|
||||
.item-odds,
|
||||
.item-side strong {
|
||||
color: var(--primary-light);
|
||||
font-weight: 800;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.item-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.remove {
|
||||
background: none;
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mode-hint {
|
||||
.btn-add-parlay {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, #4b370d 0%, #241905 100%);
|
||||
border: 1px solid var(--primary-light);
|
||||
color: #ffe892;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 232, 146, 0.18) inset,
|
||||
0 6px 18px rgba(212, 175, 55, 0.18);
|
||||
}
|
||||
|
||||
.btn-add-parlay span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-light);
|
||||
color: #191100;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.warning,
|
||||
.error {
|
||||
margin: 0 0 10px;
|
||||
padding: 10px 11px;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 77, 79, 0.12);
|
||||
border: 1px solid rgba(255, 77, 79, 0.25);
|
||||
color: #ff8b8b;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.mode-hint--parlay {
|
||||
.parlay-meta {
|
||||
margin: 8px 2px 10px;
|
||||
color: var(--primary-light);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stake-area {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.stake-area label {
|
||||
font-size: 12px;
|
||||
color: var(--primary-light);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.return {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.return strong {
|
||||
color: var(--primary-light);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--danger);
|
||||
.stake-area {
|
||||
margin: 12px 0 12px;
|
||||
padding: 12px;
|
||||
background: #151515;
|
||||
border: 1px solid #292929;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.stake-head,
|
||||
.return {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stake-head strong,
|
||||
.return strong {
|
||||
color: var(--primary-light);
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.stake-input-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background: #0c0c0c;
|
||||
}
|
||||
|
||||
.currency {
|
||||
padding: 0 10px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
border-right: 1px solid #2d2d2d;
|
||||
}
|
||||
|
||||
.stake-input-row input {
|
||||
min-width: 0;
|
||||
height: 42px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
padding: 0 10px;
|
||||
outline: none;
|
||||
text-align: right;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.stake-input-row input::-webkit-outer-spin-button,
|
||||
.stake-input-row input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.input-clear {
|
||||
width: 38px;
|
||||
height: 42px;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
padding: 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.number-pad,
|
||||
.quick-stakes {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.number-pad {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
.quick-stakes {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.number-key,
|
||||
.quick-stakes button {
|
||||
min-height: 52px;
|
||||
border-radius: 5px;
|
||||
background: #f4f1f6;
|
||||
color: #221f26;
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
font-size: 26px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.number-key--backspace span {
|
||||
display: inline-block;
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.quick-stakes button {
|
||||
min-height: 50px;
|
||||
background: #7b787d;
|
||||
color: var(--text);
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.return {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: var(--primary-light);
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
padding: 24px;
|
||||
font-size: 13px;
|
||||
.drawer-foot {
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
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-foot--split {
|
||||
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
border-radius: 7px;
|
||||
background: linear-gradient(180deg, var(--primary-light), var(--primary));
|
||||
color: #111;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -19,7 +19,7 @@ const stats = computed(() => {
|
||||
for (const bet of props.items) {
|
||||
total++;
|
||||
const s = bet.status.toUpperCase();
|
||||
if (s === 'WON' || s === 'WIN') { won++; totalReturn += parseAmount(bet.actualReturn); }
|
||||
if (s === 'WON' || s === 'WIN') won++;
|
||||
else if (s === 'LOST' || s === 'LOSE') lost++;
|
||||
else if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') push++;
|
||||
else pending++;
|
||||
@@ -56,11 +56,13 @@ const stats = computed(() => {
|
||||
<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 class="stats-bar" :class="{ empty: stats.total === 0 }" aria-hidden="true">
|
||||
<template v-if="stats.total > 0">
|
||||
<div v-if="stats.won > 0" class="bar-seg won" :style="{ flex: stats.won }" />
|
||||
<div v-if="stats.lost > 0" class="bar-seg lost" :style="{ flex: stats.lost }" />
|
||||
<div v-if="stats.pending > 0" class="bar-seg pending" :style="{ flex: stats.pending }" />
|
||||
<div v-if="stats.push > 0" class="bar-seg push" :style="{ flex: stats.push }" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="stats-row secondary">
|
||||
<div class="stat-item">
|
||||
@@ -141,8 +143,11 @@ const stats = computed(() => {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.stats-bar.empty {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.bar-seg {
|
||||
min-width: 2px;
|
||||
border-radius: 2px;
|
||||
transition: flex 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -23,10 +23,18 @@ const props = defineProps<{
|
||||
bettingOpen?: boolean;
|
||||
matchPhase?: import('../utils/matchPhase').MatchPhase;
|
||||
score?: {
|
||||
htHome: number;
|
||||
htAway: number;
|
||||
ftHome: number;
|
||||
ftAway: number;
|
||||
htHome: number | null;
|
||||
htAway: number | null;
|
||||
ftHome: number | null;
|
||||
ftAway: number | null;
|
||||
homeCorners?: number | null;
|
||||
awayCorners?: number | null;
|
||||
homeYellowCards?: number | null;
|
||||
awayYellowCards?: number | null;
|
||||
homeRedCards?: number | null;
|
||||
awayRedCards?: number | null;
|
||||
homeCards?: number | null;
|
||||
awayCards?: number | null;
|
||||
} | null;
|
||||
}[];
|
||||
}>();
|
||||
|
||||
@@ -3,6 +3,7 @@ import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { teamFlagUrl } from '../utils/teamFlag';
|
||||
import { matchPhaseLabel, type MatchPhase } from '../utils/matchPhase';
|
||||
import { formatLocalMatchDateTime } from '@thebet365/shared';
|
||||
|
||||
const props = defineProps<{
|
||||
match: {
|
||||
@@ -17,10 +18,18 @@ const props = defineProps<{
|
||||
bettingOpen?: boolean;
|
||||
matchPhase?: MatchPhase;
|
||||
score?: {
|
||||
htHome: number;
|
||||
htAway: number;
|
||||
ftHome: number;
|
||||
ftAway: number;
|
||||
htHome: number | null;
|
||||
htAway: number | null;
|
||||
ftHome: number | null;
|
||||
ftAway: number | null;
|
||||
homeCorners?: number | null;
|
||||
awayCorners?: number | null;
|
||||
homeYellowCards?: number | null;
|
||||
awayYellowCards?: number | null;
|
||||
homeRedCards?: number | null;
|
||||
awayRedCards?: number | null;
|
||||
homeCards?: number | null;
|
||||
awayCards?: number | null;
|
||||
} | null;
|
||||
};
|
||||
}>();
|
||||
@@ -30,16 +39,10 @@ const emit = defineEmits<{ bet: [id: string] }>();
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
function formatKickoff(startTime: string) {
|
||||
const d = new Date(startTime);
|
||||
const now = new Date();
|
||||
const isToday =
|
||||
d.getFullYear() === now.getFullYear() &&
|
||||
d.getMonth() === now.getMonth() &&
|
||||
d.getDate() === now.getDate();
|
||||
const timeStr = d.toLocaleTimeString(locale.value, { hour: '2-digit', minute: '2-digit' });
|
||||
if (isToday) return `${t('bet.today')} ${timeStr}`;
|
||||
const dateStr = d.toLocaleDateString(locale.value, { month: 'numeric', day: 'numeric' });
|
||||
return `${dateStr} ${timeStr}`;
|
||||
return formatLocalMatchDateTime(startTime, locale.value, {
|
||||
variant: 'compact',
|
||||
todayLabel: t('bet.today'),
|
||||
});
|
||||
}
|
||||
|
||||
const kickoffText = computed(() => formatKickoff(props.match.startTime));
|
||||
@@ -64,7 +67,7 @@ const phaseLabel = computed(() => matchPhaseLabel(t, phase.value));
|
||||
|
||||
const liveScoreText = computed(() => {
|
||||
const s = props.match.score;
|
||||
if (!s) return '';
|
||||
if (!s || s.ftHome == null || s.ftAway == null) return '';
|
||||
return `${s.ftHome} - ${s.ftAway}`;
|
||||
});
|
||||
</script>
|
||||
@@ -216,8 +219,11 @@ const liveScoreText = computed(() => {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
line-height: 1.15;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
max-width: 96px;
|
||||
overflow-wrap: anywhere;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
|
||||
@@ -12,7 +12,12 @@ const props = withDefaults(
|
||||
{ size: 'md' },
|
||||
);
|
||||
|
||||
const useCustomLogo = computed(() => Boolean(props.logoUrl?.trim()));
|
||||
function isCustomLogo(url?: string | null) {
|
||||
const value = url?.trim();
|
||||
return Boolean(value && !value.includes('flagcdn.com'));
|
||||
}
|
||||
|
||||
const useCustomLogo = computed(() => isCustomLogo(props.logoUrl));
|
||||
const src = computed(() =>
|
||||
teamFlagUrl(props.teamCode, props.teamName, props.logoUrl),
|
||||
);
|
||||
|
||||
@@ -9,27 +9,34 @@ const props = defineProps<{
|
||||
id: string;
|
||||
selectionCode: string;
|
||||
selectionName: string;
|
||||
selectionDisplayName?: string;
|
||||
odds: string;
|
||||
oddsVersion: string;
|
||||
}>;
|
||||
stakes: Record<string, number>;
|
||||
isSelected: (id: string) => boolean;
|
||||
locked?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:stakes': [Record<string, number>];
|
||||
pick: [id: string];
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const columns = computed(() =>
|
||||
groupCorrectScoreSelections(props.selections, props.marketType, t),
|
||||
groupCorrectScoreSelections(
|
||||
props.selections.map((s) => ({
|
||||
...s,
|
||||
selectionName: s.selectionDisplayName?.trim() || s.selectionName,
|
||||
})),
|
||||
props.marketType,
|
||||
t,
|
||||
),
|
||||
);
|
||||
|
||||
function setStake(sel: CsSelection, raw: string) {
|
||||
function onPick(sel: CsSelection) {
|
||||
if (props.locked) return;
|
||||
const n = Math.max(0, Number(raw) || 0);
|
||||
emit('update:stakes', { ...props.stakes, [sel.id]: n });
|
||||
emit('pick', sel.id);
|
||||
}
|
||||
|
||||
function formatOdds(odds: string) {
|
||||
@@ -48,21 +55,18 @@ function formatOdds(odds: string) {
|
||||
|
||||
<div class="cols-grid">
|
||||
<div v-for="colKey in ['home', 'draw', 'away'] as const" :key="colKey" class="col">
|
||||
<div v-for="sel in columns[colKey]" :key="sel.id" class="score-card">
|
||||
<button
|
||||
v-for="sel in columns[colKey]"
|
||||
:key="sel.id"
|
||||
type="button"
|
||||
class="score-card"
|
||||
:class="{ selected: isSelected(sel.id), 'score-card--locked': locked }"
|
||||
:disabled="locked"
|
||||
@click="onPick(sel)"
|
||||
>
|
||||
<span class="score-line">{{ sel.scoreDisplay }}</span>
|
||||
<span class="odds">{{ formatOdds(sel.odds) }}</span>
|
||||
<input
|
||||
type="number"
|
||||
class="stake-input"
|
||||
min="0"
|
||||
step="1"
|
||||
inputmode="decimal"
|
||||
:placeholder="t('bet.stake_placeholder')"
|
||||
:value="stakes[sel.id] ?? ''"
|
||||
:disabled="locked"
|
||||
@input="setStake(sel, ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -77,7 +81,7 @@ function formatOdds(odds: string) {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.cs-panel--locked .stake-input {
|
||||
.cs-panel--locked .score-card {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -108,10 +112,29 @@ function formatOdds(odds: string) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 4px 3px;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
min-height: 42px;
|
||||
padding: 6px 3px;
|
||||
background: #161616;
|
||||
border: 1px solid #282828;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.score-card.selected {
|
||||
border-color: var(--primary);
|
||||
background: rgba(212, 175, 55, 0.1);
|
||||
}
|
||||
|
||||
.score-card--locked {
|
||||
background: #111;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.score-card--locked .score-line,
|
||||
.score-card--locked .odds {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.score-line {
|
||||
@@ -125,27 +148,4 @@ function formatOdds(odds: string) {
|
||||
font-weight: 700;
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.stake-input {
|
||||
width: 100%;
|
||||
padding: 4px 2px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #2a2a2a;
|
||||
background: #0a0a0a;
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.stake-input:focus {
|
||||
border-color: var(--border-gold-soft);
|
||||
}
|
||||
|
||||
.stake-input::-webkit-outer-spin-button,
|
||||
.stake-input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,19 +7,24 @@ const props = defineProps<{
|
||||
id: string;
|
||||
selectionCode?: string;
|
||||
selectionName: string;
|
||||
selectionDisplayName?: string;
|
||||
odds: string;
|
||||
}[];
|
||||
isSelected: (id: string) => boolean;
|
||||
compact?: boolean;
|
||||
locked?: boolean;
|
||||
lineValue?: string | number | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{ pick: [id: string] }>();
|
||||
const { t } = useI18n();
|
||||
|
||||
function label(sel: (typeof props.selections)[number]) {
|
||||
if (sel.selectionDisplayName?.trim()) return sel.selectionDisplayName;
|
||||
if (sel.selectionCode) {
|
||||
return resolveSelectionLabel(t, sel.selectionCode, sel.selectionName);
|
||||
return resolveSelectionLabel(t, sel.selectionCode, sel.selectionName, {
|
||||
lineValue: props.lineValue,
|
||||
});
|
||||
}
|
||||
return sel.selectionName;
|
||||
}
|
||||
|
||||
@@ -1,801 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useBetSlipStore } from '../../stores/betSlip';
|
||||
import { usePlayerMatches, type ParlayMatch } from '../../composables/usePlayerMatches';
|
||||
import { useAuthStore } from '../../stores/auth';
|
||||
import { PARLAY_MAX_LEGS, canSelectForParlay } from '@thebet365/shared';
|
||||
import { PARLAY_MARKET_TYPES, PARLAY_SELECTION_KEYS, PARLAY_MARKET_GROUPS } from '../../utils/parlayColumns';
|
||||
import BetGuideHelp from '../BetGuideHelp.vue';
|
||||
import GoldSpinner from '../GoldSpinner.vue';
|
||||
import TeamEmblem from '../TeamEmblem.vue';
|
||||
import cardBg from '../../assets/images/card-bg.webp';
|
||||
import { matchPhaseLabel, type MatchPhase } from '../../utils/matchPhase';
|
||||
|
||||
const matchCardBg = `url(${cardBg})`;
|
||||
import { useOnLocaleChange } from '../../composables/useOnLocaleChange';
|
||||
|
||||
type TimeFilter = 'all' | 'today';
|
||||
|
||||
interface Selection {
|
||||
id: string;
|
||||
selectionCode: string;
|
||||
selectionName: string;
|
||||
odds: string;
|
||||
oddsVersion: string;
|
||||
}
|
||||
|
||||
interface Market {
|
||||
id: string;
|
||||
marketType: string;
|
||||
lineValue?: string | number | null;
|
||||
allowParlay?: boolean;
|
||||
selections: Selection[];
|
||||
}
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const slip = useBetSlipStore();
|
||||
const auth = useAuthStore();
|
||||
|
||||
function goLogin() {
|
||||
auth.showLoginPrompt('/bet');
|
||||
}
|
||||
|
||||
const { parlayMatches, parlayLoading, loadParlay } = usePlayerMatches();
|
||||
const matches = parlayMatches;
|
||||
const loading = parlayLoading;
|
||||
const timeFilter = ref<TimeFilter>('all');
|
||||
const leagueFilter = ref('');
|
||||
const showClosed = ref(false);
|
||||
const collapsed = ref<Set<string>>(new Set());
|
||||
|
||||
const parlayMarketKeys = PARLAY_MARKET_TYPES.map((c) => c.key);
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
useOnLocaleChange(async () => {
|
||||
await loadParlay(true);
|
||||
syncCollapsedAfterLoad();
|
||||
});
|
||||
|
||||
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));
|
||||
return Number.isFinite(n) ? n : null;
|
||||
}
|
||||
|
||||
function isParlayEligibleMarket(market: Market) {
|
||||
if (!market.selections.length) return false;
|
||||
return canSelectForParlay({
|
||||
marketType: market.marketType,
|
||||
lineValue: parseLine(market.lineValue),
|
||||
allowParlay: market.allowParlay ?? true,
|
||||
}).ok;
|
||||
}
|
||||
|
||||
function hasParlayMarkets(m: ParlayMatch) {
|
||||
return parlayMarketKeys.some((key) => {
|
||||
const market = m.markets?.find((mk) => mk.marketType === key);
|
||||
return market && isParlayEligibleMarket(market);
|
||||
});
|
||||
}
|
||||
|
||||
function getMarket(m: ParlayMatch, marketType: string) {
|
||||
return m.markets?.find((mk) => mk.marketType === marketType);
|
||||
}
|
||||
|
||||
function dayStart(d: Date) {
|
||||
const x = new Date(d);
|
||||
x.setHours(0, 0, 0, 0);
|
||||
return x;
|
||||
}
|
||||
|
||||
function isKickoffToday(startTime: string) {
|
||||
const kick = new Date(startTime);
|
||||
const now = new Date();
|
||||
const start = dayStart(now);
|
||||
const end = new Date(start);
|
||||
end.setDate(end.getDate() + 1);
|
||||
return kick >= start && kick < end;
|
||||
}
|
||||
|
||||
const filteredMatches = computed(() => {
|
||||
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);
|
||||
}
|
||||
if (!showClosed.value) {
|
||||
list = list.filter((m) => {
|
||||
const phase = m.matchPhase ?? (m.bettingOpen === false ? 'closed_pending' : 'open');
|
||||
return phase === 'open' || phase === undefined;
|
||||
});
|
||||
}
|
||||
return list;
|
||||
});
|
||||
|
||||
function formatKickoff(startTime: string) {
|
||||
return new Date(startTime).toLocaleString(locale.value, {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
});
|
||||
}
|
||||
|
||||
function formatOdds(odds: string) {
|
||||
const n = parseFloat(odds);
|
||||
return Number.isFinite(n) ? n.toFixed(2) : odds;
|
||||
}
|
||||
|
||||
function selLabel(sel: Selection) {
|
||||
const key = PARLAY_SELECTION_KEYS[sel.selectionCode];
|
||||
if (key) return t(`bet.${key}`);
|
||||
return sel.selectionName.slice(0, 2);
|
||||
}
|
||||
|
||||
function colLabel(labelKey: string) {
|
||||
return t(`bet.${labelKey}`);
|
||||
}
|
||||
|
||||
function isPicked(selectionId: string) {
|
||||
return slip.items.some((i) => i.selectionId === selectionId);
|
||||
}
|
||||
|
||||
const parlayHint = ref('');
|
||||
|
||||
function pickSelection(match: ParlayMatch, market: Market, sel: Selection) {
|
||||
if (match.bettingOpen === false) return;
|
||||
const err = slip.addParlayLeg({
|
||||
selectionId: sel.id,
|
||||
oddsVersion: String(sel.oddsVersion),
|
||||
matchId: match.id,
|
||||
matchName: `${match.homeTeamName} vs ${match.awayTeamName}`,
|
||||
selectionName: `${selLabel(sel)} ${formatOdds(sel.odds)}`,
|
||||
odds: parseFloat(sel.odds),
|
||||
marketType: market.marketType,
|
||||
lineValue: parseLine(market.lineValue),
|
||||
allowParlay: market.allowParlay,
|
||||
});
|
||||
if (err === 'MAX_LEGS') parlayHint.value = t('bet.parlay_max_legs');
|
||||
else if (err === 'QUARTER_LINE') parlayHint.value = t('bet.parlay_block_quarter');
|
||||
else if (err === 'OUTRIGHT') parlayHint.value = t('bet.parlay_block_outright');
|
||||
else if (err === 'NOT_ALLOWED') parlayHint.value = t('bet.parlay_block_not_allowed');
|
||||
else if (err === 'SAME_MATCH') parlayHint.value = t('bet.parlay_same_match');
|
||||
else parlayHint.value = '';
|
||||
}
|
||||
|
||||
function openSlip() {
|
||||
if (!auth.token) {
|
||||
goLogin();
|
||||
return;
|
||||
}
|
||||
slip.openDrawer();
|
||||
}
|
||||
|
||||
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">
|
||||
<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>
|
||||
<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>
|
||||
<button
|
||||
type="button"
|
||||
class="phase-toggle"
|
||||
:class="{ 'phase-toggle--active': showClosed }"
|
||||
@click="showClosed = !showClosed"
|
||||
>
|
||||
{{ showClosed ? t('bet.show_all_matches') : t('bet.show_open_only') }}
|
||||
</button>
|
||||
<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">
|
||||
<GoldSpinner :size="36" />
|
||||
</div>
|
||||
|
||||
<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),
|
||||
'match-card--phase': (match.matchPhase ?? (match.bettingOpen === false ? 'closed_pending' : 'open')) !== 'open',
|
||||
}"
|
||||
>
|
||||
<button type="button" class="match-head" @click="toggleCollapse(match.id)">
|
||||
<span
|
||||
v-if="(match.matchPhase ?? (match.bettingOpen === false ? 'closed_pending' : 'open')) === 'settled'"
|
||||
class="status-tag status-tag--settled"
|
||||
>{{ matchPhaseLabel(t, 'settled') }}</span>
|
||||
<span
|
||||
v-else-if="(match.matchPhase ?? (match.bettingOpen === false ? 'closed_pending' : 'open')) === 'closed_pending'"
|
||||
class="status-tag status-tag--pending"
|
||||
>{{ matchPhaseLabel(t, 'closed_pending') }}</span>
|
||||
|
||||
<div class="match-head-top">
|
||||
<span class="toggle-icon" :class="{ open: !collapsed.has(match.id) }" aria-hidden="true">
|
||||
<span class="toggle-mark">{{ collapsed.has(match.id) ? '+' : '−' }}</span>
|
||||
</span>
|
||||
<span class="m-league">{{ match.leagueName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="match-head-teams">
|
||||
<div class="m-team home">
|
||||
<TeamEmblem
|
||||
size="sm"
|
||||
:team-code="match.homeTeamCode"
|
||||
:team-name="match.homeTeamName"
|
||||
:logo-url="match.homeTeamLogoUrl"
|
||||
/>
|
||||
<span class="m-name">{{ match.homeTeamName }}</span>
|
||||
</div>
|
||||
<div class="m-center">
|
||||
<span
|
||||
v-if="(match.matchPhase ?? (match.bettingOpen === false ? 'closed_pending' : 'open')) !== 'open' && match.score"
|
||||
class="m-score"
|
||||
>
|
||||
{{ match.score.ftHome }} - {{ match.score.ftAway }}
|
||||
</span>
|
||||
<span v-else class="m-time">{{ formatKickoff(match.startTime) }}</span>
|
||||
</div>
|
||||
<div class="m-team away">
|
||||
<span class="m-name">{{ match.awayTeamName }}</span>
|
||||
<TeamEmblem
|
||||
size="sm"
|
||||
:team-code="match.awayTeamCode"
|
||||
:team-name="match.awayTeamName"
|
||||
:logo-url="match.awayTeamLogoUrl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div v-show="!collapsed.has(match.id)" class="market-blocks">
|
||||
<div v-for="group in PARLAY_MARKET_GROUPS" :key="group.headerKey" class="market-group">
|
||||
<div class="group-header">{{ colLabel(group.headerKey) }}</div>
|
||||
<div
|
||||
v-for="col in group.columns"
|
||||
:key="col.key"
|
||||
class="market-row"
|
||||
>
|
||||
<span class="block-label">{{ colLabel(col.labelKey) }}</span>
|
||||
<div class="block-btns">
|
||||
<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),
|
||||
'odd-btn--locked': match.bettingOpen === false,
|
||||
}"
|
||||
:disabled="match.bettingOpen === false"
|
||||
@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>
|
||||
|
||||
<div v-else class="empty">
|
||||
<span class="empty-icon" aria-hidden="true">⚽</span>
|
||||
<p>{{ t('bet.parlay_empty') }}</p>
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="showParlayFoot" class="parlay-foot-fixed">
|
||||
<p v-if="parlayHint" class="foot-hint foot-hint--warn">{{ parlayHint }}</p>
|
||||
<p v-else-if="slip.count < 2" class="foot-hint">{{ t('bet.parlay_need_more') }}</p>
|
||||
<p v-else-if="slip.count > PARLAY_MAX_LEGS" class="foot-hint">{{ t('bet.parlay_max_legs') }}</p>
|
||||
<p v-else class="foot-meta">
|
||||
{{ t('bet.bet_slip') }} ({{ slip.count }}) · {{ t('bet.parlay') }}
|
||||
{{ slip.totalOdds.toFixed(2) }}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="market-foot-btn"
|
||||
:disabled="!slip.canPlaceParlay"
|
||||
@click="openSlip"
|
||||
>
|
||||
{{ footConfirmLabel }}
|
||||
</button>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.parlay-panel {
|
||||
padding: 0 12px 16px;
|
||||
}
|
||||
|
||||
.parlay-panel.has-fixed-foot {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
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;
|
||||
}
|
||||
|
||||
.phase-toggle {
|
||||
padding: 7px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
background: #141414;
|
||||
border: 1px solid #333;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.phase-toggle--active {
|
||||
color: var(--primary-light);
|
||||
border-color: var(--primary);
|
||||
background: rgba(200, 168, 78, 0.08);
|
||||
}
|
||||
|
||||
.parlay-foot-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(50px + env(safe-area-inset-bottom, 0px));
|
||||
z-index: 95;
|
||||
padding: 10px 12px 10px;
|
||||
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);
|
||||
}
|
||||
|
||||
.foot-hint,
|
||||
.foot-meta {
|
||||
margin: 0 0 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.foot-hint--warn {
|
||||
color: var(--danger);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.foot-meta {
|
||||
color: var(--primary-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.market-foot-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 9px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
background: rgba(212, 175, 55, 0.1);
|
||||
color: var(--primary-light);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.market-foot-btn:disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.match-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.match-card {
|
||||
position: relative;
|
||||
background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
|
||||
border: 1px solid rgba(140, 140, 140, 0.35);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.match-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(100, 100, 100, 0.08) 0%, transparent 50%, rgba(80, 80, 80, 0.05) 100%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.match-card.collapsed {
|
||||
border-color: #222;
|
||||
}
|
||||
|
||||
.match-head {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
padding: 10px 12px 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.match-head::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: v-bind(matchCardBg) center / 100% 100% no-repeat;
|
||||
opacity: 0.25;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.match-head:active {
|
||||
background: rgba(255, 255, 255, 0.015);
|
||||
}
|
||||
|
||||
.match-head-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.match-head-teams {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.m-team {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.m-team.away {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.m-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
min-width: 50px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.m-name {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.m-vs {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: #555;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.m-time {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
flex-shrink: 0;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: #141414;
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-icon.open {
|
||||
border-color: var(--border-gold-soft);
|
||||
}
|
||||
|
||||
.toggle-mark {
|
||||
color: var(--primary-light);
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.m-league {
|
||||
flex: 1;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.match-head :deep(.team-emblem) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.market-blocks {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 8px 10px 10px;
|
||||
border-top: 1px solid rgba(140, 140, 140, 0.15);
|
||||
}
|
||||
|
||||
.market-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 4px 6px;
|
||||
}
|
||||
|
||||
.group-header {
|
||||
grid-column: 1 / -1;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #888;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 0 2px 2px;
|
||||
border-bottom: 1px solid #1e1e1e;
|
||||
}
|
||||
|
||||
.market-row {
|
||||
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;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.block-btns {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.odd-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1px;
|
||||
padding: 5px 8px;
|
||||
border-radius: 4px;
|
||||
background: #0d0d0d;
|
||||
border: 1px solid #333;
|
||||
min-width: 44px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.odd-btn.picked {
|
||||
border-color: var(--primary);
|
||||
background: rgba(212, 175, 55, 0.15);
|
||||
}
|
||||
|
||||
.odd-btn--locked {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.odd-btn--locked .odd-label,
|
||||
.odd-btn--locked .odd-val {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.match-card--phase {
|
||||
opacity: 0.94;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
padding: 3px 10px;
|
||||
border-radius: 0 6px 0 8px;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.status-tag--settled {
|
||||
background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 100%);
|
||||
color: #8a9ab8;
|
||||
border-bottom: 1px solid rgba(120, 140, 180, 0.3);
|
||||
border-left: 1px solid rgba(120, 140, 180, 0.3);
|
||||
}
|
||||
|
||||
.status-tag--pending {
|
||||
background: linear-gradient(180deg, #3a3a2a 0%, #28251a 100%);
|
||||
color: #c8a84e;
|
||||
border-bottom: 1px solid rgba(200, 168, 78, 0.3);
|
||||
border-left: 1px solid rgba(200, 168, 78, 0.3);
|
||||
}
|
||||
|
||||
.m-score {
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.odd-label {
|
||||
font-size: 8.5px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.odd-val {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.market-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 36px;
|
||||
color: #444;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.state,
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 48px 16px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
display: block;
|
||||
font-size: 40px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.empty p {
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user