-
+
+
+
- {{ t('bet.outright_enter_stake') }}
- {{ pick.teamName }}
- {{ formatOdds(pick.odds) }}
- {{ t('bet.outright_balance') }}:{{ balanceText }}
+ {{ t('bet.outright_enter_stake') }}
+
+
+
![]()
+
{{ pick.teamName }}
+
@ {{ formatOdds(pick.odds) }}
+
+
{{ pick.eventTitle }}
+
+
+ {{ t('bet.outright_balance') }}
+ {{ balanceText }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('history.est_return') }}:{{ estReturnText }}
+
+
{{ error }}
+
-
+
✓
- {{ t('bet.outright_success') }}
- {{ pick.teamName }}
- {{ formatOdds(pick.odds) }}
-
- {{ t('bet.outright_stake_amount') }} : {{ successStake.toFixed(2) }}
-
-
- {{ t('bet.outright_balance') }} : {{ formatMoney(successBalance, locale) }}
-
+ {{ t('bet.outright_success') }}
+
+
+
![]()
+
{{ pick.teamName }}
+
@ {{ formatOdds(pick.odds) }}
+
+
{{ pick.eventTitle }}
-
-
+
+
+
+ {{ t('bet.outright_stake_amount') }}
+ {{ formatMoney(successStake, locale) }}
+
+
+ {{ t('bet.outright_balance') }}
+ {{ formatMoney(successBalance, locale) }}
+
+
+
+
@@ -138,137 +213,266 @@ function formatOdds(odds: string) {
position: fixed;
inset: 0;
z-index: 200;
- background: rgba(0, 0, 0, 0.65);
+ background: rgba(0, 0, 0, 0.72);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
+ backdrop-filter: blur(4px);
}
.modal {
+ position: relative;
width: 100%;
- max-width: 320px;
- background: #f5f5f5;
- border-radius: 8px;
- padding: 20px 18px 16px;
+ 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;
text-align: center;
- color: #333;
+ box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.08);
}
-.title {
- font-size: 15px;
- font-weight: 800;
- color: #b8942b;
+.close-x {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.06);
+ color: var(--text-muted);
+ font-size: 14px;
+ line-height: 1;
+}
+
+.hint {
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-muted);
+ margin-bottom: 12px;
+ letter-spacing: 0.04em;
+}
+
+.hero {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
margin-bottom: 10px;
}
-.success-title {
- margin-top: 8px;
+.hero--compact {
+ margin-top: 4px;
+ margin-bottom: 8px;
+}
+
+.flag {
+ width: 48px;
+ height: 32px;
+ object-fit: cover;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.team {
- font-size: 22px;
+ font-size: 20px;
font-weight: 900;
- color: #c9a227;
- margin-bottom: 8px;
+ color: var(--primary-light);
+ letter-spacing: 0.02em;
}
.odds-badge {
display: inline-block;
- padding: 2px 10px;
- background: #c62828;
+ padding: 3px 10px;
+ background: rgba(198, 40, 40, 0.85);
+ border: 1px solid rgba(255, 120, 120, 0.35);
color: #fff;
font-size: 13px;
font-weight: 800;
- border-radius: 3px;
- margin-bottom: 12px;
-}
-
-.balance-line {
- font-size: 13px;
- color: #444;
- margin-bottom: 6px;
+ border-radius: 4px;
}
.event-title {
+ font-size: 11px;
+ color: var(--text-muted);
+ margin-bottom: 12px;
+ line-height: 1.4;
+ padding: 0 4px;
+}
+
+.balance-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 8px 10px;
+ margin-bottom: 12px;
+ background: rgba(0, 0, 0, 0.35);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+}
+
+.balance-label {
font-size: 12px;
- color: #666;
- margin: 8px 0 14px;
- line-height: 1.35;
+ color: var(--text-muted);
+ font-weight: 600;
+}
+
+.balance-value {
+ font-size: 14px;
+ font-weight: 800;
+ color: var(--primary-light);
+}
+
+.stake-label {
+ display: block;
+ text-align: left;
+ font-size: 11px;
+ color: var(--text-muted);
+ font-weight: 600;
+ margin-bottom: 6px;
}
.stake-input {
width: 100%;
- padding: 10px;
- border: 2px solid #5b9bd5;
- border-radius: 4px;
- font-size: 16px;
- font-weight: 700;
+ padding: 11px 12px;
+ margin-bottom: 8px;
+ border-radius: 6px;
+ border: 1px solid var(--border);
+ background: #0a0a0a;
+ color: var(--text);
+ font-size: 18px;
+ font-weight: 800;
text-align: center;
+ outline: none;
+}
+
+.stake-input:focus {
+ border-color: var(--border-gold-soft);
+ box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.15);
+}
+
+.stake-input::placeholder {
+ color: #555;
+ font-weight: 500;
+ font-size: 14px;
+}
+
+.quick-stakes {
+ display: flex;
+ gap: 6px;
+ margin-bottom: 10px;
+}
+
+.chip {
+ flex: 1;
+ padding: 6px 4px;
+ border-radius: 6px;
+ border: 1px solid var(--border);
+ background: #141414;
+ color: var(--text-muted);
+ font-size: 11px;
+ font-weight: 700;
+}
+
+.chip:active {
+ border-color: var(--border-gold-soft);
+ color: var(--primary-light);
+ background: rgba(212, 175, 55, 0.08);
+}
+
+.est-return {
+ font-size: 12px;
+ color: var(--text-muted);
margin-bottom: 12px;
- color: #111;
+}
+
+.est-value {
+ color: var(--primary-light);
+ font-weight: 800;
}
.error {
- color: #c62828;
+ color: var(--danger);
font-size: 12px;
- margin-bottom: 8px;
+ font-weight: 600;
+ margin-bottom: 10px;
}
.actions {
display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 10px;
-}
-
-.btn-confirm {
- padding: 10px;
- border-radius: 4px;
- background: #2e9e5e;
- color: #fff;
- font-size: 15px;
- font-weight: 800;
+ grid-template-columns: 1fr 1.2fr;
+ gap: 8px;
}
.btn-cancel {
padding: 10px;
- border-radius: 4px;
- background: #555;
- color: #fff;
- font-size: 15px;
+ border-radius: 6px;
+ background: #1a1a1a;
+ border: 1px solid var(--border);
+ color: var(--text-muted);
+ font-size: 14px;
+ font-weight: 700;
+}
+
+.btn-confirm {
+ padding: 10px;
+ border-radius: 6px;
+ font-size: 14px;
font-weight: 800;
}
-.success-icon {
- width: 48px;
- height: 48px;
- margin: 0 auto 4px;
- border-radius: 50%;
- border: 3px solid #2e9e5e;
- color: #2e9e5e;
- font-size: 28px;
- font-weight: 900;
- line-height: 42px;
+.btn-confirm:disabled {
+ opacity: 0.45;
}
-.btn-share {
- width: 100%;
- margin: 12px 0 8px;
+.success-icon {
+ width: 44px;
+ height: 44px;
+ margin: 0 auto 8px;
+ border-radius: 50%;
+ border: 2px solid rgba(46, 158, 94, 0.8);
+ background: rgba(46, 158, 94, 0.12);
+ color: #4ade80;
+ font-size: 24px;
+ font-weight: 900;
+ line-height: 40px;
+}
+
+.success-title {
+ font-size: 16px;
+ font-weight: 800;
+ color: var(--primary-light);
+ margin-bottom: 10px;
+}
+
+.summary {
+ margin: 12px 0 14px;
padding: 10px;
- border-radius: 20px;
- background: #1877f2;
- color: #fff;
- font-weight: 700;
- opacity: 0.5;
+ background: rgba(0, 0, 0, 0.35);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+}
+
+.summary-row {
+ display: flex;
+ justify-content: space-between;
+ font-size: 13px;
+ color: var(--text-muted);
+ padding: 4px 0;
+}
+
+.summary-row + .summary-row {
+ margin-top: 4px;
+ padding-top: 8px;
+ border-top: 1px solid var(--border);
}
.btn-done {
width: 100%;
- padding: 12px;
- border-radius: 4px;
- background: #1aa89a;
- color: #fff;
- font-size: 16px;
+ padding: 11px;
+ border-radius: 6px;
+ font-size: 14px;
font-weight: 800;
}
diff --git a/apps/player/src/router/index.js b/apps/player/src/router/index.js
new file mode 100644
index 0000000..2f10dd1
--- /dev/null
+++ b/apps/player/src/router/index.js
@@ -0,0 +1,2 @@
+// 兼容旧缓存/错误解析:转发到 TypeScript 源文件
+export { default } from './index.ts';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 651efc3..2fa0b86 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,12 +13,18 @@ importers:
axios:
specifier: ^1.7.9
version: 1.16.1
+ echarts:
+ specifier: ^6.1.0
+ version: 6.1.0
element-plus:
specifier: ^2.9.3
version: 2.14.1(vue@3.5.35(typescript@5.7.3))
vue:
specifier: ^3.5.13
version: 3.5.35(typescript@5.7.3)
+ vue-echarts:
+ specifier: ^8.0.1
+ version: 8.0.1(echarts@6.1.0)(vue@3.5.35(typescript@5.7.3))
vue-router:
specifier: ^4.5.0
version: 4.6.4(vue@3.5.35(typescript@5.7.3))
@@ -2028,6 +2034,9 @@ packages:
ecdsa-sig-formatter@1.0.11:
resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
+ echarts@6.1.0:
+ resolution: {integrity: sha512-q0yaFPggC9FUdsWH4blavRWFmxdrIodbkoKNAjJudAI6CA9gNPxHtV2RcZNEepZVlk4yvBYkOkbk6HIVpIyHZA==}
+
ee-first@1.1.1:
resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
@@ -3460,6 +3469,9 @@ packages:
resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
engines: {node: '>=6'}
+ tslib@2.3.0:
+ resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
tslib@2.8.1:
resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
@@ -3616,6 +3628,12 @@ packages:
'@vue/composition-api':
optional: true
+ vue-echarts@8.0.1:
+ resolution: {integrity: sha512-23rJTFLu1OUEGRWjJGmdGt8fP+8+ja1gVgzMYPIPaHWpXegcO1viIAaeu2H4QHESlVeHzUAHIxKXGrwjsyXAaA==}
+ peerDependencies:
+ echarts: ^6.0.0
+ vue: ^3.3.0
+
vue-i18n@11.4.4:
resolution: {integrity: sha512-gIbXVSFQV4jcSJxfwdZ5zSZmZ+12CnX0K3vBkRSd6Zn+HSzCp+QwUgPwpD/uN0oKNKI9RzlUXPKVedEuMgNG0A==}
engines: {node: '>= 22'}
@@ -3719,6 +3737,9 @@ packages:
resolution: {integrity: sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==}
engines: {node: '>=18'}
+ zrender@6.1.0:
+ resolution: {integrity: sha512-oEGMDB6pOP2S6OwRR4PdVv610zrjnA3Bh+JnSG12fYJlBKjtNAoEb5fSUoCOOINlH96I2fU38/A2UpRKs67xYQ==}
+
snapshots:
'@angular-devkit/core@19.2.24(chokidar@4.0.3)':
@@ -5658,6 +5679,11 @@ snapshots:
dependencies:
safe-buffer: 5.2.1
+ echarts@6.1.0:
+ dependencies:
+ tslib: 2.3.0
+ zrender: 6.1.0
+
ee-first@1.1.1: {}
effect@3.21.0:
@@ -7304,6 +7330,8 @@ snapshots:
minimist: 1.2.8
strip-bom: 3.0.0
+ tslib@2.3.0: {}
+
tslib@2.8.1: {}
type-detect@4.0.8: {}
@@ -7396,6 +7424,11 @@ snapshots:
dependencies:
vue: 3.5.35(typescript@5.7.3)
+ vue-echarts@8.0.1(echarts@6.1.0)(vue@3.5.35(typescript@5.7.3)):
+ dependencies:
+ echarts: 6.1.0
+ vue: 3.5.35(typescript@5.7.3)
+
vue-i18n@11.4.4(vue@3.5.35(typescript@5.7.3)):
dependencies:
'@intlify/core-base': 11.4.4
@@ -7529,3 +7562,7 @@ snapshots:
yocto-queue@0.1.0: {}
yoctocolors-cjs@2.1.3: {}
+
+ zrender@6.1.0:
+ dependencies:
+ tslib: 2.3.0