UI: 进一步优化财富资产布局显示,并开放支持双击查看自己的名片
This commit is contained in:
@@ -52,7 +52,6 @@
|
||||
* 通过 Alpine.js 的 fetchUser 方法加载用户资料并显示弹窗。
|
||||
*/
|
||||
function openUserCard(username) {
|
||||
if (username === window.chatContext.username) return;
|
||||
const el = document.getElementById('user-modal-container');
|
||||
if (el) {
|
||||
const data = Alpine.$data(el);
|
||||
@@ -333,20 +332,24 @@
|
||||
|
||||
{{-- 详细信息区 (等级高看等级低,或自己看自己时才有这些字段) --}}
|
||||
<div x-show="userInfo.exp_num !== undefined"
|
||||
style="margin-top: 12px; padding: 12px; background: linear-gradient(to right, #f8fafc, #f1f5f9); border-radius: 8px; font-size: 13px; color: #475569; display: flex; justify-content: space-around; align-items: center; border: 1px solid #e2e8f0;">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
|
||||
<span style="color: #64748b; font-size: 11px;">经验</span>
|
||||
style="margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
|
||||
<!-- 经验 -->
|
||||
<div
|
||||
style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
||||
<span style="color: #64748b; font-size: 11px; margin-bottom: 4px;">经验</span>
|
||||
<span x-text="userInfo.exp_num"
|
||||
style="font-weight: 700; color: #4f46e5; font-size: 15px;"></span>
|
||||
</div>
|
||||
<div style="width: 1px; height: 24px; background-color: #cbd5e1;"></div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
|
||||
<span style="color: #64748b; font-size: 11px;">金币</span>
|
||||
<!-- 金币 -->
|
||||
<div
|
||||
style="background: #fdfae8; border: 1px solid #fef08a; border-radius: 8px; padding: 10px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
||||
<span style="color: #b45309; font-size: 11px; margin-bottom: 4px;">金币</span>
|
||||
<span x-text="userInfo.jjb" style="font-weight: 700; color: #d97706; font-size: 15px;"></span>
|
||||
</div>
|
||||
<div style="width: 1px; height: 24px; background-color: #cbd5e1;"></div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
|
||||
<span style="color: #64748b; font-size: 11px;">魅力</span>
|
||||
<!-- 魅力 -->
|
||||
<div
|
||||
style="background: #fdf2f8; border: 1px solid #fbcfe8; border-radius: 8px; padding: 10px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
||||
<span style="color: #be185d; font-size: 11px; margin-bottom: 4px;">魅力</span>
|
||||
<span x-text="userInfo.meili" style="font-weight: 700; color: #db2777; font-size: 15px;"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user