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

优化：确认发放按钮改为全宽独立一行，风格同弹窗按钮

Browse Source 
输入框独占一行，按钮在输入框下方全宽显示：
- 宽度 100%，高度 48px，字号 16px，字间距 2px
- 琥珀橙色 #f59e0b，与弹窗头部色调呼应
- 禁用时 opacity:0.45，启用时 box-shadow 投影
- 符合截图中弹窗确定按钮的视觉风格
This commit is contained in:
流星
2026-03-01 12:04:05 +08:00
parent 0d693eef5f
commit 5180526821
1 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/chat/partials/user-actions.blade.php
+22 -19
View File
@@ -1002,25 +1002,28 @@
</div>
</div>
{{-- 输入区 --}}
<div style="padding:14px 20px 0;">
<div style="display:flex; gap:8px; align-items:stretch;">
<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; min-height:44px; padding:0 14px; border:2px solid #fcd34d;
border-radius:10px; font-size:15px; color:#92400e; outline:none; box-sizing:border-box;">
<button x-on:click="send()"
style="padding:0 24px; border:none; border-radius:10px;
font-size:14px; font-weight:bold; white-space:nowrap;
color:#fff; transition:opacity .15s; align-self:stretch;"
:style="(sending || !amount) ?
'background:linear-gradient(135deg,#ea580c,#dc2626); box-shadow:none; opacity:.4; cursor:not-allowed;' :
'background:linear-gradient(135deg,#ea580c,#dc2626); box-shadow:0 4px 14px rgba(220,38,38,.5); opacity:1; cursor:pointer;'"
:disabled="sending || !amount">
<span x-text="sending ? '发放中…' : '🎉 确认发放'"></span>
</button>
</div>
<p style="margin:6px 0 0; font-size:10px; color:#b45309; opacity:.75; text-align:center;">
<div style="padding:14px 20px 16px;">
{{-- 输入框独占一行 --}}
<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="display:block; width:100%; height:46px; padding:0 14px;
border:2px solid #fcd34d; border-radius:10px; font-size:15px;
color:#92400e; outline:none; box-sizing:border-box; margin-bottom:10px;">
{{-- 确认按钮：全宽大圆角，类似弹窗确定按钮 --}}
<button x-on:click="send()"
style="display:block; width:100%; height:48px; border:none;
border-radius:10px; font-size:16px; font-weight:bold;
color:#fff; letter-spacing:2px; transition:opacity .15s;"
:style="(sending || !amount) ?
'background:#f59e0b; opacity:.45; cursor:not-allowed;' :
'background:#f59e0b; box-shadow:0 4px 14px rgba(245,158,11,.45); opacity:1; cursor:pointer;'"
:disabled="sending || !amount">
<span x-text="sending ? '发放中…' : '🎉 确认发放'"></span>
</button>
<p style="margin:8px 0 0; font-size:10px; color:#b45309; opacity:.75; text-align:center;">
金币凭空产生并直接发放给对方，本操作记入你的履职记录。
</p>
</div>