feat(player-desktop): 优化桌面端首页布局与交互，支持悬停快速下注与优胜冠军侧栏

2026-07-01 17:34:09 +08:00
parent 05fb1b46ab
commit 49eb3cb7e0
37 changed files with 2135 additions and 7338 deletions
--- a/apps/player/src/components/AnnouncementMarquee.vue
+++ b/apps/player/src/components/AnnouncementMarquee.vue
@@ -65,11 +65,9 @@ function goDetail() {

 .marquee-bar.embedded {
  margin: 0;
-  padding: 8px 12px;
  border: none;
  border-radius: 0;
-  border-bottom: 1px solid var(--border);
-  background: #111;
+  background: transparent; /* inherit parent strip's gold gradient */
 }

 .marquee-bar.embedded .marquee-badge {
--- a/apps/player/src/components/FloatingMailbox.vue
+++ b/apps/player/src/components/FloatingMailbox.vue
@@ -35,7 +35,12 @@ const showMessageActions = computed(
 const isBettingDesktop = computed(() => {
  if (!isDesktop.value) return false;
  const p = route.path;
-  return p === '/bet' || p.startsWith('/match/') || p.startsWith('/outright/');
+  if (p === '/bets' || p.startsWith('/bets/')) return false;
+  if (p.startsWith('/wallet') || p.startsWith('/profile')) return false;
+  if (route.params.id && (p.startsWith('/announcements/') || p.startsWith('/messages/'))) {
+    return false;
+  }
+  return true;
 });

 watch(isOpen, (opened) => {
--- a/apps/player/src/components/HomeAnnouncementCard.vue
+++ b/apps/player/src/components/HomeAnnouncementCard.vue
@@ -174,11 +174,13 @@ watch(totalPages, () => {

 .card-body {
  overflow: hidden;
+  min-height: 138px; /* 3 rows × ~46px each, keeps layout stable during pagination */
 }

 .carousel-slide {
  display: flex;
  flex-direction: column;
+  height: 100%;
 }

 .announce-row {
--- a/apps/player/src/components/MatchBetCard.vue
+++ b/apps/player/src/components/MatchBetCard.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { teamFlagUrl } from '../utils/teamFlag';
 import { matchPhaseLabel, type MatchPhase } from '../utils/matchPhase';
 import { formatLocalMatchDateTime } from '@thebet365/shared';
+import { useBetSlipStore } from '../stores/betSlip';
+import { useAuthStore } from '../stores/auth';
+import { useDesktopBetPopover } from '../composables/useDesktopBetPopover';
+import { resolveSelectionLabel } from '../utils/selectionLabel';
+import MarketSelectionsPanel from './match-detail/MarketSelectionsPanel.vue';

 const props = defineProps<{
  match: {
@@ -31,7 +37,9 @@ const props = defineProps<{
      homeCards?: number | null;
      awayCards?: number | null;
    } | null;
+    markets?: any[];
  };
+  noQuickBet?: boolean;
 }>();

 const emit = defineEmits<{ bet: [id: string] }>();
@@ -70,12 +78,95 @@ const liveScoreText = computed(() => {
  if (!s || s.ftHome == null || s.ftAway == null) return '';
  return `${s.ftHome} - ${s.ftAway}`;
 });
+
+const router = useRouter();
+const slip = useBetSlipStore();
+const auth = useAuthStore();
+const { openAt } = useDesktopBetPopover();
+
+const activeMarketType = ref<string>('');
+
+const currentMarketType = computed(() => {
+  if (activeMarketType.value) return activeMarketType.value;
+  const available = getAvailableMarketsForMatch(props.match);
+  if (available.some((m: any) => m.marketType === 'FT_1X2')) {
+    return 'FT_1X2';
+  }
+  return available[0]?.marketType || 'FT_1X2';
+});
+
+function isSelected(id: string) {
+  return slip.isInSlip(id);
+}
+
+function getAvailableMarketsForMatch(match: any) {
+  const supported = ['FT_1X2', 'FT_HANDICAP', 'FT_OVER_UNDER'];
+  return (match.markets ?? []).filter((m: any) => supported.includes(m.marketType));
+}
+
+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 getSelLabel(sel: any, marketType: string, lineValue?: string | number | null) {
+  return resolveSelectionLabel(t, sel.selectionCode || '', sel.selectionName || '', { lineValue });
+}
+
+function handleOddsClick(match: any, market: any, selId: string, event?: MouseEvent) {
+  if (isMarketLocked(match, market)) return;
+  if (!auth.token) {
+    auth.showLoginPrompt(router.currentRoute.value.fullPath);
+    return;
+  }
+  const sel = market.selections?.find((s: any) => s.id === selId);
+  if (!sel || !event) return;
+
+  const item = {
+    selectionId: sel.id,
+    oddsVersion: String(sel.oddsVersion),
+    matchId: match.id,
+    matchName: `${match.homeTeamName} vs ${match.awayTeamName}`,
+    marketId: market.id,
+    marketName: market.marketDisplayName?.trim() || market.marketType || '',
+    selectionName: getSelLabel(sel, market.marketType, 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 isMarketLocked(match: any, 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 getActiveMarket() {
+  const type = currentMarketType.value;
+  return props.match.markets?.find((m: any) => m.marketType === type);
+}
+
+function goMatchDetail() {
+  router.push(`/match/${props.match.id}`);
+}
 </script>

 <template>
  <article
    class="match-card"
-    :class="{ 'match-card--phase': phase !== 'open' }"
+    :class="{ 'match-card--phase': phase !== 'open', 'no-quick-bet': noQuickBet }"
    @click="emit('bet', match.id)"
  >
    <span v-if="phase === 'open'" class="status-tag status-tag--open">{{ t('bet.status_open') }}</span>
@@ -124,6 +215,40 @@ const liveScoreText = computed(() => {
    >
      {{ bettingOpen ? t('bet.place_bet_short') : t('bet.view_match') }}
    </button>
+
+    <!-- Morphing Quick Bet panel (Desktop Only, disabled when noQuickBet=true) -->
+    <div v-if="!noQuickBet" class="card-quick-bet" @click.stop>
+      <div class="quick-bet-tabs" v-if="getAvailableMarketsForMatch(match).length">
+        <button
+          v-for="m in getAvailableMarketsForMatch(match)"
+          :key="m.marketType"
+          type="button"
+          class="quick-bet-tab-btn"
+          :class="{ active: currentMarketType === m.marketType }"
+          @click="activeMarketType = m.marketType"
+        >
+          {{ getMarketTabLabel(m.marketType) }}
+        </button>
+        <span class="quick-bet-all-link" @click="goMatchDetail">{{ t('bet.all') || '全部' }} →</span>
+      </div>
+
+      <div class="quick-bet-odds">
+        <template v-if="getActiveMarket()">
+          <MarketSelectionsPanel
+            desktop-card
+            compact
+            :locked="isMarketLocked(match, getActiveMarket())"
+            :line-value="getActiveMarket()?.lineValue"
+            :selections="getActiveMarket()?.selections || []"
+            :is-selected="isSelected"
+            @pick="(selId, ev) => handleOddsClick(match, getActiveMarket()!, selId, ev)"
+          />
+        </template>
+        <div v-else class="quick-bet-no-odds">
+          {{ t('bet.no_market_odds') || '暂无盘口' }}
+        </div>
+      </div>
+    </div>
  </article>
 </template>

@@ -139,6 +264,7 @@ const liveScoreText = computed(() => {
  align-items: center;
  gap: 8px;
  min-width: 0;
+  min-height: 130px;
  overflow: hidden;
  cursor: pointer;
 }
@@ -163,6 +289,7 @@ const liveScoreText = computed(() => {
  align-items: center;
  width: 100%;
  gap: 4px;
+  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.3s ease;
 }

 .team {
@@ -173,6 +300,7 @@ const liveScoreText = computed(() => {
  gap: 6px;
  min-width: 0;
  transform: translateY(8px);
+  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }

 .team-name {
@@ -189,6 +317,7 @@ const liveScoreText = computed(() => {
  text-align: center;
  padding: 0 6px;
  align-self: stretch;
+  transition: font-size 0.25s ease;
 }

 .match-card--phase .team-name {
@@ -201,12 +330,14 @@ const liveScoreText = computed(() => {
  object-fit: cover;
  border-radius: 3px;
  display: block;
+  transition: transform 0.25s ease, opacity 0.2s ease, height 0.25s ease, width 0.25s ease, margin 0.25s ease;
 }

 .team-flag.flag-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
+  transition: transform 0.25s ease, opacity 0.2s ease, height 0.25s ease, width 0.25s ease, margin 0.25s ease;
 }

 .center-col {
@@ -229,6 +360,7 @@ const liveScoreText = computed(() => {
  max-width: 96px;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
+  transition: opacity 0.2s ease, height 0.2s ease, margin 0.2s ease;
 }

 .live-score {
@@ -237,6 +369,7 @@ const liveScoreText = computed(() => {
  color: #fff;
  line-height: 1;
  letter-spacing: 0.04em;
+  transition: font-size 0.25s ease;
 }

 .vs {
@@ -246,6 +379,7 @@ const liveScoreText = computed(() => {
  letter-spacing: 0.08em;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
+  transition: font-size 0.25s ease;
 }

 .status-tag {
@@ -292,6 +426,8 @@ const liveScoreText = computed(() => {
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.2;
+  overflow: hidden;
+  transition: opacity 0.2s ease, transform 0.2s ease, height 0.25s ease, padding 0.25s ease, min-width 0.25s ease, min-height 0.25s ease, margin 0.25s ease;
 }

 .bet-btn--view {
@@ -299,4 +435,162 @@ const liveScoreText = computed(() => {
  border: 1px solid #444;
  color: #aaa;
 }
+
+/* --- Morphing Quick Bet panel --- */
+.card-quick-bet {
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(12px);
+  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+  z-index: 5;
+}
+
+@media (hover: hover) {
+  .match-card:not(.no-quick-bet):hover {
+    border-color: var(--border-gold);
+    box-shadow: var(--shadow-gold);
+  }
+
+  /* 整行保持原位，间距自然 */
+  .match-card:not(.no-quick-bet):hover .teams-row {
+    transform: translateY(0);
+    padding: 0 40px;
+  }
+
+  /* .team 取消自身 translateY */
+  .match-card:not(.no-quick-bet):hover .team {
+    transform: translateY(0);
+    gap: 3px;
+  }
+
+  /* 旗帜缩小到 40×28 */
+  .match-card:not(.no-quick-bet):hover .team-flag {
+    width: 40px;
+    height: 28px;
+  }
+
+  .match-card:not(.no-quick-bet):hover .team-flag.flag-logo {
+    width: 28px;
+    height: 28px;
+  }
+
+  /* 队名缩小并禁止换行 */
+  .match-card:not(.no-quick-bet):hover .team-name {
+    font-size: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  /* 隐藏开赛时间 */
+  .match-card:not(.no-quick-bet):hover .kickoff {
+    opacity: 0;
+    height: 0;
+    margin: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  /* VS / 比分 */
+  .match-card:not(.no-quick-bet):hover .vs,
+  .match-card:not(.no-quick-bet):hover .live-score {
+    font-size: 16px;
+  }
+
+  /* 下注按钮淡出（保留布局空间避免高度抖动） */
+  .match-card:not(.no-quick-bet):hover .bet-btn {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* 快速下注面板淡入 */
+  .match-card:not(.no-quick-bet):hover .card-quick-bet {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  /* sidebar 模式：hover 仍有金边，但不做复杂动画 */
+  .match-card.no-quick-bet:hover {
+    border-color: var(--border-gold);
+    box-shadow: var(--shadow-gold);
+  }
+}
+
+.quick-bet-tabs {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 4px;
+  margin-bottom: 2px;
+}
+
+.quick-bet-tab-btn {
+  padding: 2px 6px;
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: 3px;
+  transition: all 0.15s;
+}
+
+.quick-bet-tab-btn:hover {
+  color: var(--primary-light);
+}
+
+.quick-bet-tab-btn.active {
+  color: var(--primary-light);
+  background: var(--border-gold-soft);
+}
+
+.quick-bet-all-link {
+  margin-left: auto;
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--primary-light);
+  cursor: pointer;
+  padding: 2px 4px;
+  transition: opacity 0.15s;
+}
+
+.quick-bet-all-link:hover {
+  text-shadow: 0 0 4px rgba(212, 175, 55, 0.6);
+}
+
+.quick-bet-odds {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.quick-bet-odds :deep(.odds-btn) {
+  min-height: 26px !important;
+  padding: 1px 4px !important;
+  gap: 1px !important;
+}
+
+.quick-bet-odds :deep(.odds) {
+  font-size: 11px !important;
+}
+
+.quick-bet-odds :deep(.label) {
+  font-size: 8px !important;
+}
+
+.quick-bet-no-odds {
+  font-size: 10px;
+  color: var(--text-muted);
+}
 </style>
--- a/apps/player/src/components/desktop/DesktopBanner3DCarousel.vue
+++ b/apps/player/src/components/desktop/DesktopBanner3DCarousel.vue
@@ -278,11 +278,9 @@ onUnmounted(stopAutoPlay);
    0 16px 40px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(212, 175, 55, 0.22),
    0 0 56px rgba(212, 175, 55, 0.1);
-  animation: banner-breathe 3s ease-in-out infinite;
 }

 .coverflow-slide.is-active:hover .slide-card {
-  animation: none;
  transform: scale(1.018);
 }

@@ -407,35 +405,40 @@ onUnmounted(stopAutoPlay);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
-  width: 36px;
-  height: 36px;
+  width: 44px;
+  height: 44px;
  border-radius: 50%;
-  border: 1px solid rgba(212, 175, 55, 0.4);
-  background: rgba(10, 10, 10, 0.75);
-  color: var(--primary-light);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(8px);
+  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
-  transition: background 0.2s, border-color 0.2s;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
 }

 .nav-btn svg {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
 }

 .nav-btn:hover {
-  background: rgba(212, 175, 55, 0.2);
-  border-color: var(--primary);
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.25);
+  color: #ffffff;
+  transform: translateY(-50%) scale(1.06);
 }

 .nav-btn.prev {
-  left: 4px;
+  left: 12px;
 }

 .nav-btn.next {
-  right: 4px;
+  right: 12px;
 }

 .coverflow-dots {
--- a/apps/player/src/components/desktop/DesktopOutrightEventCard.vue
+++ b/apps/player/src/components/desktop/DesktopOutrightEventCard.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import type { OutrightEvent } from '../outright/OutrightEventSection.vue';
+import type { OutrightEvent, OutrightSelection } from '../outright/OutrightEventSection.vue';
 import saishiImg from '../../assets/images/saishi.webp';

 const props = defineProps<{
  event: OutrightEvent;
 }>();

-const emit = defineEmits<{ open: [] }>();
+const emit = defineEmits<{
+  open: [];
+  pick: [selection: OutrightSelection];
+}>();

 const { t } = useI18n();

@@ -22,38 +25,115 @@ const teamCount = computed(() => props.event.selectionCount ?? props.event.selec
 const isSettled = computed(
  () => props.event.bettingOpen === false || props.event.status === 'SETTLED',
 );
+
+// Dynamically limit visible buttons based on card width
+const MIN_BTN_W = 52; // px
+const GAP = 4;        // px
+
+const cardRef = ref<HTMLElement | null>(null);
+const cardWidth = ref(400);
+let ro: ResizeObserver | null = null;
+
+onMounted(() => {
+  if (!cardRef.value) return;
+  ro = new ResizeObserver(([entry]) => {
+    // panel uses left/right: 12px, so panel width = card - 24
+    cardWidth.value = entry.contentRect.width;
+  });
+  ro.observe(cardRef.value);
+});
+
+onUnmounted(() => ro?.disconnect());
+
+const maxVisible = computed(() => {
+  const panelW = cardWidth.value - 24; // account for left/right: 12px
+  // n items need: n * MIN_BTN_W + (n-1) * GAP <= panelW
+  // n <= (panelW + GAP) / (MIN_BTN_W + GAP)
+  return Math.max(1, Math.min(5, Math.floor((panelW + GAP) / (MIN_BTN_W + GAP))));
+});
+
+// Sort by odds asc, show up to 5 but limited by available space
+const topSelections = computed(() => {
+  if (!props.event.selections) return [];
+  return [...props.event.selections]
+    .sort((a, b) => {
+      const oa = parseFloat(a.odds) || 9999;
+      const ob = parseFloat(b.odds) || 9999;
+      return oa - ob;
+    })
+    .slice(0, maxVisible.value);
+});
 </script>

 <template>
-  <button type="button" class="outright-event-card hover-bg" @click="emit('open')">
-    <div class="card-main">
-      <div class="title-row">
-        <span class="title">{{ headTitle }}</span>
-        <span v-if="isSettled" class="settled-tag">{{ t('bet.outright_settled') }}</span>
+  <article ref="cardRef" class="outright-event-card" :class="{ settled: isSettled }">
+    <!-- Clickable upper area to open detail -->
+    <div class="card-clickable-area" @click="emit('open')">
+      <div class="card-main">
+        <div class="title-row">
+          <span class="title">{{ headTitle }}</span>
+          <span v-if="isSettled" class="settled-tag">{{ t('bet.outright_settled') }}</span>
+        </div>
+        <p v-if="event.leagueName && event.leagueName !== headTitle" class="league">{{ event.leagueName }}</p>
+        <p class="meta">{{ t('bet.outright_teams_count', { n: teamCount }) }}</p>
      </div>
-      <p v-if="event.leagueName && event.leagueName !== headTitle" class="league">{{ event.leagueName }}</p>
-      <p class="meta">{{ t('bet.outright_teams_count', { n: teamCount }) }}</p>
+      <img :src="saishiImg" alt="" class="saishi" />
    </div>
-    <img :src="saishiImg" alt="" class="saishi" />
-  </button>
+
+    <!-- Quick bet popular teams panel -->
+    <div v-if="!isSettled && topSelections.length" class="quick-bet-panel">
+      <div class="quick-bet-title">{{ t('bet.quick_bet') || '快速下注' }}<span class="quick-bet-hint">（{{ t('bet.popular_teams') || '热门队伍' }}）</span></div>
+      <div class="odds-row">
+        <button
+          v-for="sel in topSelections"
+          :key="sel.id"
+          type="button"
+          class="odds-btn"
+          @click.stop="emit('pick', sel)"
+        >
+          <span class="selection-name" :title="sel.teamName">{{ sel.teamName }}</span>
+          <span class="selection-odds">{{ sel.odds }}</span>
+        </button>
+      </div>
+      <button type="button" class="view-all-btn" @click.stop="emit('open')">
+        {{ t('bet.outright_view_all') || '查看全部队伍' }} →
+      </button>
+    </div>
+  </article>
 </template>

 <style scoped>
 .outright-event-card {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+  position: relative;
  width: 100%;
-  padding: 12px 14px;
-  border: 1px solid var(--border);
+  min-height: 140px;
+  border: 1px solid rgba(140, 140, 140, 0.35);
  border-radius: 6px;
-  background: rgba(20, 20, 20, 0.95);
-  text-align: left;
-  transition: border-color 0.2s, background 0.2s;
+  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  transition: border-color 0.25s ease, box-shadow 0.25s ease;
 }

 .outright-event-card:hover {
-  border-color: var(--border-gold-soft);
+  border-color: var(--border-gold);
+  box-shadow: var(--shadow-gold);
+}
+
+.card-clickable-area {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  cursor: pointer;
+  flex: 1;
+  transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.outright-event-card:hover .card-clickable-area {
+  transform: translateY(-10px);
 }

 .card-main {
@@ -72,10 +152,16 @@ const isSettled = computed(
 }

 .title {
-  font-size: 13px;
+  font-size: 14px;
  font-weight: 800;
-  color: var(--primary-light);
+  color: #fff;
  line-height: 1.35;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+  transition: color 0.2s;
+}
+
+.outright-event-card:hover .title {
+  color: var(--primary-light);
 }

 .settled-tag {
@@ -85,6 +171,7 @@ const isSettled = computed(
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 999px;
  padding: 1px 7px;
+  background: rgba(201, 162, 39, 0.1);
 }

 .league {
@@ -92,21 +179,152 @@ const isSettled = computed(
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
+  opacity: 1;
+  transition: opacity 0.15s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .meta {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
-  color: #666;
+  color: #888;
+  opacity: 1;
+  transition: opacity 0.15s ease;
+}
+
+.outright-event-card:hover .league,
+.outright-event-card:hover .meta {
+  opacity: 0;
 }

 .saishi {
  flex-shrink: 0;
-  height: 44px;
+  height: 48px;
  width: auto;
-  max-width: 40px;
+  max-width: 44px;
  object-fit: contain;
  opacity: 0.85;
+  transition: transform 0.25s ease, opacity 0.2s ease;
+}
+
+.outright-event-card:hover .saishi {
+  transform: scale(0.9) rotate(5deg);
+  opacity: 0;
+}
+
+/* Quick Bet Panel — absolute, card height stays fixed */
+.quick-bet-panel {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(12px);
+  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
+  z-index: 5;
+}
+
+.outright-event-card:hover .quick-bet-panel {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.quick-bet-title {
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.quick-bet-hint {
+  font-size: 9px;
+  font-weight: 600;
+  color: #666;
+  text-transform: none;
+  letter-spacing: 0;
+  margin-left: 1px;
+}
+
+.odds-row {
+  display: flex;
+  gap: 4px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.odds-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;         /* equal share of available width */
+  gap: 1px;
+  padding: 2px 4px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  cursor: pointer;
+  min-height: 32px;
+  transition: all 0.2s ease;
+}
+
+.odds-btn:hover {
+  background: var(--border-gold-soft);
+  border-color: var(--border-gold);
+  box-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
+}
+
+.selection-name {
+  font-size: 9px;
+  font-weight: 700;
+  color: #bbb;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.2;
+}
+
+.odds-btn:hover .selection-name {
+  color: #fff;
+}
+
+.selection-odds {
+  font-size: 11px;
+  font-weight: 900;
+  color: var(--primary-light);
+  line-height: 1.1;
+}
+
+.odds-btn:hover .selection-odds {
+  color: #fff;
+}
+
+.view-all-btn {
+  align-self: flex-end;
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--primary-light);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px 0;
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+  letter-spacing: 0.02em;
+}
+
+.view-all-btn:hover {
+  opacity: 1;
 }
 </style>
--- a/apps/player/src/components/desktop/DesktopShell.vue
+++ b/apps/player/src/components/desktop/DesktopShell.vue
@@ -7,6 +7,7 @@ import DesktopOddsBetPopover from './DesktopOddsBetPopover.vue';
 import SportsCategoryBar from './SportsCategoryBar.vue';
 import LeagueSidebar from './LeagueSidebar.vue';
 import MatchSidebar from './MatchSidebar.vue';
+import OutrightSidebar from './OutrightSidebar.vue';
 import DesktopBetSlipRail from './DesktopBetSlipRail.vue';
 import FloatingMailbox from '../FloatingMailbox.vue';
 import { usePlayerHome } from '../../composables/usePlayerHome';
@@ -52,6 +53,9 @@ const layoutMode = computed<'betting' | 'account' | 'hub' | 'marketing'>(() => {
 });

 const isMatchDetail = computed(() => route.path.startsWith('/match/'));
+const isDetailPage = computed(
+  () => route.path.startsWith('/match/') || route.path.startsWith('/outright/'),
+);
 const isBettingDetail = computed(
  () => route.path.startsWith('/match/') || route.path.startsWith('/outright/'),
 );
@@ -93,15 +97,15 @@ watch(
        </div>
        <div class="desktop-layout-betting">
          <aside class="desktop-betting-left">
-            <LeagueSidebar v-if="!isMatchDetail" />
-            <MatchSidebar v-else />
+            <LeagueSidebar v-if="!isDetailPage" />
+            <MatchSidebar v-else-if="isMatchDetail" />
+            <OutrightSidebar v-else />
          </aside>
          <main class="desktop-betting-center" :class="{ 'is-betting-detail': isBettingDetail }">
            <RouterView v-slot="{ Component, route: viewRoute }">
-              <KeepAlive v-if="viewRoute.meta.keepAlive" :max="10">
+              <Transition name="page-fade" mode="out-in">
                <component :is="Component" :key="viewRoute.path" />
-              </KeepAlive>
-              <component v-else :is="Component" :key="viewRoute.fullPath" />
+              </Transition>
            </RouterView>
          </main>
        </div>
@@ -111,10 +115,9 @@ watch(
      <div v-else-if="layoutMode === 'account'" class="desktop-layout-account">
        <main class="desktop-account-center">
          <RouterView v-slot="{ Component, route: viewRoute }">
-            <KeepAlive v-if="viewRoute.meta.keepAlive" :max="10">
+            <Transition name="page-fade" mode="out-in">
              <component :is="Component" :key="viewRoute.path" />
-            </KeepAlive>
-            <component v-else :is="Component" :key="viewRoute.fullPath" />
+            </Transition>
          </RouterView>
        </main>
      </div>
@@ -122,10 +125,9 @@ watch(
      <!-- Hub Layout: Messages / Announcements split pane -->
      <div v-else-if="layoutMode === 'hub'" class="desktop-layout-hub-outer">
        <RouterView v-slot="{ Component, route: viewRoute }">
-          <KeepAlive v-if="viewRoute.meta.keepAlive" :max="10">
+          <Transition name="page-fade" mode="out-in">
            <component :is="Component" :key="viewRoute.path" />
-          </KeepAlive>
-          <component v-else :is="Component" :key="viewRoute.fullPath" />
+          </Transition>
        </RouterView>
      </div>

@@ -133,10 +135,9 @@ watch(
      <div v-else class="desktop-layout-marketing no-scrollbar">
        <main class="desktop-marketing-content">
          <RouterView v-slot="{ Component, route: viewRoute }">
-            <KeepAlive v-if="viewRoute.meta.keepAlive" :max="10">
+            <Transition name="page-fade" mode="out-in">
              <component :is="Component" :key="viewRoute.path" />
-            </KeepAlive>
-            <component v-else :is="Component" :key="viewRoute.fullPath" />
+            </Transition>
          </RouterView>
        </main>
      </div>
@@ -147,3 +148,22 @@ watch(
    <DesktopOddsBetPopover />
  </div>
 </template>
+
+<style>
+/* Page transition — must be global (not scoped) so Vue can match
+   the dynamically-applied .page-fade-* classes on child roots */
+.page-fade-enter-active {
+  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.page-fade-leave-active {
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.page-fade-enter-from {
+  opacity: 0;
+  transform: translateY(12px);
+}
+.page-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>
--- a/apps/player/src/components/desktop/LeagueSidebar.vue
+++ b/apps/player/src/components/desktop/LeagueSidebar.vue
@@ -1,21 +1,38 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import { computed, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useMatchFilters } from '../../composables/useMatchFilters';
 import { useDesktopParlayMatches } from '../../composables/useDesktopParlayMatches';
+import { useOutrightEvents } from '../../composables/useOutrightEvents';
 import {
  isAfterLocalTodayMatchWindow as isAfterTodayMatchWindow,
  isInLocalTodayMatchWindow as isInTodayMatchWindow,
 } from '@thebet365/shared';

 const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
 const { parlayMatches, loadParlayMatches } = useDesktopParlayMatches();
 const { searchQuery, filterState, toggleLeague, clearFilters } = useMatchFilters();
+const { events: outrightEvents, load: loadOutrightEvents } = useOutrightEvents();

-onMounted(() => {
-  void loadParlayMatches();
+const isOutrightMode = computed(() => {
+  return route.query.tab === 'outright';
 });

+watch(
+  isOutrightMode,
+  (outright) => {
+    if (outright) {
+      void loadOutrightEvents({ silent: outrightEvents.value.length > 0 });
+    } else {
+      void loadParlayMatches();
+    }
+  },
+  { immediate: true },
+);
+
 function normalizeLeagueName(name: string): string {
  return name
    .replace(/\.unit$/i, '')
@@ -26,36 +43,57 @@ function normalizeLeagueName(name: string): string {

 const availableLeagues = computed(() => {
  const map = new Map<string, { id: string; name: string; count: number }>();
-  const now = new Date();
  const keyword = searchQuery.value.trim().toLowerCase();

-  for (const m of parlayMatches.value) {
-    if (keyword) {
-      const haystack = `${m.homeTeamName} ${m.awayTeamName} ${m.leagueName}`.toLowerCase();
-      if (!haystack.includes(keyword)) continue;
+  if (isOutrightMode.value) {
+    for (const e of outrightEvents.value) {
+      if (keyword) {
+        const haystack = `${e.title} ${e.leagueName || ''}`.toLowerCase();
+        if (!haystack.includes(keyword)) continue;
+      }
+
+      const id = e.leagueId ?? e.leagueName ?? 'unknown';
+      const existing = map.get(id);
+      if (existing) {
+        existing.count += 1;
+      } else {
+        map.set(id, {
+          id,
+          name: normalizeLeagueName(e.leagueName || e.title),
+          count: 1,
+        });
+      }
    }
+  } else {
+    const now = new Date();
+    for (const m of parlayMatches.value) {
+      if (keyword) {
+        const haystack = `${m.homeTeamName} ${m.awayTeamName} ${m.leagueName}`.toLowerCase();
+        if (!haystack.includes(keyword)) continue;
+      }

-    let timeMatch = true;
-    if (filterState.value.time === 'today') {
-      timeMatch = isInTodayMatchWindow(m.startTime, now);
-    } else if (filterState.value.time === 'early') {
-      timeMatch = isAfterTodayMatchWindow(m.startTime, now);
-    }
-    if (!timeMatch) continue;
+      let timeMatch = true;
+      if (filterState.value.time === 'today') {
+        timeMatch = isInTodayMatchWindow(m.startTime, now);
+      } else if (filterState.value.time === 'early') {
+        timeMatch = isAfterTodayMatchWindow(m.startTime, now);
+      }
+      if (!timeMatch) continue;

-    if (filterState.value.status === 'open' && m.matchPhase !== 'open' && m.matchPhase !== undefined) continue;
-    if (filterState.value.status === 'settled' && m.matchPhase !== 'settled') continue;
+      if (filterState.value.status === 'open' && m.matchPhase !== 'open' && m.matchPhase !== undefined) continue;
+      if (filterState.value.status === 'settled' && m.matchPhase !== 'settled') continue;

-    const id = m.leagueId ?? m.leagueName;
-    const existing = map.get(id);
-    if (existing) {
-      existing.count += 1;
-    } else {
-      map.set(id, {
-        id,
-        name: normalizeLeagueName(m.leagueName),
-        count: 1,
-      });
+      const id = m.leagueId ?? m.leagueName;
+      const existing = map.get(id);
+      if (existing) {
+        existing.count += 1;
+      } else {
+        map.set(id, {
+          id,
+          name: normalizeLeagueName(m.leagueName),
+          count: 1,
+        });
+      }
    }
  }

@@ -65,6 +103,10 @@ const availableLeagues = computed(() => {
 const isSelected = (leagueId: string) => {
  return filterState.value.leagueIds.length === 0 || filterState.value.leagueIds.includes(leagueId);
 };
+
+const handleLeagueClick = (leagueId: string) => {
+  toggleLeague(leagueId);
+};
 </script>

 <template>
@@ -78,7 +120,7 @@ const isSelected = (leagueId: string) => {
      />
    </div>

-    <div class="sidebar-section">
+    <div v-if="!isOutrightMode" class="sidebar-section">
      <div class="section-hdr">{{ t('bet.filter_time') }}</div>
      <div class="time-filters">
        <button
@@ -126,14 +168,14 @@ const isSelected = (leagueId: string) => {
          :key="lg.id"
          class="league-item"
          :class="{ active: isSelected(lg.id) }"
-          @click="toggleLeague(lg.id)"
+          @click="handleLeagueClick(lg.id)"
        >
          <div class="checkbox" :class="{ checked: isSelected(lg.id) }"></div>
          <span class="league-name" :title="lg.name">{{ lg.name }}</span>
          <span class="league-count">{{ lg.count }}</span>
        </div>
        <div v-if="availableLeagues.length === 0" class="empty-leagues">
-          {{ t('bet.no_matches') }}
+          {{ isOutrightMode ? t('bet.no_outright') : t('bet.no_matches') }}
        </div>
      </div>
    </div>
--- a/apps/player/src/components/desktop/MatchSidebar.vue
+++ b/apps/player/src/components/desktop/MatchSidebar.vue
@@ -133,6 +133,7 @@ watch(currentMatchId, scrollToActive);
            v-for="m in filteredMatches"
            :key="m.id"
            :match="m"
+            :no-quick-bet="true"
            :class="{ active: String(m.id) === String(currentMatchId) }"
            @bet="goMatch"
          />
--- a/apps/player/src/components/desktop/OutrightSidebar.vue
+++ b/apps/player/src/components/desktop/OutrightSidebar.vue
@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch, nextTick } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useMatchFilters } from '../../composables/useMatchFilters';
+import { useOutrightEvents } from '../../composables/useOutrightEvents';
+import GoldSpinner from '../GoldSpinner.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const { searchQuery } = useMatchFilters();
+const { events: outrightEvents, loading, load: loadOutrightEvents } = useOutrightEvents();
+
+const listRef = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  void loadOutrightEvents({ silent: outrightEvents.value.length > 0 }).then(() => {
+    scrollToActive();
+  });
+});
+
+const currentOutrightId = computed(() => {
+  const id = route.params.id;
+  return Array.isArray(id) ? id[0] : id;
+});
+
+function normalizeLeagueName(name: string): string {
+  return name
+    .replace(/\.unit$/i, '')
+    .replace(/[-_]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+const filteredEvents = computed(() => {
+  const keyword = searchQuery.value.trim().toLowerCase();
+  return outrightEvents.value.filter((e) => {
+    // If it's the active event, always show it
+    const isCurrent = String(e.id) === String(currentOutrightId.value);
+    if (isCurrent) return true;
+
+    if (keyword) {
+      const haystack = `${e.title} ${e.leagueName || ''}`.toLowerCase();
+      if (!haystack.includes(keyword)) return false;
+    }
+    return true;
+  });
+});
+
+function goOutright(id: string) {
+  router.replace(`/outright/${id}`);
+}
+
+function scrollToActive() {
+  nextTick(() => {
+    if (!listRef.value) return;
+    const activeEl = listRef.value.querySelector('.active') as HTMLElement;
+    if (activeEl) {
+      activeEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  });
+}
+
+watch(currentOutrightId, scrollToActive);
+</script>
+
+<template>
+  <div class="outright-sidebar">
+    <div class="search-box">
+      <input
+        v-model="searchQuery"
+        type="text"
+        :placeholder="t('nav.search')"
+        class="sidebar-search-input"
+      />
+    </div>
+
+    <div class="sidebar-section outrights-section">
+      <div class="section-hdr">
+        <span>{{ t('bet.tab_outright') || '优胜冠军' }}</span>
+      </div>
+      <div class="outrights-list" ref="listRef">
+        <div v-if="loading && !filteredEvents.length" class="sidebar-loading">
+          <GoldSpinner :size="24" />
+        </div>
+        <template v-else>
+          <div
+            v-for="e in filteredEvents"
+            :key="e.id"
+            class="outright-card"
+            :class="{ active: String(e.id) === String(currentOutrightId) }"
+            @click="goOutright(e.id)"
+          >
+            <div class="card-header">
+              <span class="league-tag" :title="e.leagueName">{{ normalizeLeagueName(e.leagueName || e.title) }}</span>
+            </div>
+            <div class="event-title" :title="e.title">{{ e.title }}</div>
+            <div class="card-footer">
+              <span class="selections-badge">
+                {{ e.selections?.length || 0 }} {{ t('bet.selections') || '项' }}
+              </span>
+            </div>
+          </div>
+          <div v-if="filteredEvents.length === 0 && !loading" class="empty-outrights">
+            {{ t('bet.no_outright') }}
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.outright-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 12px 0;
+}
+
+.search-box {
+  padding: 0 12px 10px;
+  border-bottom: 1px solid var(--border);
+}
+
+.sidebar-search-input {
+  width: 100%;
+  background: #0d0d0d !important;
+  border: 1px solid var(--border) !important;
+  color: var(--text);
+  padding: 6px 10px;
+  font-size: 11px;
+  border-radius: 4px;
+}
+
+.sidebar-search-input:focus {
+  border-color: var(--border-gold-soft) !important;
+  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1) !important;
+}
+
+.sidebar-section {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.section-hdr {
+  font-size: 10px;
+  font-weight: 800;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  letter-spacing: 0.05em;
+  margin-bottom: 8px;
+}
+
+.outrights-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.outrights-list {
+  flex: 1;
+  overflow-y: auto;
+  margin-right: -4px;
+  padding-right: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.sidebar-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30px 0;
+}
+
+.empty-outrights {
+  padding: 16px 0;
+  text-align: center;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.outright-card {
+  padding: 12px 10px;
+  background: #141414;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.outright-card:hover {
+  border-color: var(--border-gold-soft);
+  background: var(--bg-hover) !important;
+}
+
+.outright-card.active {
+  border-color: var(--primary) !important;
+  background: rgba(212, 175, 55, 0.08) !important;
+  box-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+}
+
+.league-tag {
+  font-size: 9px;
+  color: var(--primary-light);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.event-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: #ffffff;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.outright-card.active .event-title {
+  color: var(--primary-light);
+}
+
+.card-footer {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.selections-badge {
+  font-size: 9px;
+  color: var(--text-muted);
+  font-weight: 700;
+  background: #1e1e1e;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.03);
+}
+
+.outright-card.active .selections-badge {
+  background: rgba(212, 175, 55, 0.15);
+  color: var(--primary-light);
+  border-color: rgba(212, 175, 55, 0.3);
+}
+</style>
--- a/apps/player/src/components/match-detail/CorrectScorePanel.vue
+++ b/apps/player/src/components/match-detail/CorrectScorePanel.vue
@@ -129,7 +129,7 @@ function formatOdds(odds: string) {

 .score-card.selected {
  border-color: var(--primary);
-  background: rgba(212, 175, 55, 0.14);
+  background: #2d281a;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.2);
 }

@@ -138,7 +138,7 @@ function formatOdds(odds: string) {
 }

 .score-card.selected .odds {
-  color: #f0d875;
+  color: #ffffff;
 }

 .score-card--locked {
@@ -160,7 +160,7 @@ function formatOdds(odds: string) {
 .odds {
  font-size: 10px;
  font-weight: 700;
-  color: var(--primary-light);
+  color: #ffffff;
 }

 .cs-panel--dense {
--- a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
+++ b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
@@ -197,7 +197,7 @@ const panelStyle = computed(() =>

 .odds-btn.selected {
  border-color: var(--primary);
-  background: rgba(212, 175, 55, 0.14);
+  background: #2f2a19;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.2);
 }

@@ -206,7 +206,7 @@ const panelStyle = computed(() =>
 }

 .odds-btn.selected .odds {
-  color: #f0d875;
+  color: #ffffff;
 }

 .odds-btn--locked {
@@ -229,6 +229,6 @@ const panelStyle = computed(() =>
 .odds {
  font-size: 14px;
  font-weight: 800;
-  color: var(--primary-light);
+  color: #ffffff;
 }
 </style>
--- a/apps/player/src/components/outright/OutrightOptionCard.vue
+++ b/apps/player/src/components/outright/OutrightOptionCard.vue
@@ -155,6 +155,6 @@ onUnmounted(() => {
 .odds {
  font-size: 11px;
  font-weight: 800;
-  color: var(--primary-light);
+  color: #ffffff;
 }
 </style>