lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 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>
</div> </div>
{{-- 输入区（同一行） --}} {{-- 输入区：输入框 + 独立大按钮 --}}
<div style="padding:14px 20px 16px;"> <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" <input type="number" x-model.number="amount"
:placeholder="quota.max_once ? '最多 ' + quota.max_once + ' 金币' : '请输入发放金额'" :placeholder="quota.max_once ? '最多 ' + quota.max_once + ' 金币' : '请输入发放金额'"
:max="quota.max_once || 999999" min="1" x-on:keydown.enter="send()" :max="quota.max_once || 999999" min="1" x-on:keydown.enter="send()"
style="flex:1; padding:9px 14px; border:2px solid #fcd34d; style="width:100%; padding:11px 16px; border:2px solid #fcd34d;
border-radius:6px; font-size:13px; color:#92400e; border-radius:10px; font-size:14px; color:#92400e;
outline:none; box-sizing:border-box;"> outline:none; box-sizing:border-box; margin-bottom:12px;">
<button x-on:click="send()" {{-- 确认发放大按钮 --}}
style="padding:10px 22px; border:none; border-radius:50px; <button x-on:click="send()"
font-size:14px; font-weight:bold; color:#fff; style="width:100%; padding:13px 0; border:none; border-radius:50px;
cursor:pointer; white-space:nowrap; letter-spacing:.5px; font-size:15px; font-weight:bold; color:#fff;
background:linear-gradient(180deg,#ffb733 0%,#e8900a 100%); cursor:pointer; letter-spacing:1px;
box-shadow:0 4px 0 #b36c00, 0 6px 14px rgba(217,119,6,.4); background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);
transition:transform .12s, box-shadow .12s;" box-shadow:0 5px 18px rgba(217,119,6,.45);
:style="(sending || !amount) ? 'opacity:.55; cursor:not-allowed;' : ''" transition:transform .12s, box-shadow .12s;"
:disabled="sending || !amount" :style="(sending || !amount) ? 'opacity:.5; cursor:not-allowed;' : ''"
onmouseover="if(!this.disabled){this.style.transform='translateY(-2px)';this.style.boxShadow='0 6px 0 #b36c00,0 10px 20px rgba(217,119,6,.45)'}" :disabled="sending || !amount"
onmouseout="this.style.transform='';this.style.boxShadow='0 4px 0 #b36c00,0 6px 14px rgba(217,119,6,.4)'" onmouseover="if(!this.disabled){this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 24px rgba(217,119,6,.55)'}"
onmousedown="if(!this.disabled){this.style.transform='translateY(2px)';this.style.boxShadow='0 2px 0 #b36c00,0 3px 8px rgba(217,119,6,.3)'}" onmouseout="this.style.transform='';this.style.boxShadow='0 5px 18px rgba(217,119,6,.45)'"
onmouseup="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(1px)';this.style.boxShadow='0 2px 8px rgba(217,119,6,.3)'}"
<span x-text="sending ? '⏳ 发放中…' : '💰 确认发放'"></span> onmouseup="this.style.transform='';this.style.boxShadow='0 5px 18px rgba(217,119,6,.45)'">
</button> <span x-text="sending ? '⏳ 发放中…' : '💰 确认发放'"></span>
</div> </button>
<p style="margin:0; font-size:10px; color:#b45309; opacity:.75; text-align:center;"> <p style="margin:10px 0 0; font-size:10px; color:#b45309; opacity:.7; text-align:center;">
金币凭空产生并直接发放给对方，本操作记入你的履职记录。 金币凭空产生并直接发放给对方，本操作记入你的履职记录。
</p> </p>
</div> </div>
{{-- 最近 10 条记录 --}} {{-- 最近 10 条记录 --}}
<div style="padding:12px 20px 16px;"> <div style="padding:0 20px 18px;">
<div <div style="border-top:1px solid #fde68a; padding-top:12px; margin-bottom:8px;
style="font-size:11px; color:#78716c; font-weight:bold; margin-bottom:6px; border-top:1px solid #f5f5f4; padding-top:10px;"> display:flex; align-items:center; gap:5px;
font-size:12px; font-weight:bold; color:#92400e;">
📋 最近发放记录 📋 最近发放记录
</div> </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" <div x-show="!loading && quota.recent_rewards.length === 0"
style="font-size:11px; color:#aaa; text-align:center; padding:4px 0;">暂无记录</div> style="font-size:12px; color:#d1d5db; text-align:center; padding:10px 0;">暂无发放记录</div>
<div x-show="!loading" style="max-height:160px; overflow-y:auto;"> <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"> <template x-for="(r, i) in quota.recent_rewards" :key="i">
<div style="display:flex; justify-content:space-between; align-items:center; <div style="display:flex; align-items:center; justify-content:space-between;
font-size:11px; padding:4px 6px; border-radius:4px;" padding:7px 12px; border-radius:10px;
:style="i % 2 === 0 ? 'background:#fafaf9;' : ''"> background:#fffbeb; border:1px solid #fde68a;">
<span style="color:#57534e;"> <span style="font-size:13px; font-weight:bold; color:#92400e;" x-text="r.target"></span>
<span style="color:#92400e; font-weight:bold;" x-text="r.target"></span> <span style="font-size:13px; font-weight:bold; color:#16a34a;"
</span> x-text="'＋' + r.amount.toLocaleString() + ' 金币'"></span>
<span style="color:#059669; font-weight:bold;" <span style="font-size:11px; color:#b45309; opacity:.7;" x-text="r.created_at"></span>
x-text="'+' + r.amount.toLocaleString() + ' 金币'"></span>
<span style="color:#a8a29e;" x-text="r.created_at"></span>
</div> </div>
</template> </template>
</div> </div>