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

送金币弹窗：按钮改为全宽大圆角居中，发放记录改为卡片式

Browse Source
This commit is contained in:
流星
2026-03-12 17:19:16 +08:00
parent cc28a27ab0
commit 29493b4fee
1 changed files with 39 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/chat/partials/user-actions.blade.php
+39 -40
View File
@@ -1133,55 +1133,54 @@
</div>
</div>
</div>
{{-- 输入区（同一行） --}}
{{-- 输入区：输入框 + 独立大按钮 --}}
<div style="padding:14px 20px 16px;">
<div style="display:flex; gap:10px; align-items:stretch; margin-bottom:8px;">
<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="flex:1; padding:9px 14px; border:2px solid #fcd34d;
border-radius:6px; font-size:13px; color:#92400e;
outline:none; box-sizing:border-box;">
<button x-on:click="send()"
style="padding:10px 22px; border:none; border-radius:50px;
font-size:14px; font-weight:bold; color:#fff;
cursor:pointer; white-space:nowrap; letter-spacing:.5px;
background:linear-gradient(180deg,#ffb733 0%,#e8900a 100%);
box-shadow:0 4px 0 #b36c00, 0 6px 14px rgba(217,119,6,.4);
transition:transform .12s, box-shadow .12s;"
:style="(sending || !amount) ? 'opacity:.55; cursor:not-allowed;' : ''"
:disabled="sending || !amount"
onmouseover="if(!this.disabled){this.style.transform='translateY(-2px)';this.style.boxShadow='0 6px 0 #b36c00,0 10px 20px rgba(217,119,6,.45)'}"
onmouseout="this.style.transform='';this.style.boxShadow='0 4px 0 #b36c00,0 6px 14px rgba(217,119,6,.4)'"
onmousedown="if(!this.disabled){this.style.transform='translateY(2px)';this.style.boxShadow='0 2px 0 #b36c00,0 3px 8px rgba(217,119,6,.3)'}"
onmouseup="this.style.transform='';this.style.boxShadow='0 4px 0 #b36c00,0 6px 14px rgba(217,119,6,.4)'">
<span x-text="sending ? '⏳ 发放中…' : '💰 确认发放'"></span>
</button>
</div>
<p style="margin:0; font-size:10px; color:#b45309; opacity:.75; text-align:center;">
{{-- 输入框 --}}
<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;">
{{-- 确认发放大按钮 --}}
<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="(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>
</button>
<p style="margin:10px 0 0; font-size:10px; color:#b45309; opacity:.7; text-align:center;">
金币凭空产生并直接发放给对方，本操作记入你的履职记录。
</p>
</div>
{{-- 最近 10 条记录 --}}
<div style="padding:12px 20px 16px;">
<div
style="font-size:11px; color:#78716c; font-weight:bold; margin-bottom:6px; border-top:1px solid #f5f5f4; padding-top:10px;">
<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>
<div x-show="loading" style="font-size:11px; color:#aaa; text-align:center; padding:4px 0;">加载中…</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:11px; color:#aaa; text-align:center; padding:4px 0;">暂无记录</div>
<div x-show="!loading" style="max-height:160px; overflow-y:auto;">
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;">
<template x-for="(r, i) in quota.recent_rewards" :key="i">
<div style="display:flex; justify-content:space-between; align-items:center;
font-size:11px; padding:4px 6px; border-radius:4px;"
:style="i % 2 === 0 ? 'background:#fafaf9;' : ''">
<span style="color:#57534e;">
<span style="color:#92400e; font-weight:bold;" x-text="r.target"></span>
</span>
<span style="color:#059669; font-weight:bold;"
x-text="'+' + r.amount.toLocaleString() + ' 金币'"></span>
<span style="color:#a8a29e;" x-text="r.created_at"></span>
<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>
</div>
</template>
</div>