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

UI优化：求婚弹窗戒指改为居中展示，双按钮等宽参照名片风格

Browse Source 
- 「选择求婚戒指」→「赠送的求婚戒」
- 移除选择网格，改为居中展示第一枚戒指（粉色卡片）
- 底部双按钮与好友名片操作栏完全统一：
  padding:7px 10px; border-radius:5px; font-size:12px;
  flex:1 等宽，gap:6px
This commit is contained in:
流星
2026-03-01 17:28:28 +08:00
parent be2d02cb8f
commit b6188ce2c3
1 changed files with 24 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -70,7 +70,7 @@
<div style="font-size:13px; color:#9ca3af;">正在加载戒指列表…</div>
</div>
{{-- 戒指选择区 --}}
{{-- 戒指展示区 --}}
<div x-show="!loading">
{{-- 区域标题 --}}
@@ -78,7 +78,7 @@
<div
style="width:3px; height:16px; background:linear-gradient(#f43f5e,#ec4899); border-radius:2px;">
</div>
<span style="font-size:13px; font-weight:700; color:#1f2937;">选择求婚戒指</span>
<span style="font-size:13px; font-weight:700; color:#1f2937;">赠送的求婚戒</span>
<span style="font-size:11px; color:#d1d5db;">戒指消耗后不退，拒绝则遗失</span>
</div>
@@ -95,30 +95,21 @@
</button>
</div>
{{-- 戒指卡片列表 --}}
<div style="display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:20px;">
<template x-for="ring in rings" :key="ring.purchase_id">
<div x-on:click="selectedRing = ring.purchase_id"
:style="selectedRing === ring.purchase_id ?
'border:2px solid #f43f5e; background:linear-gradient(135deg,#fff1f2,#fdf2f8); box-shadow:0 4px 16px rgba(244,63,94,.18);' :
'border:2px solid #f1f5f9; background:#fafafa;'"
style="padding:14px 12px; border-radius:14px; cursor:pointer;
transition:all .15s; text-align:center; position:relative;">
{{-- 选中勾 --}}
<div x-show="selectedRing === ring.purchase_id"
style="position:absolute; top:8px; right:8px; width:18px; height:18px;
background:#f43f5e; border-radius:50%; display:flex;
align-items:center; justify-content:center; font-size:10px; color:#fff;">
✓</div>
<div style="font-size:34px; margin-bottom:6px;" x-text="ring.icon"></div>
<div style="font-weight:700; font-size:12px; color:#1f2937; margin-bottom:4px;"
x-text="ring.name"></div>
<div style="font-size:10px; color:#f43f5e; font-weight:600;"
x-text="'💞 亲密 +' + ring.intimacy_bonus"></div>
<div style="font-size:10px; color:#a855f7; margin-top:1px;"
x-text="'✨ 魅力 +' + ring.charm_bonus"></div>
{{-- 戒指展示（居中，只展示第一枚，不可选） --}}
<div x-show="rings.length > 0" style="display:flex; justify-content:center; margin-bottom:18px;">
<template x-if="rings.length > 0">
<div
style="text-align:center; padding:18px 28px; border-radius:16px;
background:linear-gradient(135deg,#fff1f2,#fdf2f8);
border:2px solid #f43f5e; box-shadow:0 4px 18px rgba(244,63,94,.15);
min-width:140px;">
<div style="font-size:42px; margin-bottom:8px;" x-text="rings[0].icon"></div>
<div style="font-weight:700; font-size:14px; color:#1f2937; margin-bottom:6px;"
x-text="rings[0].name"></div>
<div style="font-size:11px; color:#f43f5e; font-weight:600;"
x-text="'💞 亲密 +' + rings[0].intimacy_bonus"></div>
<div style="font-size:11px; color:#a855f7; margin-top:2px;"
x-text="'✨ 魅力 +' + rings[0].charm_bonus"></div>
</div>
</template>
</div>
@@ -154,21 +145,20 @@
</div>
@endif
{{-- 底部按钮：取消 + 确认求婚 --}}
<div style="display:flex; gap:10px; margin-top:4px;">
{{-- 底部按钮：与好友名片按钮风格一致 --}}
<div style="display:flex; gap:6px;">
<button x-on:click="close()"
style="flex:1; padding:10px; border-radius:8px; font-size:13px; font-weight:bold;
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:background .15s;"
onmouseover="this.style.background='#e2e8f0'" onmouseout="this.style.background='#f1f5f9'">
transition:opacity .15s;">
✕ 取消
</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="flex:1; padding:7px 10px; border-radius:5px; font-size:12px; font-weight:bold;
cursor:pointer; border:none; transition:opacity .15s;"
: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);'">
'background:linear-gradient(135deg,#be185d,#f43f5e,#ec4899); color:#fff;'">
<span x-text="sending ? '💌 发送中…' : '💍 确认求婚'"></span>
</button>
</div>