feat(player-desktop): 优化桌面端首页布局与交互，支持悬停快速下注与优胜冠军侧栏
This commit is contained in:
@@ -4,6 +4,7 @@ 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';
|
||||
@@ -15,12 +16,9 @@ import { useDesktopBetPopover } from '../../composables/useDesktopBetPopover';
|
||||
import { resolveSelectionLabel } from '../../utils/selectionLabel';
|
||||
import MarketSelectionsPanel from '../../components/match-detail/MarketSelectionsPanel.vue';
|
||||
|
||||
type HotTab = 'hot' | 'upcoming';
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const router = useRouter();
|
||||
const { banners, hotMatches, upcomingMatches, loading, load, announcementItems } = usePlayerHome();
|
||||
const activeTab = ref<HotTab>('hot');
|
||||
|
||||
const slip = useBetSlipStore();
|
||||
const auth = useAuthStore();
|
||||
@@ -33,13 +31,17 @@ const bannerFallbackTo = computed(() => {
|
||||
return id ? `/announcements/${id}` : '/announcements';
|
||||
});
|
||||
|
||||
const displayedMatches = computed<PlayerHomeMatch[]>(() =>
|
||||
activeTab.value === 'hot' ? hotMatches.value : upcomingMatches.value,
|
||||
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)),
|
||||
);
|
||||
|
||||
const emptyMessage = computed(() =>
|
||||
activeTab.value === 'hot' ? t('home.no_matches') : t('home.upcoming_empty'),
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
void load(true);
|
||||
@@ -49,6 +51,10 @@ 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',
|
||||
@@ -90,6 +96,7 @@ function getMarketTabLabel(type: string) {
|
||||
})();
|
||||
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;
|
||||
@@ -99,8 +106,7 @@ function isMarketLocked(match: PlayerHomeMatch, market?: { status: string; allow
|
||||
}
|
||||
|
||||
function isSelected(id: string) {
|
||||
if (slip.isInSlip(id)) return true;
|
||||
return popoverVisible.value && pendingItem.value?.selectionId === id;
|
||||
return false;
|
||||
}
|
||||
|
||||
function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, event?: MouseEvent) {
|
||||
@@ -111,7 +117,7 @@ function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, eve
|
||||
}
|
||||
const sel = market.selections?.find((s: any) => s.id === selId);
|
||||
if (!sel || !event) return;
|
||||
|
||||
|
||||
const item = {
|
||||
selectionId: sel.id,
|
||||
oddsVersion: String(sel.oddsVersion),
|
||||
@@ -128,136 +134,371 @@ function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, eve
|
||||
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 });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="desktop-home-view">
|
||||
<section class="hero-banner-full">
|
||||
<DesktopBanner3DCarousel :banners="banners" :fallback-to="bannerFallbackTo" />
|
||||
<!-- [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>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="matches-hub">
|
||||
<div class="hub-header">
|
||||
<div class="tabs-list" role="tablist">
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
class="hub-tab"
|
||||
:class="{ active: activeTab === 'hot' }"
|
||||
:aria-selected="activeTab === 'hot'"
|
||||
@click="activeTab = 'hot'"
|
||||
>
|
||||
{{ t('home.hot_tab') || '热门赛事' }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
class="hub-tab"
|
||||
:class="{ active: activeTab === 'upcoming' }"
|
||||
:aria-selected="activeTab === 'upcoming'"
|
||||
@click="activeTab = 'upcoming'"
|
||||
>
|
||||
{{ t('home.upcoming_tab') || '即将开赛' }}
|
||||
</button>
|
||||
<!-- [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>
|
||||
<button type="button" class="refresh-btn" :disabled="loading" @click="load(true)">
|
||||
<span v-if="loading" class="spin">↻</span>
|
||||
<span v-else>↻ {{ t('bet.refresh') || '刷新' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading && !displayedMatches.length" class="loading-state">
|
||||
<GoldSpinner :active="true" />
|
||||
</div>
|
||||
<div v-if="loading && !hotMatches.length" class="loading-state">
|
||||
<GoldSpinner :active="true" />
|
||||
</div>
|
||||
|
||||
<!-- Matches Grid -->
|
||||
<div v-else-if="displayedMatches.length" class="matches-grid">
|
||||
<div
|
||||
v-for="match in displayedMatches"
|
||||
:key="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>
|
||||
<template v-else-if="featuredMatch">
|
||||
<!-- 焦点大卡 -->
|
||||
<div class="featured-match anim-fade-up" style="--anim-delay:240ms" @click.self="goMatch(featuredMatch.id)">
|
||||
<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" @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="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>
|
||||
|
||||
<!-- Right Side: Market Selections & Switcher -->
|
||||
<div class="match-market-side">
|
||||
<div class="market-tabs">
|
||||
<button
|
||||
v-for="m in getAvailableMarketsForMatch(match)"
|
||||
<div class="featured-markets">
|
||||
<div
|
||||
v-for="m in getAvailableMarketsForMatch(featuredMatch)"
|
||||
:key="m.marketType"
|
||||
type="button"
|
||||
class="market-tab-btn"
|
||||
:class="{ active: getActiveMarketType(match) === m.marketType }"
|
||||
@click="setActiveMarketType(match.id, m.marketType)"
|
||||
class="featured-market-block"
|
||||
>
|
||||
{{ getMarketTabLabel(m.marketType) }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="market-odds-area">
|
||||
<template v-if="getActiveMarket(match)">
|
||||
<div class="featured-market-label">{{ getMarketTabLabel(m.marketType) }}</div>
|
||||
<MarketSelectionsPanel
|
||||
desktop-card
|
||||
compact
|
||||
:locked="isMarketLocked(match, getActiveMarket(match))"
|
||||
:line-value="getActiveMarket(match)?.lineValue"
|
||||
:selections="getActiveMarket(match)?.selections || []"
|
||||
:locked="isMarketLocked(featuredMatch, m)"
|
||||
:line-value="m.lineValue"
|
||||
:selections="m.selections || []"
|
||||
:is-selected="isSelected"
|
||||
@pick="(selId, ev) => handleOddsClick(match, getActiveMarket(match)!, selId, ev)"
|
||||
@pick="(selId, ev) => handleOddsClick(featuredMatch!, m, selId, ev)"
|
||||
/>
|
||||
</template>
|
||||
<div v-else class="no-market-odds">
|
||||
</div>
|
||||
<div v-if="!getAvailableMarketsForMatch(featuredMatch).length" class="no-market-odds">
|
||||
{{ t('bet.no_market_odds') || '暂无盘口赔率' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else class="empty-state">
|
||||
<p>{{ emptyMessage }}</p>
|
||||
</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"
|
||||
:style="{ '--anim-delay': (320 + idx * 60) + 'ms' }"
|
||||
>
|
||||
<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">
|
||||
<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"
|
||||
:style="{ '--anim-delay': (260 + idx * 50) + 'ms' }"
|
||||
>
|
||||
<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">
|
||||
<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">
|
||||
<!-- 右侧多卡边栏 -->
|
||||
<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"
|
||||
:style="{ '--anim-delay': (200 + idx * 70) + 'ms' }"
|
||||
@click="goMatch(m.id)"
|
||||
>
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
@@ -267,70 +508,106 @@ function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, eve
|
||||
.desktop-home-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-row {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-banner-full {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.content-row {
|
||||
.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: 8px;
|
||||
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; /* let child fill full height */
|
||||
padding: 0; /* no padding — child spans edge to edge */
|
||||
box-shadow: inset 0 0 12px rgba(212, 175, 55, 0.08);
|
||||
}
|
||||
|
||||
/* 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) 300px;
|
||||
grid-template-columns: minmax(0, 1fr) 320px;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.home-sidebar {
|
||||
.main-col {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.home-sidebar :deep(.home-announce-card) {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.matches-hub {
|
||||
.content-section {
|
||||
background: rgba(20, 20, 20, 0.85);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.hub-header {
|
||||
/* section-title 金线 */
|
||||
.section-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.tabs-list {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
.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);
|
||||
}
|
||||
|
||||
.hub-tab {
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
padding: 8px 4px;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
.st-text {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.hub-tab:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hub-tab.active {
|
||||
color: var(--primary-light);
|
||||
border-bottom-color: var(--primary);
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
.st-refresh {
|
||||
margin-left: auto;
|
||||
background: transparent;
|
||||
color: var(--primary-light);
|
||||
font-size: 12px;
|
||||
@@ -338,6 +615,12 @@ function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, eve
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.st-refresh:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.spin {
|
||||
@@ -354,13 +637,139 @@ function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, eve
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
min-height: 160px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Featured 焦点大卡 */
|
||||
.featured-match {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding: 18px 20px;
|
||||
border-radius: 12px;
|
||||
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), inset 0 0 20px rgba(212, 175, 55, 0.06);
|
||||
margin-bottom: 14px;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.25s, transform 0.15s;
|
||||
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(212, 175, 55, 0.18), transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.featured-match:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 24px rgba(212, 175, 55, 0.25), inset 0 0 20px 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-size: 22px;
|
||||
font-weight: 900;
|
||||
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-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
letter-spacing: 0.4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* 普通赛事卡片 grid（2 列） */
|
||||
.matches-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@@ -370,13 +779,14 @@ function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, eve
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
|
||||
min-height: 76px;
|
||||
}
|
||||
|
||||
.match-card:hover {
|
||||
border-color: var(--border-gold);
|
||||
box-shadow: var(--shadow-gold);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.match-info-side {
|
||||
@@ -390,15 +800,21 @@ function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, eve
|
||||
min-width: 0;
|
||||
cursor: pointer;
|
||||
background: rgba(255, 255, 255, 0.01);
|
||||
transition: background-color 0.2s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.match-info-side:hover {
|
||||
background: var(--bg-hover);
|
||||
.match-info-side > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.match-card:hover .match-info-side {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.match-market-side {
|
||||
width: 290px;
|
||||
width: 260px;
|
||||
flex-shrink: 0;
|
||||
padding: 8px 10px;
|
||||
display: flex;
|
||||
@@ -411,14 +827,16 @@ function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, eve
|
||||
.card-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.top-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.league-tag {
|
||||
@@ -426,12 +844,16 @@ function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, eve
|
||||
font-weight: 700;
|
||||
color: var(--primary-light);
|
||||
background: var(--border-gold-soft);
|
||||
padding: 1px 4px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
max-width: 120px;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.live-indicator {
|
||||
@@ -455,6 +877,7 @@ function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, eve
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vs-text {
|
||||
@@ -471,6 +894,7 @@ function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, eve
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
@@ -527,28 +951,506 @@ function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, eve
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-markets-fallback {
|
||||
/* 右侧栏 */
|
||||
.home-sidebar {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.home-sidebar :deep(.home-announce-card) {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.side-card {
|
||||
background: rgba(20, 20, 20, 0.85);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.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;
|
||||
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: 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. 通用入场：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);
|
||||
}
|
||||
}
|
||||
|
||||
.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:hover .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;
|
||||
height: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
.go-detail-btn {
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
background: transparent;
|
||||
color: var(--primary-light);
|
||||
.match-card:hover .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:hover .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:hover .hover-team.away-slide {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hover-team-name {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.go-detail-btn:hover {
|
||||
background: var(--primary);
|
||||
color: #111;
|
||||
border-color: var(--primary);
|
||||
.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:hover .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.15s, transform 0.15s;
|
||||
}
|
||||
|
||||
.side-recommend-item:hover {
|
||||
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);
|
||||
border: 1px solid var(--border-gold);
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 175, 55, 0.12);
|
||||
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: 10px;
|
||||
}
|
||||
|
||||
.side-recommend-item:hover .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);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user