1573 lines
44 KiB
Vue
1573 lines
44 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, computed, ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import DesktopBanner3DCarousel from '../../components/desktop/DesktopBanner3DCarousel.vue';
|
|
import HomeAnnouncementCard from '../../components/HomeAnnouncementCard.vue';
|
|
import { usePlayerHome } from '../../composables/usePlayerHome';
|
|
import TeamEmblem from '../../components/TeamEmblem.vue';
|
|
import GoldSpinner from '../../components/GoldSpinner.vue';
|
|
import { formatLocalMatchDateTime } from '@thebet365/shared';
|
|
import type { PlayerHomeMatch } from '../../composables/usePlayerHome';
|
|
import { useDesktopBetPopover } from '../../composables/useDesktopBetPopover';
|
|
import { resolveSelectionLabel } from '../../utils/selectionLabel';
|
|
import MarketSelectionsPanel from '../../components/match-detail/MarketSelectionsPanel.vue';
|
|
|
|
const { t, locale } = useI18n();
|
|
const router = useRouter();
|
|
const { banners, hotMatches, upcomingMatches, loading, load, announcementItems } = usePlayerHome();
|
|
|
|
const { openAt, visible: popoverVisible, pendingItem, cancelClose, scheduleClose, isActiveForCard } = useDesktopBetPopover();
|
|
|
|
const activeMarketTypes = ref<Record<string, string>>({});
|
|
|
|
const bannerFallbackTo = computed(() => {
|
|
const id = announcementItems.value[0]?.id;
|
|
return id ? `/announcements/${id}` : '/announcements';
|
|
});
|
|
|
|
const featuredMatch = computed<PlayerHomeMatch | null>(() => hotMatches.value[0] ?? null);
|
|
const restHotMatches = computed<PlayerHomeMatch[]>(() => hotMatches.value.slice(1));
|
|
const upcomingList = computed<PlayerHomeMatch[]>(() => upcomingMatches.value);
|
|
const sideRecommendMatches = computed<PlayerHomeMatch[]>(() => hotMatches.value.slice(1, 5));
|
|
|
|
onMounted(() => {
|
|
void load(true);
|
|
});
|
|
|
|
function goMatch(id: string) {
|
|
router.push(`/match/${id}`);
|
|
}
|
|
|
|
function goPath(path: string) {
|
|
router.push(path);
|
|
}
|
|
|
|
function formatKickoff(startTime: string) {
|
|
return formatLocalMatchDateTime(startTime, locale.value, {
|
|
variant: 'compact',
|
|
includeTimeZone: false,
|
|
});
|
|
}
|
|
|
|
function pickQuickBetMarkets(markets: PlayerHomeMatch['markets']) {
|
|
const supported = ['FT_1X2', 'FT_HANDICAP', 'FT_OVER_UNDER'];
|
|
const byType = new Map<string, NonNullable<PlayerHomeMatch['markets']>[number]>();
|
|
for (const m of markets ?? []) {
|
|
if (!supported.includes(m.marketType)) continue;
|
|
if (!Array.isArray(m.selections) || m.selections.length === 0) continue;
|
|
if (!byType.has(m.marketType)) byType.set(m.marketType, m);
|
|
}
|
|
return supported.map((type) => byType.get(type)).filter(Boolean) as NonNullable<PlayerHomeMatch['markets']>;
|
|
}
|
|
|
|
function getActiveMarketType(match: PlayerHomeMatch) {
|
|
const matchId = match.id;
|
|
const available = pickQuickBetMarkets(match.markets);
|
|
const saved = activeMarketTypes.value[matchId];
|
|
if (saved && available.some((m) => m.marketType === saved)) return saved;
|
|
if (available.some((m) => m.marketType === 'FT_1X2')) return 'FT_1X2';
|
|
return available[0]?.marketType ?? 'FT_1X2';
|
|
}
|
|
|
|
function setActiveMarketType(matchId: string, marketType: string) {
|
|
activeMarketTypes.value[matchId] = marketType;
|
|
}
|
|
|
|
function getAvailableMarketsForMatch(match: PlayerHomeMatch) {
|
|
return pickQuickBetMarkets(match.markets);
|
|
}
|
|
|
|
function getActiveMarket(match: PlayerHomeMatch) {
|
|
const activeType = getActiveMarketType(match);
|
|
return pickQuickBetMarkets(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 false;
|
|
}
|
|
|
|
function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, event?: MouseEvent) {
|
|
if (isMarketLocked(match, market)) 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);
|
|
}
|
|
function getSelLabel(sel: any, marketType: string, lineValue?: string | number | null) {
|
|
return resolveSelectionLabel(t, sel.selectionCode || '', sel.selectionName || '', { lineValue });
|
|
}
|
|
|
|
function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: string) {
|
|
if (!match || !popoverVisible.value || !pendingItem.value) return '';
|
|
if (!isActiveForCard(cardRootId)) return '';
|
|
if (String(pendingItem.value.matchId) !== String(match.id)) return '';
|
|
|
|
const selId = pendingItem.value.selectionId;
|
|
// Scan all markets across all tabs to find the selection
|
|
for (const market of match.markets ?? []) {
|
|
const sel = market.selections?.find((s: any) => s.id === selId);
|
|
if (!sel) continue;
|
|
const code = (sel.selectionCode || '').toUpperCase();
|
|
if (code === 'HOME') return 'home';
|
|
if (code === 'AWAY') return 'away';
|
|
if (code === 'DRAW') return 'draw';
|
|
if (code === 'OVER') return 'home';
|
|
if (code === 'UNDER') return 'away';
|
|
if (code === 'ODD' || code === 'EVEN') return 'draw';
|
|
// Fallback: use selection index
|
|
const selIndex = market.selections?.findIndex((s: any) => s.id === selId) ?? -1;
|
|
if (selIndex === -1) continue;
|
|
if (market.marketType === 'FT_1X2') {
|
|
if (selIndex === 0) return 'home';
|
|
if (selIndex === 1) return 'draw';
|
|
if (selIndex === 2) return 'away';
|
|
} else {
|
|
if (selIndex === 0) return 'home';
|
|
if (selIndex === 1) return 'away';
|
|
}
|
|
}
|
|
return '';
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="desktop-home-view">
|
|
<!-- [B] Hero Row: 3D Banner -->
|
|
<section class="hero-row anim-fade-up" style="--anim-delay:0ms">
|
|
<div class="hero-banner-full">
|
|
<DesktopBanner3DCarousel :banners="banners" :fallback-to="bannerFallbackTo" />
|
|
</div>
|
|
</section>
|
|
|
|
<!-- [D] 主区: 左主内容 + 右侧栏 -->
|
|
<div class="main-row">
|
|
<div class="main-col">
|
|
<!-- [D1] 鐒︾偣璧涗簨 -->
|
|
<section class="content-section anim-fade-up" style="--anim-delay:160ms">
|
|
<div class="section-title">
|
|
<span class="st-line st-line-animated" aria-hidden="true"></span>
|
|
<span class="st-text">{{ t('home.section_featured') }}</span>
|
|
</div>
|
|
|
|
<div v-if="loading && !hotMatches.length" class="loading-state">
|
|
<GoldSpinner :active="true" />
|
|
</div>
|
|
|
|
<template v-else-if="featuredMatch">
|
|
<!-- 鐒︾偣澶у崱 -->
|
|
<div
|
|
class="featured-match anim-fade-up"
|
|
:class="{ 'featured-match--engaged': isActiveForCard(`featured-${featuredMatch.id}`) }"
|
|
:data-bet-card-root="`featured-${featuredMatch.id}`"
|
|
style="--anim-delay:240ms"
|
|
@click.self="goMatch(featuredMatch.id)"
|
|
@mouseenter="cancelClose"
|
|
@mouseleave="scheduleClose()"
|
|
>
|
|
<div class="featured-top" @click="goMatch(featuredMatch.id)">
|
|
<div class="featured-meta">
|
|
<span class="league-tag lg">{{ featuredMatch.leagueName }}</span>
|
|
<span
|
|
v-if="(featuredMatch as any).status === 'LIVE'"
|
|
class="live-indicator lg live-pulse"
|
|
>LIVE</span>
|
|
</div>
|
|
<span class="featured-time">{{ formatKickoff(featuredMatch.startTime) }}</span>
|
|
</div>
|
|
|
|
<div class="featured-teams" :class="getHoveredSideForMatch(featuredMatch, `featured-${featuredMatch.id}`)" @click="goMatch(featuredMatch.id)">
|
|
<div class="featured-team">
|
|
<TeamEmblem
|
|
size="lg"
|
|
:team-code="featuredMatch.homeTeamCode"
|
|
:team-name="featuredMatch.homeTeamName"
|
|
:logo-url="featuredMatch.homeTeamLogoUrl"
|
|
/>
|
|
<span class="featured-team-name">{{ featuredMatch.homeTeamName }}</span>
|
|
</div>
|
|
<div class="featured-vs vs-heartbeat">VS</div>
|
|
<div class="featured-team">
|
|
<TeamEmblem
|
|
size="lg"
|
|
:team-code="featuredMatch.awayTeamCode"
|
|
:team-name="featuredMatch.awayTeamName"
|
|
:logo-url="featuredMatch.awayTeamLogoUrl"
|
|
/>
|
|
<span class="featured-team-name">{{ featuredMatch.awayTeamName }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="featured-markets">
|
|
<div
|
|
v-for="m in getAvailableMarketsForMatch(featuredMatch)"
|
|
:key="m.marketType"
|
|
class="featured-market-block"
|
|
>
|
|
<div class="featured-market-label">{{ getMarketTabLabel(m.marketType) }}</div>
|
|
<MarketSelectionsPanel
|
|
desktop-card
|
|
compact
|
|
:locked="isMarketLocked(featuredMatch, m)"
|
|
:line-value="m.lineValue"
|
|
:selections="m.selections || []"
|
|
:is-selected="isSelected"
|
|
@pick="(selId, ev) => handleOddsClick(featuredMatch!, m, selId, ev)"
|
|
/>
|
|
</div>
|
|
<div v-if="!getAvailableMarketsForMatch(featuredMatch).length" class="no-market-odds">
|
|
{{ t('bet.no_market_odds') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 鍏朵綑鐑棬 2 鍒?-->
|
|
<div v-if="restHotMatches.length" class="matches-grid">
|
|
<div
|
|
v-for="(match, idx) in restHotMatches"
|
|
:key="match.id"
|
|
class="match-card anim-fade-up"
|
|
:class="{ 'match-card--engaged': isActiveForCard(`hot-${match.id}`) }"
|
|
:data-bet-card-root="`hot-${match.id}`"
|
|
:style="{ '--anim-delay': (320 + idx * 60) + 'ms' }"
|
|
@mouseenter="cancelClose"
|
|
@mouseleave="scheduleClose()"
|
|
>
|
|
<div class="match-info-side" @click="goMatch(match.id)">
|
|
<!-- Default info layout (visible at rest) -->
|
|
<div class="default-info-layout">
|
|
<div class="card-top">
|
|
<span class="league-tag">{{ match.leagueName }}</span>
|
|
<div class="top-meta">
|
|
<span class="live-indicator live-pulse" v-if="(match as any).status === 'LIVE'">LIVE</span>
|
|
<span class="match-time">{{ formatKickoff(match.startTime) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="teams-versus-compact">
|
|
<div class="team-row">
|
|
<TeamEmblem
|
|
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-text">VS</div>
|
|
<div class="team-row">
|
|
<TeamEmblem
|
|
size="sm"
|
|
:team-code="match.awayTeamCode"
|
|
:team-name="match.awayTeamName"
|
|
:logo-url="match.awayTeamLogoUrl"
|
|
/>
|
|
<span class="team-name">{{ match.awayTeamName }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hover versus layout (visible on hover) -->
|
|
<div class="hover-versus-layout" :class="getHoveredSideForMatch(match, `hot-${match.id}`)">
|
|
<div class="hover-team home-slide">
|
|
<TeamEmblem
|
|
size="md"
|
|
:team-code="match.homeTeamCode"
|
|
:team-name="match.homeTeamName"
|
|
:logo-url="match.homeTeamLogoUrl"
|
|
/>
|
|
<span class="hover-team-name">{{ match.homeTeamName }}</span>
|
|
</div>
|
|
<div class="hover-vs-glow">VS</div>
|
|
<div class="hover-team away-slide">
|
|
<TeamEmblem
|
|
size="md"
|
|
:team-code="match.awayTeamCode"
|
|
:team-name="match.awayTeamName"
|
|
:logo-url="match.awayTeamLogoUrl"
|
|
/>
|
|
<span class="hover-team-name">{{ match.awayTeamName }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
</template>
|
|
|
|
<div v-else class="empty-state">
|
|
<p>{{ t('home.no_matches') }}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- [D2] 鍗冲皢寮€璧?-->
|
|
<section class="content-section anim-fade-up" style="--anim-delay:200ms">
|
|
<div class="section-title">
|
|
<span class="st-line" aria-hidden="true"></span>
|
|
<span class="st-text">{{ t('home.section_upcoming') }}</span>
|
|
</div>
|
|
|
|
<div v-if="upcomingList.length" class="matches-grid">
|
|
<div
|
|
v-for="(match, idx) in upcomingList"
|
|
:key="match.id"
|
|
class="match-card anim-fade-up"
|
|
:class="{ 'match-card--engaged': isActiveForCard(`upcoming-${match.id}`) }"
|
|
:data-bet-card-root="`upcoming-${match.id}`"
|
|
:style="{ '--anim-delay': (260 + idx * 50) + 'ms' }"
|
|
@mouseenter="cancelClose"
|
|
@mouseleave="scheduleClose()"
|
|
>
|
|
<div class="match-info-side" @click="goMatch(match.id)">
|
|
<!-- Default info layout (visible at rest) -->
|
|
<div class="default-info-layout">
|
|
<div class="card-top">
|
|
<span class="league-tag">{{ match.leagueName }}</span>
|
|
<div class="top-meta">
|
|
<span class="match-time">{{ formatKickoff(match.startTime) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="teams-versus-compact">
|
|
<div class="team-row">
|
|
<TeamEmblem
|
|
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-text">VS</div>
|
|
<div class="team-row">
|
|
<TeamEmblem
|
|
size="sm"
|
|
:team-code="match.awayTeamCode"
|
|
:team-name="match.awayTeamName"
|
|
:logo-url="match.awayTeamLogoUrl"
|
|
/>
|
|
<span class="team-name">{{ match.awayTeamName }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hover versus layout (visible on hover) -->
|
|
<div class="hover-versus-layout" :class="getHoveredSideForMatch(match, `upcoming-${match.id}`)">
|
|
<div class="hover-team home-slide">
|
|
<TeamEmblem
|
|
size="md"
|
|
:team-code="match.homeTeamCode"
|
|
:team-name="match.homeTeamName"
|
|
:logo-url="match.homeTeamLogoUrl"
|
|
/>
|
|
<span class="hover-team-name">{{ match.homeTeamName }}</span>
|
|
</div>
|
|
<div class="hover-vs-glow">VS</div>
|
|
<div class="hover-team away-slide">
|
|
<TeamEmblem
|
|
size="md"
|
|
:team-code="match.awayTeamCode"
|
|
:team-name="match.awayTeamName"
|
|
:logo-url="match.awayTeamLogoUrl"
|
|
/>
|
|
<span class="hover-team-name">{{ match.awayTeamName }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div v-else-if="!loading" class="empty-state">
|
|
<p>{{ t('home.upcoming_empty') }}</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- 鍙充晶澶氬崱杈规爮 -->
|
|
<aside class="home-sidebar anim-fade-up" style="--anim-delay:120ms">
|
|
<HomeAnnouncementCard />
|
|
|
|
<div v-if="sideRecommendMatches.length" class="side-card">
|
|
<div class="side-card-header">
|
|
<span class="side-card-title">{{ t('home.sidebar_recommend') }}</span>
|
|
</div>
|
|
<ul class="side-recommend-list">
|
|
<li
|
|
v-for="(m, idx) in sideRecommendMatches"
|
|
:key="m.id"
|
|
class="side-recommend-item anim-fade-up"
|
|
:class="{ 'side-recommend-item--engaged': isActiveForCard(`sidebar-${m.id}`) }"
|
|
:data-bet-card-root="`sidebar-${m.id}`"
|
|
:style="{ '--anim-delay': (200 + idx * 70) + 'ms' }"
|
|
@click="goMatch(m.id)"
|
|
@mouseenter="cancelClose"
|
|
@mouseleave="scheduleClose()"
|
|
>
|
|
<div class="sri-top-row">
|
|
<span class="sri-league">{{ m.leagueName }}</span>
|
|
<span class="sri-time">{{ formatKickoff(m.startTime) }}</span>
|
|
</div>
|
|
<div class="sri-teams">
|
|
<span>{{ m.homeTeamName }}</span>
|
|
<span class="sri-vs">vs</span>
|
|
<span>{{ m.awayTeamName }}</span>
|
|
</div>
|
|
|
|
<!-- 鎮诞棰勮鍗?-->
|
|
<div class="sri-preview-card" @click.stop @mouseenter="cancelClose" @mouseleave="scheduleClose()">
|
|
<div class="sri-preview-top">
|
|
<span class="sri-preview-league">{{ m.leagueName }}</span>
|
|
<span class="sri-preview-time">{{ formatKickoff(m.startTime) }}</span>
|
|
</div>
|
|
<div class="sri-preview-vs" :class="getHoveredSideForMatch(m, `sidebar-${m.id}`)">
|
|
<div class="sri-preview-team home-team">
|
|
<TeamEmblem size="md" :team-code="m.homeTeamCode" :team-name="m.homeTeamName" :logo-url="m.homeTeamLogoUrl" />
|
|
<span>{{ m.homeTeamName }}</span>
|
|
</div>
|
|
<div class="sri-preview-vs-text">VS</div>
|
|
<div class="sri-preview-team away-team">
|
|
<TeamEmblem size="md" :team-code="m.awayTeamCode" :team-name="m.awayTeamName" :logo-url="m.awayTeamLogoUrl" />
|
|
<span>{{ m.awayTeamName }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="getActiveMarket(m)" class="sri-preview-odds">
|
|
<div
|
|
v-for="sel in (getActiveMarket(m)?.selections || []).slice(0, 3)"
|
|
:key="sel.id"
|
|
class="sri-preview-odd-btn"
|
|
:class="{ selected: isSelected(sel.id) }"
|
|
@click.stop="handleOddsClick(m, getActiveMarket(m)!, sel.id, $event)"
|
|
>
|
|
<span class="sri-odd-label">{{ getSelLabel(sel, getActiveMarket(m)?.marketType || '', getActiveMarket(m)?.lineValue) }}</span>
|
|
<span class="sri-odd-val">{{ sel.odds }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-else class="sri-preview-no-odds">{{ t('bet.no_markets') }}</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.desktop-home-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
width: 100%;
|
|
}
|
|
|
|
.hero-row {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.hero-banner-full {
|
|
min-width: 0;
|
|
}
|
|
|
|
.qe-icon {
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.qe-label {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
}
|
|
|
|
/* [D] Main Row */
|
|
.main-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 320px;
|
|
gap: 16px;
|
|
align-items: start;
|
|
}
|
|
|
|
.main-col {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.content-section {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-6) var(--space-7);
|
|
box-shadow: var(--shadow-sm);
|
|
transition: box-shadow var(--transition);
|
|
}
|
|
|
|
/* section-title 閲戠嚎 */
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.st-line {
|
|
width: 4px;
|
|
height: 18px;
|
|
border-radius: var(--radius-full);
|
|
background: linear-gradient(180deg, var(--primary), var(--primary-lighter));
|
|
box-shadow: 0 0 8px rgba(0, 102, 204, 0.4), var(--glow-gold);
|
|
}
|
|
|
|
.st-text {
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
font-family: var(--font-heading);
|
|
color: var(--text);
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.st-refresh {
|
|
margin-left: auto;
|
|
background: transparent;
|
|
color: var(--primary-light);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.st-refresh:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.spin {
|
|
display: inline-block;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.loading-state,
|
|
.empty-state {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 160px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Featured 鐒︾偣澶у崱 */
|
|
.featured-match {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-5);
|
|
padding: var(--space-7) var(--space-8);
|
|
border-radius: var(--radius-lg);
|
|
background: linear-gradient(180deg, #f8fafc 0%, var(--bg-card) 100%);
|
|
border: 1px solid var(--border-active);
|
|
box-shadow: var(--shadow-gold-lg);
|
|
margin-bottom: var(--space-5);
|
|
cursor: pointer;
|
|
transition: box-shadow var(--transition-slow), transform var(--transition);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.featured-match::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; right: 0;
|
|
width: 140px; height: 140px;
|
|
background: radial-gradient(circle at top right, rgba(0, 102, 204, 0.12), transparent 65%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.featured-match:is(:hover, .featured-match--engaged) {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-xl), inset 0 0 24px rgba(0, 102, 204, 0.08), var(--glow-gold);
|
|
}
|
|
|
|
.featured-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.featured-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.league-tag.lg {
|
|
font-size: 12px;
|
|
padding: 3px 8px;
|
|
max-width: 480px;
|
|
}
|
|
|
|
.live-indicator.lg {
|
|
font-size: 11px;
|
|
padding: 3px 6px;
|
|
}
|
|
|
|
.featured-time {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.featured-teams {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.featured-team {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.featured-team-name {
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
font-family: var(--font-heading);
|
|
color: var(--text);
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.featured-vs {
|
|
font-size: 22px;
|
|
font-weight: 900;
|
|
font-style: italic;
|
|
font-family: var(--font-heading);
|
|
color: var(--odds-accent, #F8971F);
|
|
text-shadow: 0 0 12px rgba(248, 151, 31, 0.35);
|
|
}
|
|
|
|
.featured-markets {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
margin: 10px -20px -18px;
|
|
padding: 10px 16px 14px;
|
|
background: #F0F4F8;
|
|
border-top: 1px solid rgba(0, 102, 204, 0.12);
|
|
}
|
|
|
|
.featured-market-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.featured-market-label {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
font-family: var(--font-heading);
|
|
color: var(--primary);
|
|
text-align: center;
|
|
letter-spacing: 0.4px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* 鏅€氳禌浜嬪崱鐗?grid锛? 鍒楋級 */
|
|
.matches-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.match-card {
|
|
display: flex;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
|
|
min-height: 68px;
|
|
}
|
|
|
|
.match-card:is(:hover, .match-card--engaged) {
|
|
border-color: var(--border-active);
|
|
box-shadow: var(--shadow-md), var(--glow-gold);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.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: #FCFDFE;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.match-info-side > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.match-card:is(:hover, .match-card--engaged) .match-info-side {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.match-market-side {
|
|
width: 220px;
|
|
flex-shrink: 0;
|
|
padding: 6px 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 3px;
|
|
background: var(--bg-card);
|
|
}
|
|
|
|
.card-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.top-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.league-tag {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--primary-light);
|
|
background: rgba(0, 102, 204, 0.08);
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
max-width: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: inline-block;
|
|
flex: 1;
|
|
min-width: 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.live-indicator {
|
|
font-size: 9px;
|
|
font-weight: 800;
|
|
background: var(--danger);
|
|
color: #fff;
|
|
padding: 1px 3px;
|
|
border-radius: 2px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.match-time {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.teams-versus-compact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.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: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.team-name {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.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);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.market-tab-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.market-tab-btn.active {
|
|
background: rgba(0, 61, 107, 0.08);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.market-odds-area {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.no-market-odds {
|
|
font-size: 9px;
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
padding: 2px 4px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* 鍙充晶鏍?*/
|
|
.home-sidebar {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.home-sidebar :deep(.home-announce-card) {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.side-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-5) var(--space-6);
|
|
box-shadow: var(--shadow-xs);
|
|
}
|
|
|
|
.side-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 8px;
|
|
margin-bottom: 8px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.side-card-title {
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
font-family: var(--font-heading);
|
|
color: var(--primary-light);
|
|
letter-spacing: 0.3px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.side-recommend-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.side-recommend-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
padding: 8px 10px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.side-recommend-item:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.sri-top-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.sri-league {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--primary-light);
|
|
background: var(--border-gold-soft);
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
max-width: 180px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sri-teams {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sri-vs {
|
|
color: var(--text-muted);
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
font-style: italic;
|
|
}
|
|
|
|
.sri-time {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* @media 鍗曞垪鍥為€€ */
|
|
@media (max-width: 1100px) {
|
|
.main-row {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.matches-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.featured-markets {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.featured-team-name {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
鉁?ANIMATION SYSTEM
|
|
============================================================ */
|
|
|
|
/* --- 1. 閫氱敤鍏ュ満锛歠ade + slide-up --- */
|
|
@keyframes fadeSlideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(18px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.anim-fade-up {
|
|
opacity: 0;
|
|
animation: fadeSlideUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
|
animation-delay: var(--anim-delay, 0ms);
|
|
}
|
|
|
|
/* --- 2. 榛勯噾鍏夋檿鍛煎惛鑴夊啿锛堢劍鐐瑰ぇ鍗?::before锛?--- */
|
|
@keyframes goldGlowPulse {
|
|
0%, 100% {
|
|
opacity: 0.18;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.32;
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
|
|
.featured-match::before {
|
|
animation: goldGlowPulse 3.5s ease-in-out infinite;
|
|
transform-origin: top right;
|
|
}
|
|
|
|
/* --- 3. VS 蹇冭烦 --- */
|
|
@keyframes vsHeartbeat {
|
|
0%, 100% { transform: scale(1); }
|
|
14% { transform: scale(1.12); }
|
|
28% { transform: scale(1); }
|
|
42% { transform: scale(1.06); }
|
|
56% { transform: scale(1); }
|
|
}
|
|
|
|
.vs-heartbeat {
|
|
animation: vsHeartbeat 2.8s ease-in-out infinite;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* --- 4. LIVE 鑴夊啿闂儊 --- */
|
|
@keyframes livePulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
|
|
50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
|
|
}
|
|
|
|
.live-pulse {
|
|
animation: livePulse 1.6s ease-out infinite;
|
|
}
|
|
|
|
/* --- 5. section 鏍囬閲戠嚎婊戝叆 --- */
|
|
@keyframes lineSlideIn {
|
|
from { transform: scaleY(0); opacity: 0; }
|
|
to { transform: scaleY(1); opacity: 1; }
|
|
}
|
|
|
|
.st-line-animated {
|
|
transform-origin: top center;
|
|
animation: lineSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
|
|
}
|
|
|
|
/* --- 6. 璧涗簨鍗＄墖锛氶紶鏍囩Щ鍔ㄥ埌鍗＄墖涓婃椂涓ゅ彧闃熶紞灞呬腑涓斿嚭鐜?VS 缁忓吀鍔ㄧ敾 --- */
|
|
.default-info-layout {
|
|
width: 100%;
|
|
transition: opacity 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
}
|
|
|
|
.match-card:is(:hover, .match-card--engaged) .default-info-layout {
|
|
opacity: 0;
|
|
transform: translateY(-8px) scale(0.95);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hover-versus-layout {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
padding: 8px 16px;
|
|
opacity: 0;
|
|
transform: translateY(8px) scale(0.95);
|
|
transition: opacity 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
pointer-events: none;
|
|
background: rgba(255, 255, 255, 0.98);
|
|
border-radius: 8px 0 0 8px;
|
|
}
|
|
|
|
.match-card:is(:hover, .match-card--engaged) .hover-versus-layout {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.hover-team.home-slide {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
transform: translateX(-35px);
|
|
opacity: 0;
|
|
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s, opacity 0.4s ease 0.05s;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.match-card:is(:hover, .match-card--engaged) .hover-team.home-slide {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.hover-team.away-slide {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
transform: translateX(35px);
|
|
opacity: 0;
|
|
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s, opacity 0.4s ease 0.05s;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.match-card:is(:hover, .match-card--engaged) .hover-team.away-slide {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.hover-team-name {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
text-align: center;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hover-vs-glow {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
font-style: italic;
|
|
color: var(--odds-accent, #F8971F);
|
|
transform: scale(2.8);
|
|
opacity: 0;
|
|
text-shadow:
|
|
0 0 10px rgba(248, 151, 31, 0.5),
|
|
0 0 20px rgba(248, 151, 31, 0.25);
|
|
transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s, opacity 0.3s ease 0.1s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.match-card:is(:hover, .match-card--engaged) .hover-vs-glow {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
animation: vs-clash-impact 0.3s ease-out 0.35s;
|
|
}
|
|
|
|
@keyframes vs-clash-impact {
|
|
0% {
|
|
text-shadow: 0 0 25px rgba(248, 151, 31, 0.7);
|
|
transform: scale(1.25);
|
|
}
|
|
100% {
|
|
text-shadow: 0 0 8px rgba(248, 151, 31, 0.4);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* --- 7. 渚ф爮鍗＄墖鏁翠綋 hover 涓婃诞 --- */
|
|
.side-card {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.side-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md), var(--glow-gold);
|
|
}
|
|
|
|
/* --- 8. 鎺ㄨ崘鍒楄〃 item 宸︿晶閲戠偣鎸囩ず hover --- */
|
|
.side-recommend-item {
|
|
position: relative;
|
|
transition: background 0.18s, transform 0.18s;
|
|
}
|
|
|
|
.side-recommend-item:hover {
|
|
background: rgba(0, 102, 204, 0.06);
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
/* 榧犳爣绉诲姩閫氶亾妗ユ帴妗ワ紙闃叉鍦ㄩ棿闅欏涓㈠けhover鐘舵€侊紝楂樺害闄愬埗涓烘帹鑽愰」楂樺害锛岄槻姝㈤噸鍙犻敊璇級 */
|
|
.side-recommend-item::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: -20px;
|
|
width: 20px;
|
|
background: transparent;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* --- 9. 鎺ㄨ崘璧涗簨鎮诞棰勮鍗?--- */
|
|
.sri-preview-card {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: calc(100% + 6px);
|
|
transform: translateY(-50%) translateX(8px);
|
|
width: 210px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-active);
|
|
border-radius: 8px;
|
|
padding: 8px 10px;
|
|
box-shadow: 0 6px 24px rgba(0, 61, 107, 0.12), 0 0 12px rgba(0, 102, 204, 0.06);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
z-index: 100;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.side-recommend-item:is(:hover, .side-recommend-item--engaged) .sri-preview-card {
|
|
opacity: 1;
|
|
transform: translateY(-50%) translateX(0);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.sri-preview-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.sri-preview-league {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--primary-light);
|
|
background: var(--border-gold-soft);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
max-width: 160px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sri-preview-time {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sri-preview-vs {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.sri-preview-team {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 5px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
opacity: 0;
|
|
transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.sri-preview-team.home-team {
|
|
transform: translateX(-24px);
|
|
}
|
|
|
|
.sri-preview-team.away-team {
|
|
transform: translateX(24px);
|
|
}
|
|
|
|
.side-recommend-item:hover .sri-preview-team {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.sri-preview-team span {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
text-align: center;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sri-preview-vs-text {
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
font-style: italic;
|
|
color: var(--odds-accent, #F8971F);
|
|
text-shadow: 0 0 8px rgba(248, 151, 31, 0.35);
|
|
flex-shrink: 0;
|
|
opacity: 0;
|
|
transform: scale(2.2);
|
|
transition: opacity 0.3s ease 0.1s, transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
|
|
}
|
|
|
|
.side-recommend-item:hover .sri-preview-vs-text {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.sri-preview-odds {
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
|
|
.sri-preview-odd-btn {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 5px 4px;
|
|
border-radius: 6px;
|
|
background: var(--bg-hover);
|
|
border: 1px solid var(--border);
|
|
cursor: pointer;
|
|
transition: background 0.15s, border-color 0.15s;
|
|
}
|
|
|
|
.sri-preview-odd-btn:hover {
|
|
background: rgba(0, 102, 204, 0.08);
|
|
border-color: var(--border-active);
|
|
}
|
|
|
|
.sri-preview-odd-btn.selected {
|
|
background: rgba(0, 61, 107, 0.08);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.sri-odd-label {
|
|
font-size: 9px;
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sri-odd-val {
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
color: var(--odds-accent, #F8971F);
|
|
}
|
|
|
|
.sri-preview-no-odds {
|
|
text-align: center;
|
|
font-size: 9px;
|
|
color: var(--text-muted);
|
|
padding: 4px 0;
|
|
}
|
|
|
|
/* --- Sri preview: team highlight on odds selection --- */
|
|
.sri-preview-team {
|
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, filter 0.3s ease;
|
|
}
|
|
|
|
.sri-preview-vs.home .sri-preview-team.home-team {
|
|
transform: translateX(0) scale(1.1) !important;
|
|
filter: brightness(1.3) saturate(1.2);
|
|
opacity: 1 !important;
|
|
}
|
|
.sri-preview-vs.home .sri-preview-team.away-team {
|
|
opacity: 0.35 !important;
|
|
transform: translateX(0) scale(0.92) !important;
|
|
filter: grayscale(0.6) brightness(0.7);
|
|
}
|
|
|
|
.sri-preview-vs.away .sri-preview-team.away-team {
|
|
transform: translateX(0) scale(1.1) !important;
|
|
filter: brightness(1.3) saturate(1.2);
|
|
opacity: 1 !important;
|
|
}
|
|
.sri-preview-vs.away .sri-preview-team.home-team {
|
|
opacity: 0.35 !important;
|
|
transform: translateX(0) scale(0.92) !important;
|
|
filter: grayscale(0.6) brightness(0.7);
|
|
}
|
|
|
|
.sri-preview-vs.draw .sri-preview-team {
|
|
transform: translateX(0) scale(1.05) !important;
|
|
filter: brightness(1.15) saturate(1.1);
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* --- VS Selection Highlight: scale selected team, no VS animation --- */
|
|
.featured-team,
|
|
.hover-team {
|
|
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, filter 0.3s ease;
|
|
}
|
|
|
|
/* featured match (home) */
|
|
.featured-teams.home .featured-team:first-child {
|
|
transform: scale(1.08);
|
|
filter: brightness(1.3) saturate(1.2);
|
|
}
|
|
.featured-teams.home .featured-team:last-child {
|
|
opacity: 0.35;
|
|
transform: scale(0.94);
|
|
filter: grayscale(0.6) brightness(0.7);
|
|
}
|
|
/* featured match (away) */
|
|
.featured-teams.away .featured-team:last-child {
|
|
transform: scale(1.08);
|
|
filter: brightness(1.3) saturate(1.2);
|
|
}
|
|
.featured-teams.away .featured-team:first-child {
|
|
opacity: 0.35;
|
|
transform: scale(0.94);
|
|
filter: grayscale(0.6) brightness(0.7);
|
|
}
|
|
/* featured match (draw) */
|
|
.featured-teams.draw .featured-team {
|
|
transform: scale(1.05);
|
|
filter: brightness(1.15) saturate(1.1);
|
|
}
|
|
|
|
/* hover-versus-layout (sidebar/upcoming) */
|
|
.hover-versus-layout.home .hover-team.home-slide {
|
|
transform: scale(1.08);
|
|
filter: brightness(1.3) saturate(1.2);
|
|
z-index: 2;
|
|
}
|
|
.hover-versus-layout.home .hover-team.away-slide {
|
|
opacity: 0.35 !important;
|
|
transform: scale(0.94);
|
|
filter: grayscale(0.6) brightness(0.7);
|
|
}
|
|
.hover-versus-layout.away .hover-team.away-slide {
|
|
transform: scale(1.08);
|
|
filter: brightness(1.3) saturate(1.2);
|
|
z-index: 2;
|
|
}
|
|
.hover-versus-layout.away .hover-team.home-slide {
|
|
opacity: 0.35 !important;
|
|
transform: scale(0.94);
|
|
filter: grayscale(0.6) brightness(0.7);
|
|
}
|
|
.hover-versus-layout.draw .hover-team.home-slide,
|
|
.hover-versus-layout.draw .hover-team.away-slide {
|
|
transform: scale(1.05);
|
|
filter: brightness(1.15) saturate(1.1);
|
|
}
|
|
</style>
|