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

送金币弹窗：彻底重构UI，采用仿礼包弹窗的高级渐变、毛玻璃与居中排版风格

Browse Source
This commit is contained in:
流星
2026-03-12 17:27:35 +08:00
parent 29493b4fee
commit 1b5f185a03
1 changed files with 80 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
resources/views/chat/partials/user-actions.blade.php
View File

@@ -1084,103 +1084,103 @@
x-on:click.self="show = false">
<div x-show="show"
style="display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:520px; max-width:95vw; background:#fff; border-radius:16px;
box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden;">
{{-- 标题栏 --}}
<div
style="background:linear-gradient(135deg,#f59e0b,#d97706); padding:14px 20px;
display:flex; align-items:center; justify-content:space-between;">
<div>
<div style="color:#fff; font-weight:bold; font-size:16px;">💰 发放奖励金币</div>
<div style="color:rgba(255,255,255,.9); font-size:12px; margin-top:2px;"
x-text="'发给：' + targetUsername"></div>
</div>
<button x-on:click="show = false"
style="background:rgba(255,255,255,.25); border:none; color:#fff; width:30px; height:30px;
border-radius:50%; cursor:pointer; font-size:18px; line-height:30px; text-align:center;">×</button>
width:440px; max-width:95vw;
background: linear-gradient(135deg, #f59e0b, #ea580c, #c2410c);
border-radius: 20px; padding: 28px 36px;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
border: 2px solid rgba(255,255,255,0.25); backdrop-filter: blur(8px);
text-align: center; color: #fff;">
{{-- 顶部图标与标题 --}}
<div style="font-size:44px; margin-bottom:8px; text-shadow:0 4px 8px rgba(0,0,0,0.2);">💰</div>
<div style="color:#fde68a; font-size:13px; font-weight:bold; letter-spacing:3px; margin-bottom:12px;">
══ 发放奖励金币 ══
</div>
{{-- 额度四格（一行4列） --}}
<div style="padding:16px 20px 0;">
<div x-show="loading" style="text-align:center; color:#b45309; font-size:13px; padding:12px 0;">
加载额度信息…</div>
{{-- 注意：x-show 与 display:grid 必须分离，否则 x-show 显示时会把 display:grid 覆盖为 block --}}
<div x-show="!loading">
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:8px;">
<div
style="background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:10px; text-align:center;">
<div style="font-size:10px; color:#b45309; margin-bottom:4px;">单次上限</div>
<div style="font-size:13px; font-weight:bold; color:#92400e;"
x-text="fmt(quota.max_once)"></div>
</div>
<div
style="background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:10px; text-align:center;">
<div style="font-size:10px; color:#b45309; margin-bottom:4px;">单日上限</div>
<div style="font-size:13px; font-weight:bold; color:#92400e;"
x-text="fmt(quota.daily_limit)"></div>
</div>
<div
style="background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; padding:10px; text-align:center;">
<div style="font-size:10px; color:#166534; margin-bottom:4px;">今日已发</div>
<div style="font-size:13px; font-weight:bold; color:#15803d;"
x-text="quota.today_sent.toLocaleString() + ' 金币'"></div>
</div>
<div
style="background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; padding:10px; text-align:center;">
<div style="font-size:10px; color:#166534; margin-bottom:4px;">剩余额度</div>
<div style="font-size:13px; font-weight:bold; color:#15803d;"
x-text="fmt(quota.daily_remaining)"></div>
</div>
<div style="color:white; font-size:20px; font-weight:900; text-shadow:0 2px 8px rgba(0,0,0,0.3); margin-bottom:20px;">
发给：<span x-text="targetUsername"></span>
</div>
{{-- 额度四格 --}}
<div x-show="loading" style="color:rgba(255,255,255,0.8); font-size:12px; padding:12px 0;">
加载额度信息…
</div>
<div x-show="!loading">
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px;">
<div style="background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:10px 4px;">
<div style="font-size:10px; color:rgba(255,255,255,0.7); margin-bottom:4px;">单次上限</div>
<div style="font-size:13px; font-weight:bold; color:#fff;" x-text="fmt(quota.max_once)"></div>
</div>
<div style="background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:10px 4px;">
<div style="font-size:10px; color:rgba(255,255,255,0.7); margin-bottom:4px;">单日上限</div>
<div style="font-size:13px; font-weight:bold; color:#fff;" x-text="fmt(quota.daily_limit)"></div>
</div>
<div style="background:rgba(20,184,166,0.25); border:1px solid rgba(255,255,255,0.3); border-radius:10px; padding:10px 4px;">
<div style="font-size:10px; color:#a7f3d0; margin-bottom:4px;">今日已发</div>
<div style="font-size:13px; font-weight:bold; color:#fff;" x-text="quota.today_sent.toLocaleString()"></div>
</div>
<div style="background:rgba(20,184,166,0.25); border:1px solid rgba(255,255,255,0.3); border-radius:10px; padding:10px 4px;">
<div style="font-size:10px; color:#a7f3d0; margin-bottom:4px;">剩余额度</div>
<div style="font-size:13px; font-weight:bold; color:#fff;" x-text="fmt(quota.daily_remaining)"></div>
</div>
</div>
</div>
{{-- 输入区：输入框 + 独立大按钮 --}}
<div style="padding:14px 20px 16px;">
{{-- 输入框 --}}
{{-- 输入区 --}}
<div style="margin-bottom:18px;">
<input type="number" x-model.number="amount"
:placeholder="quota.max_once ? '最多 ' + quota.max_once + ' 金币' : '请输入发放金额'"
:max="quota.max_once || 999999" min="1" x-on:keydown.enter="send()"
style="width:100%; padding:11px 16px; border:2px solid #fcd34d;
border-radius:10px; font-size:14px; color:#92400e;
outline:none; box-sizing:border-box; margin-bottom:12px;">
{{-- 确认发放大按钮 --}}
style="width:100%; padding:14px; border:none; border-radius:12px;
background:rgba(255,255,255,0.95); font-size:16px; color:#9a3412;
font-weight:bold; text-align:center; outline:none;
box-shadow:inset 0 2px 6px rgba(0,0,0,0.1);">
<div style="margin-top:10px; font-size:11px; color:rgba(255,255,255,0.6);">
金币凭空产生并直接发放给对方，本操作记入你的履职记录。
</div>
</div>
{{-- 操作按钮 --}}
<div style="display:flex; justify-content:center; gap:12px; margin-bottom:20px;">
<button x-on:click="send()"
style="width:100%; padding:13px 0; border:none; border-radius:50px;
font-size:15px; font-weight:bold; color:#fff;
cursor:pointer; letter-spacing:1px;
background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);
box-shadow:0 5px 18px rgba(217,119,6,.45);
transition:transform .12s, box-shadow .12s;"
style="background:#10b981; color:#fff; border:none; border-radius:10px;
padding:12px 36px; font-size:15px; font-weight:bold; cursor:pointer;
box-shadow:0 4px 14px rgba(0,0,0,0.3); transition:transform .1s, opacity .1s;"
:style="(sending || !amount) ? 'opacity:.5; cursor:not-allowed;' : ''"
:disabled="sending || !amount"
onmouseover="if(!this.disabled){this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 24px rgba(217,119,6,.55)'}"
onmouseout="this.style.transform='';this.style.boxShadow='0 5px 18px rgba(217,119,6,.45)'"
onmousedown="if(!this.disabled){this.style.transform='translateY(1px)';this.style.boxShadow='0 2px 8px rgba(217,119,6,.3)'}"
onmouseup="this.style.transform='';this.style.boxShadow='0 5px 18px rgba(217,119,6,.45)'">
<span x-text="sending ? '⏳ 发放中…' : '💰 确认发放'"></span>
onmouseover="if(!this.disabled) this.style.transform='translateY(-2px)'"
onmouseout="if(!this.disabled) this.style.transform=''"
onmousedown="if(!this.disabled) this.style.transform='translateY(1px)'"
onmouseup="if(!this.disabled) this.style.transform=''">
<span x-text="sending ? '⏳ 发放中…' : '确认发放'"></span>
</button>
<button x-on:click="show = false"
style="background:rgba(255,255,255,0.2); color:#fff; border:none; border-radius:10px;
padding:12px 36px; font-size:15px; font-weight:bold; cursor:pointer;
transition:background .1s;"
onmouseover="this.style.background='rgba(255,255,255,0.3)'"
onmouseout="this.style.background='rgba(255,255,255,0.2)'">
取消
</button>
<p style="margin:10px 0 0; font-size:10px; color:#b45309; opacity:.7; text-align:center;">
金币凭空产生并直接发放给对方，本操作记入你的履职记录。
</p>
</div>
{{-- 最近 10 条记录 --}}
<div style="padding:0 20px 18px;">
<div style="border-top:1px solid #fde68a; padding-top:12px; margin-bottom:8px;
display:flex; align-items:center; gap:5px;
font-size:12px; font-weight:bold; color:#92400e;">
📋 最近发放记录
<div style="background:rgba(0,0,0,0.15); border-radius:12px; padding:12px 14px; text-align:left;">
<div style="color:rgba(255,255,255,0.7); font-size:11px; font-weight:bold; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between;">
<span>📋 最近发放记录</span>
<span x-show="loading">加载中…</span>
</div>
<div x-show="loading" style="font-size:12px; color:#d97706; text-align:center; padding:8px 0;">加载中…</div>
<div x-show="!loading && quota.recent_rewards.length === 0"
style="font-size:12px; color:#d1d5db; text-align:center; padding:10px 0;">暂无发放记录</div>
<div x-show="!loading" style="max-height:150px; overflow-y:auto; display:flex; flex-direction:column; gap:6px;">
style="font-size:12px; color:rgba(255,255,255,0.5); text-align:center; padding:10px 0;">
暂无发放记录
</div>
<div x-show="!loading" style="max-height:120px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding-right:4px;">
<template x-for="(r, i) in quota.recent_rewards" :key="i">
<div style="display:flex; align-items:center; justify-content:space-between;
padding:7px 12px; border-radius:10px;
background:#fffbeb; border:1px solid #fde68a;">
<span style="font-size:13px; font-weight:bold; color:#92400e;" x-text="r.target"></span>
<span style="font-size:13px; font-weight:bold; color:#16a34a;"
x-text="'＋' + r.amount.toLocaleString() + ' 金币'"></span>
<span style="font-size:11px; color:#b45309; opacity:.7;" x-text="r.created_at"></span>
padding:6px 10px; border-radius:8px; background:rgba(255,255,255,0.1);">
<span style="font-size:12px; color:#fff;" x-text="r.target"></span>
<span style="font-size:12px; font-weight:bold; color:#fde68a;"
x-text="'+' + r.amount.toLocaleString()"></span>
<span style="font-size:10px; color:rgba(255,255,255,0.5);" x-text="r.created_at"></span>
</div>
</template>
</div>