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

@@ -6,60 +6,69 @@ defineProps<{
odds: string;
}[];
isSelected: (id: string) => boolean;
compact?: boolean;
}>();
const emit = defineEmits<{ pick: [id: string] }>();
</script>
<template>
<div class="panel">
<button
v-for="sel in selections"
:key="sel.id"
type="button"
class="odds-btn"
:class="{ selected: isSelected(sel.id) }"
@click="emit('pick', sel.id)"
>
<span class="label">{{ sel.selectionName }}</span>
<span class="odds">{{ sel.odds }}</span>
</button>
<div class="wrap" :class="{ compact }">
<div class="panel">
<button
v-for="sel in selections"
:key="sel.id"
type="button"
class="odds-btn"
:class="{ selected: isSelected(sel.id) }"
@click="emit('pick', sel.id)"
>
<span class="label">{{ sel.selectionName }}</span>
<span class="odds">{{ sel.odds }}</span>
</button>
</div>
</div>
</template>
<style scoped>
.wrap {
padding: 6px 8px 8px;
background: #0c0c0c;
}
.panel {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 10px 12px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.odds-btn {
min-width: calc(33.33% - 6px);
flex: 1 1 calc(33.33% - 6px);
max-width: calc(50% - 4px);
padding: 10px 8px;
border-radius: 6px;
background: #0d0d0d;
border: 1px solid #333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 44px;
padding: 6px 4px;
border-radius: 4px;
background: #141414;
border: 1px solid #262626;
text-align: center;
}
.odds-btn.selected {
border-color: var(--primary);
background: rgba(212, 175, 55, 0.12);
background: rgba(212, 175, 55, 0.1);
}
.label {
display: block;
font-size: 11px;
font-size: 9px;
color: var(--text-muted);
margin-bottom: 4px;
line-height: 1.15;
}
.odds {
font-size: 15px;
font-size: 14px;
font-weight: 800;
color: var(--primary-light);
}