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

优化：输入框与确认按钮等高（align-items:stretch）

Browse Source 
flex 容器改为 align-items:stretch，按钮去掉固定 height
改为 align-self:stretch，自动撑满与输入框相同高度，
视觉上两者完全对齐。
This commit is contained in:
流星
2026-03-01 12:01:53 +08:00
parent 4207528043
commit 0d693eef5f
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/chat/partials/user-actions.blade.php
+4 -4
View File
@@ -1003,16 +1003,16 @@
</div> </div>
{{-- 输入区 --}} {{-- 输入区 --}}
<div style="padding:14px 20px 0;"> <div style="padding:14px 20px 0;">
<div style="display:flex; gap:8px; align-items:center;"> <div style="display:flex; gap:8px; align-items:stretch;">
<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; height:44px; padding:0 14px; border:2px solid #fcd34d; 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;"> border-radius:10px; font-size:15px; color:#92400e; outline:none; box-sizing:border-box;">
<button x-on:click="send()" <button x-on:click="send()"
style="height:44px; padding:0 24px; border:none; border-radius:10px; style="padding:0 24px; border:none; border-radius:10px;
font-size:14px; font-weight:bold; white-space:nowrap; font-size:14px; font-weight:bold; white-space:nowrap;
color:#fff; transition:opacity .15s;" color:#fff; transition:opacity .15s; align-self:stretch;"
:style="(sending || !amount) ? :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: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;'" 'background:linear-gradient(135deg,#ea580c,#dc2626); box-shadow:0 4px 14px rgba(220,38,38,.5); opacity:1; cursor:pointer;'"