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