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

feat: split admin dashboard, improve match ops, and player closed-match UX

Browse Source 
Admin: add match/player overview sub-nav; refine settlement flow and league
match management UI; improve action button enabled/disabled styles; enhance
logo upload and outright odds sync.

API: expose matchPhase/bettingOpen for closed matches; league publish guards;
settlement preview with auto score save; outright team auto-sync.

Player: watermark for closed/settled states; keep match and bet details visible;
remove default login credentials.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mars
2026-06-10 13:00:14 +08:00
parent 6124313369
commit 03f54ca689
43 changed files with 2787 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,8 @@ import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { formatMoney } from '../utils/localeDisplay';
import StatusWatermark from './StatusWatermark.vue';
import { matchPhaseLabel, matchPhaseVariant, type MatchPhase } from '../utils/matchPhase';
export interface BetScore {
ht: string | null;
@@ -24,6 +26,7 @@ export interface BetHistoryItem {
isParlay?: boolean;
legCount?: number;
matchScore?: BetScore | null;
matchPhase?: MatchPhase | null;
legs?: Array<{
marketLabel: string;
selectionName: string;
@@ -48,6 +51,22 @@ const statusKey = computed(() => {
const statusLabel = computed(() => t(`history.status_${statusKey.value}`));
const watermarkLabel = computed(() => {
if (statusKey.value === 'pending' && props.bet.matchPhase === 'closed_pending') {
return matchPhaseLabel(t, 'closed_pending');
}
if (statusKey.value === 'pending' && props.bet.matchPhase === 'settled') {
return matchPhaseLabel(t, 'settled');
}
return statusLabel.value;
});
const watermarkVariant = computed(() => {
if (statusKey.value === 'pending' && props.bet.matchPhase === 'closed_pending') return 'closed';
if (statusKey.value === 'pending' && props.bet.matchPhase === 'settled') return 'settled';
return statusKey.value;
});
const placedDate = computed(() =>
new Date(props.bet.placedAt).toLocaleDateString(locale.value, {
month: 'short', day: 'numeric',
@@ -87,10 +106,7 @@ function goDetail() {
<template>
<article class="bet-card" @click="goDetail">
<span
class="watermark"
:class="statusKey"
>{{ statusLabel }}</span>
<StatusWatermark :label="watermarkLabel" :variant="watermarkVariant" />
<div class="card-left">
<span class="title">{{ title }}</span>
<span class="subtitle">{{ subtitle }} · {{ placedDate }}</span>
@@ -125,28 +141,6 @@ function goDetail() {
background: rgba(255, 255, 255, 0.02);
}
.watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-35deg);
font-size: 28px;
font-weight: 900;
letter-spacing: 0.06em;
white-space: nowrap;
pointer-events: none;
text-transform: uppercase;
opacity: 0.18;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.watermark.won { color: #3db865; }
.watermark.lost { color: #e05050; }
.watermark.push { color: #888; }
.watermark.pending { color: #e8c84a; }
.card-left {
flex: 1;
min-width: 0;

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

@@ -16,6 +16,14 @@ defineProps<{
homeTeamLogoUrl?: string | null;
awayTeamLogoUrl?: string | null;
startTime: string;
bettingOpen?: boolean;
matchPhase?: import('../utils/matchPhase').MatchPhase;
score?: {
htHome: number;
htAway: number;
ftHome: number;
ftAway: number;
} | null;
}[];
}>();

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

@@ -2,6 +2,8 @@
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { teamFlagUrl } from '../utils/teamFlag';
import StatusWatermark from './StatusWatermark.vue';
import { matchPhaseLabel, matchPhaseVariant, type MatchPhase } from '../utils/matchPhase';
const props = defineProps<{
match: {
@@ -13,6 +15,14 @@ const props = defineProps<{
homeTeamLogoUrl?: string | null;
awayTeamLogoUrl?: string | null;
startTime: string;
bettingOpen?: boolean;
matchPhase?: MatchPhase;
score?: {
htHome: number;
htAway: number;
ftHome: number;
ftAway: number;
} | null;
};
}>();
@@ -44,12 +54,36 @@ const awayFlagUrl = computed(() =>
const homeIsLogo = computed(() => Boolean(props.match.homeTeamLogoUrl?.trim()));
const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
const bettingOpen = computed(() => props.match.bettingOpen !== false);
const phase = computed(
() => props.match.matchPhase ?? (bettingOpen.value ? 'open' : 'closed_pending'),
);
const phaseLabel = computed(() => matchPhaseLabel(t, phase.value));
const liveScoreText = computed(() => {
const s = props.match.score;
if (!s) return '';
return `${s.ftHome} - ${s.ftAway}`;
});
</script>
<template>
<article class="match-card">
<article
class="match-card"
:class="{ 'match-card--phase': phase !== 'open' }"
@click="emit('bet', match.id)"
>
<StatusWatermark
v-if="phase !== 'open'"
:label="phaseLabel"
:variant="matchPhaseVariant(phase)"
size="sm"
/>
<div class="teams-row">
<!-- Home -->
<div class="team">
<span class="team-name">{{ match.homeTeamName }}</span>
<img
@@ -61,13 +95,12 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
/>
</div>
<!-- Center -->
<div class="center-col">
<span class="kickoff">{{ kickoffText }}</span>
<span class="vs">VS</span>
<span v-if="phase !== 'open' && liveScoreText" class="live-score">{{ liveScoreText }}</span>
<span v-else class="vs">VS</span>
</div>
<!-- Away -->
<div class="team">
<span class="team-name">{{ match.awayTeamName }}</span>
<img
@@ -80,14 +113,20 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
</div>
</div>
<button type="button" class="bet-btn btn-gold-outline" @click="emit('bet', match.id)">
{{ t('bet.place_bet_short') }}
<button
type="button"
class="bet-btn"
:class="bettingOpen ? 'btn-gold-outline' : 'bet-btn--view'"
@click.stop="emit('bet', match.id)"
>
{{ bettingOpen ? t('bet.place_bet_short') : t('bet.view_match') }}
</button>
</article>
</template>
<style scoped>
.match-card {
position: relative;
background: #0d0d0d;
border: 1px solid rgba(255, 215, 0, 0.25);
border-radius: 6px;
@@ -97,9 +136,17 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
align-items: center;
gap: 8px;
min-width: 0;
overflow: hidden;
cursor: pointer;
}
.match-card--phase {
border-color: rgba(140, 140, 140, 0.35);
}
.teams-row {
position: relative;
z-index: 2;
display: flex;
align-items: center;
width: 100%;
@@ -132,6 +179,10 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
align-self: stretch;
}
.match-card--phase .team-name {
color: #d8d8d8;
}
.team-flag {
width: 72px;
height: 48px;
@@ -165,6 +216,14 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.live-score {
font-size: 20px;
font-weight: 900;
color: #fff;
line-height: 1;
letter-spacing: 0.04em;
}
.vs {
font-size: 22px;
font-weight: 900;
@@ -175,6 +234,8 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
}
.bet-btn {
position: relative;
z-index: 2;
width: auto;
min-width: 80px;
padding: 5px 24px;
@@ -183,4 +244,10 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
letter-spacing: 0.04em;
line-height: 1.2;
}
.bet-btn--view {
background: #1a1a1a;
border: 1px solid #444;
color: #aaa;
}
</style>

68
apps/player/src/components/StatusWatermark.vue Normal file
View File

@@ -0,0 +1,68 @@
<script setup lang="ts">
withDefaults(
defineProps<{
label: string;
variant?: 'pending' | 'won' | 'lost' | 'push' | 'closed' | 'settled';
size?: 'sm' | 'md' | 'lg';
}>(),
{ variant: 'pending', size: 'md' },
);
</script>
<template>
<span class="status-watermark" :class="[variant, size]">{{ label }}</span>
</template>
<style scoped>
.status-watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-35deg);
font-weight: 900;
letter-spacing: 0.06em;
white-space: nowrap;
pointer-events: none;
opacity: 0.2;
max-width: 92%;
overflow: hidden;
text-overflow: ellipsis;
z-index: 1;
}
.status-watermark.sm {
font-size: 22px;
}
.status-watermark.md {
font-size: 28px;
}
.status-watermark.lg {
font-size: 34px;
}
.status-watermark.won {
color: #3db865;
}
.status-watermark.lost {
color: #e05050;
}
.status-watermark.push {
color: #888;
}
.status-watermark.pending {
color: #e8c84a;
}
.status-watermark.closed {
color: #c9a84a;
}
.status-watermark.settled {
color: #7a9ab8;
}
</style>

13
apps/player/src/components/match-detail/CorrectScorePanel.vue
View File

@@ -13,6 +13,7 @@ const props = defineProps<{
oddsVersion: string;
}>;
stakes: Record<string, number>;
locked?: boolean;
}>();
const emit = defineEmits<{
@@ -26,6 +27,7 @@ const columns = computed(() =>
);
function setStake(sel: CsSelection, raw: string) {
if (props.locked) return;
const n = Math.max(0, Number(raw) || 0);
emit('update:stakes', { ...props.stakes, [sel.id]: n });
}
@@ -37,7 +39,7 @@ function formatOdds(odds: string) {
</script>
<template>
<div class="cs-panel">
<div class="cs-panel" :class="{ 'cs-panel--locked': locked }">
<div class="cols-head">
<span>{{ t('bet.col_home') }}</span>
<span>{{ t('bet.col_draw') }}</span>
@@ -57,6 +59,7 @@ function formatOdds(odds: string) {
inputmode="decimal"
:placeholder="t('bet.stake_placeholder')"
:value="stakes[sel.id] ?? ''"
:disabled="locked"
@input="setStake(sel, ($event.target as HTMLInputElement).value)"
/>
</div>
@@ -70,6 +73,14 @@ function formatOdds(odds: string) {
padding: 6px 8px 0;
}
.cs-panel--locked {
opacity: 0.72;
}
.cs-panel--locked .stake-input {
cursor: not-allowed;
}
.cols-head {
display: grid;
grid-template-columns: repeat(3, 1fr);

28
apps/player/src/components/match-detail/MarketSelectionsPanel.vue
View File

@@ -11,6 +11,7 @@ const props = defineProps<{
}[];
isSelected: (id: string) => boolean;
compact?: boolean;
locked?: boolean;
}>();
const emit = defineEmits<{ pick: [id: string] }>();
@@ -22,18 +23,24 @@ function label(sel: (typeof props.selections)[number]) {
}
return sel.selectionName;
}
function onPick(id: string) {
if (props.locked) return;
emit('pick', id);
}
</script>
<template>
<div class="wrap" :class="{ compact }">
<div class="wrap" :class="{ compact, locked }">
<div class="panel">
<button
v-for="sel in selections"
:key="sel.id"
type="button"
class="odds-btn"
:class="{ selected: isSelected(sel.id) }"
@click="emit('pick', sel.id)"
:class="{ selected: isSelected(sel.id), 'odds-btn--locked': locked }"
:disabled="locked"
@click="onPick(sel.id)"
>
<span class="label">{{ label(sel) }}</span>
<span class="odds">{{ sel.odds }}</span>
@@ -48,6 +55,10 @@ function label(sel: (typeof props.selections)[number]) {
background: #0c0c0c;
}
.wrap.locked {
opacity: 0.78;
}
.panel {
display: grid;
grid-template-columns: repeat(3, 1fr);
@@ -73,6 +84,17 @@ function label(sel: (typeof props.selections)[number]) {
background: rgba(212, 175, 55, 0.1);
}
.odds-btn--locked {
background: #111;
border-color: #333;
cursor: not-allowed;
}
.odds-btn--locked .label,
.odds-btn--locked .odds {
color: #666;
}
.label {
font-size: 9px;
color: var(--text-muted);

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

@@ -8,6 +8,8 @@ import { PARLAY_MARKET_TYPES, PARLAY_SELECTION_KEYS, PARLAY_MARKET_GROUPS } from
import BetGuideHelp from '../BetGuideHelp.vue';
import GoldSpinner from '../GoldSpinner.vue';
import TeamEmblem from '../TeamEmblem.vue';
import StatusWatermark from '../StatusWatermark.vue';
import { matchPhaseLabel, matchPhaseVariant, type MatchPhase } from '../../utils/matchPhase';
import { useOnLocaleChange } from '../../composables/useOnLocaleChange';
type TimeFilter = 'all' | 'today';
@@ -39,6 +41,14 @@ interface ParlayMatch {
homeTeamLogoUrl?: string | null;
awayTeamLogoUrl?: string | null;
startTime: string;
bettingOpen?: boolean;
matchPhase?: MatchPhase;
score?: {
htHome: number;
htAway: number;
ftHome: number;
ftAway: number;
} | null;
markets: Market[];
}
@@ -213,6 +223,7 @@ function isPicked(selectionId: string) {
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),
@@ -280,8 +291,22 @@ function toggleCollapse(id: string) {
</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) }">
<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)">
<StatusWatermark
v-if="(match.matchPhase ?? (match.bettingOpen === false ? 'closed_pending' : 'open')) !== 'open'"
:label="matchPhaseLabel(t, match.matchPhase ?? 'closed_pending')"
:variant="matchPhaseVariant(match.matchPhase ?? 'closed_pending')"
size="sm"
/>
<div class="match-head-top">
<span class="m-league">{{ match.leagueName }}</span>
<span class="toggle-dot" :class="{ open: !collapsed.has(match.id) }">
@@ -299,7 +324,13 @@ function toggleCollapse(id: string) {
<span class="m-name">{{ match.homeTeamName }}</span>
</div>
<div class="m-center">
<span class="m-time">{{ formatKickoff(match.startTime) }}</span>
<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>
<span class="m-vs">VS</span>
</div>
<div class="m-team away">
@@ -335,7 +366,11 @@ function toggleCollapse(id: string) {
:key="sel.id"
type="button"
class="odd-btn"
:class="{ picked: isPicked(sel.id) }"
: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>
@@ -467,6 +502,8 @@ function toggleCollapse(id: string) {
}
.match-head {
position: relative;
overflow: hidden;
width: 100%;
display: flex;
flex-direction: column;
@@ -647,6 +684,27 @@ function toggleCollapse(id: string) {
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;
}
.m-score {
font-size: 12px;
font-weight: 800;
color: #fff;
}
.odd-label {
font-size: 8.5px;
font-weight: 700;

9
apps/player/src/main.ts
View File

@@ -196,6 +196,9 @@ const i18n = createI18n({
download: '下载',
reward_active: '奖励生效中!',
market_closed: '暂未开盘',
match_phase_closed_pending: '封盘待结算',
match_phase_settled: '已结算',
view_match: '查看赛况',
expand_market: '展开玩法',
collapse_market: '收起玩法',
market_cs: '波胆',
@@ -502,6 +505,9 @@ const i18n = createI18n({
download: 'Download',
reward_active: 'Reward active!',
market_closed: 'Not open',
match_phase_closed_pending: 'Closed pending',
match_phase_settled: 'Settled',
view_match: 'View match',
expand_market: 'Expand',
collapse_market: 'Collapse',
market_cs: 'Correct Score',
@@ -814,6 +820,9 @@ const i18n = createI18n({
download: 'Muat turun',
reward_active: 'Ganjaran aktif!',
market_closed: 'Belum dibuka',
match_phase_closed_pending: 'Ditutup menunggu',
match_phase_settled: 'Selesai',
view_match: 'Lihat perlawanan',
expand_market: 'Kembang',
collapse_market: 'Tutup',
market_cs: 'Skor Tepat',

13
apps/player/src/utils/matchPhase.ts Normal file
View File

@@ -0,0 +1,13 @@
export type MatchPhase = 'open' | 'closed_pending' | 'settled';
export function matchPhaseLabel(t: (key: string) => string, phase?: MatchPhase | null) {
if (phase === 'closed_pending') return t('bet.match_phase_closed_pending');
if (phase === 'settled') return t('bet.match_phase_settled');
return '';
}
export function matchPhaseVariant(phase?: MatchPhase | null): 'closed' | 'settled' | 'pending' {
if (phase === 'settled') return 'settled';
if (phase === 'closed_pending') return 'closed';
return 'pending';
}

22
apps/player/src/views/BetDetailView.vue
View File

@@ -6,6 +6,8 @@ import api from '../api';
import { formatMoney } from '../utils/localeDisplay';
import GoldSpinner from '../components/GoldSpinner.vue';
import { usePullToRefresh } from '../composables/usePullToRefresh';
import StatusWatermark from '../components/StatusWatermark.vue';
import { matchPhaseLabel, matchPhaseVariant, type MatchPhase } from '../utils/matchPhase';
import type { BetHistoryItem } from '../components/BetHistoryCard.vue';
const route = useRoute();
@@ -122,6 +124,12 @@ const myPick = computed(() => {
if (ci < 0) return raw;
return raw.slice(0, ci + 2) + translateSel(raw.slice(ci + 2));
});
const matchPhase = computed(
(): MatchPhase | null => bet.value?.matchPhase ?? null,
);
const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
</script>
<template>
@@ -164,7 +172,13 @@ const myPick = computed(() => {
<div class="match-name">{{ matchTitle }}</div>
<!-- single bet: score comparison -->
<div v-if="!bet.isParlay" class="score-block">
<div v-if="!bet.isParlay" class="score-block" :class="{ 'score-block--phase': matchPhase && matchPhase !== 'open' }">
<StatusWatermark
v-if="matchPhase && matchPhase !== 'open'"
:label="matchPhaseText"
:variant="matchPhaseVariant(matchPhase)"
size="md"
/>
<!-- my pick row -->
<div class="row-label-val">
<span class="row-label">{{ t('history.my_pick') }}</span>
@@ -364,11 +378,17 @@ const myPick = computed(() => {
/* score block */
.score-block {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 8px;
}
.score-block--phase {
padding: 8px 0 4px;
}
.row-label-val {
display: flex;
justify-content: space-between;

10
apps/player/src/views/FootballView.vue
View File

@@ -11,6 +11,7 @@ import emptyMatchesImg from '../assets/images/empty-matches.svg';
import { useOnLocaleChange } from '../composables/useOnLocaleChange';
import GoldSpinner from '../components/GoldSpinner.vue';
import { usePullToRefresh } from '../composables/usePullToRefresh';
import type { MatchPhase } from '../utils/matchPhase';
type MainTab = 'matches' | 'outright' | 'parlay';
type TimeTab = 'today' | 'early';
@@ -29,6 +30,15 @@ interface Match {
leagueLogoUrl?: string | null;
displayOrder?: number;
isHot?: boolean;
status?: string;
bettingOpen?: boolean;
matchPhase?: MatchPhase;
score?: {
htHome: number;
htAway: number;
ftHome: number;
ftAway: number;
} | null;
}
interface LeagueGroup {

4
apps/player/src/views/LoginView.vue
View File

@@ -13,8 +13,8 @@ const { initFromUser } = useAppLocale();
const auth = useAuthStore();
const router = useRouter();
const captchaRef = ref<InstanceType<typeof RobotVerify> | null>(null);
const username = ref('player1');
const password = ref('Player@123');
const username = ref('');
const password = ref('');
const error = ref('');
const loading = ref(false);

76
apps/player/src/views/MatchDetailView.vue
View File

@@ -19,6 +19,8 @@ import { usePullToRefresh } from '../composables/usePullToRefresh';
import vsImg from '../assets/images/vs.png';
import GoldSpinner from '../components/GoldSpinner.vue';
import BetSuccessOverlay from '../components/BetSuccessOverlay.vue';
import StatusWatermark from '../components/StatusWatermark.vue';
import { matchPhaseLabel, matchPhaseVariant, type MatchPhase } from '../utils/matchPhase';
import cardBg from '../assets/images/card-bg.png';
const heroCardBg = `url(${cardBg})`;
@@ -59,6 +61,15 @@ interface MatchDetail {
startTime: string;
stage?: string | null;
groupName?: string | null;
status?: string;
bettingOpen?: boolean;
matchPhase?: MatchPhase;
score?: {
htHome: number;
htAway: number;
ftHome: number;
ftAway: number;
} | null;
markets: Market[];
}
@@ -96,6 +107,21 @@ const kickoff = computed(() => {
});
});
const bettingOpen = computed(() => match.value?.bettingOpen !== false);
const matchPhase = computed(
(): MatchPhase =>
match.value?.matchPhase ?? (bettingOpen.value ? 'open' : 'closed_pending'),
);
const phaseLabel = computed(() => matchPhaseLabel(t, matchPhase.value));
const liveScoreText = computed(() => {
const s = match.value?.score;
if (!s) return '';
return `${s.ftHome} - ${s.ftAway}`;
});
function marketLabel(marketType: string) {
const key = MARKET_I18N_KEY[marketType];
return key ? t(key) : marketType;
@@ -170,6 +196,7 @@ async function confirmCorrectScoreBets() {
}
async function placeCorrectScoreBets(marketType: string) {
if (!bettingOpen.value) return;
const market = marketsByType.value.get(marketType);
if (!market || !match.value) return;
const entries = market.selections.filter((s) => (correctScoreStakes.value[s.id] ?? 0) > 0);
@@ -228,7 +255,7 @@ function isSelected(id: string) {
}
function toggleSelection(sel: Selection, market: Market) {
if (!match.value) return;
if (!match.value || !bettingOpen.value) return;
slip.addItem({
selectionId: sel.id,
oddsVersion: String(sel.oddsVersion),
@@ -295,7 +322,13 @@ function hasSlipPickForMarket(marketType: string) {
<GoldSpinner :size="36" />
</div>
<template v-else-if="match">
<section class="match-hero">
<section class="match-hero" :class="{ 'match-hero--phase': matchPhase !== 'open' }">
<StatusWatermark
v-if="matchPhase !== 'open'"
:label="phaseLabel"
:variant="matchPhaseVariant(matchPhase)"
size="lg"
/>
<div class="hero-teams">
<!-- home -->
<div class="hero-team">
@@ -348,6 +381,7 @@ function hasSlipPickForMarket(marketType: string) {
</div>
<p class="kickoff">{{ t('bet.kickoff_time') }}{{ kickoff }}</p>
<p v-if="liveScoreText" class="live-score">{{ liveScoreText }}</p>
</section>
<section class="markets-section">
@@ -379,14 +413,22 @@ function hasSlipPickForMarket(marketType: string) {
@toggle="toggleMarket(marketType)"
/>
<template v-if="isExpanded(marketType) && marketsByType.get(marketType)">
<div class="market-panel-wrap" :class="{ locked: !bettingOpen }">
<StatusWatermark
v-if="!bettingOpen"
:label="phaseLabel"
:variant="matchPhaseVariant(matchPhase)"
size="md"
/>
<CorrectScorePanel
v-if="isCorrectScoreMarket(marketType)"
:market-type="marketType"
:selections="marketsByType.get(marketType)!.selections"
:locked="!bettingOpen"
v-model:stakes="correctScoreStakes"
/>
<button
v-if="isCorrectScoreMarket(marketType)"
v-if="isCorrectScoreMarket(marketType) && bettingOpen"
type="button"
class="market-foot-btn"
@click="openCorrectScoreConfirm(marketType)"
@@ -396,18 +438,20 @@ function hasSlipPickForMarket(marketType: string) {
<MarketSelectionsPanel
v-else
compact
:locked="!bettingOpen"
:selections="marketsByType.get(marketType)!.selections"
:is-selected="isSelected"
@pick="onPickSelection($event, marketType)"
/>
<button
v-if="!isCorrectScoreMarket(marketType) && hasSlipPickForMarket(marketType)"
v-if="!isCorrectScoreMarket(marketType) && bettingOpen && hasSlipPickForMarket(marketType)"
type="button"
class="market-foot-btn"
@click="openBetSlipDrawer"
>
{{ t('bet.cs_confirm_cell') }}
</button>
</div>
</template>
</div>
</div>
@@ -501,6 +545,19 @@ function hasSlipPickForMarket(marketType: string) {
pointer-events: none;
}
.match-hero--phase {
opacity: 0.98;
}
.market-panel-wrap {
position: relative;
overflow: hidden;
}
.market-panel-wrap.locked {
opacity: 0.82;
}
.kickoff {
position: relative;
z-index: 1;
@@ -511,6 +568,17 @@ function hasSlipPickForMarket(marketType: string) {
padding-left: 2px;
}
.live-score {
position: relative;
z-index: 2;
margin: 8px 0 0;
font-size: 28px;
font-weight: 900;
color: #fff;
text-align: center;
letter-spacing: 0.06em;
}
.hero-teams {
position: relative;
z-index: 1;