1630 lines
46 KiB
Vue
1630 lines
46 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 AnnouncementMarquee from '../../components/AnnouncementMarquee.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));
|
||
|
||
const marqueeItems = computed<string[]>(() =>
|
||
announcementItems.value
|
||
.map((it) => it.translation?.title?.trim() || '')
|
||
.filter((s): s is string => Boolean(s)),
|
||
);
|
||
|
||
|
||
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 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 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>
|
||
|
||
<!-- [C] 跑马灯金色条（仅在有数据时展示） -->
|
||
<div v-if="marqueeItems.length" class="home-marquee-strip anim-fade-up" style="--anim-delay:80ms">
|
||
<AnnouncementMarquee :items="marqueeItems" embedded />
|
||
</div>
|
||
|
||
<!-- [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">暂无盘口</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.desktop-home-view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-4);
|
||
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;
|
||
}
|
||
|
||
/* [C] 跑马灯金条 */
|
||
.home-marquee-strip {
|
||
position: relative;
|
||
height: 34px;
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
background: linear-gradient(90deg,
|
||
rgba(212, 175, 55, 0.02),
|
||
rgba(212, 175, 55, 0.14),
|
||
rgba(212, 175, 55, 0.02));
|
||
border: 1px solid var(--border-gold-soft);
|
||
display: flex;
|
||
align-items: stretch;
|
||
padding: 0;
|
||
box-shadow: inset 0 0 12px rgba(212, 175, 55, 0.08);
|
||
backdrop-filter: var(--blur-sm);
|
||
-webkit-backdrop-filter: var(--blur-sm);
|
||
}
|
||
|
||
/* force the embedded button to fill the strip completely */
|
||
.home-marquee-strip :deep(.marquee-bar.embedded) {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0 12px;
|
||
border: none;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
/* [D] Main Row */
|
||
.main-row {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 320px;
|
||
gap: var(--space-4);
|
||
align-items: start;
|
||
}
|
||
|
||
.main-col {
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-5);
|
||
}
|
||
|
||
.content-section {
|
||
background: rgba(20, 20, 20, 0.88);
|
||
backdrop-filter: var(--blur-md);
|
||
-webkit-backdrop-filter: var(--blur-md);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-4) 18px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
/* section-title 金线 */
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.st-line {
|
||
width: 4px;
|
||
height: 18px;
|
||
border-radius: 2px;
|
||
background: linear-gradient(180deg, var(--primary), var(--primary-light));
|
||
box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
|
||
}
|
||
|
||
.st-text {
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-lg);
|
||
font-weight: 400;
|
||
color: var(--text);
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.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-4);
|
||
padding: 18px 20px;
|
||
border-radius: var(--radius-lg);
|
||
background:
|
||
linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.04) 50%, rgba(15, 10, 0, 0.1)),
|
||
url('../../assets/images/card-bg.webp') center/cover no-repeat;
|
||
border: 1px solid var(--border-gold);
|
||
box-shadow: var(--shadow-gold-lg), inset 0 0 20px rgba(212, 175, 55, 0.06);
|
||
margin-bottom: var(--space-4);
|
||
cursor: pointer;
|
||
transition: box-shadow var(--duration-smooth) var(--ease-smooth),
|
||
transform var(--duration-normal) var(--ease-out-expo);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.featured-match::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; right: 0;
|
||
width: 180px; height: 180px;
|
||
background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.2), transparent 60%);
|
||
pointer-events: none;
|
||
animation: goldGlowPulse 3.5s ease-in-out infinite;
|
||
transform-origin: top right;
|
||
}
|
||
|
||
.featured-match:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--glow-gold-lg), inset 0 0 24px rgba(212, 175, 55, 0.08);
|
||
}
|
||
|
||
.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;
|
||
color: var(--text);
|
||
text-align: center;
|
||
line-height: 1.2;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.featured-vs {
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-2xl);
|
||
font-weight: 400;
|
||
font-style: italic;
|
||
color: var(--primary-light);
|
||
text-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
|
||
}
|
||
|
||
.featured-markets {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 10px;
|
||
margin: 14px -20px -18px;
|
||
padding: 14px 20px 18px;
|
||
background: #000000;
|
||
border-top: 1px solid rgba(212, 175, 55, 0.2);
|
||
}
|
||
|
||
.featured-market-block {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.featured-market-label {
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-sm);
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
letter-spacing: 0.4px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* 普通赛事卡片 grid（2 列） */
|
||
.matches-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.match-card {
|
||
display: flex;
|
||
background: var(--bg-card);
|
||
backdrop-filter: var(--blur-sm);
|
||
-webkit-backdrop-filter: var(--blur-sm);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
transition: border-color var(--duration-normal) var(--ease-smooth),
|
||
box-shadow var(--duration-normal) var(--ease-smooth),
|
||
transform var(--duration-normal) var(--ease-out-expo);
|
||
min-height: 76px;
|
||
}
|
||
|
||
.match-card:is(:hover, .match-card--engaged) {
|
||
border-color: var(--border-gold);
|
||
box-shadow: var(--shadow-gold-lg), var(--glow-gold);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.match-info-side {
|
||
flex: 1;
|
||
padding: var(--space-2) var(--space-3);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: var(--space-1);
|
||
border-right: 1px solid var(--border);
|
||
min-width: 0;
|
||
cursor: pointer;
|
||
background: rgba(255, 255, 255, 0.01);
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: background var(--duration-fast) var(--ease-smooth),
|
||
box-shadow var(--duration-normal) var(--ease-smooth);
|
||
}
|
||
|
||
.match-info-side > * {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.match-card:is(:hover, .match-card--engaged) .match-info-side {
|
||
background: rgba(212, 175, 55, 0.03);
|
||
box-shadow: inset 3px 0 0 var(--primary);
|
||
}
|
||
|
||
.match-market-side {
|
||
width: 260px;
|
||
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: flex-start;
|
||
gap: 8px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.top-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.league-tag {
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-xs);
|
||
font-weight: 700;
|
||
color: var(--primary-light);
|
||
background: var(--border-gold-soft);
|
||
padding: 1px 6px;
|
||
border-radius: var(--radius-sm);
|
||
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-family: var(--font-display);
|
||
font-size: 9px;
|
||
font-weight: 400;
|
||
background: var(--danger);
|
||
color: #fff;
|
||
padding: 1px 3px;
|
||
border-radius: var(--radius-sm);
|
||
line-height: 1;
|
||
}
|
||
|
||
.match-time {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
color: var(--text-muted);
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.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: var(--text-sm);
|
||
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-family: var(--font-body);
|
||
font-size: var(--text-xs);
|
||
font-weight: 700;
|
||
border-radius: var(--radius);
|
||
background: transparent;
|
||
color: var(--text-muted);
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: background var(--duration-fast) var(--ease-smooth),
|
||
color var(--duration-fast) var(--ease-smooth);
|
||
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-tab-btn:focus-visible {
|
||
outline: 2px solid var(--primary);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.market-odds-area {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.no-market-odds {
|
||
font-size: var(--text-xs);
|
||
color: var(--text-muted);
|
||
text-align: center;
|
||
}
|
||
|
||
/* 右侧栏 */
|
||
.home-sidebar {
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.home-sidebar :deep(.home-announce-card) {
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
|
||
.side-card {
|
||
background: rgba(20, 20, 20, 0.88);
|
||
backdrop-filter: var(--blur-md);
|
||
-webkit-backdrop-filter: var(--blur-md);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-3) 14px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.side-card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 8px;
|
||
margin-bottom: 8px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.side-card-title {
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-base);
|
||
font-weight: 400;
|
||
color: var(--primary-light);
|
||
letter-spacing: 0.3px;
|
||
}
|
||
|
||
.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: var(--space-2) var(--space-3);
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
transition: background var(--duration-fast) var(--ease-smooth),
|
||
transform var(--duration-fast) var(--ease-out-expo),
|
||
box-shadow var(--duration-fast) var(--ease-smooth);
|
||
}
|
||
|
||
.side-recommend-item:hover {
|
||
background: rgba(212, 175, 55, 0.06);
|
||
transform: translateX(3px);
|
||
box-shadow: inset 2px 0 0 var(--primary);
|
||
}
|
||
|
||
.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. 通用入场：fade + 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);
|
||
}
|
||
}
|
||
|
||
|
||
/* --- 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(14, 14, 14, 0.96);
|
||
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(--primary-light);
|
||
transform: scale(2.8);
|
||
opacity: 0;
|
||
text-shadow:
|
||
0 0 10px rgba(212, 175, 55, 0.8),
|
||
0 0 20px rgba(212, 175, 55, 0.4);
|
||
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(212, 175, 55, 1);
|
||
transform: scale(1.25);
|
||
}
|
||
100% {
|
||
text-shadow: 0 0 8px rgba(212, 175, 55, 0.7);
|
||
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: 0 4px 20px rgba(212, 175, 55, 0.12);
|
||
}
|
||
|
||
/* --- 8. 推荐列表 item 左侧金点指示 hover --- */
|
||
.side-recommend-item {
|
||
position: relative;
|
||
transition: background 0.18s, transform 0.18s;
|
||
}
|
||
|
||
.side-recommend-item:hover {
|
||
background: rgba(212, 175, 55, 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: 260px;
|
||
background: rgba(12, 12, 12, 0.97);
|
||
backdrop-filter: var(--blur-lg);
|
||
-webkit-backdrop-filter: var(--blur-lg);
|
||
border: 1px solid var(--border-gold);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-3) 14px;
|
||
box-shadow: var(--shadow-lg), var(--glow-gold-md);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity var(--duration-smooth) var(--ease-smooth),
|
||
transform var(--duration-smooth) var(--ease-out-expo);
|
||
z-index: var(--z-popover);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.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(--primary-light);
|
||
text-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
|
||
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: var(--border-gold-soft);
|
||
border-color: var(--border-gold);
|
||
}
|
||
|
||
.sri-preview-odd-btn.selected {
|
||
background: var(--border-gold-soft);
|
||
border-color: var(--primary-light);
|
||
}
|
||
|
||
.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(--primary-light);
|
||
}
|
||
|
||
.sri-preview-no-odds {
|
||
text-align: center;
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* --- 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>
|