功能更新与UI优化：游戏图标移除、用户名片修复、婚礼红包界面重设计
- 移除聊天室右下角浮动游戏图标（占卜、百家乐、赛马、老虎机） - 用户名片按钮区：修复已婚/已好友时按钮换行问题，统一单行显示 - 婚礼红包弹窗：重设计为喜庆鲜红背景，领取按钮改为圆形米黄样式 - 新增婚礼红包恢复接口（/wedding/pending-envelopes），刷新后自动恢复领取按钮 - 修复 Alpine :style 字符串覆盖静态 style 导致圆形按钮失效的问题 - 撤职后用户等级改为根据经验值重新计算，不再无条件重置为1 - 管理员修改用户经验值后自动重算等级，有职务用户等级锁定 - 娱乐大厅钓鱼游戏按钮直接调用 startFishing() 简化操作流程 - 新增赛马、占卜、百家乐游戏及相关后端逻辑
This commit is contained in:
@@ -8,207 +8,203 @@
|
||||
- 展示近10局历史趋势
|
||||
--}}
|
||||
|
||||
{{-- ─── 百家乐主面板 ─── --}}
|
||||
{{-- 百家乐主面板 --}}
|
||||
<div id="baccarat-panel" x-data="baccaratPanel()" x-show="show" x-cloak>
|
||||
<div x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
|
||||
style="position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:9940;
|
||||
style="position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9940;
|
||||
display:flex; align-items:center; justify-content:center;">
|
||||
|
||||
<div
|
||||
style="width:480px; max-width:96vw; border-radius:24px; overflow:hidden;
|
||||
box-shadow:0 24px 80px rgba(139,92,246,.5); font-family:system-ui,sans-serif;">
|
||||
style="width:460px; max-width:96vw; border-radius:8px; overflow:hidden;
|
||||
box-shadow:0 8px 32px rgba(0,0,0,.3); font-family:'Microsoft YaHei',SimSun,sans-serif; background:#fff;">
|
||||
|
||||
{{-- ─── 顶部标题 ─── --}}
|
||||
<div
|
||||
style="background:linear-gradient(135deg,#4c1d95,#6d28d9,#7c3aed); padding:18px 22px 14px; position:relative;">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between;">
|
||||
<div>
|
||||
<div style="color:#fff; font-weight:900; font-size:18px; letter-spacing:1px;">🎲 百家乐</div>
|
||||
<div style="color:rgba(255,255,255,.6); font-size:12px; margin-top:2px;">
|
||||
第 <span x-text="'#' + roundId"></span> 局
|
||||
</div>
|
||||
</div>
|
||||
{{-- 倒计时 --}}
|
||||
<div x-show="phase === 'betting'" style="text-align:center;">
|
||||
<div style="color:#fbbf24; font-size:32px; font-weight:900; line-height:1;" x-text="countdown">
|
||||
</div>
|
||||
<div style="color:rgba(255,255,255,.5); font-size:11px;">秒后截止</div>
|
||||
</div>
|
||||
{{-- 骰子结果 --}}
|
||||
<div x-show="phase === 'settled'" style="display:none; text-align:center;">
|
||||
<div style="font-size:28px;" x-text="diceEmoji"></div>
|
||||
<div style="color:#fbbf24; font-size:12px; font-weight:bold; margin-top:2px;"
|
||||
x-text="resultLabel"></div>
|
||||
style="background:linear-gradient(135deg,#336699,#5a8fc0); padding:10px 16px;
|
||||
display:flex; align-items:center; justify-content:space-between;">
|
||||
<div>
|
||||
<div style="color:#fff; font-weight:bold; font-size:14px;">🎲 百家乐</div>
|
||||
<div style="color:rgba(255,255,255,.75); font-size:11px; margin-top:1px;">
|
||||
第 <span x-text="'#' + roundId"></span> 局
|
||||
</div>
|
||||
</div>
|
||||
{{-- 倒计时 --}}
|
||||
<div x-show="phase === 'betting'" style="text-align:center;">
|
||||
<div style="color:#fbbf24; font-size:28px; font-weight:900; line-height:1;" x-text="countdown">
|
||||
</div>
|
||||
<div style="color:rgba(255,255,255,.7); font-size:11px;">秒后截止</div>
|
||||
</div>
|
||||
{{-- 骰子结果 --}}
|
||||
<div x-show="phase === 'settled'" style="display:none; text-align:center;">
|
||||
<div style="font-size:24px;" x-text="diceEmoji"></div>
|
||||
<div style="color:#fbbf24; font-size:12px; font-weight:bold; margin-top:2px;" x-text="resultLabel">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 进度条 --}}
|
||||
<div x-show="phase === 'betting'"
|
||||
style="margin-top:10px; height:4px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden;">
|
||||
<div style="height:100%; background:#fbbf24; border-radius:2px; transition:width 1s linear;"
|
||||
:style="'width:' + Math.max(0, (countdown / totalSeconds * 100)) + '%'"></div>
|
||||
</div>
|
||||
{{-- 进度条 --}}
|
||||
<div x-show="phase === 'betting'" style="height:3px; background:rgba(255,255,255,.2);">
|
||||
<div style="height:100%; background:#fbbf24; transition:width 1s linear;"
|
||||
:style="'width:' + Math.max(0, (countdown / totalSeconds * 100)) + '%'"></div>
|
||||
</div>
|
||||
|
||||
{{-- ─── 历史趋势 ─── --}}
|
||||
<div
|
||||
style="background:#1e1b4b; padding:8px 16px; display:flex; gap:6px; align-items:center; flex-wrap:wrap;">
|
||||
<span style="color:rgba(255,255,255,.4); font-size:11px; margin-right:2px;">近期</span>
|
||||
style="background:#f0f6ff; padding:7px 14px; display:flex; gap:5px; align-items:center;
|
||||
flex-wrap:wrap; border-bottom:1px solid #d0e4f5;">
|
||||
<span style="color:#99b0cc; font-size:11px; margin-right:2px;">近期</span>
|
||||
<template x-for="h in history" :key="h.id">
|
||||
<span
|
||||
style="width:22px; height:22px; border-radius:50%; font-size:11px; font-weight:bold;
|
||||
display:flex; align-items:center; justify-content:center;"
|
||||
:style="h.result === 'big' ? 'background:#1d4ed8; color:#fff' :
|
||||
h.result === 'small' ? 'background:#b45309; color:#fff' :
|
||||
h.result === 'triple' ? 'background:#7c3aed; color:#fff' :
|
||||
'background:#374151; color:#9ca3af'"
|
||||
display:flex; align-items:center; justify-content:center; color:#fff;"
|
||||
:style="h.result === 'big' ? 'background:#1d4ed8' :
|
||||
h.result === 'small' ? 'background:#d97706' :
|
||||
h.result === 'triple' ? 'background:#7c3aed' :
|
||||
'background:#94a3b8'"
|
||||
:title="'#' + h.id + ' ' + (h.result === 'big' ? '大' : h.result === 'small' ? '小' : h
|
||||
.result === 'triple' ? '豹' : '☠')"
|
||||
x-text="h.result === 'big' ? '大' : h.result === 'small' ? '小' : h.result === 'triple' ? '豹' : '☠'">
|
||||
</span>
|
||||
</template>
|
||||
<span x-show="history.length === 0" style="color:rgba(255,255,255,.3); font-size:11px;">暂无记录</span>
|
||||
<span x-show="history.length === 0" style="color:#b0c4d8; font-size:11px;">暂无记录</span>
|
||||
</div>
|
||||
|
||||
{{-- ─── 主体内容 ─── --}}
|
||||
<div style="background:linear-gradient(180deg,#1e1b4b,#1a1035); padding:18px 20px;">
|
||||
{{-- ─── 主体内容（白底） ─── --}}
|
||||
<div style="background:#fff; padding:14px 16px;">
|
||||
|
||||
{{-- 押注阶段 --}}
|
||||
<div x-show="phase === 'betting'">
|
||||
{{-- 当前下注池统计 --}}
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:14px;">
|
||||
<div style="background:rgba(29,78,216,.3); border-radius:10px; padding:8px; text-align:center;">
|
||||
<div style="color:#60a5fa; font-size:11px;">押大</div>
|
||||
<div style="color:#fff; font-weight:bold; font-size:13px;"
|
||||
|
||||
{{-- 下注池统计 --}}
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px;">
|
||||
<div
|
||||
style="background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; padding:8px; text-align:center;">
|
||||
<div style="color:#1d4ed8; font-size:11px; font-weight:bold;">押大</div>
|
||||
<div style="color:#1e40af; font-weight:bold; font-size:13px;"
|
||||
x-text="Number(totalBetBig).toLocaleString()"></div>
|
||||
</div>
|
||||
<div style="background:rgba(180,83,9,.3); border-radius:10px; padding:8px; text-align:center;">
|
||||
<div style="color:#fbbf24; font-size:11px;">押小</div>
|
||||
<div style="color:#fff; font-weight:bold; font-size:13px;"
|
||||
<div
|
||||
style="background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:8px; text-align:center;">
|
||||
<div style="color:#d97706; font-size:11px; font-weight:bold;">押小</div>
|
||||
<div style="color:#b45309; font-weight:bold; font-size:13px;"
|
||||
x-text="Number(totalBetSmall).toLocaleString()"></div>
|
||||
</div>
|
||||
<div
|
||||
style="background:rgba(124,58,237,.3); border-radius:10px; padding:8px; text-align:center;">
|
||||
<div style="color:#c4b5fd; font-size:11px;">押豹子</div>
|
||||
<div style="color:#fff; font-weight:bold; font-size:13px;"
|
||||
style="background:#f5f3ff; border:1px solid #ddd6fe; border-radius:8px; padding:8px; text-align:center;">
|
||||
<div style="color:#7c3aed; font-size:11px; font-weight:bold;">押豹子</div>
|
||||
<div style="color:#6d28d9; font-weight:bold; font-size:13px;"
|
||||
x-text="Number(totalBetTriple).toLocaleString()"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 已下注状态 / 下注表单 --}}
|
||||
{{-- 已下注状态 --}}
|
||||
<div x-show="myBet">
|
||||
<div
|
||||
style="background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.3); border-radius:12px;
|
||||
padding:12px 16px; text-align:center; margin-bottom:12px;">
|
||||
<div style="color:#4ade80; font-weight:bold; font-size:14px;">
|
||||
style="background:#f0fdf4; border:1px solid #86efac; border-radius:10px;
|
||||
padding:10px 14px; text-align:center; margin-bottom:10px;">
|
||||
<div style="color:#16a34a; font-weight:bold; font-size:13px;">
|
||||
✅ 已押注「<span x-text="betTypeLabel(myBetType)"></span>」
|
||||
<span x-text="Number(myBetAmount).toLocaleString()"></span> 金币
|
||||
</div>
|
||||
<div style="color:rgba(255,255,255,.4); font-size:11px; margin-top:4px;">等待开奖中…</div>
|
||||
<div style="color:#86a896; font-size:11px; margin-top:3px;">等待开奖中…</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 下注表单 --}}
|
||||
<div x-show="!myBet">
|
||||
{{-- 押注选项 --}}
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px;">
|
||||
{{-- 大 --}}
|
||||
<button x-on:click="selectedType='big'"
|
||||
style="border:none; border-radius:12px; padding:12px 0; cursor:pointer; transition:all .15s; font-weight:bold;"
|
||||
:style="selectedType === 'big' ?
|
||||
'background:#1d4ed8; color:#fff; transform:scale(1.05); box-shadow:0 4px 20px rgba(29,78,216,.5)' :
|
||||
'background:rgba(29,78,216,.2); color:#93c5fd;'">
|
||||
<div style="font-size:20px;">🔵</div>
|
||||
<div style="font-size:13px; margin-top:2px;">大</div>
|
||||
<div style="font-size:10px; opacity:.7;">11~17点 • 1:1</div>
|
||||
style="border-radius:10px; padding:12px 0; cursor:pointer; transition:all .15s; font-weight:bold; font-family:inherit;"
|
||||
:style="selectedType === 'big'
|
||||
?
|
||||
'border:2px solid #1d4ed8; background:#1d4ed8; color:#fff; transform:scale(1.05); box-shadow:0 4px 14px rgba(29,78,216,.3);' :
|
||||
'border:2px solid #bfdbfe; background:#eff6ff; color:#1d4ed8;'">
|
||||
<div style="font-size:22px;">🔵</div>
|
||||
<div style="font-size:13px; margin-top:4px;">大</div>
|
||||
<div style="font-size:10px; margin-top:2px; opacity:.75;">11~17点 • 1:1</div>
|
||||
</button>
|
||||
{{-- 小 --}}
|
||||
<button x-on:click="selectedType='small'"
|
||||
style="border:none; border-radius:12px; padding:12px 0; cursor:pointer; transition:all .15s; font-weight:bold;"
|
||||
:style="selectedType === 'small' ?
|
||||
'background:#b45309; color:#fff; transform:scale(1.05); box-shadow:0 4px 20px rgba(180,83,9,.5)' :
|
||||
'background:rgba(180,83,9,.2); color:#fcd34d;'">
|
||||
<div style="font-size:20px;">🟡</div>
|
||||
<div style="font-size:13px; margin-top:2px;">小</div>
|
||||
<div style="font-size:10px; opacity:.7;">4~10点 • 1:1</div>
|
||||
style="border-radius:10px; padding:12px 0; cursor:pointer; transition:all .15s; font-weight:bold; font-family:inherit;"
|
||||
:style="selectedType === 'small'
|
||||
?
|
||||
'border:2px solid #d97706; background:#d97706; color:#fff; transform:scale(1.05); box-shadow:0 4px 14px rgba(217,119,6,.3);' :
|
||||
'border:2px solid #fde68a; background:#fffbeb; color:#b45309;'">
|
||||
<div style="font-size:22px;">🟡</div>
|
||||
<div style="font-size:13px; margin-top:4px;">小</div>
|
||||
<div style="font-size:10px; margin-top:2px; opacity:.75;">4~10点 • 1:1</div>
|
||||
</button>
|
||||
{{-- 豹子 --}}
|
||||
<button x-on:click="selectedType='triple'"
|
||||
style="border:none; border-radius:12px; padding:12px 0; cursor:pointer; transition:all .15s; font-weight:bold;"
|
||||
:style="selectedType === 'triple' ?
|
||||
'background:#7c3aed; color:#fff; transform:scale(1.05); box-shadow:0 4px 20px rgba(124,58,237,.5)' :
|
||||
'background:rgba(124,58,237,.2); color:#c4b5fd;'">
|
||||
<div style="font-size:20px;">💥</div>
|
||||
<div style="font-size:13px; margin-top:2px;">豹子</div>
|
||||
<div style="font-size:10px; opacity:.7;">三同 • 1:24</div>
|
||||
style="border-radius:10px; padding:12px 0; cursor:pointer; transition:all .15s; font-weight:bold; font-family:inherit;"
|
||||
:style="selectedType === 'triple'
|
||||
?
|
||||
'border:2px solid #7c3aed; background:#7c3aed; color:#fff; transform:scale(1.05); box-shadow:0 4px 14px rgba(124,58,237,.3);' :
|
||||
'border:2px solid #ddd6fe; background:#f5f3ff; color:#7c3aed;'">
|
||||
<div style="font-size:22px;">💥</div>
|
||||
<div style="font-size:13px; margin-top:4px;">豹子</div>
|
||||
<div style="font-size:10px; margin-top:2px; opacity:.75;">三同 • 1:24</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- 快捷金额 + 自定义 --}}
|
||||
<div style="margin-bottom:10px;">
|
||||
<div style="display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap;">
|
||||
<template x-for="preset in [100, 500, 1000, 5000, 10000]" :key="preset">
|
||||
<button x-on:click="betAmount = preset"
|
||||
style="flex:1; min-width:50px; border:none; border-radius:8px; padding:6px 4px;
|
||||
font-size:12px; font-weight:bold; cursor:pointer; transition:all .1s;"
|
||||
:style="betAmount === preset ?
|
||||
'background:#fbbf24; color:#1a1035;' :
|
||||
'background:rgba(255,255,255,.1); color:rgba(255,255,255,.7);'"
|
||||
x-text="preset >= 1000 ? (preset/1000)+'k' : preset">
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<input type="number" x-model.number="betAmount" min="100" placeholder="自定义金额"
|
||||
style="width:100%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
|
||||
border-radius:8px; padding:8px 12px; color:#fff; font-size:13px; box-sizing:border-box;"
|
||||
x-on:focus="$event.target.select()">
|
||||
{{-- 快捷金额 --}}
|
||||
<div style="display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:10px;">
|
||||
<template x-for="preset in [100, 500, 1000, 5000, 10000]" :key="preset">
|
||||
<button x-on:click="betAmount = preset"
|
||||
style="border-radius:20px; padding:8px 2px; font-size:13px; font-weight:bold;
|
||||
cursor:pointer; transition:all .15s; font-family:inherit; text-align:center;"
|
||||
:style="betAmount === preset ?
|
||||
'background:#336699; color:#fff; border:none; box-shadow:0 3px 10px rgba(51,102,153,.35); transform:translateY(-1px);' :
|
||||
'background:#fff; color:#336699; border:1.5px solid #c0d8ef;'"
|
||||
x-text="preset >= 1000 ? (preset/1000)+'k' : preset">
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
{{-- 自定义金额 --}}
|
||||
<input type="number" x-model.number="betAmount" min="100" placeholder="自定义金额"
|
||||
style="width:100%; background:#f6faff; border:1.5px solid #d0e4f5;
|
||||
border-radius:8px; padding:8px 12px; color:#225588; font-size:13px;
|
||||
box-sizing:border-box; margin-bottom:10px;"
|
||||
x-on:focus="$event.target.select()">
|
||||
|
||||
{{-- 下注按钮 --}}
|
||||
<button x-on:click="submitBet()" :disabled="!selectedType || betAmount < 100 || submitting"
|
||||
style="width:100%; border:none; border-radius:12px; padding:14px;
|
||||
font-size:15px; font-weight:bold; cursor:pointer; transition:all .2s;
|
||||
letter-spacing:1px;"
|
||||
:style="(!selectedType || betAmount < 100 || submitting) ? {
|
||||
background: '#f1f5f9',
|
||||
color: '#94a3b8',
|
||||
cursor: 'not-allowed',
|
||||
boxShadow: 'none'
|
||||
} : {
|
||||
background: 'linear-gradient(135deg,#6d28d9,#7c3aed,#8b5cf6)',
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
boxShadow: '0 4px 16px rgba(124,58,237,0.5)'
|
||||
}">
|
||||
:style="(!selectedType || betAmount < 100 || submitting) ?
|
||||
'display:block; width:100%; border:none; border-radius:12px; padding:13px 0; font-size:14px; font-weight:bold; cursor:not-allowed; transition:all .2s; background:#e0e8f0; color:#99a8b8; box-shadow:none; font-family:inherit;' :
|
||||
'display:block; width:100%; border:none; border-radius:12px; padding:13px 0; font-size:14px; font-weight:bold; cursor:pointer; transition:all .2s; background:linear-gradient(135deg,#336699,#5a8fc0); color:#fff; box-shadow:0 4px 14px rgba(51,102,153,.3); font-family:inherit;'">
|
||||
<span
|
||||
x-text="submitting ? '提交中…' : (!selectedType ? '请先选择大/小/豹子' : '🎲 押注「' + betTypeLabel(selectedType) + '」 ' + Number(betAmount).toLocaleString() + ' 金币')"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- 规则提示 --}}
|
||||
<div style="margin-top:10px; color:rgba(255,255,255,.3); font-size:10px; text-align:center;">
|
||||
<div style="margin-top:10px; color:#99b0cc; font-size:10px; text-align:center;">
|
||||
☠️ 3点或18点为庄家收割，全灭无退款。豹子优先于大小判断。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 等待开奖阶段 --}}
|
||||
<div x-show="phase === 'waiting'" style="display:none; text-align:center; padding:16px 0;">
|
||||
<div style="font-size:40px; animation:spin 1s linear infinite; display:inline-block;">🎲</div>
|
||||
<div style="color:rgba(255,255,255,.6); margin-top:8px;">正在摇骰子…</div>
|
||||
<div x-show="phase === 'waiting'" style="display:none; text-align:center; padding:20px 0;">
|
||||
<div style="font-size:44px; animation:spin 1s linear infinite; display:inline-block;">🎲</div>
|
||||
<div style="color:#5a8fc0; margin-top:10px; font-weight:bold;">正在摇骰子…</div>
|
||||
</div>
|
||||
|
||||
{{-- 结算阶段 --}}
|
||||
<div x-show="phase === 'settled'" style="display:none;">
|
||||
|
||||
{{-- 骰子展示（数字方块，跨平台兼容） --}}
|
||||
<div style="display:flex; justify-content:center; gap:10px; margin-bottom:14px;">
|
||||
{{-- 骰子展示 --}}
|
||||
<div style="display:flex; justify-content:center; gap:10px; margin-bottom:16px;">
|
||||
<template x-for="(d, i) in settledDice" :key="i">
|
||||
<div style="width:54px; height:54px; border-radius:12px; font-weight:900;
|
||||
<div style="width:56px; height:56px; border-radius:12px; font-weight:900;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
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);"
|
||||
font-size:26px; animation:dice-pop .4s ease-out both;
|
||||
color:#1e3a5f; background:linear-gradient(145deg,#ffffff,#e8f0fb);
|
||||
border:1.5px solid #d0e4f5; box-shadow:0 4px 14px rgba(51,102,153,.12);"
|
||||
:style="'animation-delay:' + (i * 0.18) + 's'" x-text="d">
|
||||
</div>
|
||||
</template>
|
||||
@@ -216,13 +212,13 @@
|
||||
|
||||
{{-- 结果标签 --}}
|
||||
<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'"
|
||||
<div style="font-size:24px; font-weight:900; letter-spacing:2px;"
|
||||
:style="settledResult === 'big' ? 'color:#1d4ed8' :
|
||||
settledResult === 'small' ? 'color:#d97706' :
|
||||
settledResult === 'triple' ? 'color:#7c3aed' :
|
||||
settledResult === 'kill' ? 'color:#dc2626' : 'color:#336699'"
|
||||
x-text="resultLabel"></div>
|
||||
<div style="color:rgba(255,255,255,.35); font-size:12px; margin-top:4px;"
|
||||
<div style="color:#99b0cc; font-size:12px; margin-top:4px;"
|
||||
x-text="'骰子总点数：' + settledTotal + ' 点'"></div>
|
||||
</div>
|
||||
|
||||
@@ -230,15 +226,14 @@
|
||||
<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);">
|
||||
style="border-radius:12px; overflow:hidden; margin-bottom:4px;
|
||||
background:#f0fdf4; border:1px solid #86efac;">
|
||||
<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;"
|
||||
<div style="color:#16a34a; font-size:18px; font-weight:900;">恭喜中奖！</div>
|
||||
<div style="color:#15803d; 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;"
|
||||
<div style="color:#86a896; font-size:11px;"
|
||||
x-text="'押「' + betTypeLabel(myBetType) + '」' + Number(myBetAmount).toLocaleString() + ' 金币 → 赢得 ' + Number(myPayout).toLocaleString() + ' 金币'">
|
||||
</div>
|
||||
</div>
|
||||
@@ -246,48 +241,46 @@
|
||||
|
||||
{{-- 未中奖 --}}
|
||||
<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);">
|
||||
style="border-radius:12px; overflow:hidden; margin-bottom:4px;
|
||||
background:#fff5f5; border:1px solid #fecaca;">
|
||||
<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 style="color:#dc2626; font-size:16px; font-weight:bold; margin-bottom:8px;">本局未中奖
|
||||
</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;"
|
||||
background:#fef2f2; border-radius:20px; padding:5px 14px; border:1px solid #fecaca;">
|
||||
<span style="color:#64748b; font-size:12px;">你押了</span>
|
||||
<span style="font-weight:bold; font-size:13px; color:#d97706;"
|
||||
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="color:#d0d5db; font-size:11px;">·</span>
|
||||
<span style="color:#64748b; 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'"
|
||||
:style="settledResult === 'big' ? 'color:#1d4ed8' :
|
||||
settledResult === 'small' ? 'color:#d97706' :
|
||||
settledResult === 'triple' ? 'color:#7c3aed' : 'color:#dc2626'"
|
||||
x-text="resultLabel"></span>
|
||||
</div>
|
||||
<div style="color:rgba(255,255,255,.3); font-size:11px; margin-top:8px;"
|
||||
<div style="color:#94a3b8; 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 x-show="!myBet" style="text-align:center; color:#99b0cc; font-size:12px; padding:8px 0;">
|
||||
本局未参与下注
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ─── 底部关闭 ─── --}}
|
||||
<div style="background:rgba(15,10,40,.95); padding:10px 20px; display:flex; justify-content:center;">
|
||||
{{-- 底部关闭 --}}
|
||||
<div
|
||||
style="background:#fff; border-top:1px solid #d0e4f5; padding:12px 16px; display:flex; justify-content:center;">
|
||||
<button x-on:click="close()"
|
||||
style="padding:7px 28px; background:rgba(255,255,255,.08); border:none; border-radius:20px;
|
||||
font-size:12px; color:rgba(255,255,255,.5); cursor:pointer; transition:all .15s;"
|
||||
onmouseover="this.style.background='rgba(255,255,255,.15)'"
|
||||
onmouseout="this.style.background='rgba(255,255,255,.08)'">
|
||||
style="padding:10px 48px; min-width:140px; background:#f0f6ff; border:1px solid #b0d0ee; border-radius:12px;
|
||||
font-size:14px; font-weight:bold; color:#336699; cursor:pointer; transition:all .15s; font-family:inherit;"
|
||||
onmouseover="this.style.background='#ddeeff'" onmouseout="this.style.background='#f0f6ff'">
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
@@ -295,19 +288,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ─── 骨骰悬浮入口（游戏开启时常驻，支持拖拽） ─── --}}
|
||||
<div id="baccarat-fab" x-data="baccaratFab()" x-show="visible" x-cloak
|
||||
:style="'position:fixed; right:' + posX + 'px; bottom:' + posY + 'px; z-index:9900; touch-action:none; user-select:none;'"
|
||||
@pointerdown.prevent="startDrag($event)" @pointermove.window="onDrag($event)" @pointerup.window="endDrag($event)"
|
||||
@pointercancel.window="endDrag($event)">
|
||||
<button
|
||||
style="width:52px; height:52px; border-radius:50%; border:none;
|
||||
background:linear-gradient(135deg,#7c3aed,#4f46e5);
|
||||
box-shadow:0 4px 20px rgba(124,58,237,.5);
|
||||
font-size:22px; display:flex; align-items:center; justify-content:center;
|
||||
animation:pulse-fab 2s infinite; user-select:none;"
|
||||
:style="dragging ? 'cursor:grabbing;' : 'cursor:grab;'" title="百家乐下注中（可拖动）">🎲</button>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
/**
|
||||
@@ -396,11 +377,11 @@
|
||||
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 4px 20px rgba(124, 58, 237, .5);
|
||||
box-shadow: 0 4px 20px rgba(51, 102, 153, .4);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 4px 30px rgba(124, 58, 237, .9);
|
||||
box-shadow: 0 4px 30px rgba(51, 102, 153, .8);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -528,7 +509,7 @@
|
||||
this.myBet = true;
|
||||
this.myBetType = data.bet_type;
|
||||
this.myBetAmount = data.amount;
|
||||
window.chatDialog?.alert(data.message, '下注成功', '#7c3aed');
|
||||
window.chatDialog?.alert(data.message, '下注成功', '#336699');
|
||||
} else {
|
||||
window.chatDialog?.alert(data.message || '下注失败', '提示', '#ef4444');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user