UI: 商店面板重新设计——紧凑卡片、渐变配色、悬浮特效、绝对定位适配窄侧边栏

2026-02-27 16:02:22 +08:00
parent 7fb86bfe21
commit 9c8f7b1a95
2 changed files with 342 additions and 105 deletions
@@ -27,21 +27,19 @@

    // ── Tab 切换 ──────────────────────────────────────
    function switchTab(tab) {
-        // 所有内容面板（名单/房间/贴图/酷库 用 block，商店用 flex）
+        // 所有内容面板（名单/房间/贴图/酷库 用 block，商店用 flex absolute 覆盖）
        ['users', 'rooms', 'emoji', 'action'].forEach(t => {
            document.getElementById('panel-' + t).style.display = t === tab ? 'block' : 'none';
            document.getElementById('tab-' + t).classList.toggle('active', t === tab);
        });
-        // 商店面板单独处理（flex 布局以支持内部滚动）
+        // 商店面板：absolute 定位覆盖，display flex/none 切换
        const shopPanel = document.getElementById('shop-panel');
        const shopTab = document.getElementById('tab-shop');
        if (shopPanel && shopTab) {
            shopPanel.style.display = tab === 'shop' ? 'flex' : 'none';
-            shopPanel.style.flexDirection = 'column';
-            shopPanel.style.height = '100%';
            shopTab.classList.toggle('active', tab === 'shop');
        }
-        // 贴图 Tab 懒加载：首次切换时将 data-src 赋值到 src
+        // 贴图 Tab 懒加载
        if (tab === 'emoji') {
            document.querySelectorAll('#panel-emoji img[data-src]').forEach(img => {
                img.src = img.dataset.src;