feat(player-desktop): 优化注单侧栏面板折叠、隐藏首页滚动条、默认选中联赛、主页添加近期热门快速下注
This commit is contained in:
@@ -857,6 +857,16 @@ onUnmounted(() => {
|
||||
<div class="betslip-panel">
|
||||
<div class="panel-head">
|
||||
<h3>{{ t('bet.bet_slip') || '投注单' }}</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="panel-close-btn"
|
||||
@click="slip.collapsePanel()"
|
||||
:aria-label="t('common.collapse') || '折叠'"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
|
||||
<path d="M13 17l5-5-5-5M6 17l5-5-5-5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="panel-tabs">
|
||||
@@ -1173,6 +1183,24 @@ onUnmounted(() => {
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.panel-close-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.panel-close-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.clear-slip-btn {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
|
||||
163
apps/player/src/components/desktop/DesktopBetSlipRail.vue
Normal file
163
apps/player/src/components/desktop/DesktopBetSlipRail.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<script setup lang="ts">
|
||||
import { watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import BetSlipPanel from './BetSlipPanel.vue';
|
||||
import { useBetSlipStore } from '../../stores/betSlip';
|
||||
|
||||
const { t } = useI18n();
|
||||
const slip = useBetSlipStore();
|
||||
|
||||
watch(
|
||||
() => slip.totalCount,
|
||||
(next, prev) => {
|
||||
if (next > prev) slip.expandPanel();
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside
|
||||
class="desktop-betslip-rail"
|
||||
:class="{ 'is-collapsed': !slip.panelExpanded }"
|
||||
:aria-expanded="slip.panelExpanded"
|
||||
>
|
||||
|
||||
|
||||
<button
|
||||
v-if="!slip.panelExpanded"
|
||||
type="button"
|
||||
class="rail-collapsed-hint"
|
||||
:aria-label="t('bet.bet_slip')"
|
||||
@click="slip.expandPanel()"
|
||||
>
|
||||
<span v-if="slip.totalCount" class="rail-badge">{{ slip.totalCount > 99 ? '99+' : slip.totalCount }}</span>
|
||||
<span class="rail-label">{{ t('bet.bet_slip') }}</span>
|
||||
</button>
|
||||
|
||||
<div class="rail-content" :hidden="!slip.panelExpanded">
|
||||
<BetSlipPanel />
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.desktop-betslip-rail {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: var(--desktop-right-betslip-w);
|
||||
min-width: 0;
|
||||
border-left: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.rail-toggle {
|
||||
position: absolute;
|
||||
left: -18px;
|
||||
top: 50%;
|
||||
z-index: 30;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 50%;
|
||||
background: var(--bg-card);
|
||||
color: var(--primary-light);
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
transform: translateY(-50%);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.5),
|
||||
0 0 0 3px rgba(20, 20, 20, 0.92);
|
||||
transition:
|
||||
transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
background 0.2s,
|
||||
color 0.2s,
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.rail-toggle-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.rail-toggle.is-collapsed .rail-toggle-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.rail-toggle:hover {
|
||||
border-color: var(--border-gold);
|
||||
background: var(--primary);
|
||||
color: #111;
|
||||
box-shadow:
|
||||
0 4px 14px rgba(0, 0, 0, 0.6),
|
||||
0 0 0 3px rgba(212, 175, 55, 0.15);
|
||||
}
|
||||
|
||||
.rail-toggle:active {
|
||||
transform: translateY(-50%) scale(0.94);
|
||||
}
|
||||
|
||||
.rail-toggle:focus-visible {
|
||||
outline: 2px solid var(--border-gold);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.rail-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
width: var(--desktop-right-betslip-expanded-w, 288px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.desktop-betslip-rail.is-collapsed .rail-content {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.rail-collapsed-hint {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 16px 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.rail-collapsed-hint:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.rail-label {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: var(--primary);
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
.rail-badge {
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 5px;
|
||||
border-radius: 10px;
|
||||
background: var(--primary, #D4AF37);
|
||||
color: #111;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -7,16 +7,28 @@ import DesktopOddsBetPopover from './DesktopOddsBetPopover.vue';
|
||||
import SportsCategoryBar from './SportsCategoryBar.vue';
|
||||
import LeagueSidebar from './LeagueSidebar.vue';
|
||||
import MatchSidebar from './MatchSidebar.vue';
|
||||
import BetSlipPanel from './BetSlipPanel.vue';
|
||||
import DesktopBetSlipRail from './DesktopBetSlipRail.vue';
|
||||
import FloatingMailbox from '../FloatingMailbox.vue';
|
||||
import { usePlayerHome } from '../../composables/usePlayerHome';
|
||||
import { useAuthStore } from '../../stores/auth';
|
||||
import { useBetSlipStore } from '../../stores/betSlip';
|
||||
|
||||
const route = useRoute();
|
||||
const { locale } = useI18n();
|
||||
const auth = useAuthStore();
|
||||
const slip = useBetSlipStore();
|
||||
const { load: loadPlayerHome } = usePlayerHome();
|
||||
|
||||
const showBetSlipRail = computed(() => {
|
||||
const p = route.path;
|
||||
if (p === '/bets' || p.startsWith('/bets/')) return false;
|
||||
if (p.startsWith('/wallet') || p.startsWith('/profile')) return false;
|
||||
if (route.params.id && (p.startsWith('/announcements/') || p.startsWith('/messages/'))) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
const layoutMode = computed<'betting' | 'account' | 'hub' | 'marketing'>(() => {
|
||||
const p = route.path;
|
||||
if (p === '/bet' || p.startsWith('/match/') || p.startsWith('/outright/')) {
|
||||
@@ -61,11 +73,18 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="desktop-shell">
|
||||
<div
|
||||
class="desktop-shell"
|
||||
:class="{
|
||||
'betslip-collapsed': showBetSlipRail && !slip.panelExpanded,
|
||||
'betslip-hidden': !showBetSlipRail,
|
||||
}"
|
||||
>
|
||||
<header class="desktop-header-wrap">
|
||||
<DesktopTopNav />
|
||||
</header>
|
||||
|
||||
<div class="desktop-body">
|
||||
<div class="desktop-main-container">
|
||||
<!-- Betting Layout -->
|
||||
<div v-if="layoutMode === 'betting'" class="desktop-layout-betting-wrap">
|
||||
@@ -85,9 +104,6 @@ watch(
|
||||
<component v-else :is="Component" :key="viewRoute.fullPath" />
|
||||
</RouterView>
|
||||
</main>
|
||||
<aside class="desktop-betting-right">
|
||||
<BetSlipPanel />
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -114,7 +130,7 @@ watch(
|
||||
</div>
|
||||
|
||||
<!-- Marketing/Single Column Layout -->
|
||||
<div v-else class="desktop-layout-marketing">
|
||||
<div v-else class="desktop-layout-marketing no-scrollbar">
|
||||
<main class="desktop-marketing-content">
|
||||
<RouterView v-slot="{ Component, route: viewRoute }">
|
||||
<KeepAlive v-if="viewRoute.meta.keepAlive" :max="10">
|
||||
@@ -125,6 +141,8 @@ watch(
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<DesktopBetSlipRail v-if="showBetSlipRail" />
|
||||
</div>
|
||||
<FloatingMailbox />
|
||||
<DesktopOddsBetPopover />
|
||||
</div>
|
||||
|
||||
@@ -62,7 +62,9 @@ const availableLeagues = computed(() => {
|
||||
return Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name));
|
||||
});
|
||||
|
||||
const isSelected = (leagueId: string) => filterState.value.leagueIds.includes(leagueId);
|
||||
const isSelected = (leagueId: string) => {
|
||||
return filterState.value.leagueIds.length === 0 || filterState.value.leagueIds.includes(leagueId);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -6,6 +6,27 @@ import { resolveBanners } from '../constants/defaultBanner';
|
||||
import { resolveAnnouncements } from '../constants/defaultAnnouncement';
|
||||
import { stripHtml } from '../utils/html';
|
||||
|
||||
export interface PlayerHomeMatchSelection {
|
||||
id: string;
|
||||
selectionCode?: string;
|
||||
selectionName: string;
|
||||
selectionDisplayName?: string;
|
||||
odds: string;
|
||||
status?: string;
|
||||
oddsVersion?: string;
|
||||
}
|
||||
|
||||
export interface PlayerHomeMatchMarket {
|
||||
id: string;
|
||||
marketType: string;
|
||||
marketDisplayName?: string;
|
||||
lineValue?: number | null;
|
||||
status: string;
|
||||
allowSingle?: boolean;
|
||||
allowParlay?: boolean;
|
||||
selections: PlayerHomeMatchSelection[];
|
||||
}
|
||||
|
||||
export interface PlayerHomeMatch {
|
||||
id: string;
|
||||
leagueName?: string;
|
||||
@@ -19,6 +40,8 @@ export interface PlayerHomeMatch {
|
||||
startTime: string;
|
||||
isHot?: boolean;
|
||||
displayOrder?: number;
|
||||
bettingOpen?: boolean;
|
||||
markets?: PlayerHomeMatchMarket[];
|
||||
}
|
||||
|
||||
export interface PlayerContentItem {
|
||||
|
||||
@@ -27,6 +27,23 @@ export type SlipMode = 'single' | 'parlay';
|
||||
export type ParlaySlipError = ParlayRejectReason | 'MAX_LEGS' | 'SAME_MATCH';
|
||||
|
||||
const BET_SLIP_STORAGE_PREFIX = 'player:betSlip:v1';
|
||||
const DESKTOP_PANEL_EXPANDED_KEY = 'player:desktopBetSlipExpanded:v1';
|
||||
|
||||
function readDesktopPanelExpanded() {
|
||||
try {
|
||||
return localStorage.getItem(DESKTOP_PANEL_EXPANDED_KEY) !== '0';
|
||||
} catch {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function writeDesktopPanelExpanded(expanded: boolean) {
|
||||
try {
|
||||
localStorage.setItem(DESKTOP_PANEL_EXPANDED_KEY, expanded ? '1' : '0');
|
||||
} catch {
|
||||
// ignore quota / private mode errors
|
||||
}
|
||||
}
|
||||
|
||||
interface BetSlipPersisted {
|
||||
singleItem: SlipItem | null;
|
||||
@@ -370,6 +387,11 @@ export const useBetSlipStore = defineStore('betSlip', () => {
|
||||
);
|
||||
|
||||
const drawerOpen = ref(false);
|
||||
const panelExpanded = ref(readDesktopPanelExpanded());
|
||||
|
||||
watch(panelExpanded, (expanded) => {
|
||||
writeDesktopPanelExpanded(expanded);
|
||||
});
|
||||
|
||||
function openDrawer() {
|
||||
drawerOpen.value = true;
|
||||
@@ -379,6 +401,18 @@ export const useBetSlipStore = defineStore('betSlip', () => {
|
||||
drawerOpen.value = false;
|
||||
}
|
||||
|
||||
function expandPanel() {
|
||||
panelExpanded.value = true;
|
||||
}
|
||||
|
||||
function collapsePanel() {
|
||||
panelExpanded.value = false;
|
||||
}
|
||||
|
||||
function togglePanelExpanded() {
|
||||
panelExpanded.value = !panelExpanded.value;
|
||||
}
|
||||
|
||||
function updateSelectionOdds(selectionId: string, odds: number, oddsVersion: string) {
|
||||
if (singleItem.value?.selectionId === selectionId) {
|
||||
singleItem.value = { ...singleItem.value, odds, oddsVersion };
|
||||
@@ -414,6 +448,7 @@ export const useBetSlipStore = defineStore('betSlip', () => {
|
||||
canSubmit,
|
||||
lastParlayError,
|
||||
drawerOpen,
|
||||
panelExpanded,
|
||||
setMode,
|
||||
setSingleItem,
|
||||
addItem,
|
||||
@@ -428,6 +463,9 @@ export const useBetSlipStore = defineStore('betSlip', () => {
|
||||
clearAll,
|
||||
openDrawer,
|
||||
closeDrawer,
|
||||
expandPanel,
|
||||
collapsePanel,
|
||||
togglePanelExpanded,
|
||||
updateSelectionOdds,
|
||||
getItemStake,
|
||||
setItemStake,
|
||||
|
||||
@@ -31,10 +31,26 @@
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.desktop-shell.betslip-hidden {
|
||||
--desktop-right-betslip-w: 0px;
|
||||
}
|
||||
|
||||
.desktop-shell.betslip-collapsed {
|
||||
--desktop-right-betslip-w: var(--desktop-right-betslip-collapsed-w);
|
||||
}
|
||||
|
||||
.desktop-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.desktop-main-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
@@ -58,7 +74,7 @@
|
||||
|
||||
.desktop-layout-betting {
|
||||
display: grid;
|
||||
grid-template-columns: var(--desktop-left-sidebar-w) 1fr var(--desktop-right-betslip-w);
|
||||
grid-template-columns: var(--desktop-left-sidebar-w) 1fr;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
@@ -80,12 +96,6 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.desktop-betting-right {
|
||||
border-left: 1px solid var(--border);
|
||||
background: rgba(14, 14, 14, 0.85);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Account Layout: full-width records center */
|
||||
.desktop-layout-account {
|
||||
display: flex;
|
||||
@@ -133,6 +143,12 @@
|
||||
overflow-y: auto;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.desktop-layout-marketing::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, Opera */
|
||||
}
|
||||
|
||||
.desktop-marketing-content {
|
||||
|
||||
@@ -28,6 +28,13 @@
|
||||
--desktop-header-h: 56px;
|
||||
--desktop-left-sidebar-w: 220px;
|
||||
--desktop-right-betslip-w: 288px;
|
||||
--desktop-right-betslip-expanded-w: 288px;
|
||||
--desktop-right-betslip-collapsed-w: 40px;
|
||||
|
||||
/* Desktop specific added vars */
|
||||
--desktop-bg: #050505;
|
||||
--desktop-border: #262626;
|
||||
--desktop-sidebar-bg: rgba(20, 20, 20, 0.95);
|
||||
|
||||
/* Reset typography inside desktop */
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
|
||||
@@ -9,6 +9,11 @@ import TeamEmblem from '../../components/TeamEmblem.vue';
|
||||
import GoldSpinner from '../../components/GoldSpinner.vue';
|
||||
import { formatLocalMatchDateTime } from '@thebet365/shared';
|
||||
import type { PlayerHomeMatch } from '../../composables/usePlayerHome';
|
||||
import { useBetSlipStore } from '../../stores/betSlip';
|
||||
import { useAuthStore } from '../../stores/auth';
|
||||
import { useDesktopBetPopover } from '../../composables/useDesktopBetPopover';
|
||||
import { resolveSelectionLabel } from '../../utils/selectionLabel';
|
||||
import MarketSelectionsPanel from '../../components/match-detail/MarketSelectionsPanel.vue';
|
||||
|
||||
type HotTab = 'hot' | 'upcoming';
|
||||
|
||||
@@ -17,6 +22,12 @@ const router = useRouter();
|
||||
const { banners, hotMatches, upcomingMatches, loading, load, announcementItems } = usePlayerHome();
|
||||
const activeTab = ref<HotTab>('hot');
|
||||
|
||||
const slip = useBetSlipStore();
|
||||
const auth = useAuthStore();
|
||||
const { openAt } = useDesktopBetPopover();
|
||||
|
||||
const activeMarketTypes = ref<Record<string, string>>({});
|
||||
|
||||
const bannerFallbackTo = computed(() => {
|
||||
const id = announcementItems.value[0]?.id;
|
||||
return id ? `/announcements/${id}` : '/announcements';
|
||||
@@ -39,7 +50,85 @@ function goMatch(id: string) {
|
||||
}
|
||||
|
||||
function formatKickoff(startTime: string) {
|
||||
return formatLocalMatchDateTime(startTime, locale.value, { variant: 'full' });
|
||||
return formatLocalMatchDateTime(startTime, locale.value, {
|
||||
variant: 'compact',
|
||||
includeTimeZone: false,
|
||||
});
|
||||
}
|
||||
|
||||
function getActiveMarketType(match: PlayerHomeMatch) {
|
||||
const matchId = match.id;
|
||||
if (activeMarketTypes.value[matchId]) {
|
||||
return activeMarketTypes.value[matchId];
|
||||
}
|
||||
if (match.markets?.some(m => m.marketType === 'FT_1X2')) {
|
||||
return 'FT_1X2';
|
||||
}
|
||||
return match.markets?.[0]?.marketType || 'FT_1X2';
|
||||
}
|
||||
|
||||
function setActiveMarketType(matchId: string, marketType: string) {
|
||||
activeMarketTypes.value[matchId] = marketType;
|
||||
}
|
||||
|
||||
function getAvailableMarketsForMatch(match: PlayerHomeMatch) {
|
||||
const supported = ['FT_1X2', 'FT_HANDICAP', 'FT_OVER_UNDER'];
|
||||
return (match.markets ?? []).filter(m => supported.includes(m.marketType));
|
||||
}
|
||||
|
||||
function getActiveMarket(match: PlayerHomeMatch) {
|
||||
const activeType = getActiveMarketType(match);
|
||||
return match.markets?.find(m => m.marketType === activeType);
|
||||
}
|
||||
|
||||
function getMarketTabLabel(type: string) {
|
||||
const raw = (() => {
|
||||
if (type === 'FT_1X2') return t('bet.market_ft_1x2');
|
||||
if (type === 'FT_HANDICAP') return t('bet.market_ft_handicap');
|
||||
if (type === 'FT_OVER_UNDER') return t('bet.market_ft_ou');
|
||||
return type;
|
||||
})();
|
||||
return raw.replace(/全场\s*|FT\s*|Penuh\s*/ig, '').trim();
|
||||
}
|
||||
function isMarketLocked(match: PlayerHomeMatch, market?: { status: string; allowSingle?: boolean; allowParlay?: boolean }) {
|
||||
if (!market) return true;
|
||||
if (match.bettingOpen === false) return true;
|
||||
const status = (market.status ?? 'OPEN').toUpperCase();
|
||||
if (status !== 'OPEN') return true;
|
||||
return market.allowSingle !== true && market.allowParlay !== true;
|
||||
}
|
||||
|
||||
function isSelected(id: string) {
|
||||
return slip.isInSlip(id);
|
||||
}
|
||||
|
||||
function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, event?: MouseEvent) {
|
||||
if (isMarketLocked(match, market)) return;
|
||||
if (!auth.token) {
|
||||
auth.showLoginPrompt(router.currentRoute.value.fullPath);
|
||||
return;
|
||||
}
|
||||
const sel = market.selections?.find((s: any) => s.id === selId);
|
||||
if (!sel || !event) return;
|
||||
|
||||
const item = {
|
||||
selectionId: sel.id,
|
||||
oddsVersion: String(sel.oddsVersion),
|
||||
matchId: match.id,
|
||||
matchName: `${match.homeTeamName} vs ${match.awayTeamName}`,
|
||||
marketId: market.id,
|
||||
marketName: market.marketDisplayName?.trim() || market.marketType || '',
|
||||
selectionName: resolveSelectionLabel(t, sel.selectionCode || '', sel.selectionName, {
|
||||
lineValue: market.lineValue,
|
||||
}),
|
||||
odds: parseFloat(sel.odds),
|
||||
marketType: market.marketType,
|
||||
lineValue: market.lineValue != null && market.lineValue !== '' ? parseFloat(String(market.lineValue)) : null,
|
||||
allowSingle: market.allowSingle,
|
||||
allowParlay: market.allowParlay,
|
||||
};
|
||||
|
||||
openAt(event, item);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -90,28 +179,32 @@ function formatKickoff(startTime: string) {
|
||||
<div
|
||||
v-for="match in displayedMatches"
|
||||
:key="match.id"
|
||||
class="match-card clickable"
|
||||
@click="goMatch(match.id)"
|
||||
class="match-card"
|
||||
>
|
||||
<!-- Left Side: Match Details (Clickable to go to match details page) -->
|
||||
<div class="match-info-side" @click="goMatch(match.id)">
|
||||
<div class="card-top">
|
||||
<span class="league-tag">{{ match.leagueName }}</span>
|
||||
<div class="top-meta">
|
||||
<span class="live-indicator" v-if="(match as any).status === 'LIVE'">LIVE</span>
|
||||
<span class="match-time">{{ formatKickoff(match.startTime) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="teams-versus">
|
||||
<div class="team-side home">
|
||||
<div class="teams-versus-compact">
|
||||
<div class="team-row">
|
||||
<TeamEmblem
|
||||
size="md"
|
||||
size="sm"
|
||||
:team-code="match.homeTeamCode"
|
||||
:team-name="match.homeTeamName"
|
||||
:logo-url="match.homeTeamLogoUrl"
|
||||
/>
|
||||
<span class="team-name">{{ match.homeTeamName }}</span>
|
||||
</div>
|
||||
<div class="vs-divider">VS</div>
|
||||
<div class="team-side away">
|
||||
<div class="vs-text">VS</div>
|
||||
<div class="team-row">
|
||||
<TeamEmblem
|
||||
size="md"
|
||||
size="sm"
|
||||
:team-code="match.awayTeamCode"
|
||||
:team-name="match.awayTeamName"
|
||||
:logo-url="match.awayTeamLogoUrl"
|
||||
@@ -119,10 +212,39 @@ function formatKickoff(startTime: string) {
|
||||
<span class="team-name">{{ match.awayTeamName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<span class="match-time">{{ formatKickoff(match.startTime) }}</span>
|
||||
<button type="button" class="bet-action-btn">{{ t('nav.bet') || '投注' }}</button>
|
||||
<!-- Right Side: Market Selections & Switcher -->
|
||||
<div class="match-market-side">
|
||||
<div class="market-tabs">
|
||||
<button
|
||||
v-for="m in getAvailableMarketsForMatch(match)"
|
||||
:key="m.marketType"
|
||||
type="button"
|
||||
class="market-tab-btn"
|
||||
:class="{ active: getActiveMarketType(match) === m.marketType }"
|
||||
@click="setActiveMarketType(match.id, m.marketType)"
|
||||
>
|
||||
{{ getMarketTabLabel(m.marketType) }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="market-odds-area">
|
||||
<template v-if="getActiveMarket(match)">
|
||||
<MarketSelectionsPanel
|
||||
desktop-card
|
||||
compact
|
||||
:locked="isMarketLocked(match, getActiveMarket(match))"
|
||||
:line-value="getActiveMarket(match)?.lineValue"
|
||||
:selections="getActiveMarket(match)?.selections || []"
|
||||
:is-selected="isSelected"
|
||||
@pick="(selId, ev) => handleOddsClick(match, getActiveMarket(match)!, selId, ev)"
|
||||
/>
|
||||
</template>
|
||||
<div v-else class="no-market-odds">
|
||||
{{ t('bet.no_market_odds') || '暂无盘口赔率' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -237,106 +359,181 @@ function formatKickoff(startTime: string) {
|
||||
|
||||
.matches-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 14px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.match-card {
|
||||
background: #141414;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
transition: all 0.2s;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
min-height: 76px;
|
||||
}
|
||||
|
||||
.match-card:hover {
|
||||
border-color: var(--border-gold-soft);
|
||||
border-color: var(--border-gold);
|
||||
box-shadow: var(--shadow-gold);
|
||||
}
|
||||
|
||||
.match-info-side {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
border-right: 1px solid var(--border);
|
||||
min-width: 0;
|
||||
cursor: pointer;
|
||||
background: rgba(255, 255, 255, 0.01);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.match-info-side:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.match-market-side {
|
||||
width: 290px;
|
||||
flex-shrink: 0;
|
||||
padding: 8px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.card-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.top-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.league-tag {
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--primary-light);
|
||||
background: rgba(212, 175, 55, 0.08);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
max-width: 100%;
|
||||
background: var(--border-gold-soft);
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.live-indicator {
|
||||
font-size: 10px;
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
padding: 1px 4px;
|
||||
padding: 1px 3px;
|
||||
border-radius: 2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.teams-versus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||
.match-time {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.team-side {
|
||||
.teams-versus-compact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.vs-text {
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
padding-left: 36px;
|
||||
line-height: 1;
|
||||
margin: -2px 0;
|
||||
}
|
||||
|
||||
.team-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
max-width: 100px;
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vs-divider {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
.market-tabs {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-bottom: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.market-tab-btn {
|
||||
padding: 2px 6px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
background: #222;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.market-tab-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.market-tab-btn.active {
|
||||
background: var(--border-gold-soft);
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.market-odds-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.match-time {
|
||||
font-size: 11px;
|
||||
.no-market-odds {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bet-action-btn {
|
||||
.no-markets-fallback {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.go-detail-btn {
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
@@ -345,11 +542,12 @@ function formatKickoff(startTime: string) {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.match-card:hover .bet-action-btn {
|
||||
.go-detail-btn:hover {
|
||||
background: var(--primary);
|
||||
color: #3D2800;
|
||||
color: #111;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user