From c53cd7784a69c98363d79b68375ec7b658abd2a3 Mon Sep 17 00:00:00 2001
From: lkddi <lkddi@163.com>
Date: Sun, 1 Mar 2026 17:21:48 +0800
Subject: [PATCH] =?UTF-8?q?UI=E9=87=8D=E8=AE=BE=E8=AE=A1=EF=BC=9A=E6=B1=82?=
 =?UTF-8?q?=E5=A9=9A=E5=BC=B9=E7=AA=97=E5=85=A8=E9=9D=A2=E5=8D=87=E7=BA=A7?=
 =?UTF-8?q?=E4=B8=BA=E6=B5=AA=E6=BC=AB=E9=AB=98=E7=AB=AF=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 背景：深紫玫瑰色磨砂遮罩（backdrop-filter blur）
- 封面区：深玫瑰→粉红渐变，大 💍 图标投影，
  对象名用磨砂胶囊标签显示
- 弹窗入场动画：opacity+scale 过渡
- 戒指卡片：选中态渐变背景+粉色阴影+右上角✓勾
  未选中态浅灰底，悬停有过渡
- 无戒指：粉色虚线框+💔图标+直接跳商店按钮
- 确认按钮：三段深玫瑰渐变+红粉阴影，禁用态灰色
---
 .../chat/partials/marriage-modals.blade.php   | 136 ++++++++++++------
 1 file changed, 93 insertions(+), 43 deletions(-)

diff --git a/resources/views/chat/partials/marriage-modals.blade.php b/resources/views/chat/partials/marriage-modals.blade.php
index c300411..ac73ef7 100644
--- a/resources/views/chat/partials/marriage-modals.blade.php
+++ b/resources/views/chat/partials/marriage-modals.blade.php
@@ -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>