ysc/thebet365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(player): refresh dark gold betting theme

Browse Source 
- add generated dark-gold WebP assets for PC/mobile backgrounds, cards, dialogs, tabs, mailbox, VS and bet buttons
- apply the new assets across player home, match detail, outright cards, modals, wallet/profile/detail screens and bet slip controls
- simplify confirm dialogs and reuse bet button resources for normal/pressed states
- hide mobile announcement center, tighten mobile bet list layout, and remove extra dark page backgrounds/scrollbar styling
- cache and deduplicate outright market loading to speed up repeated tab/detail navigation
- document player image-generation constraints in AGENTS.md
This commit is contained in:
mars
2026-07-23 17:34:40 +08:00
parent 375d352df2
commit b02e79785e
63 changed files with 796 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
apps/player/src/components/outright/OutrightBetModal.vue
View File

@@ -242,7 +242,7 @@ function onSubmitClick() {
matchName: props.pick.eventTitle,
marketId: '',
marketName: props.pick.eventTitle,
selectionName: `${props.pick.teamName} · ${props.pick.eventTitle}`,
selectionName: `${props.pick.teamName} - ${props.pick.eventTitle}`,
odds: oddsNum.value,
marketType: 'OUTRIGHT',
lineValue: null,
@@ -304,7 +304,7 @@ function formatOdds(odds: string) {
<template>
<div v-if="open && pick" class="overlay" @click.self="close">
<div class="modal" role="dialog" aria-modal="true">
<button type="button" class="close-x" :aria-label="t('bet.cancel')" @click="close">✕</button>
<button type="button" class="close-x" :aria-label="t('bet.cancel')" @click="close">&#10005;</button>
<template v-if="step === 'form'">
<p class="hint">{{ t('bet.outright_enter_stake') }}</p>
@@ -321,7 +321,7 @@ function formatOdds(odds: string) {
}"
>
<template v-if="oddsDelta && !oddsDelta.suspended">
@ {{ oddsDelta.oldOdds.toFixed(2) }} → {{ oddsDelta.newOdds.toFixed(2) }}
@ {{ oddsDelta.oldOdds.toFixed(2) }} -> {{ oddsDelta.newOdds.toFixed(2) }}
</template>
<template v-else>
@ {{ formatOdds(currentOdds || pick.odds) }}
@@ -357,7 +357,7 @@ function formatOdds(odds: string) {
</div>
<p class="est-return">
{{ t('history.est_return') }}：<span class="est-value">{{ estReturnText }}</span>
{{ t('history.est_return') }}: <span class="est-value">{{ estReturnText }}</span>
</p>
<p v-if="error" class="error">{{ error }}</p>
@@ -368,7 +368,7 @@ function formatOdds(odds: string) {
</button>
<button
type="button"
class="btn-confirm btn-gold-outline"
class="btn-confirm"
:disabled="loading || stake <= 0 || hasSuspendedSelection"
@click="onSubmitClick"
>
@@ -378,7 +378,7 @@ function formatOdds(odds: string) {
</template>
<template v-else>
<div class="success-icon">✓</div>
<div class="success-icon">&#10003;</div>
<h3 class="success-title">{{ t('bet.outright_success') }}</h3>
<div class="hero hero--compact">
@@ -400,7 +400,7 @@ function formatOdds(odds: string) {
</div>
</div>
<button type="button" class="btn-done btn-gold-outline" @click="close">
<button type="button" class="btn-done" @click="close">
{{ t('bet.outright_done') }}
</button>
</template>
@@ -437,12 +437,12 @@ function formatOdds(odds: string) {
position: relative;
width: 100%;
max-width: 300px;
background: linear-gradient(165deg, #1a1810 0%, #121212 45%, #0a0a0a 100%);
border: 1px solid var(--border-gold-soft);
border-radius: var(--radius);
padding: 18px 16px 16px;
background: url('../../assets/images/generated/outright-bet-modal-frame-v2.webp') center / 100% 100% no-repeat;
border: 0;
border-radius: 0;
padding: 30px 24px 24px;
text-align: center;
box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.08);
box-shadow: none;
}
.close-x {
@@ -644,22 +644,36 @@ function formatOdds(odds: string) {
}
.btn-cancel {
padding: 10px;
border-radius: 6px;
background: #1a1a1a;
border: 1px solid var(--border);
height: 46px;
padding: 10px 12px;
border: 0;
border-radius: 0;
background: url('../../assets/images/generated/pc-betslip-btn-secondary-v1.webp') center / 100% 100% no-repeat;
color: var(--text-muted);
font-size: 14px;
font-weight: 700;
}
.btn-cancel:active {
background-image: url('../../assets/images/generated/pc-betslip-btn-secondary-pressed-v1.webp');
}
.btn-confirm {
padding: 10px;
border-radius: 6px;
height: 46px;
padding: 10px 12px;
border: 0;
border-radius: 0;
background: url('../../assets/images/generated/pc-betslip-btn-primary-v1.webp') center / 100% 100% no-repeat;
color: #100d04;
font-size: 14px;
font-weight: 800;
}
.btn-confirm:active {
background-image: url('../../assets/images/generated/pc-betslip-btn-primary-pressed-v1.webp');
}
.btn-cancel:disabled,
.btn-confirm:disabled {
opacity: 0.45;
}
@@ -708,9 +722,17 @@ function formatOdds(odds: string) {
.btn-done {
width: 100%;
padding: 11px;
border-radius: 6px;
height: 46px;
padding: 11px 12px;
border: 0;
border-radius: 0;
background: url('../../assets/images/generated/pc-betslip-btn-primary-v1.webp') center / 100% 100% no-repeat;
color: #100d04;
font-size: 14px;
font-weight: 800;
}
.btn-done:active {
background-image: url('../../assets/images/generated/pc-betslip-btn-primary-pressed-v1.webp');
}
</style>