新增聊天室座驾系统

This commit is contained in:
pllx
2026-04-30 09:40:50 +08:00
parent 45ce8b2b2d
commit 3c95478097
32 changed files with 3982 additions and 53 deletions
@@ -718,6 +718,62 @@
{{-- 商店弹窗业务脚本已迁移到 resources/js/chat-room/shop-controls.js --}}
{{-- ═══════════ 座驾弹窗 ═══════════ --}}
<style>
#ride-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9999; justify-content:center; align-items:center; font-family:'Microsoft YaHei',SimSun,sans-serif; }
#ride-modal-inner { width:820px; max-width:96vw; max-height:90vh; background:#f8fafc; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 14px 44px rgba(15,23,42,.42); }
#ride-modal-header { background:linear-gradient(135deg,#0f172a,#0f766e); color:#fff; padding:12px 16px; display:flex; align-items:center; gap:12px; flex-shrink:0; }
#ride-modal-title { font-size:15px; font-weight:bold; }
#ride-modal-jjb { margin-left:auto; font-size:12px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:4px 10px; }
#ride-modal-close { cursor:pointer; font-size:20px; opacity:.82; }
#ride-modal-close:hover { opacity:1; }
#ride-current { margin:12px 14px 0; padding:9px 12px; background:#ecfdf5; border:1px solid #99f6e4; border-radius:8px; color:#115e59; display:flex; align-items:center; gap:8px; font-size:12px; min-height:38px; }
.ride-current-icon { font-size:18px; }
.ride-current-expire { margin-left:auto; color:#64748b; }
.ride-current-empty { color:#64748b; }
#ride-modal-body { padding:12px 14px 14px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.ride-section-title { font-size:12px; font-weight:bold; color:#0f172a; display:flex; align-items:center; gap:6px; margin-bottom:8px; }
#ride-items-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(188px,1fr)); gap:10px; }
.ride-card { background:#fff; border:1px solid #dbe4ef; border-radius:8px; padding:11px; display:flex; flex-direction:column; gap:8px; min-height:156px; box-shadow:0 3px 10px rgba(15,23,42,.04); }
.ride-card.active { border-color:#14b8a6; box-shadow:0 0 0 1px rgba(20,184,166,.18),0 6px 16px rgba(20,184,166,.08); }
.ride-card-head { display:flex; align-items:center; gap:7px; min-width:0; }
.ride-card-icon { font-size:22px; flex-shrink:0; }
.ride-card-title { font-size:13px; font-weight:bold; color:#102033; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ride-active-badge { margin-left:auto; font-size:10px; color:#047857; background:#d1fae5; border-radius:999px; padding:2px 7px; flex-shrink:0; }
.ride-card-desc { color:#64748b; font-size:11px; line-height:1.45; min-height:32px; }
.ride-card-meta { display:flex; justify-content:space-between; color:#475569; font-size:11px; gap:8px; }
.ride-buy-btn { margin-top:auto; border:none; border-radius:6px; background:#0f766e; color:#fff; font-size:12px; font-weight:bold; padding:7px 8px; cursor:pointer; }
.ride-buy-btn:hover { background:#0d9488; }
#ride-purchase-list { background:#fff; border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; }
.ride-record { display:grid; grid-template-columns:1.4fr .7fr .8fr 1.1fr; gap:8px; padding:8px 10px; border-bottom:1px solid #f1f5f9; color:#475569; font-size:11px; align-items:center; }
.ride-record:last-child { border-bottom:none; }
.ride-empty { grid-column:1/-1; text-align:center; padding:22px 0; color:#94a3b8; font-size:12px; }
.ride-error { color:#dc2626; }
</style>
<div id="ride-modal" data-ride-items-url="{{ route('rides.items') }}" data-ride-buy-url="{{ route('rides.buy') }}">
<div id="ride-modal-inner">
<div id="ride-modal-header">
<div id="ride-modal-title">🚘 聊天室座驾</div>
<div id="ride-modal-jjb">💰 <strong id="ride-jjb">--</strong> 金币</div>
<span id="ride-modal-close" data-ride-modal-close></span>
</div>
<div id="ride-current"><span class="ride-current-empty">当前未启用座驾</span></div>
<div id="ride-modal-body">
<div>
<div class="ride-section-title">可购买座驾</div>
<div id="ride-items-list"><div class="ride-empty">加载中...</div></div>
</div>
<div>
<div class="ride-section-title">购买记录</div>
<div id="ride-purchase-list"><div class="ride-empty">暂无座驾购买记录</div></div>
</div>
</div>
</div>
</div>
{{-- 座驾弹窗业务脚本已迁移到 resources/js/chat-room/ride-controls.js --}}
{{-- ═══════════ 会员中心弹窗 ═══════════ --}}
<style>
#vip-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9999; justify-content:center; align-items:center; }