feat(player): 优化赛事详情与串关下注交互
- 合并玩法列表、单选投注单与玩法内确认下单 - 波胆底部确认与核对弹窗;串关底栏固定 - 帮助弹窗与投注单逻辑拆分(详情单关/串关页串关) Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user