feat(player): 优化赛事详情与串关下注交互

- 合并玩法列表、单选投注单与玩法内确认下单
- 波胆底部确认与核对弹窗;串关底栏固定
- 帮助弹窗与投注单逻辑拆分(详情单关/串关页串关)

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-06-03 10:54:49 +08:00
parent 451cc3984a
commit d432de6fdf
12 changed files with 1089 additions and 540 deletions

View File

@@ -120,20 +120,18 @@ function pickSelection(match: ParlayMatch, market: Market, sel: Selection) {
function openSlip() {
slip.openDrawer();
}
const showParlayFoot = computed(() => slip.mode === 'parlay' && slip.count > 0);
</script>
<template>
<div class="parlay-panel">
<div class="parlay-panel" :class="{ 'has-fixed-foot': showParlayFoot }">
<header class="panel-head">
<div class="head-title">
<span class="layers-icon" aria-hidden="true" />
<h2>{{ t('bet.parlay_title') }}</h2>
</div>
<p class="head-desc">{{ t('bet.parlay_desc') }}</p>
<button type="button" class="slip-link btn-gold-outline" @click="openSlip">
{{ t('bet.bet_slip') }}
<span v-if="slip.count" class="slip-count">({{ slip.count }})</span>
</button>
</header>
<div class="toolbar">
@@ -184,6 +182,24 @@ function openSlip() {
<span class="empty-icon" aria-hidden="true">📅</span>
<p>{{ t('bet.parlay_empty') }}</p>
</div>
<Teleport to="body">
<div v-if="showParlayFoot" class="parlay-foot-fixed">
<p v-if="slip.count < 2" class="foot-hint">{{ t('bet.parlay_need_more') }}</p>
<p v-else class="foot-meta">
{{ t('bet.bet_slip') }} ({{ slip.count }}) · {{ t('bet.parlay') }}
{{ slip.totalOdds.toFixed(2) }}
</p>
<button
type="button"
class="market-foot-btn"
:disabled="slip.count < 2"
@click="openSlip"
>
{{ t('bet.cs_confirm_cell') }}
</button>
</div>
</Teleport>
</div>
</template>
@@ -192,6 +208,10 @@ function openSlip() {
padding: 0 12px 16px;
}
.parlay-panel.has-fixed-foot {
padding-bottom: 100px;
}
.panel-head {
background: #141414;
border: 1px solid #2a2a2a;
@@ -231,15 +251,45 @@ function openSlip() {
margin-bottom: 10px;
}
.slip-link {
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
.parlay-foot-fixed {
position: fixed;
left: 0;
right: 0;
bottom: calc(50px + env(safe-area-inset-bottom, 0px));
z-index: 95;
padding: 10px 12px 10px;
background: rgba(14, 14, 14, 0.98);
border-top: 1px solid var(--border-gold-soft);
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
}
.slip-count {
margin-left: 4px;
.foot-hint,
.foot-meta {
margin: 0 0 8px;
font-size: 11px;
color: var(--text-muted);
text-align: center;
}
.foot-meta {
color: var(--primary-light);
font-weight: 600;
}
.market-foot-btn {
display: block;
width: 100%;
padding: 9px;
border-radius: 4px;
border: 1px solid var(--border-gold-soft);
background: rgba(212, 175, 55, 0.1);
color: var(--primary-light);
font-size: 13px;
font-weight: 800;
}
.market-foot-btn:disabled {
opacity: 0.45;
}
.toolbar {