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

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 {

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) => {

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 {

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>

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 {

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>

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>

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>

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"
           />

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>

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 {

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>

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>

apps/player/src/i18n/en-US.ts

@@ -43,6 +43,18 @@ export default {
     banner_next: 'Next slide',
     banner_slide: 'Slide {n}',
     banner_fallback: 'Banner',
+    quick_entry_title: 'Quick Entry',
+    quick_bet: 'Place Bet',
+    quick_recharge: 'Deposit',
+    quick_mybets: 'My Bets',
+    quick_announcements: 'Announcements',
+    section_featured: 'Featured Match',
+    section_upcoming: 'Upcoming Matches',
+    sidebar_recommend: 'Recommended',
+    sidebar_guide: 'Help & Guide',
+    guide_link: 'Betting Guide',
+    faq_link: 'FAQ',
+    support_link: 'Live Support',
   },
   announcements: {
     title: 'Announcements',
@@ -385,6 +397,10 @@ export default {
     stake: 'Stake',
     place_bet: 'Place Bet',
     place_bet_short: 'Bet',
+    quick_bet: 'Quick Bet',
+    popular_teams: 'Popular Teams',
+    view_all_markets: 'View All Markets',
+    all: 'All',
     parlay: 'Parlay',
     tab_matches: 'Matches',
     tab_outright: 'Outright',
@@ -447,6 +463,7 @@ export default {
     outright_load_more: 'Load more',
     outright_settled: 'Settled',
     outright_settled_hint: 'This event is settled. Odds and results are view-only.',
+    outright_view_all: 'View All Teams',
     cancel: 'Cancel',
     parlay_max_legs: 'Parlay allows up to 5 legs',
     parlay_block_outright: 'Outright cannot be parlayed',

apps/player/src/i18n/ms-MY.ts

@@ -55,6 +55,18 @@ export default {
     banner_next: 'Slaid seterusnya',
     banner_slide: 'Slaid {n}',
     banner_fallback: 'Banner',
+    quick_entry_title: 'Akses Pantas',
+    quick_bet: 'Taruh Sekarang',
+    quick_recharge: 'Deposit',
+    quick_mybets: 'Taruhan Saya',
+    quick_announcements: 'Pengumuman',
+    section_featured: 'Perlawanan Utama',
+    section_upcoming: 'Akan Berlangsung',
+    sidebar_recommend: 'Disyorkan',
+    sidebar_guide: 'Bantuan & Panduan',
+    guide_link: 'Panduan Taruhan',
+    faq_link: 'Soalan Lazim',
+    support_link: 'Sokongan Langsung',
   },
   announcements: {
     title: 'Pusat Pengumuman',
@@ -397,6 +409,10 @@ export default {
     stake: 'Jumlah',
     place_bet: 'Letak Pertaruhan',
     place_bet_short: 'Pertaruhan',
+    quick_bet: 'Pertaruhan Pantas',
+    popular_teams: 'Pasukan Popular',
+    view_all_markets: 'Lihat Semua Pasaran',
+    all: 'Semua',
     parlay: 'Berganda',
     tab_matches: 'Perlawanan',
     tab_outright: 'Juara',
@@ -459,6 +475,7 @@ export default {
     outright_load_more: 'Muat lagi',
     outright_settled: 'Selesai',
     outright_settled_hint: 'Acara ini telah diselesaikan. Hanya paparan odds dan keputusan.',
+    outright_view_all: 'Lihat Semua Pasukan',
     cancel: 'Batal',
     parlay_max_legs: 'Maksimum 5 pilihan parlay',
     parlay_block_outright: 'Outright tidak boleh parlay',

apps/player/src/i18n/zh-CN.ts

@@ -43,6 +43,18 @@ export default {
     banner_next: '下一张',
     banner_slide: '第 {n} 张',
     banner_fallback: 'Banner',
+    quick_entry_title: '快速入口',
+    quick_bet: '立即投注',
+    quick_recharge: '充值',
+    quick_mybets: '我的注单',
+    quick_announcements: '公告中心',
+    section_featured: '焦点赛事',
+    section_upcoming: '即将开赛',
+    sidebar_recommend: '推荐赛事',
+    sidebar_guide: '帮助与指南',
+    guide_link: '投注指南',
+    faq_link: '常见问题',
+    support_link: '在线客服',
   },
   announcements: {
     title: '公告中心',
@@ -385,6 +397,10 @@ export default {
     stake: '投注金额',
     place_bet: '确认下注',
     place_bet_short: '下注',
+    quick_bet: '快速下注',
+    popular_teams: '热门队伍',
+    view_all_markets: '查看全部玩法',
+    all: '全部',
     parlay: '串关',
     tab_matches: '球赛',
     tab_outright: '优胜冠军',
@@ -447,6 +463,7 @@ export default {
     outright_load_more: '加载更多',
     outright_settled: '已结算',
     outright_settled_hint: '本赛事已结算，仅可查看赔率与冠军结果',
+    outright_view_all: '查看全部队伍',
     cancel: '取消',
     parlay_max_legs: '串关最多 5 项',
     parlay_block_outright: '冠军盘不可串关',

apps/player/src/styles.css

@@ -285,7 +285,7 @@ input:-webkit-autofill:active {
 
 .odds-btn.selected {
   border: 1px solid var(--border-gold-soft);
-  background: rgba(212, 175, 55, 0.12);
+  background: #2d281a;
   box-shadow: none;
 }
 
@@ -311,8 +311,7 @@ input:-webkit-autofill:active {
 .odds-btn .value {
   font-size: 18px;
   font-weight: 800;
-  color: var(--primary-light);
-  text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
+  color: #ffffff;
   margin-top: 2px;
 }
 

apps/player/src/views/desktop/DesktopFootballView.vue

@@ -11,6 +11,9 @@ import {
   isAfterLocalTodayMatchWindow as isAfterTodayMatchWindow,
   isInLocalTodayMatchWindow as isInTodayMatchWindow,
 } from '@thebet365/shared';
+import { useAuthStore } from '../../stores/auth';
+import type { OutrightEvent, OutrightSelection } from '../../components/outright/OutrightEventSection.vue';
+import OutrightBetModal, { type OutrightPick } from '../../components/outright/OutrightBetModal.vue';
 
 type MainTab = 'matches' | 'outright';
 
@@ -102,6 +105,24 @@ const leagueGroups = computed(() => {
   return Object.values(groups).sort((a, b) => a.leagueName.localeCompare(b.leagueName));
 });
 
+const filteredOutrightEvents = computed(() => {
+  if (mainTab.value !== 'outright') return [];
+  const keyword = searchQuery.value.trim().toLowerCase();
+  return outrightEvents.value.filter((e) => {
+    if (keyword) {
+      const haystack = `${e.title} ${e.leagueName || ''}`.toLowerCase();
+      if (!haystack.includes(keyword)) return false;
+    }
+
+    if (filterState.value.leagueIds.length > 0) {
+      const id = e.leagueId ?? e.leagueName;
+      if (!filterState.value.leagueIds.includes(id)) return false;
+    }
+
+    return true;
+  });
+});
+
 function goMatch(id: string) {
   router.push(`/match/${id}`);
 }
@@ -110,6 +131,32 @@ function goOutright(id: string) {
   router.push(`/outright/${id}`);
 }
 
+const auth = useAuthStore();
+const modalOpen = ref(false);
+const activePick = ref<OutrightPick | null>(null);
+
+function openBet(event: OutrightEvent, sel: OutrightSelection) {
+  if (event.bettingOpen === false || event.status === 'SETTLED') return;
+  if (!auth.token) {
+    auth.showLoginPrompt(route.fullPath);
+    return;
+  }
+  activePick.value = {
+    selectionId: sel.id,
+    oddsVersion: sel.oddsVersion,
+    teamCode: sel.teamCode,
+    teamName: sel.teamName,
+    odds: sel.odds,
+    eventTitle: event.title,
+  };
+  modalOpen.value = true;
+}
+
+function closeModal() {
+  modalOpen.value = false;
+  activePick.value = null;
+}
+
 async function refresh() {
   if (mainTab.value === 'outright') {
     await loadOutrights({ silent: false });
@@ -179,25 +226,26 @@ void loadParlayMatches(true);
     </div>
 
     <div v-else class="outright-panel-wrap">
-      <div v-if="outrightLoading && !outrightEvents.length" class="skeleton-container">
+      <div v-if="outrightLoading && !filteredOutrightEvents.length" class="skeleton-container">
         <div v-for="i in 4" :key="i" class="skeleton-card desktop-skeleton"></div>
       </div>
 
-      <template v-else-if="outrightEvents.length">
-        <p v-if="outrightEvents.length > 1" class="outright-summary">
+      <template v-else-if="filteredOutrightEvents.length">
+        <p v-if="filteredOutrightEvents.length > 1" class="outright-summary">
           {{
             t('bet.outright_events_summary', {
-              events: outrightEvents.length,
-              teams: outrightEvents.reduce((n, e) => n + e.selections.length, 0),
+              events: filteredOutrightEvents.length,
+              teams: filteredOutrightEvents.reduce((n, e) => n + e.selections.length, 0),
             })
           }}
         </p>
         <div class="outright-event-grid">
           <DesktopOutrightEventCard
-            v-for="event in outrightEvents"
+            v-for="event in filteredOutrightEvents"
             :key="event.id"
             :event="event"
             @open="goOutright(event.id)"
+            @pick="(sel) => openBet(event, sel)"
           />
         </div>
       </template>
@@ -207,6 +255,8 @@ void loadParlayMatches(true);
         <p v-if="!outrightError" class="empty-hint">{{ t('bet.no_outright_hint') }}</p>
       </div>
     </div>
+    
+    <OutrightBetModal :open="modalOpen" :pick="activePick" @close="closeModal" />
   </div>
 </template>
 
@@ -366,7 +416,7 @@ void loadParlayMatches(true);
 
 .outright-event-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 8px;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 12px;
 }
 </style>

apps/player/src/views/desktop/DesktopHomeView.vue

@@ -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>

apps/player/src/views/desktop/DesktopMatchDetailView.vue

@@ -671,7 +671,7 @@ function toggleSelection(sel: Selection, market: Market, event?: MouseEvent) {
   margin: 0 0 8px;
   font-size: 12px;
   font-weight: 800;
-  color: var(--primary-light);
+  color: #ffffff;
 }
 
 .markets-empty {

apps/player/src/views/desktop/DesktopOutrightDetailView.vue

@@ -245,7 +245,7 @@ onUnmounted(stopPolling);
   content: '';
   position: absolute;
   inset: 0;
-  background: v-bind(matchCardBg) center / 100% 100% no-repeat;
+  background: v-bind(matchCardBg) center / cover no-repeat;
   opacity: 0.22;
   pointer-events: none;
 }