lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

百家乐结算UI大改：①骰子改数字方块(跨平台兼容，白底深字带弹出动画) ②未中奖卡片：😔+红渐变+显示你押了X开了X+损失金额 ③中奖卡片：🎉+绿渐变+金币数字大字 ④结果标签按大小豹子庄家变色

Browse Source
This commit is contained in:
流星
2026-03-01 20:48:38 +08:00
parent 04ab62c988
commit 955aec6b73
1 changed files with 70 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
resources/views/chat/partials/baccarat-panel.blade.php
View File

@@ -200,37 +200,84 @@
{{-- 结算阶段 --}}
<div x-show="phase === 'settled'" style="display:none;">
{{-- 骰子点数展示 --}}
<div style="display:flex; justify-content:center; gap:12px; margin-bottom:12px;">
{{-- 骰子展示（数字方块，跨平台兼容） --}}
<div style="display:flex; justify-content:center; gap:10px; margin-bottom:14px;">
<template x-for="(d, i) in settledDice" :key="i">
<div style="width:52px; height:52px; background:rgba(255,255,255,.95); border-radius:10px;
<div style="width:54px; height:54px; border-radius:12px; font-weight:900;
display:flex; align-items:center; justify-content:center;
font-size:28px; box-shadow:0 4px 12px rgba(0,0,0,.4);
animation:dice-pop .4s ease-out both;"
:style="'animation-delay:' + (i * 0.15) + 's'"
x-text="['⚀','⚁','⚂','⚃','⚄','⚅'][d-1]">
font-size:26px; box-shadow:0 6px 20px rgba(0,0,0,.5);
animation:dice-pop .4s ease-out both; color:#1e1b4b;
background:linear-gradient(145deg,#fff,#e0e7ff);"
:style="'animation-delay:' + (i * 0.18) + 's'" x-text="d">
</div>
</template>
</div>
<div style="text-align:center; margin-bottom:10px;">
<div style="font-size:20px; font-weight:bold; color:#fbbf24;" x-text="resultLabel"></div>
<div style="color:rgba(255,255,255,.4); font-size:12px; margin-top:2px;"
x-text="'总点数：' + settledTotal"></div>
{{-- 结果标签 --}}
<div style="text-align:center; margin-bottom:14px;">
<div style="font-size:26px; font-weight:900; letter-spacing:2px;"
:style="settledResult === 'big' ? 'color:#60a5fa' :
settledResult === 'small' ? 'color:#fbbf24' :
settledResult === 'triple' ? 'color:#c4b5fd' :
settledResult === 'kill' ? 'color:#f87171' : 'color:#fbbf24'"
x-text="resultLabel"></div>
<div style="color:rgba(255,255,255,.35); font-size:12px; margin-top:4px;"
x-text="'骰子总点数：' + settledTotal + ' 点'"></div>
</div>
{{-- 个人结果 --}}
<div x-show="myBet"
style="border-radius:12px; padding:12px 16px; text-align:center; margin-bottom:8px;"
:style="myWon ? 'background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.3);' :
'background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.3);'">
<div style="font-size:15px; font-weight:bold;"
:style="myWon ? 'color:#4ade80;' : 'color:#f87171;'"
x-text="myWon ? '🎉 恭喜！赢得 ' + Number(myPayout).toLocaleString() + ' 金币！' : '💸 本局未中奖'">
{{-- 个人结果卡片 --}}
<div x-show="myBet">
{{-- 中奖 --}}
<div x-show="myWon"
style="border-radius:14px; overflow:hidden; margin-bottom:4px;
background:linear-gradient(135deg,rgba(16,185,129,.25),rgba(5,150,105,.15));
border:1px solid rgba(52,211,153,.4);">
<div style="padding:14px 16px; text-align:center;">
<div style="font-size:32px; margin-bottom:4px;">🎉</div>
<div style="color:#34d399; font-size:18px; font-weight:900;">恭喜中奖！</div>
<div style="color:#6ee7b7; font-size:24px; font-weight:bold; margin:6px 0;"
x-text="'+' + Number(myPayout).toLocaleString() + ' 🪙'"></div>
<div style="color:rgba(255,255,255,.4); font-size:11px;"
x-text="'押「' + betTypeLabel(myBetType) + '」' + Number(myBetAmount).toLocaleString() + ' 金币 → 赢得 ' + Number(myPayout).toLocaleString() + ' 金币'">
</div>
</div>
</div>
<div style="color:rgba(255,255,255,.4); font-size:11px; margin-top:2px;"
x-text="'押注：' + betTypeLabel(myBetType) + ' ' + Number(myBetAmount).toLocaleString() + ' 金币'">
{{-- 未中奖 --}}
<div x-show="!myWon"
style="border-radius:14px; overflow:hidden; margin-bottom:4px;
background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(185,28,28,.1));
border:1px solid rgba(248,113,113,.25);">
<div style="padding:14px 16px; text-align:center;">
<div style="font-size:28px; margin-bottom:4px;">😔</div>
<div style="color:#f87171; font-size:16px; font-weight:bold; margin-bottom:6px;">本局未中奖
</div>
<div
style="display:inline-flex; align-items:center; gap:8px;
background:rgba(0,0,0,.2); border-radius:20px; padding:5px 14px;">
<span style="color:rgba(255,255,255,.5); font-size:12px;">你押了</span>
<span style="font-weight:bold; font-size:13px; color:#fbbf24;"
x-text="betTypeLabel(myBetType)"></span>
<span style="color:rgba(255,255,255,.3); font-size:11px;">·</span>
<span style="color:rgba(255,255,255,.5); font-size:12px;">开了</span>
<span style="font-weight:bold; font-size:13px;"
:style="settledResult === 'big' ? 'color:#60a5fa' :
settledResult === 'small' ? 'color:#fbbf24' :
settledResult === 'triple' ? 'color:#c4b5fd' : 'color:#f87171'"
x-text="resultLabel"></span>
</div>
<div style="color:rgba(255,255,255,.3); font-size:11px; margin-top:8px;"
x-text="'损失 ' + Number(myBetAmount).toLocaleString() + ' 金币'"></div>
</div>
</div>
</div>
{{-- 未下注但看结果 --}}
<div x-show="!myBet"
style="text-align:center; color:rgba(255,255,255,.3); font-size:12px; padding:8px 0;">
本局未参与下注
</div>
</div>
</div>
@@ -335,6 +382,7 @@
// 结算结果
settledDice: [],
settledTotal: 0,
settledResult: '',
resultLabel: '',
diceEmoji: '',
myWon: false,
@@ -443,8 +491,8 @@
clearInterval(this.countdownTimer);
this.settledDice = data.dice;
this.settledTotal = data.total_points;
this.settledResult = data.result;
this.resultLabel = data.result_label;
this.diceEmoji = data.dice.map(d => ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅'][d - 1]).join('');
this.phase = 'settled';
this.show = true;