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

UI：求婚弹窗底部改为「取消」+「确认求婚」横排双按钮

Browse Source 
参照用户名片操作栏按钮风格：
  取消：灰色边框底，hover 加深
  确认求婚：粉玫瑰渐变，禁用态灰色
  两按钮等宽 flex:1 横排排列
This commit is contained in:
流星
2026-03-01 17:24:29 +08:00
parent 050aec1db4
commit be2d02cb8f
1 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
resources/views/chat/partials/marriage-modals.blade.php
View File

@@ -154,15 +154,24 @@
</div>
@endif
{{-- 确认按钮 --}}
<button x-on:click="doPropose()" :disabled="sending || !selectedRing || rings.length === 0"
style="width:100%; padding:14px; border:none; border-radius:14px; font-size:15px;
font-weight:800; cursor:pointer; transition:all .2s; letter-spacing:.3px;"
:style="(sending || !selectedRing || rings.length === 0) ?
'background:#f1f5f9; color:#94a3b8; cursor:not-allowed;' :
'background:linear-gradient(135deg,#be185d,#f43f5e,#ec4899); color:#fff; box-shadow:0 8px 24px rgba(244,63,94,.35);'">
<span x-text="sending ? '💌 正在发送…' : '💍 确认求婚'"></span>
</button>
{{-- 底部按钮：取消 + 确认求婚 --}}
<div style="display:flex; gap:10px; margin-top:4px;">
<button x-on:click="close()"
style="flex:1; padding:10px; border-radius:8px; font-size:13px; font-weight:bold;
cursor:pointer; background:#f1f5f9; color:#6b7280; border:1px solid #d1d5db;
transition:background .15s;"
onmouseover="this.style.background='#e2e8f0'" onmouseout="this.style.background='#f1f5f9'">
✕ 取消
</button>
<button x-on:click="doPropose()" :disabled="sending || !selectedRing || rings.length === 0"
style="flex:1; padding:10px; border-radius:8px; font-size:13px; font-weight:bold;
cursor:pointer; border:none; transition:all .2s;"
:style="(sending || !selectedRing || rings.length === 0) ?
'background:#f1f5f9; color:#94a3b8; cursor:not-allowed;' :
'background:linear-gradient(135deg,#be185d,#f43f5e,#ec4899); color:#fff; box-shadow:0 4px 16px rgba(244,63,94,.3);'">
<span x-text="sending ? '💌 发送中…' : '💍 确认求婚'"></span>
</button>
</div>
</div>
</div>