diff --git a/web/src/lang/backend/en/game/live.ts b/web/src/lang/backend/en/game/live.ts index 634cfe4..9a39db1 100644 --- a/web/src/lang/backend/en/game/live.ts +++ b/web/src/lang/backend/en/game/live.ts @@ -9,6 +9,8 @@ export default { payout_countdown: 'Payout left', payout_na: '—', payout_phase: 'Payout in progress', + action_panel: 'Actions', + manual_draw_number: 'Scheduled draw', btn_calc: 'Calculate PnL', btn_draw: 'Schedule draw', calc_result_number: 'Calculated number', diff --git a/web/src/lang/backend/zh-cn/game/live.ts b/web/src/lang/backend/zh-cn/game/live.ts index 153e9a3..5bd5ddf 100644 --- a/web/src/lang/backend/zh-cn/game/live.ts +++ b/web/src/lang/backend/zh-cn/game/live.ts @@ -9,7 +9,9 @@ export default { payout_countdown: '派彩剩余', payout_na: '—', payout_phase: '派彩中，请稍候', - btn_calc: '计算法盈亏', + action_panel: '操作区', + manual_draw_number: '预约开奖', + btn_calc: '计算盈亏', btn_draw: '预约开奖', calc_result_number: '计算开奖号码', calc_estimated_loss: '计算预估赔付', diff --git a/web/src/views/backend/game/live/index.vue b/web/src/views/backend/game/live/index.vue index c9f0e81..955551a 100644 --- a/web/src/views/backend/game/live/index.vue +++ b/web/src/views/backend/game/live/index.vue @@ -3,31 +3,75 @@ - + -
-
-
{{ t('game.live.current_record') }}: {{ snapshot.record?.period_no || '-' }}
-
{{ t('game.live.ai_default_number') }}: {{ snapshot.ai_default_number ?? '-' }}
-
- {{ t('game.live.pending_draw') }}: {{ snapshot.pending_draw_number }} +
+
+ + + {{ snapshot.record?.period_no || '—' }} + + + {{ snapshot.ai_default_number ?? '—' }} + + + {{ snapshot.pending_draw_number }} + + + +
+
{{ t('game.live.countdown') }}
+
+
+ {{ t('game.live.bet_countdown') }} + {{ countdownParts.bet }}s +
+
+ {{ t('game.live.draw_countdown') }} + {{ countdownParts.draw }}s +
+
+ {{ t('game.live.payout_countdown') }} + {{ countdownParts.payout }} +
+
+
+ +
+ + {{ t('game.live.calc_result_number') }} + {{ calcResultNumber ?? '—' }} + + + {{ t('game.live.calc_estimated_loss') }} + {{ calcEstimatedLoss }} +
-
{{ t('game.live.countdown') }}: {{ countdownText }}
-
- - - {{ t('game.live.btn_calc') }} - - - {{ t('game.live.btn_draw') }} - - {{ t('Refresh') }} -
-
-
- {{ t('game.live.calc_result_number') }}: {{ calcResultNumber ?? '-' }} - {{ t('game.live.calc_estimated_loss') }}: {{ calcEstimatedLoss }} + +
@@ -313,14 +357,14 @@ async function onDraw() { } } -const countdownText = computed(() => { +const countdownParts = computed(() => { const bet = snapshot.bet_remaining_seconds ?? 0 const draw = snapshot.remaining_seconds ?? 0 - let payoutPart = t('game.live.payout_na') + let payout = t('game.live.payout_na') if (snapshot.is_payout_phase && payoutRemainingLive.value !== null) { - payoutPart = `${payoutRemainingLive.value}s` + payout = `${payoutRemainingLive.value}s` } - return `${t('game.live.bet_countdown')} ${bet}s / ${t('game.live.draw_countdown')} ${draw}s / ${t('game.live.payout_countdown')} ${payoutPart}` + return { bet, draw, payout } }) onMounted(async () => { @@ -394,20 +438,217 @@ function stopPushWatchdog() { .mb-12 { margin-bottom: 12px; } -.header-row { - display: flex; - justify-content: space-between; - align-items: center; - gap: 12px; + +.live-control-card { + :deep(.el-card__body) { + padding-top: 8px; + } } -.header-actions { + +.live-control-layout { display: flex; + flex-wrap: wrap; + gap: 20px 24px; + align-items: flex-start; +} + +.live-control-main { + flex: 1 1 320px; + min-width: 0; +} + +.live-desc { + margin-bottom: 16px; + :deep(.el-descriptions__label) { + width: 120px; + font-weight: 500; + } +} + +.period-no { + display: inline-block; + max-width: 100%; + word-break: break-all; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; + font-size: 13px; + line-height: 1.5; + color: var(--el-text-color-primary); +} + +.num-em { + font-size: 16px; + font-weight: 600; + color: var(--el-color-primary); +} + +.countdown-block { + margin-bottom: 14px; +} + +.countdown-block__title { + font-size: 13px; + color: var(--el-text-color-secondary); + margin-bottom: 8px; +} + +.countdown-cards { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 10px; +} + +.cd-card { + border: 1px solid var(--el-border-color-lighter); + border-radius: 8px; + padding: 10px 12px; + background: var(--el-fill-color-blank); + display: flex; + flex-direction: column; + gap: 4px; align-items: center; + text-align: center; + min-width: 0; +} + +/* 移动端保持同一排，压缩间距与字号以省纵向空间 */ +@media (max-width: 768px) { + .countdown-block { + margin-bottom: 10px; + } + + .countdown-block__title { + margin-bottom: 6px; + } + + .countdown-cards { + gap: 6px; + } + + .cd-card { + padding: 6px 4px; + border-radius: 6px; + gap: 2px; + min-width: 0; + } + + .cd-card__label { + font-size: 11px; + line-height: 1.2; + padding: 0 2px; + } + + .cd-card__val { + font-size: 15px; + } +} + +.cd-card.is-active { + border-color: var(--el-color-warning-light-5); + background: var(--el-color-warning-light-9); +} + +.cd-card__label { + font-size: 12px; + color: var(--el-text-color-secondary); + line-height: 1.3; +} + +.cd-card__val { + font-size: 18px; + font-weight: 600; + font-variant-numeric: tabular-nums; + color: var(--el-text-color-primary); +} + +.calc-result-bar { + display: flex; + flex-wrap: wrap; + gap: 16px 24px; + padding: 10px 14px; + border-radius: 8px; + background: var(--el-fill-color-light); + border: 1px solid var(--el-border-color-lighter); +} + +.calc-result-bar__item { + display: inline-flex; + align-items: baseline; gap: 8px; } -.result-row { - margin-top: 12px; + +.calc-result-bar__k { + font-size: 13px; + color: var(--el-text-color-secondary); +} + +.calc-result-bar__v { + font-size: 14px; + font-weight: 500; +} + +.calc-result-bar__v.mono { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; +} + +.live-control-aside { + flex: 0 0 240px; + padding-left: 20px; + border-left: 1px solid var(--el-border-color-lighter); display: flex; - gap: 16px; + flex-direction: column; + gap: 12px; +} + +@media (max-width: 992px) { + .live-control-aside { + flex: 1 1 100%; + padding-left: 0; + border-left: none; + padding-top: 16px; + border-top: 1px solid var(--el-border-color-lighter); + } +} + +.aside-title { + font-size: 14px; + font-weight: 600; + color: var(--el-text-color-regular); +} + +.aside-field { + display: flex; + flex-direction: column; + gap: 6px; +} + +.aside-field__label { + font-size: 12px; + color: var(--el-text-color-secondary); +} + +.aside-field__input { + width: 100%; +} + +.aside-btns { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + gap: 8px; + align-items: stretch; +} + +.aside-btns .el-button { + flex: 1; + min-width: 0; + margin-left: 0; + padding-left: 8px; + padding-right: 8px; +} + +.aside-btns .el-button :deep(span) { + white-space: normal; + line-height: 1.25; + text-align: center; }