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

UI修复：求婚弹窗双按钮对齐，完美复刻「加好友大卡片」风格

Browse Source 
- 彻底修复  字符串形式  覆盖内联  导致按钮形变的 bug，改用对象格式动态绑定样式，实现平滑继承
- 匹配大卡片公共弹窗按钮的标准尺寸：取消灰色边框，增加按钮高度 (padding: 10px 0, border-radius: 8px)
- 强制等分按钮宽度 (flex: 1)
- 根据金币充足/不足状态及点击状态，准确反映颜色、阴影及禁用态鼠标指针
This commit is contained in:
流星
2026-03-01 17:31:56 +08:00
parent b6188ce2c3
commit 420efbc093
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -145,20 +145,21 @@
</div>
@endif
{{-- 底部按钮：与好友名片按钮风格一致 --}}
<div style="display:flex; gap:6px;">
{{-- 底部按钮：样式修复并参照大卡片弹窗 --}}
<div style="display:flex; gap:12px;">
<button x-on:click="close()"
style="flex:1; padding:7px 10px; border-radius:5px; font-size:12px; font-weight:bold;
cursor:pointer; background:#f1f5f9; color:#6b7280; border:1px solid #d1d5db;
transition:opacity .15s;">
style="flex:1; padding:10px 0; border-radius:8px; font-size:13px; font-weight:bold;
cursor:pointer; border:none; background:#f1f5f9; color:#6b7280;
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:7px 10px; border-radius:5px; font-size:12px; font-weight:bold;
cursor:pointer; border:none; transition:opacity .15s;"
style="flex:1; padding:10px 0; border-radius:8px; font-size:13px; font-weight:bold; 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;'">
{ background: '#f1f5f9', color: '#94a3b8', cursor: 'not-allowed', boxShadow: 'none' } :
{ background: 'linear-gradient(135deg,#be185d,#f43f5e,#ec4899)', color: '#fff',
cursor: 'pointer', boxShadow: '0 4px 12px rgba(244,63,94,0.3)' }">
<span x-text="sending ? '💌 发送中…' : '💍 确认求婚'"></span>
</button>
</div>