1087 lines
51 KiB
PHP
1087 lines
51 KiB
PHP
{{--
|
||
文件功能：聊天室竖向工具条（中间导航栏）+ 关联弹窗
|
||
|
||
包含：
|
||
1. 工具条按钮（管理、商店、存点、头像、设置等）
|
||
2. 头像选择弹窗
|
||
3. 个人设置弹窗（密码、资料、密保）
|
||
4. 商店弹窗（从工具栏点击打开的全屏模态）
|
||
5. 对应的 JS 操作函数
|
||
|
||
依赖变量：$user, $superLevel, $room
|
||
@author ChatRoom Laravel
|
||
@version 1.0.0
|
||
--}}
|
||
|
||
{{-- ═══════════ 竖向工具条按钮 ═══════════ --}}
|
||
<div class="chat-toolbar" id="toolbar-strip">
|
||
<div class="tool-btn" data-toolbar-action="shop" title="购买道具">商店</div>
|
||
<div class="tool-btn" data-toolbar-action="vip" title="会员中心">会员</div>
|
||
<div class="tool-btn" data-toolbar-action="save-exp" title="手动存经验点">存点</div>
|
||
<div class="tool-btn" data-toolbar-action="game" title="娱乐游戏大厅">娱乐</div>
|
||
<div class="tool-btn" data-toolbar-action="earn" title="看视频赚金币">赚钱</div>
|
||
<div class="tool-btn" data-toolbar-action="bank" title="银行存取金币">银行</div>
|
||
<div class="tool-btn" data-toolbar-action="marriage" title="婚姻状态">婚姻</div>
|
||
<div class="tool-btn" data-toolbar-action="friend" title="好友列表">好友</div>
|
||
<div class="tool-btn" data-toolbar-action="avatar" title="修改头像">头像</div>
|
||
<div class="tool-btn" data-toolbar-action="settings" title="个人设置">设置
|
||
</div>
|
||
<div class="tool-btn" data-toolbar-url="{{ route('feedback.index') }}" title="反馈">反馈</div>
|
||
<div class="tool-btn" data-toolbar-url="{{ route('guestbook.index') }}" title="留言板/私信">留言</div>
|
||
<div class="tool-btn" data-toolbar-url="{{ route('guide') }}" title="规则/帮助">规则</div>
|
||
|
||
@if ($user->id === 1 || $user->activePosition()->exists())
|
||
<div class="tool-btn" style="color: #ffcc00;" data-toolbar-url="/admin" title="管理后台">管理</div>
|
||
<div class="tool-btn" data-toolbar-url="{{ route('leaderboard.index') }}" title="排行榜">排行
|
||
</div>
|
||
@else
|
||
<div class="tool-btn" data-toolbar-url="{{ route('leaderboard.index') }}" title="排行榜">排行
|
||
</div>
|
||
@endif
|
||
<div class="tool-btn" style="color: #ffaaaa;" data-toolbar-action="leave" title="离开聊天室">
|
||
离开
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ═══════════ 头像选择弹窗 ═══════════ --}}
|
||
<div id="avatar-picker-modal"
|
||
style="display:none; position:fixed; top:0; left:0; right:0; bottom:0;
|
||
background:rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center;">
|
||
<div
|
||
style="background:#fff; width:600px; max-height:80vh; border-radius:6px; overflow:hidden;
|
||
box-shadow:0 4px 20px rgba(0,0,0,0.3); display:flex; flex-direction:column;">
|
||
{{-- 标题栏 --}}
|
||
<div
|
||
style="background:#336699; color:#fff; padding:10px 16px; font-size:14px; font-weight:bold;
|
||
display:flex; justify-content:space-between; align-items:center;">
|
||
<span>🖼 修改头像（原版风格）</span>
|
||
<span style="cursor:pointer; font-size:18px;" data-avatar-picker-close>✕</span>
|
||
</div>
|
||
|
||
{{-- 预览区 --}}
|
||
<div
|
||
style="padding:10px 16px; background:#f0f6ff; border-bottom:1px solid #ddd; display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
|
||
<span style="font-size:12px; color:#666;">当前选中：</span>
|
||
<img id="avatar-preview" src="{{ str_starts_with($user->usersf, 'storage/') ? '/' . $user->usersf : '/images/headface/' . ($user->usersf ?: '1.gif') }}"
|
||
style="width:40px; height:40px; border:2px solid #336699; border-radius:4px; object-fit: cover;">
|
||
<span id="avatar-selected-name" style="font-size:12px; color:#333;">{{ $user->usersf ?: '未设置' }}</span>
|
||
<button id="avatar-save-btn" disabled data-avatar-save
|
||
style="margin-left:auto; padding:5px 16px; background:#336699; color:#fff; border:none;
|
||
border-radius:3px; font-size:12px; cursor:pointer;">确定更换系统头像</button>
|
||
<div style="width:100%; height:1px; background:#ddd; margin: 4px 0;"></div>
|
||
<div style="display:flex; align-items:center; gap:8px; width:100%;">
|
||
<span style="font-size:12px; color:#666; font-weight:bold;">自定义头像上传(112x112)：</span>
|
||
<input type="file" id="avatar-upload-input" accept="image/jpeg,image/png,image/gif,image/webp" style="display:none;" data-avatar-upload-input>
|
||
<button id="avatar-upload-btn" data-avatar-upload-trigger
|
||
style="padding:5px 16px; background:#16a34a; color:#fff; border:none;
|
||
border-radius:3px; font-size:12px; cursor:pointer;">选择本地图片上传</button>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 头像网格 --}}
|
||
<div id="avatar-grid"
|
||
style="flex:1; overflow-y:auto; padding:10px; display:flex; flex-wrap:wrap;
|
||
gap:4px; align-content:flex-start;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ═══════════ 个人设置弹窗 ═══════════ --}}
|
||
<div id="settings-modal" data-settings-modal-overlay
|
||
style="display:none; position:fixed; top:0; left:0; right:0; bottom:0;
|
||
background:rgba(0,0,0,0.5); z-index:10000; justify-content:center; align-items:center;">
|
||
<div data-settings-modal-panel
|
||
style="background:#fff; border-radius:8px; width:380px; max-height:90vh;
|
||
box-shadow:0 8px 32px rgba(0,0,0,0.3); display:flex; flex-direction:column;">
|
||
{{-- --}}
|
||
<div
|
||
style="background:linear-gradient(135deg,#336699,#5a8fc0); color:#fff;
|
||
padding:12px 16px; border-radius:8px 8px 0 0; display:flex; justify-content:space-between; align-items:center; flex-shrink:0;">
|
||
<span style="font-size:14px; font-weight:bold;">⚙️ 个人设置</span>
|
||
<span data-settings-modal-close
|
||
style="cursor:pointer; font-size:18px; opacity:0.8;">×</span>
|
||
</div>
|
||
|
||
{{-- 内容滚动区：把 overflow-y:auto 放到内层，避免外层 overflow 创建堆叠上下文论clip全局弹窗 --}}
|
||
<div style="padding:16px; overflow-y:auto; flex:1;">
|
||
{{-- 修改密码 --}}
|
||
<div style="margin-bottom:16px; border:1px solid #e0e0e0; border-radius:6px; padding:12px;">
|
||
<div style="font-size:12px; font-weight:bold; color:#336699; margin-bottom:8px;">🔒 修改密码</div>
|
||
<div style="display:flex; flex-direction:column; gap:6px;">
|
||
<input id="set-old-pwd" type="password" placeholder="当前旧密码"
|
||
style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
|
||
<input id="set-new-pwd" type="password" placeholder="新密码（至少6位）"
|
||
style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
|
||
<input id="set-new-pwd2" type="password" placeholder="确认新密码"
|
||
style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
|
||
<div id="pwd-inline-msg"
|
||
style="display:none; border-radius:10px; padding:10px 14px;
|
||
text-align:center; margin-top:8px; font-size:12px; font-weight:bold;">
|
||
</div>
|
||
<button data-settings-save-password
|
||
style="padding:6px; background:#336699; color:#fff; border:none; border-radius:4px;
|
||
font-size:12px; cursor:pointer;">确定修改密码</button>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 个人资料 --}}
|
||
<div style="margin-bottom:16px; border:1px solid #e0e0e0; border-radius:6px; padding:12px;">
|
||
<div style="font-size:12px; font-weight:bold; color:#336699; margin-bottom:8px;">👤 个人资料</div>
|
||
<div style="display:flex; flex-direction:column; gap:6px;">
|
||
<div style="display:flex; align-items:center; gap:8px;">
|
||
<label style="font-size:12px; width:50px; text-align:right;">性别:</label>
|
||
<select id="set-sex"
|
||
style="flex:1; padding:5px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
|
||
<option value="1" {{ Auth::user()->sex == 1 ? 'selected' : '' }}>男</option>
|
||
<option value="2" {{ Auth::user()->sex == 2 ? 'selected' : '' }}>女</option>
|
||
<option value="0" {{ Auth::user()->sex == 0 ? 'selected' : '' }}>保密</option>
|
||
</select>
|
||
</div>
|
||
<div style="display:flex; align-items:center; gap:8px;">
|
||
<label style="font-size:12px; width:50px; text-align:right;">邮箱:</label>
|
||
<input id="set-email" type="email" value="{{ Auth::user()->email ?? '' }}"
|
||
placeholder="用来找回密码(必填)"
|
||
style="flex:1; padding:5px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
|
||
</div>
|
||
@if (\App\Models\SysParam::where('alias', 'smtp_enabled')->value('body') === '1')
|
||
<div style="display:flex; align-items:center; gap:8px; margin-top:6px;">
|
||
<label style="font-size:12px; width:50px; text-align:right;">验证码:</label>
|
||
<input id="set-email-code" type="text" placeholder="修改邮箱时必填" maxlength="6"
|
||
style="flex:1; padding:5px; border:1px solid #ccc; border-radius:4px; font-size:12px; max-width:100px;">
|
||
<button id="btn-send-code" type="button" data-settings-send-email-code
|
||
style="padding:5px 10px; border:1px solid #336699; background:#eef5ff; color:#336699; border-radius:4px; font-size:12px; cursor:pointer;">
|
||
获取验证码
|
||
</button>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 密保设置 --}}
|
||
<div style="margin-bottom:16px; border:1px solid #e0e0e0; border-radius:6px; padding:12px;">
|
||
<div style="font-size:12px; font-weight:bold; color:#336699; margin-bottom:8px;">🛡️ 密码保护</div>
|
||
<div style="display:flex; flex-direction:column; gap:6px;">
|
||
<input id="set-question" type="text" value="{{ Auth::user()->question ?? '' }}"
|
||
placeholder="密保问题（如：我的小学名字？）"
|
||
style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
|
||
<input id="set-answer" type="text" value="{{ Auth::user()->answer ?? '' }}"
|
||
placeholder="密保答案"
|
||
style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 微信绑定 --}}
|
||
<div style="margin-bottom:16px; border:1px solid #e0e0e0; border-radius:6px; padding:12px;">
|
||
<div style="font-size:12px; font-weight:bold; color:#336699; margin-bottom:8px;">💬 微信绑定</div>
|
||
<div style="display:flex; flex-direction:column; gap:6px;" id="wechat-bind-container">
|
||
@if (empty(Auth::user()->wxid))
|
||
@php
|
||
$botConfigBody = \App\Models\SysParam::where('alias', 'wechat_bot_config')->value('body');
|
||
$botConfig = $botConfigBody ? json_decode($botConfigBody, true) : [];
|
||
$botWxid = $botConfig['kafka']['bot_wxid'] ?? '暂未配置';
|
||
$qrcodeImage = $botConfig['api']['qrcode_image'] ?? null;
|
||
@endphp
|
||
<div style="font-size:12px; color:#666;">
|
||
您尚未绑定微信。<br>
|
||
@if($qrcodeImage)
|
||
扫码添加机器人微信：<br>
|
||
<img src="{{ \Illuminate\Support\Facades\Storage::url($qrcodeImage) }}" alt="机器人二维码" style="max-height:100px; display:block; margin: 6px 0; border: 1px solid #ddd; border-radius: 4px;">
|
||
@else
|
||
请添加机器人微信：<strong style="color:#d97706">{{ $botWxid }}</strong><br>
|
||
@endif
|
||
并发送以下绑定代码完成绑定：
|
||
</div>
|
||
<div style="display:flex; align-items:center; gap:8px;">
|
||
<input id="wechat-bind-code" type="text" readonly value="点击生成"
|
||
style="flex:1; padding:6px 8px; border:1px dashed #336699; background:#f9fafb; border-radius:4px; font-size:13px; font-weight:bold; color:#336699; text-align:center; cursor:text;">
|
||
<button type="button" id="btn-copy-bind-code" data-settings-copy-wechat-code
|
||
style="display:none; padding:5px 10px; border:1px solid #10b981; background:#ecfdf5; color:#10b981; border-radius:4px; font-size:12px; cursor:pointer; white-space:nowrap;">
|
||
复制
|
||
</button>
|
||
<button type="button" id="btn-generate-bind-code" data-settings-generate-wechat-code
|
||
style="padding:5px 10px; border:1px solid #336699; background:#eef5ff; color:#336699; border-radius:4px; font-size:12px; cursor:pointer; white-space:nowrap;">
|
||
生成代码
|
||
</button>
|
||
</div>
|
||
<div id="bind-code-tip" style="font-size:11px; color:#888; display:none; text-align:center;">有效时间 5 分钟，绑定成功后请刷新页面。</div>
|
||
@else
|
||
<div style="font-size:12px; color:#16a34a; font-weight:bold; display:flex; justify-content:space-between; align-items:center;">
|
||
<span>已绑定微信，可接收提醒通知。</span>
|
||
<button type="button" data-settings-unbind-wechat style="padding:4px 8px; background:#fee2e2; color:#dc2626; border:1px solid #fecaca; border-radius:4px; font-size:11px; cursor:pointer;">解除绑定</button>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 内联操作结果提示（仿百家乐已押注卡片风格） --}}
|
||
<div id="settings-inline-msg"
|
||
style="display:none; border-radius:10px; padding:10px 14px;
|
||
text-align:center; margin-bottom:10px; font-size:13px; font-weight:bold;">
|
||
</div>
|
||
|
||
{{-- 保存按钮 --}}
|
||
<button data-settings-save-profile
|
||
style="width:100%; padding:8px; background:linear-gradient(135deg,#336699,#5a8fc0);
|
||
color:#fff; border:none; border-radius:4px; font-size:13px; font-weight:bold; cursor:pointer;">
|
||
💾 保存资料设置
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ═══════════ 好友面板（独立文件）═══════════ --}}
|
||
@include('chat.partials.friend-panel')
|
||
|
||
{{-- ═══════════ 娱乐游戏大厅弹窗（games/ 子目录）═══════════ --}}
|
||
@include('chat.partials.games.game-hall')
|
||
|
||
{{-- 头像选择和个人设置脚本已迁移到 resources/js/chat-room/profile-controls.js --}}
|
||
|
||
{{-- ═══════════ 商店弹窗 ═══════════ --}}
|
||
<style>
|
||
/* 商店弹窗遮罩 */
|
||
#shop-modal {
|
||
display: none;
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, .5);
|
||
z-index: 9999;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 弹窗主体 — 与设置弹窗同风格 */
|
||
#shop-modal-inner {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
width: 800px;
|
||
max-width: 95vw;
|
||
max-height: 84vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
/* 标题栏 — 与设置/头像弹窗一致 */
|
||
#shop-modal-header {
|
||
background: linear-gradient(135deg, #336699, #5a8fc0);
|
||
color: #fff;
|
||
padding: 10px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
#shop-modal-title {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
flex: 1;
|
||
}
|
||
|
||
#shop-modal-jjb {
|
||
font-size: 12px;
|
||
color: #d0e8ff;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
background: rgba(0, 0, 0, .2);
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
#shop-modal-jjb strong {
|
||
color: #ffe082;
|
||
font-size: 13px;
|
||
}
|
||
|
||
#shop-week-badge {
|
||
display: none;
|
||
font-size: 10px;
|
||
background: rgba(255, 255, 255, .2);
|
||
padding: 2px 7px;
|
||
border-radius: 10px;
|
||
color: #fff;
|
||
}
|
||
|
||
#shop-modal-close {
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
opacity: .8;
|
||
transition: opacity .15s;
|
||
line-height: 1;
|
||
}
|
||
|
||
#shop-modal-close:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Toast */
|
||
#shop-toast {
|
||
display: none;
|
||
margin: 6px 12px 0;
|
||
padding: 5px 10px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 商品列表区 */
|
||
#shop-items-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 10px 12px;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 8px;
|
||
align-content: start;
|
||
background: #f6faff;
|
||
}
|
||
|
||
/* 分组标题 — 独占一整行 */
|
||
.shop-group-header {
|
||
grid-column: 1 / -1;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
color: #336699;
|
||
padding: 6px 4px 4px;
|
||
border-bottom: 1px solid #cde;
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 6px;
|
||
}
|
||
|
||
.shop-group-header span {
|
||
font-size: 10px;
|
||
color: #888;
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* 商品卡 */
|
||
.shop-card {
|
||
background: #fff;
|
||
border: 1px solid #d0e4f5;
|
||
border-radius: 6px;
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
transition: border-color .2s, box-shadow .2s;
|
||
cursor: default;
|
||
}
|
||
|
||
.shop-card:hover {
|
||
border-color: #5a8fc0;
|
||
box-shadow: 0 2px 8px rgba(51, 102, 153, .18);
|
||
}
|
||
|
||
.shop-card-top {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.shop-card-icon {
|
||
font-size: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.shop-card-name {
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
color: #225588;
|
||
flex: 1;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.shop-card-desc {
|
||
font-size: 10px;
|
||
color: #888;
|
||
line-height: 1.4;
|
||
flex: 1;
|
||
}
|
||
|
||
.shop-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 3px;
|
||
background: linear-gradient(135deg, #336699, #5a8fc0);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 5px 8px;
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
width: 100%;
|
||
margin-top: auto;
|
||
transition: opacity .15s;
|
||
}
|
||
|
||
.shop-btn:hover {
|
||
opacity: .85;
|
||
}
|
||
|
||
.shop-btn-use {
|
||
background: linear-gradient(135deg, #7c3aed, #9f67e8);
|
||
}
|
||
|
||
/* 改名内嵌遮罩 */
|
||
#shop-rename-overlay {
|
||
display: none;
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, .5);
|
||
z-index: 10001;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
#shop-rename-box {
|
||
background: #fff;
|
||
border: 1px solid #5a8fc0;
|
||
border-radius: 8px;
|
||
padding: 16px 14px;
|
||
width: 230px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
|
||
}
|
||
|
||
#shop-rename-box h4 {
|
||
font-size: 13px;
|
||
font-weight: bold;
|
||
color: #336699;
|
||
margin: 0 0 10px;
|
||
}
|
||
|
||
#rename-input {
|
||
width: 100%;
|
||
border: 1px solid #aac;
|
||
border-radius: 4px;
|
||
padding: 6px 8px;
|
||
color: #333;
|
||
font-size: 12px;
|
||
box-sizing: border-box;
|
||
margin-bottom: 8px;
|
||
outline: none;
|
||
}
|
||
|
||
#rename-input:focus {
|
||
border-color: #336699;
|
||
}
|
||
|
||
.rename-btn-row {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
#rename-confirm {
|
||
flex: 1;
|
||
background: #336699;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 6px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
#rename-cancel {
|
||
flex: 1;
|
||
background: #eee;
|
||
color: #555;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
padding: 6px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
}
|
||
|
||
#rename-err {
|
||
color: #c00;
|
||
font-size: 10px;
|
||
margin-top: 5px;
|
||
min-height: 14px;
|
||
}
|
||
|
||
/* 送礼对话框 */
|
||
#gift-dialog {
|
||
display: none;
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, .55);
|
||
z-index: 10001;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
#gift-dialog-box {
|
||
background: #fff;
|
||
border: 1px solid #5a8fc0;
|
||
border-radius: 8px;
|
||
padding: 16px 14px;
|
||
width: 250px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
|
||
}
|
||
|
||
#gift-dialog-box h4 {
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
color: #336699;
|
||
margin: 0 0 3px;
|
||
}
|
||
|
||
#gift-item-name {
|
||
font-size: 11px;
|
||
color: #555;
|
||
display: block;
|
||
border-bottom: 1px dashed #cde;
|
||
padding-bottom: 6px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.gift-label {
|
||
font-size: 11px;
|
||
color: #555;
|
||
margin-bottom: 3px;
|
||
display: block;
|
||
}
|
||
|
||
.gift-input {
|
||
width: 100%;
|
||
border: 1px solid #aac;
|
||
border-radius: 4px;
|
||
padding: 5px 8px;
|
||
font-size: 12px;
|
||
box-sizing: border-box;
|
||
margin-bottom: 8px;
|
||
outline: none;
|
||
}
|
||
|
||
.gift-input:focus {
|
||
border-color: #336699;
|
||
}
|
||
|
||
.gift-hint {
|
||
font-size: 10px;
|
||
color: #999;
|
||
margin: -4px 0 8px;
|
||
display: block;
|
||
}
|
||
|
||
#gift-err {
|
||
color: #c00;
|
||
font-size: 10px;
|
||
margin-top: 4px;
|
||
min-height: 14px;
|
||
}
|
||
</style>
|
||
|
||
<div id="shop-modal" data-shop-items-url="{{ route('shop.items') }}" data-shop-buy-url="{{ route('shop.buy') }}"
|
||
data-shop-rename-url="{{ route('shop.rename') }}">
|
||
<div id="shop-modal-inner" style="position:relative;">
|
||
|
||
{{-- 标题栏 --}}
|
||
<div id="shop-modal-header">
|
||
<div id="shop-modal-title">🛍 道具商店</div>
|
||
<div id="shop-modal-jjb">💰 <strong id="shop-jjb">--</strong> 金币</div>
|
||
<span id="shop-week-badge"></span>
|
||
<span id="shop-modal-close" data-shop-modal-close>✕</span>
|
||
</div>
|
||
|
||
{{-- Toast --}}
|
||
<div id="shop-toast"></div>
|
||
|
||
{{-- 商品网格 --}}
|
||
<div id="shop-items-list">
|
||
<div style="grid-column:1/-1; text-align:center; color:#6366f1; padding:30px 0; font-size:13px;">加载中…</div>
|
||
</div>
|
||
|
||
{{-- 改名内嵌遮罩 --}}
|
||
<div id="shop-rename-overlay">
|
||
<div id="shop-rename-box">
|
||
<h4>🎭 使用改名卡</h4>
|
||
<input id="rename-input" type="text" maxlength="10" placeholder="输入新昵称（1-10字）">
|
||
<div class="rename-btn-row">
|
||
<button id="rename-confirm" data-shop-rename-confirm>确认改名</button>
|
||
<button id="rename-cancel" data-shop-rename-cancel>取消</button>
|
||
</div>
|
||
<div id="rename-err"></div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 送礼对话框：填写接收人 + 赠言 --}}
|
||
<div id="gift-dialog">
|
||
<div id="gift-dialog-box">
|
||
<h4>🎁 赠出单次特效卡</h4>
|
||
<span id="gift-item-name"></span>
|
||
<label class="gift-label">送给谁？</label>
|
||
<input id="gift-recipient" class="gift-input" type="text" maxlength="20"
|
||
placeholder="用户名（留空 = 全场可见）">
|
||
<span class="gift-hint">💡 留空表示所有人；购买者必定可见</span>
|
||
<label class="gift-label">说一句话（公屏发送）</label>
|
||
<input id="gift-message" class="gift-input" type="text" maxlength="50" placeholder="可不填，百字以内">
|
||
<div id="gift-err"></div>
|
||
<div class="rename-btn-row" style="margin-top:8px;">
|
||
<button data-shop-gift-confirm
|
||
style="flex:1;background:#336699;color:#fff;border:none;border-radius:4px;padding:7px;cursor:pointer;font-size:12px;font-weight:bold;">确认赠出</button>
|
||
<button data-shop-gift-cancel
|
||
style="flex:1;background:#eee;color:#555;border:1px solid #ccc;border-radius:4px;padding:7px;cursor:pointer;font-size:12px;">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 商店弹窗业务脚本已迁移到 resources/js/chat-room/shop-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; }
|
||
#vip-modal-inner { width:760px; max-width:96vw; max-height:90vh; background:#fff; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,.4); font-family:'Microsoft YaHei',SimSun,sans-serif; }
|
||
#vip-modal-header { background:linear-gradient(135deg,#1e293b,#334155); color:#fff; padding:12px 18px; display:flex; align-items:center; flex-shrink:0; }
|
||
|
||
.vip-tab-btn { background:rgba(255,255,255,.1); border:none; color:#cbd5e1; border-radius:8px; padding:6px 16px; font-size:13px; cursor:pointer; font-weight:bold; transition:all .2s; }
|
||
.vip-tab-btn.active { background:#f59e0b; color:#fff; box-shadow:0 2px 4px rgba(0,0,0,.1); }
|
||
|
||
.vip-view-pane { display:none; flex-direction:column; flex:1; overflow-y:auto; background:#f8fafc; padding:20px; }
|
||
.vip-view-pane.active { display:flex; }
|
||
|
||
/* 会员卡片 */
|
||
.vip-level-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:10px; transition:all .2s; position:relative; overflow:hidden; }
|
||
.vip-level-card.current { border-color:#f59e0b; background:#fffdf5; box-shadow:0 0 0 1px #f59e0b; }
|
||
.vip-level-badge { position:absolute; top:10px; right:10px; background:#f59e0b; color:#fff; font-size:10px; font-weight:bold; padding:2px 8px; border-radius:10px; }
|
||
|
||
/* 设置表单 */
|
||
.vip-setting-group { margin-bottom:15px; }
|
||
.vip-setting-label { display:block; font-size:13px; font-weight:bold; color:#475569; margin-bottom:6px; }
|
||
.vip-setting-input { width:100%; border:1px solid #cbd5e1; border-radius:8px; padding:10px 12px; font-size:13px; outline:none; transition:border-color .2s; background:#fff; }
|
||
.vip-setting-input:focus { border-color:#f59e0b; }
|
||
.vip-setting-textarea { min-height:80px; resize:vertical; }
|
||
|
||
.vip-btn-save { background:#1e293b; color:#fff; border:none; border-radius:8px; padding:10px 20px; font-size:13px; font-weight:bold; cursor:pointer; transition:opacity .2s; }
|
||
.vip-btn-save:hover { opacity:.9; }
|
||
|
||
/* 会员特权图标 */
|
||
.vip-feature-item { display:flex; align-items:center; gap:8px; font-size:12px; color:#64748b; }
|
||
.vip-feature-icon { color:#10b981; font-weight:bold; }
|
||
.vip-modal-close { cursor:pointer; font-size:24px; opacity:.7; transition:opacity .15s; }
|
||
.vip-modal-close:hover { opacity:1; }
|
||
</style>
|
||
|
||
<div id="vip-modal">
|
||
<div id="vip-modal-inner">
|
||
<div id="vip-modal-header">
|
||
<div style="font-size:16px; font-weight:bold; margin-right:24px;">👑 会员中心</div>
|
||
<div style="display:flex; gap:10px; flex:1;">
|
||
<button id="vip-tabbtn-center" class="vip-tab-btn active" data-vip-tab="center">会员中心</button>
|
||
<button id="vip-tabbtn-settings" class="vip-tab-btn" data-vip-tab="settings" style="display:none;">会员相关设置</button>
|
||
<button id="vip-tabbtn-logs" class="vip-tab-btn" data-vip-tab="logs">购买记录</button>
|
||
</div>
|
||
<span class="vip-modal-close" data-vip-modal-close>×</span>
|
||
</div>
|
||
|
||
{{-- 会员中心面板 --}}
|
||
<div id="vip-view-center" class="vip-view-pane active">
|
||
<div id="vip-status-bar" style="background:#fff; border:1px solid #fef3c7; border-radius:12px; padding:16px; margin-bottom:20px; display:flex; justify-content:space-between; align-items:center;">
|
||
<div>
|
||
<div style="font-size:12px; font-weight:bold; color:#b45309;">我的会员状态</div>
|
||
<div id="vip-current-name" style="font-size:18px; font-weight:900; color:#1e293b; margin-top:4px;">加载中...</div>
|
||
<div id="vip-expire-time" style="font-size:12px; color:#64748b; margin-top:4px;"></div>
|
||
</div>
|
||
<div style="text-align:right;">
|
||
<div style="font-size:12px; font-weight:bold; color:#059669;">累计已支付</div>
|
||
<div id="vip-total-amount" style="font-size:18px; font-weight:900; color:#064e3b; margin-top:4px;">¥0.00</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="font-size:14px; font-weight:bold; color:#1e293b; margin-bottom:12px;">会员等级列表</div>
|
||
<div id="vip-levels-grid" style="display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:15px;">
|
||
<!-- 动态渲染会员等级 -->
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 会员相关设置面板 --}}
|
||
<div id="vip-view-settings" class="vip-view-pane">
|
||
<div style="display:grid; grid-template-columns:1.2fr 0.8fr; gap:20px;">
|
||
<div>
|
||
<div style="background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:18px; margin-bottom:15px;">
|
||
<div style="display:flex; align-items:center; gap:10px; margin-bottom:15px;">
|
||
<div id="vip-theme-icon" style="width:40px; height:40px; background:#1e293b; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff;">✨</div>
|
||
<div>
|
||
<div style="font-size:12px; color:#64748b;">当前主题预览</div>
|
||
<div id="vip-theme-name" style="font-size:15px; font-weight:bold; color:#1e293b;">普通用户</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
|
||
<div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:12px;">
|
||
<div style="font-size:10px; font-weight:bold; color:#94a3b8; text-transform:uppercase;">入场特效</div>
|
||
<div id="vip-join-effect" style="font-size:14px; font-weight:bold; color:#1e293b; margin-top:4px;">无</div>
|
||
<div id="vip-join-banner" style="font-size:11px; color:#64748b; margin-top:4px;"></div>
|
||
</div>
|
||
<div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:12px;">
|
||
<div style="font-size:10px; font-weight:bold; color:#94a3b8; text-transform:uppercase;">离场特效</div>
|
||
<div id="vip-leave-effect" style="font-size:14px; font-weight:bold; color:#1e293b; margin-top:4px;">无</div>
|
||
<div id="vip-leave-banner" style="font-size:11px; color:#64748b; margin-top:4px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:#fffdf5; border:1px solid #fef3c7; border-radius:12px; padding:18px;">
|
||
<div style="font-size:13px; font-weight:bold; color:#b45309; margin-bottom:12px;">等级默认语句</div>
|
||
<div style="display:grid; gap:10px;">
|
||
<div style="background:#fff; border:1px solid #fef3c7; border-radius:10px; padding:12px;">
|
||
<div style="font-size:11px; font-weight:bold; color:#f59e0b;">默认欢迎语</div>
|
||
<div id="vip-default-join" style="font-size:12px; color:#475569; margin-top:6px; line-height:1.6;"></div>
|
||
</div>
|
||
<div style="background:#fff; border:1px solid #fef3c7; border-radius:10px; padding:12px;">
|
||
<div style="font-size:11px; font-weight:bold; color:#f59e0b;">默认离开语</div>
|
||
<div id="vip-default-leave" style="font-size:12px; color:#475569; margin-top:6px; line-height:1.6;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:18px;">
|
||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;">
|
||
<div style="font-size:15px; font-weight:bold; color:#1e293b;">我的个性化设置</div>
|
||
<span id="vip-customize-badge" style="font-size:10px; font-weight:bold; padding:2px 8px; border-radius:10px;"></span>
|
||
</div>
|
||
|
||
<div id="vip-customize-form" style="display:none;">
|
||
<div class="vip-setting-group">
|
||
<label class="vip-setting-label">入场特效选择</label>
|
||
<select id="vip-custom-join-effect" class="vip-setting-input">
|
||
<!-- 动态渲染 -->
|
||
</select>
|
||
</div>
|
||
<div class="vip-setting-group">
|
||
<label class="vip-setting-label">离场特效选择</label>
|
||
<select id="vip-custom-leave-effect" class="vip-setting-input">
|
||
<!-- 动态渲染 -->
|
||
</select>
|
||
</div>
|
||
<div class="vip-setting-group">
|
||
<label class="vip-setting-label">我的欢迎语</label>
|
||
<textarea id="vip-custom-join" class="vip-setting-input vip-setting-textarea" placeholder="例：{username} 闪耀登场..."></textarea>
|
||
<p style="font-size:10px; color:#94a3b8; margin-top:6px;">支持使用 {username} 占位符</p>
|
||
</div>
|
||
<div class="vip-setting-group">
|
||
<label class="vip-setting-label">我的离开语</label>
|
||
<textarea id="vip-custom-leave" class="vip-setting-input vip-setting-textarea" placeholder="例：{username} 优雅离场..."></textarea>
|
||
</div>
|
||
<button data-vip-save-presence class="vip-btn-save" style="width:100%;">保存我的专属设置</button>
|
||
</div>
|
||
|
||
<div id="vip-customize-notice" style="display:none; padding:15px; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:10px; font-size:12px; color:#64748b; line-height:1.8;">
|
||
<!-- 动态提示 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 购买记录面板 --}}
|
||
<div id="vip-view-logs" class="vip-view-pane">
|
||
<div style="overflow-x:auto;">
|
||
<table style="width:100%; border-collapse:collapse; font-size:12px;">
|
||
<thead>
|
||
<tr style="background:#f1f5f9; color:#475569; text-align:left;">
|
||
<th style="padding:10px; border-bottom:1px solid #e2e8f0;">订单号</th>
|
||
<th style="padding:10px; border-bottom:1px solid #e2e8f0;">等级</th>
|
||
<th style="padding:10px; border-bottom:1px solid #e2e8f0;">金额</th>
|
||
<th style="padding:10px; border-bottom:1px solid #e2e8f0;">状态</th>
|
||
<th style="padding:10px; border-bottom:1px solid #e2e8f0;">开通时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="vip-logs-body">
|
||
<!-- 动态渲染购买记录 -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- VIP 中心业务脚本已迁移到 resources/js/chat-room/vip-controls.js --}}
|
||
|
||
{{-- ═══════════ 婚姻状态弹窗 ═══════════ --}}
|
||
<style>
|
||
/* 婚姻弹窗选项卡按钮 */
|
||
.marriage-tab-btn {
|
||
background: rgba(255, 255, 255, .15);
|
||
border: none;
|
||
color: #fce7f3;
|
||
border-radius: 12px;
|
||
padding: 3px 12px;
|
||
font-size: 11px;
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
transition: all .2s;
|
||
}
|
||
|
||
.marriage-tab-btn.active {
|
||
background: #fff;
|
||
color: #be185d;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
|
||
}
|
||
|
||
/* 已婚列表项样式 */
|
||
.married-list-item {
|
||
background: #fff;
|
||
border: 1px solid #fce7f3;
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
transition: all .2s;
|
||
}
|
||
|
||
.married-list-item:hover {
|
||
border-color: #f43f5e;
|
||
box-shadow: 0 2px 8px rgba(190, 24, 93, .1);
|
||
}
|
||
|
||
.married-couple-info {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.married-user-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
width: 80px;
|
||
}
|
||
|
||
.married-user-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
border: 2px solid #fff;
|
||
box-shadow: 0 0 0 1px #fce7f3;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.married-user-name {
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.married-heart {
|
||
font-size: 20px;
|
||
color: #f43f5e;
|
||
animation: heartBeat 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes heartBeat {
|
||
0% { transform: scale(1); }
|
||
15% { transform: scale(1.2); }
|
||
30% { transform: scale(1); }
|
||
45% { transform: scale(1.1); }
|
||
100% { transform: scale(1); }
|
||
}
|
||
|
||
.married-meta-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 10px;
|
||
color: #999;
|
||
padding-top: 6px;
|
||
border-top: 1px dashed #fce7f3;
|
||
}
|
||
|
||
.married-intimacy {
|
||
color: #be185d;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|
||
|
||
<div id="marriage-status-modal"
|
||
style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
|
||
z-index:9999; justify-content:center; align-items:center;">
|
||
<div
|
||
style="background:#fff; border-radius:10px; width:380px; max-width:94vw;
|
||
box-shadow:0 12px 40px rgba(0,0,0,.3); overflow:hidden;
|
||
animation:gdSlideIn .18s ease; display:flex; flex-direction:column; max-height: 85vh;">
|
||
|
||
{{-- 标题栏 --}}
|
||
<div
|
||
style="background:linear-gradient(135deg,#be185d,#f43f5e,#ec4899);
|
||
color:#fff; padding:10px 16px;
|
||
display:flex; align-items:center; justify-content:space-between;">
|
||
<div style="display:flex; align-items:center; gap:12px;">
|
||
<span style="font-size:14px; font-weight:bold;">💍 婚姻系统</span>
|
||
<div style="display:flex; gap:6px;">
|
||
<button id="marriage-tabbtn-mine" class="marriage-tab-btn active" data-marriage-tab="mine">我的婚姻</button>
|
||
<button id="marriage-tabbtn-list" class="marriage-tab-btn" data-marriage-tab="list">已婚列表</button>
|
||
</div>
|
||
</div>
|
||
<span data-marriage-modal-close
|
||
style="cursor:pointer; font-size:18px; opacity:.8; line-height:1;">✕</span>
|
||
</div>
|
||
|
||
{{-- 我的婚姻 面板 --}}
|
||
<div id="marriage-view-mine" style="display:flex; flex-direction:column; flex:1; overflow:hidden;">
|
||
<div id="marriage-status-body" style="padding:16px; min-height:120px;">
|
||
<div style="text-align:center; color:#aaa; padding:30px 0; font-size:12px;">加载中…</div>
|
||
</div>
|
||
<div id="marriage-status-footer" style="padding:0 16px 16px; display:flex; gap:8px;"></div>
|
||
</div>
|
||
|
||
{{-- 已婚列表 面板 --}}
|
||
<div id="marriage-view-list" style="display:none; flex-direction:column; flex:1; overflow:hidden; background: #fffafb;">
|
||
<div id="married-list-container" style="padding:12px; flex:1; overflow-y:auto;">
|
||
<div style="text-align:center; color:#aaa; padding:30px 0; font-size:12px;">加载中…</div>
|
||
</div>
|
||
<div id="married-list-pagination" style="padding:10px 16px; border-top:1px solid #fce7f3; display:flex; justify-content:space-between; align-items:center; font-size:11px;">
|
||
<button data-marriage-page-delta="-1" id="married-prev-btn" style="border:1px solid #fbcfe8; background:#fff; color:#be185d; padding:2px 8px; border-radius:4px; cursor:pointer;">上一页</button>
|
||
<span id="married-page-info" style="color:#be185d; font-weight:bold;">1 / 1</span>
|
||
<button data-marriage-page-delta="1" id="married-next-btn" style="border:1px solid #fbcfe8; background:#fff; color:#be185d; padding:2px 8px; border-radius:4px; cursor:pointer;">下一页</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 婚姻状态弹窗业务脚本已迁移到 resources/js/chat-room/marriage-status.js --}}
|
||
|
||
{{-- ═══════════ 银行弹窗 ═══════════ --}}
|
||
<style>
|
||
/* 银行弹窗遮罩 */
|
||
#bank-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9999; justify-content:center; align-items:center; }
|
||
/* 弹窗主体 */
|
||
#bank-modal-inner { width:520px; max-width:96vw; max-height:88vh; background:#fff; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 8px 32px rgba(0,0,0,.3); font-family:'Microsoft YaHei',SimSun,sans-serif; }
|
||
/* 头部 */
|
||
#bank-modal-header { background:linear-gradient(135deg,#336699,#5a8fc0); color:#fff; padding:10px 16px; display:flex; align-items:center; flex-shrink:0; }
|
||
|
||
/* Tabs */
|
||
.bank-tab-btn { background:rgba(255,255,255,.15); border:none; color:#d0e8ff; border-radius:15px; padding:4px 14px; font-size:12px; cursor:pointer; font-weight:bold; transition:all .2s; }
|
||
.bank-tab-btn.active { background:#fff; color:#336699; box-shadow:0 2px 4px rgba(0,0,0,.1); }
|
||
|
||
/* 包含容器 */
|
||
.bank-view-pane { display:flex; flex-direction:column; flex:1; overflow:hidden; background:#f6faff; }
|
||
|
||
/* 余额卡片 */
|
||
.bank-balance-card { flex:1; background:#fff; border:1px solid #d0e4f5; border-radius:6px; padding:12px 14px; text-align:center; transition:box-shadow .2s; }
|
||
.bank-balance-card:hover { box-shadow:0 2px 8px rgba(51,102,153,.1); }
|
||
.bank-bcard-title { font-size:12px; margin-bottom:6px; }
|
||
.bank-bcard-val { font-size:20px; font-weight:bold; }
|
||
|
||
/* 操作区 */
|
||
.bank-op-row { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
|
||
.bank-op-label { font-size:12px; font-weight:bold; width:44px; }
|
||
.bank-op-input { flex:1; height:34px; padding:0 10px; border:1px solid #b0d0ee; border-radius:4px; font-size:13px; outline:none; transition:border-color .2s; }
|
||
.bank-op-input:focus { border-color:#336699; }
|
||
.bank-op-btn { height:34px; padding:0 20px; color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:13px; font-weight:bold; transition:opacity .2s; }
|
||
.bank-op-btn:hover { opacity:.85; }
|
||
.bank-op-btn:disabled { opacity:.5; cursor:not-allowed; }
|
||
|
||
/* 流水列表 */
|
||
.bank-log-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed #d0e4f5; font-size:12px; }
|
||
.bank-log-item:last-child { border-bottom:none; }
|
||
.bank-log-deposit { color:#16a34a; font-weight:bold; }
|
||
.bank-log-withdraw { color:#0891b2; font-weight:bold; }
|
||
|
||
/* 排行榜单项 */
|
||
.bank-rank-item { background:#fff; border:1px solid #d0e4f5; border-radius:6px; padding:10px 14px; display:flex; align-items:center; gap:12px; font-size:13px; margin-bottom:8px; transition:border-color .2s; }
|
||
.bank-rank-item:hover { border-color:#336699; box-shadow:0 2px 8px rgba(51,102,153,.1); }
|
||
.bank-rank-num { font-size:18px; font-weight:bold; font-style:italic; width:30px; text-align:center; color:#9db3d4; }
|
||
.bank-rank-top1 { color:#fbbf24; }
|
||
.bank-rank-top2 { color:#9ca3af; }
|
||
.bank-rank-top3 { color:#b45309; }
|
||
.bank-rank-val { margin-left:auto; font-weight:bold; color:#0891b2; display:flex; align-items:center; gap:4px; }
|
||
.bank-modal-close { cursor:pointer; font-size:20px; opacity:.8; transition:opacity .15s; }
|
||
.bank-modal-close:hover { opacity:1; }
|
||
</style>
|
||
|
||
<div id="bank-modal">
|
||
<div id="bank-modal-inner">
|
||
{{-- 标题栏 --}}
|
||
<div id="bank-modal-header">
|
||
<div style="font-size:15px; font-weight:bold; margin-right:20px;">🏦 金币银行</div>
|
||
{{-- Tabs --}}
|
||
<div style="display:flex; gap:10px; flex:1;">
|
||
<button id="bank-tabbtn-account" class="bank-tab-btn active" data-bank-tab="account">我的账户</button>
|
||
<button id="bank-tabbtn-ranking" class="bank-tab-btn" data-bank-tab="ranking">存款排行</button>
|
||
</div>
|
||
<span class="bank-modal-close" data-bank-modal-close>×</span>
|
||
</div>
|
||
|
||
{{-- 我的账户 面板 --}}
|
||
<div id="bank-view-account" class="bank-view-pane" style="display:flex;">
|
||
{{-- 余额展示 --}}
|
||
<div style="display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid #d0e4f5; background:#fff;">
|
||
<div class="bank-balance-card" style="border-left:4px solid #3b82f6;">
|
||
<div class="bank-bcard-title" style="color:#3b82f6;">💰 流通金币</div>
|
||
<div class="bank-bcard-val" style="color:#1d4ed8;" id="bank-jjb-display">—</div>
|
||
</div>
|
||
<div class="bank-balance-card" style="border-left:4px solid #0891b2;">
|
||
<div class="bank-bcard-title" style="color:#0891b2;">🏦 银行存款</div>
|
||
<div class="bank-bcard-val" style="color:#164e63;" id="bank-bank-display">—</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 操作区 --}}
|
||
<div style="padding:14px 16px; border-bottom:1px solid #d0e4f5; background:#fff;">
|
||
<div class="bank-op-row">
|
||
<span class="bank-op-label" style="color:#3b82f6;">存 入</span>
|
||
<input type="number" id="bank-deposit-input" class="bank-op-input" min="1" placeholder="输入你想存入银行的金币数量...">
|
||
<button id="bank-deposit-btn" class="bank-op-btn" style="background:linear-gradient(135deg,#3b82f6,#60a5fa);" data-bank-action="deposit">确认存入</button>
|
||
</div>
|
||
<div class="bank-op-row" style="margin-bottom:0;">
|
||
<span class="bank-op-label" style="color:#0891b2;">取 出</span>
|
||
<input type="number" id="bank-withdraw-input" class="bank-op-input" min="1" placeholder="输入你想从银行取回的金币数量...">
|
||
<button id="bank-withdraw-btn" class="bank-op-btn" style="background:linear-gradient(135deg,#0891b2,#22d3ee);" data-bank-action="withdraw">确认取出</button>
|
||
</div>
|
||
<div id="bank-op-msg" style="display:none; text-align:center; font-size:12px; font-weight:bold; padding:8px 10px; border-radius:6px; margin-top:12px;"></div>
|
||
</div>
|
||
|
||
{{-- 流水记录 --}}
|
||
<div style="padding:8px 16px; font-size:12px; font-weight:bold; color:#336699; background:#fff; border-bottom:1px solid #e0ecf8;">
|
||
📝 最近资金流水
|
||
</div>
|
||
<div id="bank-logs-list" style="flex:1; overflow-y:auto; padding:10px 16px;">
|
||
<div style="text-align:center; color:#9db3d4; font-size:12px; padding:30px 0;">加载中...</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 存款排行 面板 --}}
|
||
<div id="bank-view-ranking" class="bank-view-pane" style="display:none;">
|
||
<div style="padding:10px 16px; border-bottom:1px solid #d0e4f5; display:flex; justify-content:space-between; align-items:center; background:#fff;">
|
||
<div style="font-size:13px; color:#336699; font-weight:bold;">🏆 全站存款排行榜</div>
|
||
<button data-bank-rank-sort id="bank-rank-sort-btn" style="background:#f0f6ff; border:1px solid #b0d0ee; color:#336699; padding:4px 12px; border-radius:15px; font-size:12px; cursor:pointer; font-weight:bold; transition:background .2s;">
|
||
降序 ↓
|
||
</button>
|
||
</div>
|
||
|
||
<div id="bank-ranking-list" style="flex:1; overflow-y:auto; padding:12px 16px;">
|
||
<div style="text-align:center; color:#9db3d4; font-size:12px; padding:30px 0;">加载中...</div>
|
||
</div>
|
||
|
||
{{-- 分页控件 --}}
|
||
<div style="padding:10px 16px; border-top:1px solid #d0e4f5; background:#fff; display:flex; justify-content:space-between; align-items:center;">
|
||
<button class="bank-tab-btn" id="bank-rank-prev" data-bank-rank-page-delta="-1" style="color:#336699; border:1px solid #b0d0ee; background:#fff; font-weight:normal;">上一页</button>
|
||
<div id="bank-rank-page-info" style="font-size:12px; color:#666; font-weight:bold;">1 / 1</div>
|
||
<button class="bank-tab-btn" id="bank-rank-next" data-bank-rank-page-delta="1" style="color:#336699; border:1px solid #b0d0ee; background:#fff; font-weight:normal;">下一页</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|