功能更新与UI优化:游戏图标移除、用户名片修复、婚礼红包界面重设计
- 移除聊天室右下角浮动游戏图标(占卜、百家乐、赛马、老虎机) - 用户名片按钮区:修复已婚/已好友时按钮换行问题,统一单行显示 - 婚礼红包弹窗:重设计为喜庆鲜红背景,领取按钮改为圆形米黄样式 - 新增婚礼红包恢复接口(/wedding/pending-envelopes),刷新后自动恢复领取按钮 - 修复 Alpine :style 字符串覆盖静态 style 导致圆形按钮失效的问题 - 撤职后用户等级改为根据经验值重新计算,不再无条件重置为1 - 管理员修改用户经验值后自动重算等级,有职务用户等级锁定 - 娱乐大厅钓鱼游戏按钮直接调用 startFishing() 简化操作流程 - 新增赛马、占卜、百家乐游戏及相关后端逻辑
This commit is contained in:
@@ -9,157 +9,140 @@
|
||||
- 最近记录展示
|
||||
--}}
|
||||
|
||||
{{-- ─── 老虎机悬浮按钮(可拖动) ─── --}}
|
||||
<div id="slot-fab"
|
||||
x-data="slotFab()"
|
||||
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,#d97706,#f59e0b);
|
||||
box-shadow:0 4px 20px rgba(245,158,11,.5);
|
||||
font-size:22px; display:flex; align-items:center; justify-content:center;
|
||||
animation:slot-pulse 2s infinite;"
|
||||
:style="dragging ? 'cursor:grabbing;' : 'cursor:grab;'"
|
||||
title="老虎机(可拖动)">🎰</button>
|
||||
</div>
|
||||
|
||||
{{-- ─── 老虎机主面板 ─── --}}
|
||||
|
||||
{{-- \u2500\u2500\u2500 \u8001\u864e\u673a\u4e3b\u9762\u677f \u2500\u2500\u2500 --}}
|
||||
<div id="slot-panel" x-data="slotPanel()" 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,.75); z-index:9950;
|
||||
style="position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9950;
|
||||
display:flex; align-items:center; justify-content:center;">
|
||||
|
||||
<div
|
||||
style="width:400px; max-width:96vw; border-radius:24px; overflow:hidden;
|
||||
box-shadow:0 24px 80px rgba(245,158,11,.4); font-family:system-ui,sans-serif;">
|
||||
style="width:420px; 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,#78350f,#b45309,#d97706); padding:16px 20px 12px;">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between;">
|
||||
<div>
|
||||
<div style="color:#fff; font-weight:900; font-size:18px;">🎰 老虎机</div>
|
||||
<div style="color:rgba(255,255,255,.6); font-size:11px; margin-top:2px;">
|
||||
每次消耗 <span x-text="costPerSpin" style="color:#fbbf24; font-weight:bold;"></span> 金币
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;">
|
||||
<div style="color:#fbbf24; font-size:18px; font-weight:900;">🪙 <span
|
||||
x-text="Number(balance).toLocaleString()"></span></div>
|
||||
<div x-show="dailyLimit > 0" style="color:rgba(255,255,255,.5); font-size:11px;"
|
||||
x-text="'今日剩余 ' + remaining + ' 次'"></div>
|
||||
</div>
|
||||
{{-- \u2500\u2500\u2500 \u6807\u9898\u680f\uff08\u6d77\u519b\u84dd\u98ce\u683c\uff09\u2500\u2500\u2500 --}}
|
||||
<div
|
||||
style="background:linear-gradient(135deg,#336699,#5a8fc0); padding:10px 16px; display:flex; align-items:center; gap:10px;">
|
||||
<div style="font-size:14px; font-weight:bold; color:#fff; flex:1;">🎰 老虎机</div>
|
||||
<div
|
||||
style="font-size:12px; color:rgba(255,255,255,.8); background:rgba(0,0,0,.15); padding:2px 10px; border-radius:10px; display:flex; align-items:center; gap:4px;">
|
||||
🪙 <span x-text="Number(balance).toLocaleString()" style="color:#fef08a; font-weight:bold;"></span>
|
||||
</div>
|
||||
<div x-show="dailyLimit > 0"
|
||||
style="font-size:11px; color:rgba(255,255,255,.7); background:rgba(255,255,255,.15); padding:2px 8px; border-radius:10px;"
|
||||
x-text="'剩余 ' + remaining + ' 次'"></div>
|
||||
<span onclick="Alpine.$data(document.getElementById('slot-panel')).close()"
|
||||
style="cursor:pointer; font-size:18px; color:rgba(255,255,255,.8); line-height:1; transition:opacity .15s;"
|
||||
onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=.8">×</span>
|
||||
</div>
|
||||
|
||||
{{-- ─── 滚轮区域 ─── --}}
|
||||
<div style="background:linear-gradient(180deg,#1c1007,#292012); padding:20px;">
|
||||
{{-- \u2500\u2500\u2500 \u8de8\u8d39\u8bf4\u660e\u6761 \u2500\u2500\u2500 --}}
|
||||
<div
|
||||
style="background:#f6faff; border-bottom:1px solid #d0e4f5; padding:4px 16px; font-size:11px; color:#5a8fc0; text-align:center;">
|
||||
每次消耗 <span x-text="costPerSpin" style="color:#336699; font-weight:bold;"></span> 金币
|
||||
</div>
|
||||
|
||||
{{-- 三列转轮 --}}
|
||||
{{-- \u2500\u2500\u2500 \u4e3b\u4f53\u5185\u5bb9\uff08\u767d\u5e95\uff09\u2500\u2500\u2500 --}}
|
||||
<div style="background:#fff; padding:16px 16px 12px;">
|
||||
|
||||
{{-- \u4e09\u5217\u8f6c\u8f6e --}}
|
||||
<div
|
||||
style="background:#0f0a02; border-radius:16px; padding:16px 12px; margin-bottom:16px;
|
||||
border:2px solid rgba(245,158,11,.3); box-shadow:inset 0 0 30px rgba(0,0,0,.5);">
|
||||
style="background:#f0f6ff; border-radius:10px; padding:14px 12px; margin-bottom:14px;
|
||||
border:1px solid #d0e4f5; box-shadow:inset 0 2px 6px rgba(51,102,153,.06);">
|
||||
<div style="display:flex; gap:8px; justify-content:center; align-items:center;">
|
||||
{{-- 第一列 --}}
|
||||
<div
|
||||
style="flex:1; background:linear-gradient(180deg,#1a1000,#2d1f00); border-radius:12px;
|
||||
height:90px; display:flex; align-items:center; justify-content:center;
|
||||
border:1px solid rgba(245,158,11,.2); overflow:hidden; position:relative;">
|
||||
<div id="slot-reel-0" style="font-size:44px; transition:all .15s; user-select:none;"
|
||||
x-text="spinning ? spinEmojis[0] : resultEmojis[0]"
|
||||
:style="spinning && !reel1Stopped ? 'animation:reel-spin .1s linear infinite' : ''">
|
||||
style="flex:1; background:#fff; border-radius:8px;
|
||||
height:120px; display:flex; align-items:center; justify-content:center;
|
||||
border:1.5px solid #b8d0e8; box-shadow:0 2px 8px rgba(51,102,153,.1);">
|
||||
<div id="slot-reel-0" x-text="spinning ? spinEmojis[0] : resultEmojis[0]"
|
||||
:style="'font-size:80px; line-height:1; transition:all .15s; user-select:none; ' + (spinning &&
|
||||
!reel1Stopped ? 'animation:reel-spin .1s linear infinite' : '')">
|
||||
</div>
|
||||
</div>
|
||||
{{-- 分隔 --}}
|
||||
<div style="color:rgba(245,158,11,.4); font-size:20px; font-weight:900;">|</div>
|
||||
<div style="color:#b8d0e8; font-size:20px; font-weight:900;">|</div>
|
||||
{{-- 第二列 --}}
|
||||
<div
|
||||
style="flex:1; background:linear-gradient(180deg,#1a1000,#2d1f00); border-radius:12px;
|
||||
height:90px; display:flex; align-items:center; justify-content:center;
|
||||
border:1px solid rgba(245,158,11,.2); overflow:hidden; position:relative;">
|
||||
<div id="slot-reel-1" style="font-size:44px; transition:all .15s; user-select:none;"
|
||||
x-text="spinning ? spinEmojis[1] : resultEmojis[1]"
|
||||
:style="spinning && !reel2Stopped ? 'animation:reel-spin .12s linear infinite' : ''">
|
||||
style="flex:1; background:#fff; border-radius:8px;
|
||||
height:120px; display:flex; align-items:center; justify-content:center;
|
||||
border:1.5px solid #b8d0e8; box-shadow:0 2px 8px rgba(51,102,153,.1);">
|
||||
<div id="slot-reel-1" x-text="spinning ? spinEmojis[1] : resultEmojis[1]"
|
||||
:style="'font-size:80px; line-height:1; transition:all .15s; user-select:none; ' + (spinning &&
|
||||
!reel2Stopped ? 'animation:reel-spin .12s linear infinite' : '')">
|
||||
</div>
|
||||
</div>
|
||||
{{-- 分隔 --}}
|
||||
<div style="color:rgba(245,158,11,.4); font-size:20px; font-weight:900;">|</div>
|
||||
<div style="color:#b8d0e8; font-size:20px; font-weight:900;">|</div>
|
||||
{{-- 第三列 --}}
|
||||
<div
|
||||
style="flex:1; background:linear-gradient(180deg,#1a1000,#2d1f00); border-radius:12px;
|
||||
height:90px; display:flex; align-items:center; justify-content:center;
|
||||
border:1px solid rgba(245,158,11,.2); overflow:hidden; position:relative;">
|
||||
<div id="slot-reel-2" style="font-size:44px; transition:all .15s; user-select:none;"
|
||||
x-text="spinning ? spinEmojis[2] : resultEmojis[2]"
|
||||
:style="spinning && !reel3Stopped ? 'animation:reel-spin .14s linear infinite' : ''">
|
||||
style="flex:1; background:#fff; border-radius:8px;
|
||||
height:120px; display:flex; align-items:center; justify-content:center;
|
||||
border:1.5px solid #b8d0e8; box-shadow:0 2px 8px rgba(51,102,153,.1);">
|
||||
<div id="slot-reel-2" x-text="spinning ? spinEmojis[2] : resultEmojis[2]"
|
||||
:style="'font-size:80px; line-height:1; transition:all .15s; user-select:none; ' + (spinning &&
|
||||
!reel3Stopped ? 'animation:reel-spin .14s linear infinite' : '')">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 中间射线指示条 --}}
|
||||
<div
|
||||
style="height:2px; background:linear-gradient(90deg,transparent,rgba(245,158,11,.6),transparent);
|
||||
margin-top:8px; border-radius:1px;">
|
||||
style="height:2px; background:linear-gradient(90deg,transparent,rgba(51,102,153,.3),transparent);
|
||||
margin-top:10px; border-radius:1px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 结果提示 --}}
|
||||
<div style="text-align:center; min-height:36px; margin-bottom:12px;">
|
||||
{{-- \u7ed3\u679c\u63d0\u793a --}}
|
||||
<div style="text-align:center; min-height:34px; margin-bottom:10px;">
|
||||
<div x-show="!spinning && resultLabel" x-transition
|
||||
style="display:inline-block; padding:5px 18px; border-radius:20px; font-weight:bold; font-size:14px;"
|
||||
style="display:inline-block; padding:4px 18px; border-radius:20px; font-weight:bold; font-size:13px;"
|
||||
:style="resultType === 'jackpot' ?
|
||||
'background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#1c1007; box-shadow:0 0 20px rgba(251,191,36,.5);' :
|
||||
'background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#fff; box-shadow:0 0 16px rgba(251,191,36,.4);' :
|
||||
resultType === 'triple_gem' ?
|
||||
'background:rgba(167,139,250,.2); color:#c4b5fd; border:1px solid rgba(167,139,250,.3);' :
|
||||
'background:linear-gradient(135deg,#7c3aed,#a78bfa); color:#fff; box-shadow:0 0 12px rgba(124,58,237,.3);' :
|
||||
resultType === 'triple' ?
|
||||
'background:rgba(52,211,153,.15); color:#6ee7b7; border:1px solid rgba(52,211,153,.25);' :
|
||||
'background:linear-gradient(135deg,#059669,#34d399); color:#fff; box-shadow:0 0 10px rgba(52,211,153,.3);' :
|
||||
resultType === 'pair' ?
|
||||
'background:rgba(96,165,250,.15); color:#93c5fd; border:1px solid rgba(96,165,250,.25);' :
|
||||
'background:linear-gradient(135deg,#336699,#5a8fc0); color:#fff; box-shadow:0 0 10px rgba(51,102,153,.2);' :
|
||||
resultType === 'curse' ?
|
||||
'background:rgba(239,68,68,.15); color:#f87171; border:1px solid rgba(239,68,68,.25);' :
|
||||
'background:rgba(255,255,255,.06); color:rgba(255,255,255,.4); '"
|
||||
'background:linear-gradient(135deg,#dc2626,#ef4444); color:#fff; box-shadow:0 0 10px rgba(220,38,38,.3);' :
|
||||
'background:#f0f6ff; color:#5a8fc0; border:1px solid #d0e4f5;'"
|
||||
x-text="resultLabel">
|
||||
</div>
|
||||
<div x-show="spinning"
|
||||
style="color:rgba(255,255,255,.4); font-size:13px; animation:blink .6s infinite;">
|
||||
<div x-show="spinning" style="color:#5a8fc0; font-size:13px; animation:blink .6s infinite;">
|
||||
正在转动中…
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 盈亏显示 --}}
|
||||
{{-- \u76c8\u4e8f\u663e\u793a --}}
|
||||
<div x-show="!spinning && resultType" style="text-align:center; margin-bottom:12px;">
|
||||
<div x-show="netChange > 0" style="color:#34d399; font-size:20px; font-weight:bold;"
|
||||
<div x-show="netChange > 0" style="color:#16a34a; font-size:22px; font-weight:bold;"
|
||||
x-text="'+' + Number(netChange).toLocaleString() + ' 🪙'">
|
||||
</div>
|
||||
<div x-show="netChange < 0" style="color:#f87171; font-size:16px; font-weight:bold;"
|
||||
<div x-show="netChange < 0" style="color:#dc2626; font-size:16px; font-weight:bold;"
|
||||
x-text="Number(netChange).toLocaleString() + ' 🪙'">
|
||||
</div>
|
||||
<div x-show="netChange === 0 && resultType === 'miss'"
|
||||
style="color:rgba(255,255,255,.3); font-size:13px;">
|
||||
<div x-show="netChange === 0 && resultType === 'miss'" style="color:#999; font-size:13px;">
|
||||
损失 <span x-text="costPerSpin"></span> 金币
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 转动按钮 --}}
|
||||
{{-- \u65cb\u8f6c\u6309\u94ae --}}
|
||||
<button x-on:click="doSpin()" :disabled="spinning || (dailyLimit > 0 && remaining <= 0)"
|
||||
style="width:100%; border:none; border-radius:14px; padding:14px; font-size:16px;
|
||||
font-weight:900; cursor:pointer; transition:all .2s; letter-spacing:2px;"
|
||||
style="display:block; width:100%; border:none; border-radius:12px; padding:12px 0;
|
||||
font-size:15px; font-weight:bold; cursor:pointer; transition:all .2s; letter-spacing:1px;"
|
||||
:style="(spinning || (dailyLimit > 0 && remaining <= 0)) ? {
|
||||
background: '#292012',
|
||||
color: 'rgba(255,255,255,.3)',
|
||||
cursor: 'not-allowed'
|
||||
background: '#e0e8f0',
|
||||
color: '#99a8b8',
|
||||
cursor: 'not-allowed',
|
||||
boxShadow: 'none'
|
||||
} : {
|
||||
background: 'linear-gradient(135deg,#b45309,#d97706,#f59e0b)',
|
||||
background: 'linear-gradient(135deg,#336699,#5a8fc0)',
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 20px rgba(245,158,11,.5)',
|
||||
transform: 'scale(1)'
|
||||
boxShadow: '0 4px 14px rgba(51,102,153,.35)'
|
||||
}">
|
||||
<span
|
||||
x-text="spinning ? '🎰 转动中…' :
|
||||
@@ -167,40 +150,78 @@
|
||||
'🎰 SPIN'"></span>
|
||||
</button>
|
||||
|
||||
{{-- 赔率说明 --}}
|
||||
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:10px;">
|
||||
{{-- \u8d54\u7387\u8bf4\u660e --}}
|
||||
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:12px;">
|
||||
<div
|
||||
style="background:rgba(245,158,11,.1); border-radius:6px; padding:4px; text-align:center; font-size:10px;">
|
||||
style="background:#fffbeb; border:1px solid #fde68a; border-radius:6px; padding:5px; text-align:center; font-size:10px;">
|
||||
<div>7️⃣7️⃣7️⃣</div>
|
||||
<div style="color:#fbbf24; font-weight:bold;">×100</div>
|
||||
<div style="color:#d97706; font-weight:bold; margin-top:2px;">×100</div>
|
||||
</div>
|
||||
<div
|
||||
style="background:rgba(167,139,250,.1); border-radius:6px; padding:4px; text-align:center; font-size:10px;">
|
||||
style="background:#f5f3ff; border:1px solid #ddd6fe; border-radius:6px; padding:5px; text-align:center; font-size:10px;">
|
||||
<div>💎💎💎</div>
|
||||
<div style="color:#c4b5fd; font-weight:bold;">×50</div>
|
||||
<div style="color:#7c3aed; font-weight:bold; margin-top:2px;">×50</div>
|
||||
</div>
|
||||
<div
|
||||
style="background:rgba(52,211,153,.1); border-radius:6px; padding:4px; text-align:center; font-size:10px;">
|
||||
style="background:#f0fdf4; border:1px solid #bbf7d0; border-radius:6px; padding:5px; text-align:center; font-size:10px;">
|
||||
<div>三同</div>
|
||||
<div style="color:#6ee7b7; font-weight:bold;">×10</div>
|
||||
<div style="color:#059669; font-weight:bold; margin-top:2px;">×10</div>
|
||||
</div>
|
||||
<div
|
||||
style="background:rgba(96,165,250,.1); border-radius:6px; padding:4px; text-align:center; font-size:10px;">
|
||||
style="background:#f0f6ff; border:1px solid #d0e4f5; border-radius:6px; padding:5px; text-align:center; font-size:10px;">
|
||||
<div>两同</div>
|
||||
<div style="color:#93c5fd; font-weight:bold;">×2</div>
|
||||
<div style="color:#336699; font-weight:bold; margin-top:2px;">×2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{{-- 玩法说明(可折叠) --}}
|
||||
<div x-data="{ open: false }" style="margin-top:12px;">
|
||||
<button @click="open = !open"
|
||||
style="width:100%; background:#f6faff; border:1px solid #d0e4f5; border-radius:8px;
|
||||
padding:7px 12px; font-size:11px; color:#5a8fc0; cursor:pointer; transition:all .15s;
|
||||
display:flex; align-items:center; justify-content:space-between;"
|
||||
onmouseover="this.style.background='#eaf3ff'" onmouseout="this.style.background='#f6faff'">
|
||||
<span>📖 玩法说明</span>
|
||||
<span x-text="open ? '▲ 收起' : '▼ 展开'" style="font-size:10px; color:#99b0cc;"></span>
|
||||
</button>
|
||||
<div x-show="open" x-transition
|
||||
style="margin-top:6px; background:#f6faff; border:1px solid #d0e4f5; border-radius:8px;
|
||||
padding:10px 12px; font-size:11px; color:#446688; line-height:1.8;">
|
||||
<div style="font-weight:bold; color:#336699; margin-bottom:6px; font-size:12px;">🎰 如何游玩</div>
|
||||
<div>① 点击 <strong>SPIN</strong> 按钮消耗金币抽奖,系统随机确定三列图案</div>
|
||||
<div>② 图案组合决定奖励倍率,奖励金币 = 消耗金币 × 倍率</div>
|
||||
<div>③ 每日有次数上限,用完须等次日 0 点重置</div>
|
||||
|
||||
<div style="height:1px; background:#d0e4f5; margin:8px 0;"></div>
|
||||
<div style="font-weight:bold; color:#336699; margin-bottom:6px; font-size:12px;">💎 图案赔率表</div>
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:4px;">
|
||||
<div>🎰 7️⃣7️⃣7️⃣ → <strong style="color:#d97706;">×100</strong> 大奖全服广播</div>
|
||||
<div>💎💎💎 → <strong style="color:#7c3aed;">×50</strong> 三钻大奖</div>
|
||||
<div>任意三同 → <strong style="color:#059669;">×10</strong> 三倍以上</div>
|
||||
<div>任意两同 → <strong style="color:#336699;">×2</strong> 回本加成</div>
|
||||
<div>💀 骷髅 → <strong style="color:#dc2626;">另有惩罚</strong></div>
|
||||
<div>其余组合 → <strong style="color:#999;">未中奖</strong></div>
|
||||
</div>
|
||||
|
||||
<div style="height:1px; background:#d0e4f5; margin:8px 0;"></div>
|
||||
<div style="font-weight:bold; color:#336699; margin-bottom:4px; font-size:12px;">⚠️ 注意事项</div>
|
||||
<div>• 奖励直接到账金币,无需额外领取</div>
|
||||
<div>• 三个 7️⃣ 为聊天室大奖,系统会全服广播</div>
|
||||
<div>• 未中奖只损失本次消耗的旋转费用</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 历史记录 --}}
|
||||
<div x-show="history.length > 0" style="margin-top:10px;">
|
||||
<div style="color:rgba(255,255,255,.3); font-size:10px; margin-bottom:4px;">最近记录</div>
|
||||
<div x-show="history.length > 0" style="margin-top:12px;">
|
||||
<div style="color:#99b0cc; font-size:10px; margin-bottom:5px;">最近记录</div>
|
||||
<div style="display:flex; gap:4px; flex-wrap:wrap;">
|
||||
<template x-for="h in history" :key="h.created_at + h.result_label">
|
||||
<div style="background:rgba(255,255,255,.06); border-radius:6px; padding:3px 8px;
|
||||
<div style="background:#f0f6ff; border:1px solid #d0e4f5; border-radius:6px; padding:3px 8px;
|
||||
font-size:11px; display:flex; align-items:center; gap:4px;"
|
||||
:title="h.result_label + ' ' + (h.payout > 0 ? '+' : '') + h.payout">
|
||||
<span x-text="h.emojis.join('')"></span>
|
||||
<span :style="h.payout > 0 ? 'color:#4ade80' : 'color:#f87171'"
|
||||
<span :style="h.payout > 0 ? 'color:#16a34a; font-weight:bold;' : 'color:#dc2626;'"
|
||||
x-text="(h.payout > 0 ? '+' : '') + h.payout"></span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -208,13 +229,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ─── 底部关闭 ─── --}}
|
||||
<div style="background:rgba(15,8,0,.95); padding:8px 20px; display:flex; justify-content:center;">
|
||||
{{-- \u2500\u2500\u2500 \u5e95\u90e8\u5173\u95ed \u2500\u2500\u2500 --}}
|
||||
<div
|
||||
style="background:#fff; border-top:1px solid #d0e4f5; padding:14px 16px; display:flex; justify-content:center;">
|
||||
<button x-on:click="close()"
|
||||
style="padding:6px 28px; background:rgba(255,255,255,.06); border:none; border-radius:20px;
|
||||
font-size:12px; color:rgba(255,255,255,.4); cursor:pointer; transition:all .15s;"
|
||||
onmouseover="this.style.background='rgba(255,255,255,.12)'"
|
||||
onmouseout="this.style.background='rgba(255,255,255,.06)'">
|
||||
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;"
|
||||
onmouseover="this.style.background='#ddeeff'" onmouseout="this.style.background='#f0f6ff'">
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
@@ -270,17 +291,19 @@
|
||||
const STORAGE_KEY = 'slot_fab_pos';
|
||||
const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null');
|
||||
return {
|
||||
visible: false,
|
||||
posX: saved?.x ?? 18,
|
||||
posY: saved?.y ?? 150,
|
||||
visible: false,
|
||||
posX: saved?.x ?? 18,
|
||||
posY: saved?.y ?? 150,
|
||||
dragging: false,
|
||||
_startX: 0, _startY: 0,
|
||||
_origX: 0, _origY: 0,
|
||||
_moved: false,
|
||||
_startX: 0,
|
||||
_startY: 0,
|
||||
_origX: 0,
|
||||
_origY: 0,
|
||||
_moved: false,
|
||||
|
||||
async init() {
|
||||
try {
|
||||
const res = await fetch('/slot/info');
|
||||
const res = await fetch('/slot/info');
|
||||
const data = await res.json();
|
||||
this.visible = data.enabled === true;
|
||||
} catch {}
|
||||
@@ -288,11 +311,11 @@
|
||||
|
||||
startDrag(e) {
|
||||
this.dragging = true;
|
||||
this._moved = false;
|
||||
this._startX = e.clientX;
|
||||
this._startY = e.clientY;
|
||||
this._origX = this.posX;
|
||||
this._origY = this.posY;
|
||||
this._moved = false;
|
||||
this._startX = e.clientX;
|
||||
this._startY = e.clientY;
|
||||
this._origX = this.posX;
|
||||
this._origY = this.posY;
|
||||
e.currentTarget.setPointerCapture?.(e.pointerId);
|
||||
},
|
||||
|
||||
@@ -301,14 +324,17 @@
|
||||
const dx = e.clientX - this._startX;
|
||||
const dy = e.clientY - this._startY;
|
||||
if (Math.abs(dx) > 3 || Math.abs(dy) > 3) this._moved = true;
|
||||
this.posX = Math.max(4, Math.min(window.innerWidth - 60, this._origX - dx));
|
||||
this.posX = Math.max(4, Math.min(window.innerWidth - 60, this._origX - dx));
|
||||
this.posY = Math.max(4, Math.min(window.innerHeight - 60, this._origY + dy));
|
||||
},
|
||||
|
||||
endDrag(e) {
|
||||
if (!this.dragging) return;
|
||||
this.dragging = false;
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify({ x: this.posX, y: this.posY }));
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify({
|
||||
x: this.posX,
|
||||
y: this.posY
|
||||
}));
|
||||
if (!this._moved) this.openPanel();
|
||||
},
|
||||
|
||||
@@ -355,6 +381,18 @@
|
||||
_spinInterval: null,
|
||||
_stopTimers: [],
|
||||
|
||||
/**
|
||||
* Alpine 初始化: 监听 show 变化自动加载数据(解决从游戏大厅入口不调用 open() 时历史不刷新的问题)
|
||||
*/
|
||||
init() {
|
||||
this.$watch('show', async (val) => {
|
||||
if (val) {
|
||||
await this.loadInfo();
|
||||
await this.loadHistory();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 打开面板并加载数据
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user