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

UI重设计：求婚弹窗全面升级为浪漫高端风格

Browse Source 
- 背景：深紫玫瑰色磨砂遮罩（backdrop-filter blur）
- 封面区：深玫瑰→粉红渐变，大 💍 图标投影，
  对象名用磨砂胶囊标签显示
- 弹窗入场动画：opacity+scale 过渡
- 戒指卡片：选中态渐变背景+粉色阴影+右上角✓勾
  未选中态浅灰底，悬停有过渡
- 无戒指：粉色虚线框+💔图标+直接跳商店按钮
- 确认按钮：三段深玫瑰渐变+红粉阴影，禁用态灰色
This commit is contained in:
流星
2026-03-01 17:21:48 +08:00
parent 9ccc0b379d
commit c53cd7784a
1 changed files with 93 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/chat/partials/marriage-modals.blade.php
+93 -43
View File
@@ -16,73 +16,123 @@
{{-- ═══════════ 1. 求婚弹窗 ═══════════ --}}
<div id="marriage-propose-modal" x-data="marriageProposeModal()" x-show="show" x-cloak>
<div style="position:fixed; inset:0; background:rgba(0,0,0,.6);
z-index:9800; display:flex; align-items:center; justify-content:center;"
<div style="position:fixed; inset:0; background:rgba(15,5,25,.75); backdrop-filter:blur(4px);
z-index:9800; display:flex; align-items:center; justify-content:center; padding:16px;"
x-on:click.self="close()">
<div
style="width:420px; max-width:95vw; background:#fff; border-radius:20px;
box-shadow:0 20px 60px rgba(219,39,119,.3); overflow:hidden;">
{{-- 头部 --}}
<div x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
style="width:420px; max-width:100%; border-radius:24px; overflow:hidden;
box-shadow:0 32px 80px rgba(244,63,94,.45), 0 0 0 1px rgba(244,63,94,.15);">
{{-- ───── 封面区域 ────── --}}
<div
style="background:linear-gradient(135deg,#f43f5e,#ec4899); padding:16px 20px;
display:flex; align-items:center; justify-content:space-between;">
<div>
<div style="color:#fff; font-weight:bold; font-size:17px;">💍 向 TA 求婚</div>
<div style="color:rgba(255,255,255,.9); font-size:12px; margin-top:2px;"
x-text="'对象：' + targetUsername"></div>
</div>
style="background:linear-gradient(145deg,#be185d 0%,#f43f5e 45%,#fb7185 80%,#fda4af 100%);
padding:32px 24px 24px; text-align:center; position:relative;">
{{-- 关闭按钮 --}}
<button x-on:click="close()"
style="background:rgba(255,255,255,.25); border:none; color:#fff; width:30px;
height:30px; border-radius:50%; cursor:pointer; font-size:18px;">×</button>
style="position:absolute; top:14px; right:14px; background:rgba(255,255,255,.2);
border:none; color:#fff; width:32px; height:32px; border-radius:50%;
cursor:pointer; font-size:16px; line-height:32px; transition:background .15s;"
onmouseover="this.style.background='rgba(255,255,255,.35)'"
onmouseout="this.style.background='rgba(255,255,255,.2)'">✕</button>
{{-- 大戒指图标 --}}
<div style="font-size:52px; margin-bottom:12px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.25));">💍
</div>
{{-- 标题 --}}
<div style="color:#fff; font-size:22px; font-weight:800; letter-spacing:.5px; margin-bottom:6px;">
向 TA 求婚
</div>
{{-- 对象名 --}}
<div
style="display:inline-flex; align-items:center; gap:6px;
background:rgba(255,255,255,.18); border-radius:999px;
padding:4px 14px; font-size:13px; color:#fff;">
<span>💕</span>
<span x-text="targetUsername" style="font-weight:bold;"></span>
</div>
</div>
<div style="padding:20px;">
{{-- ───── 内容区域 ────── --}}
<div style="background:#fff; padding:24px;">
{{-- 错误提示 --}}
<div x-show="error"
style="display:none; background:#fef2f2; border:1px solid #fecaca;
color:#dc2626; border-radius:8px; padding:10px 14px; font-size:12px; margin-bottom:14px;"
<div x-show="error" x-transition
style="display:none; background:#fef2f2; border-left:3px solid #f43f5e;
color:#dc2626; border-radius:8px; padding:10px 14px; font-size:12px; margin-bottom:16px;"
x-text="error"></div>
{{-- 加载中 --}}
<div x-show="loading" style="text-align:center; padding:20px; color:#ec4899;">
加载戒指列表…
<div x-show="loading" style="text-align:center; padding:28px; color:#f43f5e;">
<div style="font-size:28px; margin-bottom:8px;">💍</div>
<div style="font-size:13px; color:#9ca3af;">正在加载戒指列表…</div>
</div>
{{-- 戒指选择 --}}
{{-- 戒指选择区 --}}
<div x-show="!loading">
<div style="font-size:13px; font-weight:bold; color:#374151; margin-bottom:10px;">
选择求婚戒指 <span
style="font-weight:normal; color:#9ca3af; font-size:11px;">（戒指将被使用消耗。若对方拒绝，戒指遗失）</span>
{{-- 区域标题 --}}
<div style="display:flex; align-items:center; gap:8px; margin-bottom:14px;">
<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:11px; color:#d1d5db;">戒指消耗后不退，拒绝则遗失</span>
</div>
{{-- 无戒指提示 --}}
<div x-show="rings.length === 0"
style="text-align:center; padding:20px; color:#9ca3af; font-size:13px;">
你没有可用的戒指 😢<br>
<a href="/shop"
style="color:#ec4899; font-size:12px; margin-top:6px; display:inline-block;">前往商店购买戒指 →</a>
style="text-align:center; padding:28px 16px; background:#fdf2f8; border-radius:14px;
border:1.5px dashed #fbcfe8; margin-bottom:16px;">
<div style="font-size:32px; margin-bottom:8px;">💔</div>
<div style="font-size:13px; color:#9ca3af; margin-bottom:10px;">背包里还没有戒指哦</div>
<button onclick="if(typeof window.openShopModal==='function') window.openShopModal()"
style="background:linear-gradient(135deg,#f43f5e,#ec4899); color:#fff; border:none;
border-radius:8px; padding:7px 18px; font-size:12px; font-weight:bold; cursor:pointer;">
🛒 前往商店购买
</button>
</div>
<div style="display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px;">
{{-- 戒指卡片列表 --}}
<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:#fff1f2;' :
'border:2px solid #e2e8f0; background:#fff;'"
style="padding:12px; border-radius:12px; cursor:pointer; transition:all .15s; text-align:center;">
<div style="font-size:26px; margin-bottom:4px;" x-text="ring.icon"></div>
<div style="font-weight:bold; font-size:12px; color:#374151;" x-text="ring.name"></div>
<div style="font-size:11px; color:#f43f5e; margin-top:2px;"
x-text="'💞 初始亲密度 +' + ring.intimacy_bonus"></div>
<div style="font-size:10px; color:#9ca3af;"
x-text="'魅力 +' + ring.charm_bonus + ' (结婚时)'"></div>
'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>
</template>
</div>
{{-- 确认按钮 --}}
<button x-on:click="doPropose()" :disabled="sending || !selectedRing || rings.length === 0"
style="width:100%; padding:12px; border:none; border-radius:12px; font-size:14px;
font-weight:bold; cursor:pointer; transition:all .2s;"
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,#f43f5e,#ec4899); color:#fff;'">
<span x-text="sending ? '正在求婚…' : '💍 确认求婚'"></span>
'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>
</div>
</div>