yoe-shop-web/src/views/home/index-dataDiy.vue

<template>
  <div class="jd-app" :class="{ 'expanded': !isSidebarCollapsed }">
    <!-- 👑 殿堂级左侧主导航抽屉栏 (折叠/展开动画) -->
    <div class="left-sidebar" :class="{ 'collapsed': isSidebarCollapsed }">
      <!-- 控制项：展开/收起 -->
      <div class="sidebar-item ctrl-item" @click="isSidebarCollapsed = !isSidebarCollapsed">
        <div class="item-icon-wrapper">
          <svg class="s-icon ctrl-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" />
          </svg>
        </div>
        <span class="item-text">{{ isSidebarCollapsed ? '展开' : '收起' }}</span>
      </div>

      <!-- 菜单项列表 -->
      <div class="sidebar-menu-list">
        <!-- 首页 (无子菜单) -->
        <div class="sidebar-item active">
          <div class="item-icon-wrapper">
            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke-linecap="round" stroke-linejoin="round" />
              <polyline points="9 22 9 12 15 12 15 22" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <span class="item-text">首页</span>
        </div>

        <!-- 工作台 (无子菜单) -->
        <div class="sidebar-item">
          <div class="item-icon-wrapper">
            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="2" y="3" width="20" height="14" rx="2" stroke-linecap="round" stroke-linejoin="round" />
              <line x1="8" y1="21" x2="16" y2="21" stroke-linecap="round" />
              <line x1="12" y1="17" x2="12" y2="21" stroke-linecap="round" />
            </svg>
          </div>
          <span class="item-text">{{ isSidebarCollapsed ? '工作台' : '采购工作台' }}</span>
        </div>

        <!-- 采购单管理 -->
        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.purchase }" @click="toggleMenu('purchase')">
          <div class="item-icon-wrapper">
            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M9 11l3 3L22 4" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <span class="item-text">{{ isSidebarCollapsed ? '采购单' : '采购单管理' }}</span>
          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="6 9 12 15 18 9" />
          </svg>

          <!-- 窄栏折叠悬停二级菜单 (通用 absolute 气泡弹出，完美卡合在对应项右侧) -->
          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
            <div class="sub-item">
              我的购物车
              <span class="cart-badge">1</span>
            </div>
            <div class="sub-item">我的采购单</div>
            <div class="sub-item">清单选品</div>
            <div class="sub-item">我的收藏</div>
          </div>
        </div>
        <!-- 二级子菜单 -->
        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.purchase }">
          <div class="sub-item">
            我的购物车
            <span class="cart-badge">1</span>
          </div>
          <div class="sub-item">我的采购单</div>
          <div class="sub-item">清单选品</div>
          <div class="sub-item">我的收藏</div>
        </div>

        <!-- 非招标采购 -->
        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.nonTender }" @click="toggleMenu('nonTender')">
          <div class="item-icon-wrapper">
            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="3" y="7" width="18" height="13" rx="2" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M20 7h-9M14 3L7 21" stroke-linecap="round" />
            </svg>
          </div>
          <span class="item-text">非招标采购</span>
          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="6 9 12 15 18 9" />
          </svg>

          <!-- 折叠悬停二级菜单 -->
          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
            <div class="sub-item">竞价采购</div>
          </div>
        </div>
        <!-- 二级子菜单 -->
        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.nonTender }">
          <div class="sub-item">竞价采购</div>
        </div>

        <!-- 订单管理 -->
        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.order }" @click="toggleMenu('order')">
          <div class="item-icon-wrapper">
            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-linecap="round" stroke-linejoin="round" />
              <polyline points="14 2 14 8 20 8" stroke-linecap="round" stroke-linejoin="round" />
              <line x1="16" y1="13" x2="8" y2="13" stroke-linecap="round" />
              <line x1="16" y1="17" x2="8" y2="17" stroke-linecap="round" />
            </svg>
          </div>
          <span class="item-text">{{ isSidebarCollapsed ? '订单' : '订单管理' }}</span>
          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="6 9 12 15 18 9" />
          </svg>

          <!-- 折叠悬停二级菜单 -->
          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
            <div class="sub-item">我的订单</div>
            <div class="sub-item">订单打印</div>
          </div>
        </div>
        <!-- 二级子菜单 -->
        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.order }">
          <div class="sub-item">我的订单</div>
          <div class="sub-item">订单打印</div>
        </div>

        <!-- 发票管理 -->
        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.invoice }" @click="toggleMenu('invoice')">
          <div class="item-icon-wrapper">
            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="2" y="4" width="20" height="16" rx="2" stroke-linecap="round" stroke-linejoin="round" />
              <line x1="12" y1="4" x2="12" y2="20" stroke-linecap="round" />
              <line x1="2" y1="12" x2="22" y2="12" stroke-linecap="round" />
            </svg>
          </div>
          <span class="item-text">{{ isSidebarCollapsed ? '发票' : '发票管理' }}</span>
          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="6 9 12 15 18 9" />
          </svg>

          <!-- 折叠悬停二级菜单 -->
          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
            <div class="sub-item">普票抬头管理</div>
            <div class="sub-item">开具发票</div>
          </div>
        </div>
        <!-- 二级子菜单 -->
        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.invoice }">
          <div class="sub-item">普票抬头管理</div>
          <div class="sub-item">开具发票</div>
        </div>

        <!-- 售后管理 -->
        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.afterSale }" @click="toggleMenu('afterSale')">
          <div class="item-icon-wrapper">
            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <span class="item-text">{{ isSidebarCollapsed ? '售后' : '售后管理' }}</span>
          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="6 9 12 15 18 9" />
          </svg>

          <!-- 折叠悬停二级菜单 -->
          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
            <div class="sub-item">退换货</div>
            <div class="sub-item">售后记录</div>
          </div>
        </div>
        <!-- 二级子菜单 -->
        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.afterSale }">
          <div class="sub-item">退换货</div>
          <div class="sub-item">售后记录</div>
        </div>

        <!-- 财务管理 -->
        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.finance }" @click="toggleMenu('finance')">
          <div class="item-icon-wrapper">
            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="10" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M12 8V16M8 12h8" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <span class="item-text">{{ isSidebarCollapsed ? '财务' : '财务管理' }}</span>
          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="6 9 12 15 18 9" />
          </svg>

          <!-- 折叠悬停二级菜单 -->
          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
            <div class="sub-item">结算中心</div>
            <div class="sub-item">自助认款</div>
            <div class="sub-item">合并支付</div>
            <div class="sub-item">企业结算</div>
            <div class="sub-item">企业金采</div>
            <div class="sub-item">金采报销</div>
            <div class="sub-item">商家结算</div>
            <div class="sub-item">我的余额</div>
          </div>
        </div>
        <!-- 二级子菜单 -->
        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.finance }">
          <div class="sub-item">结算中心</div>
          <div class="sub-item">自助认款</div>
          <div class="sub-item">合并支付</div>
          <div class="sub-item">企业结算</div>
          <div class="sub-item">企业金采</div>
          <div class="sub-item">金采报销</div>
          <div class="sub-item">商家结算</div>
          <div class="sub-item">我的余额</div>
        </div>

        <!-- 数据中心 -->
        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.dataCenter }" @click="toggleMenu('dataCenter')">
          <div class="item-icon-wrapper">
            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="20" x2="18" y2="10" stroke-linecap="round" stroke-linejoin="round" />
              <line x1="12" y1="20" x2="12" y2="4" stroke-linecap="round" stroke-linejoin="round" />
              <line x1="6" y1="20" x2="6" y2="14" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <span class="item-text">{{ isSidebarCollapsed ? '数据' : '数据中心' }}</span>
          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="6 9 12 15 18 9" />
          </svg>

          <!-- 折叠悬停二级菜单 -->
          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
            <div class="sub-item">下载中心</div>
            <div class="sub-item">数据报表</div>
            <div class="sub-item">明细数据报表</div>
          </div>
        </div>
        <!-- 二级子菜单 -->
        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.dataCenter }">
          <div class="sub-item">下载中心</div>
          <div class="sub-item">数据报表</div>
          <div class="sub-item">明细数据报表</div>
        </div>

        <!-- 地址管理 -->
        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.address }" @click="toggleMenu('address')">
          <div class="item-icon-wrapper">
            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" stroke-linecap="round" stroke-linejoin="round" />
              <circle cx="12" cy="10" r="3" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <span class="item-text">{{ isSidebarCollapsed ? '地址' : '地址管理' }}</span>
          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="6 9 12 15 18 9" />
          </svg>

          <!-- 折叠悬停二级菜单 -->
          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
            <div class="sub-item">我的地址</div>
          </div>
        </div>
        <!-- 二级子菜单 -->
        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.address }">
          <div class="sub-item">我的地址</div>
        </div>

        <!-- 账号安全 -->
        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.security }" @click="toggleMenu('security')">
          <div class="item-icon-wrapper">
            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <span class="item-text">{{ isSidebarCollapsed ? '安全' : '账号安全' }}</span>
          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="6 9 12 15 18 9" />
          </svg>

          <!-- 折叠悬停二级菜单 -->
          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
            <div class="sub-item">账号设置</div>
            <div class="sub-item">绑定员工</div>
          </div>
        </div>
        <!-- 二级子菜单 -->
        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.security }">
          <div class="sub-item">账号设置</div>
          <div class="sub-item">绑定员工</div>
        </div>
      </div>
    </div>

    <!-- 👑 殿堂级右侧悬浮挂条 -->
    <div class="right-toolbar">
      <!-- 采购单 (悬停时呈现为纯大红背景 58x58，图2完美复刻) -->
      <div class="toolbar-item selection-item">
        <!-- 购物车微型数字红圈角标 -->
        <div class="cart-badge">5</div>
        <div class="toolbar-icon-wrapper">
          <svg class="t-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="9" cy="21" r="1" />
            <circle cx="20" cy="21" r="1" />
            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
          </svg>
        </div>
        <span class="toolbar-text">采购单</span>
      </div>

      <!-- 企业消息 (悬停时呈现为纯大红背景 58x58，图3完美复刻) -->
      <div class="toolbar-item msg-item">
        <div class="toolbar-icon-wrapper">
          <svg class="t-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
        <span class="toolbar-text">消息</span>
      </div>

      <!-- 我的客服 (悬停时呈现为纯大红背景 58x58，并向左滑出精致气泡面板，图4完美复刻) -->
      <div class="toolbar-item service-item">
        <div class="toolbar-icon-wrapper">
          <svg class="t-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
            <circle cx="12" cy="7" r="4" />
          </svg>
        </div>
        <span class="toolbar-text">客服</span>

        <!-- 👑 精致高保真客服浮空对话框 (图4一比一完美复刻) -->
        <div class="service-popover">
          <div class="pop-title">企业采购在线客服</div>
          <div class="pop-action">
            <svg class="pop-chat-icon" viewBox="0 0 24 24" fill="currentColor">
              <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z" />
            </svg>
            点击咨询
          </div>
        </div>
      </div>

      <!-- 回到顶部 (悬停时呈现为纯大红背景 58x58，图5完美复刻) -->
      <div class="toolbar-item back-top-item" @click="scrollToTop">
        <div class="toolbar-icon-wrapper" style="margin-bottom: 0 !important; height: 18px">
          <svg class="t-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <polyline points="18 15 12 9 6 15" />
          </svg>
        </div>
      </div>
    </div>

    <!-- 1. 顶部 Header (Logo, 搜索) -->
    <JDHeader :userInfo="userInfo" />

    <!-- 2. 核心 Banner 区域 -->
    <section class="banner-area w">
      <!-- 右侧主内容区域，霸占 1600px 全宽 -->
      <div class="banner-layout flex">
        <!-- 左侧大列 (导航 + 分类与广告) -->
        <div class="main-column flex-1 flex-column">
          <!-- 顶部的导航条 (尺寸为1040*48px，采用图2的简洁横向设计) -->
          <div class="nav-bar">
            <!-- 左滑按钮 -->
            <button v-show="showLeftNavBtn" class="nav-scroll-btn left-btn" @click="scrollNav('left')">
              <svg viewBox="0 0 24 24" class="scroll-arrow">
                <path d="M15 19l-7-7 7-7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </button>
            <div class="nav-bar-scroll-wrapper" ref="navScrollRef" @scroll="checkNavScroll">
              <ul class="nav-list">
                <template v-for="(item, index) in navItems" :key="index">
                  <li :class="{ active: index === 0 }" @click="onPath(item.linkUrl)">
                    {{ item.title }}
                  </li>
                  <span class="nav-divider" v-if="Number(index) < navItems.length - 1">|</span>
                </template>
              </ul>
            </div>
            <!-- 右滑按钮 -->
            <button v-show="showRightNavBtn" class="nav-scroll-btn right-btn" @click="scrollNav('right')">
              <svg viewBox="0 0 24 24" class="scroll-arrow">
                <path d="M9 5l7 7-7 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </button>
          </div>

          <!-- 下方：分类与广告栏并排 -->
          <div class="banner-bottom flex flex-1">
            <!-- 左侧分类菜单 (常驻显示，尺寸不变) -->
            <aside class="side-category">
              <JDCategory />
            </aside>

            <!-- 右侧广告组合 -->
            <div class="ad-group flex-1">
              <JDBannerCards />
            </div>
          </div>
        </div>

        <!-- 右侧大列：高奢重构两段式布局 (281 * 400px，分为上下两个部分，中间间隔 16px) -->
        <div class="user-sidebar">
          <JDUserPanel :userInfo="userInfo" />
          <div class="purchase-classroom">
            <div class="classroom-header">
              <span class="classroom-title">采购课堂</span>
              <span class="classroom-more">查看全部</span>
            </div>
            <div class="classroom-content">
              <div class="classroom-time">
                <span class="c-year">2026年</span>
                <span class="c-week">第 21 周</span>
              </div>
              <div class="classroom-info">
                <p class="c-desc">防洪防汛特辑 | 工厂园区篇</p>
              </div>
              <div class="classroom-cover">
                <img src="@/assets/data/classroom_cover.png" alt="课程封面" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 3. 下方模块 -->
    <JDSceneRed />
    <JDProducts />
  </div>
</template>

<script setup lang="ts">
import JDHeader from '@/views/home/datacomponents/JDHeader.vue';
import JDCategory from '@/views/home/datacomponents/JDCategory.vue';
import JDBannerCards from '@/views/home/datacomponents/JDBannerCards.vue';
import JDUserPanel from '@/views/home/datacomponents/JDUserPanel.vue';
import JDSceneRed from '@/views/home/datacomponents/JDSceneRed.vue';
import JDProducts from '@/views/home/datacomponents/JDProducts.vue';
import '@/views/home/datacomponents/jd-repro.css';
import { headerCategoryList } from '@/api/home/index-data';
import { getInfo } from '@/api/login';
import { computed } from 'vue';
import { onPath } from '@/utils/siteConfig';

const userInfo = ref<any>({});
getInfo().then((res) => {
  if (res.code == 200) {
    userInfo.value = res.data;
  }
});

const navItems = ref<any>([]);
headerCategoryList({}).then((res) => {
  if (res.code == 200) {
    document.documentElement.style.setProperty('--hover-data3', res.rows.length > 0 ? res.rows[0].headerThemeColor || '#E7000B' : '#E7000B');
    navItems.value = res.rows;
  }
});

const isSidebarCollapsed = ref(true);

// 一二级子菜单的高保真展开折叠状态管理 (默认展开图2、图3中所有可展开的项，且地址、账号默认关闭符合图2初始态)
const openMenus = ref({
  purchase: true, // 采购单管理，默认展开
  nonTender: false, // 非招标采购，默认闭合 (图2为闭合，小箭头向下)
  order: true, // 订单管理，默认展开
  invoice: true, // 发票管理，默认展开
  afterSale: true, // 售后管理，默认展开
  finance: true, // 财务管理，默认展开
  dataCenter: true, // 数据中心，默认展开
  address: false, // 地址管理，图2为闭合，图3为展开
  security: false // 账号安全，图2为闭合，图3为展开
});

// 通用子菜单展开/闭合切换处理器，带窄栏时自动展宽逻辑
const toggleMenu = (key) => {
  if (isSidebarCollapsed.value) {
    isSidebarCollapsed.value = false;
    openMenus.value[key] = true;
  } else {
    openMenus.value[key] = !openMenus.value[key];
  }
};

// 完美向后兼容原先对采购单管理展开状态的引用
const isPurchaseMenuOpen = computed(() => openMenus.value.purchase);
const handlePurchaseClick = () => toggleMenu('purchase');

const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

const isLargeScreen = ref(window.innerWidth >= 1600);
const adHovered = ref(false);
const check = () => {
  isLargeScreen.value = window.innerWidth >= 1600;
};

const navScrollRef = ref(null);
const showLeftNavBtn = ref(false);
const showRightNavBtn = ref(false);

const checkNavScroll = () => {
  if (!navScrollRef.value) return;
  const { scrollLeft, scrollWidth, clientWidth } = navScrollRef.value;
  showLeftNavBtn.value = scrollLeft > 5;
  showRightNavBtn.value = scrollWidth - clientWidth - scrollLeft > 5;
};

const scrollNav = (direction) => {
  if (!navScrollRef.value) return;
  const amount = 200;
  if (direction === 'left') {
    navScrollRef.value.scrollLeft -= amount;
  } else {
    navScrollRef.value.scrollLeft += amount;
  }
  setTimeout(checkNavScroll, 300);
};

const showSceneCat = ref(false);

onMounted(() => {
  window.addEventListener('resize', check);
  window.addEventListener('resize', checkNavScroll);
  setTimeout(checkNavScroll, 100);
});
onUnmounted(() => {
  window.removeEventListener('resize', check);
  window.removeEventListener('resize', checkNavScroll);
});
</script>

<style scoped>
/* ==================== 💎 全局版心控制 (最小 1072px 宽度，最大 1600px 宽度) ==================== */
.w {
  width: calc(100% - 180px) !important;
  max-width: 1600px !important;
  min-width: 1072px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.jd-app {
  width: 100%;
  background: #f8f8f8;
  min-height: 100vh;
  padding-left: 0 !important; /* 彻底不占用右侧适配宽度空间，保持右侧主体版心完全垂直居中 */
  box-sizing: border-box;
}

.jd-app.expanded {
  padding-left: 0 !important;
}

/* ==================== 👑 左侧主导航抽屉栏样式 ==================== */
.left-sidebar {
  position: fixed;
  left: 0;
  top: 44px; /* 完美贴紧 44px 顶栏下沿，吸顶固定 */
  height: calc(100vh - 44px);
  width: 150px !important; /* 展开宽度锁定为 150px */
  background: #fafafa;
  border-right: 1px solid #eaeaea;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-top: 10px; /* 顶部保留微小精致间距，让展开顶格展示 */
}

.left-sidebar.collapsed {
  width: 54px !important; /* 折叠宽度锁定为 54px */
  overflow: visible !important;
}

/* 顶部控制栏 */
.ctrl-item {
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 8px;
  cursor: pointer;
}
.ctrl-item:hover .ctrl-icon {
  transform: rotate(90deg);
}
.ctrl-icon {
  transition: transform 0.3s ease;
}

/* 通用项 (展开状态下一级菜单) */
.sidebar-item {
  height: 40px !important; /* 展开状态下主菜单单项高度设为 40px */
  padding: 0 12px !important; /* 缩减 padding 以适配 150px 的精致宽度 */
  display: flex;
  align-items: center;
  color: #333333 !important; /* 一级菜单默认字体颜色为高级深黑 (图2) */
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  box-sizing: border-box;
  margin: 2px 8px !important; /* 背景高亮内缩，留出精致边距 (一比一图2) */
  border-radius: 6px !important; /* 精致圆角高亮，拒绝生硬直角 */
}

.left-sidebar.collapsed .sidebar-item {
  height: 52px !important; /* 折叠状态下，为 54px 宽度匹配更紧致的 52px 高度 */
  padding: 0 !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 46px !important; /* 窄栏下宽度稍内缩，以匹配 margin */
  margin: 3px 4px !important; /* 折叠下精致间距 */
  border-radius: 6px !important;
}

/* 图标容器 (高度统一的淡橘红色) */
.item-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 8px !important; /* 缩短图标与文字间距 */
  color: #ef5350 !important; /* 默认一级菜单图标采用高度一致、极其精致的定制红粉色 (图2) */
  transition: color 0.2s ease;
}
.left-sidebar.collapsed .item-icon-wrapper {
  margin-right: 0 !important;
  margin-bottom: 3px !important;
  color: #ef5350 !important;
}

.s-icon {
  width: 18px;
  height: 18px;
}

/* 文字 */
.item-text {
  font-size: 14px !important; /* 主菜单文字大小锁定为 14px */
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important; /* 字体锁定为图4 */
  color: #333333 !important; /* 主菜单默认字体颜色为图2深黑 */
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.left-sidebar.collapsed .item-text {
  font-size: 12px !important; /* 折叠菜单文字大小锁定为 12px (图2) */
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important; /* 字体锁定为图2 */
  color: #000000d1 !important; /* 折叠菜单默认字体颜色为 #000000D1 (图2) */
  font-weight: normal !important;
  max-width: 38px !important; /* 限制最大宽度，正好使“非招标采购”精准折行成“非招标”和“采购” */
  white-space: normal !important; /* 允许换行 (图2) */
  text-align: center !important; /* 居中对齐 */
  line-height: 1.2 !important; /* 精致窄行高 */
  display: block !important;
}

/* 展开状态右侧小箭头 */
.arrow-icon {
  position: absolute;
  right: 12px;
  width: 12px;
  height: 12px;
  color: #999;
  transition: transform 0.3s ease;
}
.sub-open .arrow-icon {
  transform: rotate(180deg);
  color: #e1251b !important; /* 展开时小箭头高亮亮红 */
}

/* 列表容器 */
.sidebar-menu-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar-menu-list::-webkit-scrollbar {
  display: none;
}

/* 折叠窄栏状态下，列表容器允许悬浮窗溢出显示，防截断 */
.left-sidebar.collapsed .sidebar-menu-list {
  overflow: visible !important;
}

/* ==================== 👑 窄栏折叠悬停二级菜单 (图2) ==================== */
.sidebar-hover-pop {
  position: absolute !important;
  left: 54px !important; /* 完美卡合在对应项右侧 54px */
  top: 0 !important; /* 精准与当前被悬停的一级项高度平齐 */
  width: 140px !important; /* 宽度锁定为 140px */
  background: #ffffff !important; /* 纯白底色 (图4) */
  border: 1px solid #eaeaea !important; /* 精致灰色细边框 (图4) */
  border-radius: 8px !important; /* 优雅圆角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; /* 高级微弱阴影 */
  display: none !important;
  flex-direction: column !important;
  padding: 6px 0 !important;
  z-index: 100000 !important;
  box-sizing: border-box !important;
}

/* 窄栏折叠悬停二级弹出面板的左侧透明桥梁热区，消除 4px 悬空空隙，保证鼠标能丝滑移入点击 */
.sidebar-hover-pop::before {
  content: '' !important;
  position: absolute !important;
  left: -16px !important; /* 向左延伸 16px 热区，完美覆盖 4px 间隙 */
  top: 0 !important;
  width: 16px !important;
  height: 100% !important;
  background: transparent !important; /* 彻底透明，无形保护 */
  cursor: pointer !important;
}

/* 折叠窄栏状态下，强力释放侧边栏、菜单列表与单项的所有溢出裁剪限制，保驾气泡弹窗 */
.left-sidebar.collapsed,
.left-sidebar.collapsed .sidebar-menu-list,
.left-sidebar.collapsed .sidebar-item {
  overflow: visible !important;
}

/* 窄栏折叠状态下，hover 项时 100% 毫无悬念地浮现 pop (采用 fixed 定位傲立于最顶层，无视任何父级 transition/裁剪限制) */
/* 窄栏折叠状态下，hover 项时 100% 毫无悬念地以相对绝对定位浮现 pop */
.left-sidebar.collapsed .sidebar-item:hover .sidebar-hover-pop {
  display: flex !important;
}

/* 窄栏折叠二级菜单子项样式 */
.left-sidebar.collapsed .sidebar-hover-pop .sub-item {
  height: 36px !important; /* 与二级菜单一致的高度 */
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* 撑开以把红徽章放到最右侧 */
  font-size: 14px !important;
  color: #666666 !important; /* 二级菜单默认灰色 */
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  background: transparent !important;
  margin: 1px 6px !important;
  border-radius: 4px !important;
}

.left-sidebar.collapsed .sidebar-hover-pop .sub-item:hover {
  background: #fff2f2 !important; /* 悬停高亮淡粉背景 */
  color: #e1251b !important; /* 悬停高亮字色 */
}

/* 二级菜单红色气泡徽章 */
.left-sidebar.collapsed .sidebar-hover-pop .cart-badge {
  background: #e1251b !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: bold !important;
  height: 16px !important;
  min-width: 16px !important;
  padding: 0 4px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* hover 悬停项样式 (一比一图2/图4浅粉高亮，无红粗线条) */
.sidebar-item:hover {
  background: #fff2f2 !important;
  color: #e1251b !important;
}
.sidebar-item:hover .item-icon-wrapper {
  color: #e1251b !important;
}
.sidebar-item:hover .item-text {
  color: #e1251b !important;
}

/* 菜单项激活高亮样式（图2选中效果，纯浅粉背景，去掉左侧红粗线） */
.sidebar-item.active {
  background: #fff2f2 !important;
  color: #e1251b !important;
}
.sidebar-item.active .item-icon-wrapper {
  color: #e1251b !important;
}
.sidebar-item.active .item-text {
  color: #e1251b !important;
  font-weight: bold !important; /* 加粗 */
}
.sidebar-item.active::before {
  display: none !important; /* 彻底去除左侧红线，还原图2最完美的高保真侧边 */
}

/* 二级子菜单包裹器 */
.sidebar-sub-menu {
  max-height: 0;
  overflow: hidden;
  background: #fafafa; /* 升级为与展开底色相同的典雅纯净灰白 */
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}
.sidebar-sub-menu.show {
  max-height: 400px; /* 大幅扩充 max-height 以支持多子项菜单 (如财务管理) 的顺滑完全展开 */
  border-bottom: 1px solid #eaeaea;
}

/* 二级子菜单项样式 (一比一完美锁定图2、图5) */
.sub-item {
  height: 36px !important; /* 更加精致紧凑的高度 */
  padding-left: 36px !important; /* 缩减缩进，保证在 150px 极窄侧边栏下绝对防折行 */
  display: flex;
  align-items: center;
  font-size: 14px !important; /* 子菜单文字大小锁定为 14px */
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important; /* 字体锁定为图5 */
  color: #666666 !important; /* 子菜单默认文字颜色为深灰色 #666666 */
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-sizing: border-box;
  margin: 1px 8px !important; /* 与一级菜单对齐的内缩设计 */
  border-radius: 4px !important; /* 精致圆角 */
}
.sub-item:hover {
  color: #e1251b !important;
  background: #fff2f2 !important; /* 悬停应用高品质浅粉背景 */
}

/* 购物车数字徽章 */
.cart-badge {
  background: #e1251b !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: bold !important;
  height: 16px !important;
  min-width: 16px !important;
  padding: 0 4px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 8px !important;
  box-sizing: border-box !important;
}

/* ==================== 👑 右侧悬浮挂条样式 ==================== */
.right-toolbar {
  position: fixed !important;
  right: 9px !important; /* 精致美化滚动条通常为 8px 宽，设置 9px 可在滑动条左侧精密保留 1px 的极致工艺缝隙 (图1) */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 58px !important; /* 宽度锁定为 58px */
  background: #ffffff !important;
  border: 1px solid #eaeaea !important; /* 精致全封闭灰色细边框 (图1) */
  border-radius: 8px !important; /* 药丸全包圆角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 !important; /* 零内边距以保证 58x58 的项完全贴合 */
  box-sizing: border-box !important;
}

.toolbar-item {
  width: 100% !important; /* 自适应 100% 宽度，完美填充满 58px（含边框）容器的内部，绝不溢出 */
  height: 58px !important; /* 单个按钮的背景高度锁定为 58px */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s ease !important;
  color: #1a1a1a !important; /* 图2规范高保真 #1A1A1A 深沉黑 */
  background: #ffffff !important;
  margin-bottom: 0 !important; /* 无缝紧密拼合 */
  box-sizing: border-box !important;
}
.toolbar-item:last-child {
  margin-bottom: 0 !important;
}

/* 👑 清单选品：普通状态下带有透明红色的淡粉渐变，Hover 悬停高亮为大红背景 (图1、2完美复刻) */
.toolbar-item.selection-item {
  background: linear-gradient(180deg, rgba(225, 37, 27, 0.06) 0%, rgba(225, 37, 27, 0) 100%) !important; /* 超精美淡红渐变 */
  border-radius: 7px 7px 0 0 !important; /* 顶部圆角贴合外层盒子 */
}
.toolbar-item.selection-item:hover {
  background: #e1251b !important; /* 悬停大红背景 */
}
.toolbar-item.selection-item:hover .toolbar-text {
  color: #ffffff !important; /* 纯白文字 */
}

.toolbar-icon-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  margin-bottom: 2px !important;
  position: relative !important;
}
.t-icon {
  width: 18px !important;
  height: 18px !important;
  transition:
    transform 0.2s ease,
    color 0.2s ease !important;
}

.toolbar-text {
  font-size: 12px !important; /* 精准死锁图2要求的 12px 大小 */
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
  color: #1a1a1a !important; /* 精准死锁图2要求的 #1A1A1A 深黑色 */
  text-align: center !important;
  line-height: 1.25 !important;
}

/* 采购单、消息、客服：Hover 悬停时呈现为 58x58 纯大红背景 */
.toolbar-item.selection-item:hover,
.toolbar-item.msg-item:hover,
.toolbar-item.service-item:hover {
  background: #e1251b !important;
  color: #ffffff !important;
}
.toolbar-item.selection-item:hover .t-icon,
.toolbar-item.msg-item:hover .t-icon,
.toolbar-item.service-item:hover .t-icon {
  color: #ffffff !important;
  transform: scale(1.1) !important;
}
.toolbar-item.selection-item:hover .toolbar-text,
.toolbar-item.msg-item:hover .toolbar-text,
.toolbar-item.service-item:hover .toolbar-text {
  color: #ffffff !important;
}

/* 👑 购物车微型数字红圈角标 (图2完美复刻) */
.cart-badge {
  position: absolute !important;
  top: 4px !important;
  right: 10px !important; /* 精确定位在购物车图标右上角，图2完美高保真 */
  background: #e1251b !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: bold !important;
  min-width: 14px !important;
  height: 14px !important;
  border-radius: 7px !important; /* 微型完美正圆胶囊 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  border: 1px solid #ffffff !important; /* 精致白边增强立体悬浮感 */
  box-shadow: 0 1px 4px rgba(225, 37, 27, 0.35) !important;
  z-index: 10 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* 👑 精致高保真客服浮空对话框样式 (图2高端重塑，极大提升商务大气度) */
.service-popover {
  position: absolute !important;
  right: 68px !important; /* 距右侧有 10px 气浮空隙 */
  top: 50% !important;
  transform: translateY(-50%) translateX(10px) !important;
  width: 168px !important; /* 宽度拓宽到 168px，极其大气清爽 */
  background: #ffffff !important;
  border: 1px solid #eaeaea !important;
  border-radius: 8px !important; /* 更加圆润大气的 8px 圆角 */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09) !important; /* 升级为更细腻的高端投影 */
  padding: 14px 16px !important; /* 内边距加宽，充满开阔空间感 */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100000 !important;
  pointer-events: auto !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 悬浮在客服项上时弹出气泡 */
.toolbar-item.service-item:hover .service-popover {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) translateX(0) !important;
}

/* 旋转45度正方形描边小尖角 */
.service-popover::after {
  content: '' !important;
  position: absolute !important;
  right: -5px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(45deg) !important;
  width: 8px !important;
  height: 8px !important;
  background: #ffffff !important;
  border-right: 1px solid #eaeaea !important;
  border-top: 1px solid #eaeaea !important;
}

.pop-title {
  font-size: 13px !important; /* 标题字号升级为大气的 13px */
  color: #333333 !important; /* 深灰色更显高级沉稳，绝不受父级 Hover 继承白色的影响 */
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  font-weight: 600 !important; /* 加粗展现气场 */
  margin-bottom: 8px !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}
.pop-action {
  width: 100% !important;
  height: 30px !important;
  background: rgba(225, 37, 27, 0.05) !important; /* 精致淡红背景 */
  border: 1px solid rgba(225, 37, 27, 0.15) !important; /* 精美细圆角边框 */
  border-radius: 15px !important; /* 高端胶囊按钮样式 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: #e1251b !important; /* 默认优易红，绝不受父级 Hover 影响 */
  font-size: 12px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* 按钮 Hover 时高亮变大红 */
.pop-action:hover {
  background: #e1251b !important;
  color: #ffffff !important;
  border-color: #e1251b !important;
}
.pop-action:hover .pop-chat-icon {
  fill: #ffffff !important;
}

.pop-chat-icon {
  width: 14px !important;
  height: 14px !important;
  fill: #e1251b !important;
  transition: fill 0.2s ease !important;
}

/* 回到顶部项：Hover 悬停时呈 58x58 纯大红背景，底部圆角贴合外层盒子 (图5完美复刻) */
.toolbar-item.back-top-item {
  border-top: 1px solid #f0f0f0 !important;
  border-radius: 0 0 7px 7px !important; /* 底部圆角贴合外层 */
}
.toolbar-item.back-top-item:hover {
  background: #e1251b !important;
}
.toolbar-item.back-top-item:hover .t-icon {
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.banner-area {
  margin-top: 10px;
  position: relative;
  background: #fff;
  border-radius: 12px;
  z-index: 5;
  display: flex;
  height: 460px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 极简式大图广告容器，初始 84px 宽，高度撑满 */
.expand-ad-layer {
  position: absolute;
  left: -84px;
  top: 10px;
  width: 84px;
  height: calc(100% - 20px);
  z-index: 100; /* 未展开时层级一般 */
  overflow: hidden;
  border-radius: 12px;
  transition:
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    z-index 0s 0.3s;
  cursor: pointer;
  background: transparent;
}
/* 悬停时跃升为 9999 皇帝级图层，完美盖死右侧任何弹窗！ */
.expand-ad-layer:hover {
  width: 790px;
  z-index: 9999;
  border-radius: 12px;
  box-shadow: 6px 10px 30px rgba(0, 0, 0, 0.3);
  transition:
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    z-index 0s 0s;
}

/* 一整张原生的大图片，定死 790px 宽 */
.expand-img-full {
  position: absolute;
  left: 0;
  top: 0;
  width: 790px;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* 悬浮在图片最左侧的透明文案区，等同于图片本身 */
.ad-left-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 84px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
  background: #047038; /* 用深绿色背景完美遮盖原大图左侧边缘自带的蓝色渐变发光 */
  border-radius: 12px 0 0 12px; /* 保持与容器的左侧圆角一致 */
}
.deco-inner-white {
  background: #fff;
  width: 60px;
  border-radius: 30px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.d-txt {
  writing-mode: vertical-lr;
  color: #2cb356;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 2px;
}
.d-num {
  font-size: 26px;
  color: #2cb356;
  font-weight: 900;
  margin: 5px 0;
}
.play-btn {
  width: 30px;
  height: 30px;
  background: #e1251b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.triangle {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #fff;
  margin-left: 3px;
}

.banner-layout {
  height: 100%;
  width: 100%;
  display: flex;
  gap: 16px !important;
}

/* 主体列 */
.main-column {
  display: flex;
  flex-direction: column;
  overflow: visible;
  min-width: 0;
}

/* 导航条样式 (图2高保真 1040*48px 浅灰圆角设计) */
.nav-bar {
  height: 48px;
  background: #f7f8fc;
  border: 1px solid #f7f8fc;
  border-radius: 8px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none !important; /* 确保能跟底下的模块完美对齐且不被1040宽限制限制死 */
  display: flex;
  align-items: center;
  padding: 0; /* 留出空间给轨道自占 */
  overflow: visible;
}
.nav-bar-scroll-wrapper {
  flex: 1;
  overflow-x: auto;
  scroll-behavior: smooth;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px; /* 恒定紧凑内边距，取消按钮盖字与动态状态类的偶合 */
  box-sizing: border-box;
}
.nav-bar-scroll-wrapper::-webkit-scrollbar {
  display: none;
}
.nav-bar-scroll-wrapper {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-scroll-btn {
  flex-shrink: 0; /* 强力防挤压变形 */
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: all 0.2s ease;
  padding: 0;
}
.nav-scroll-btn:hover {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.nav-scroll-btn.left-btn {
  margin-left: 8px;
  margin-right: 4px;
}
.nav-scroll-btn.right-btn {
  margin-right: 8px;
  margin-left: 4px;
}
.scroll-arrow {
  width: 16px;
  height: 16px;
  color: #64748b;
}
.nav-list {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.nav-list li {
  flex-shrink: 0;
  font-size: 16px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  color: #000000;
  height: 100%;
  transition: color 0.15s ease;
}
.nav-list li.active {
  color: #000000;
  font-weight: bold;
}
.nav-list li:hover {
  color: var(--hover-data3);
}
.nav-divider {
  flex-shrink: 0;
  color: #d3d3d3;
  margin: 0 20px;
  font-size: 14px;
  user-select: none;
}

/* 下方分类与广告 */
.banner-bottom {
  display: flex;
  flex: 1;
  overflow: visible;
  padding: 0 0 10px 0 !important;
  gap: 12px;
  background: transparent;
  position: relative;
}
.side-category {
  width: 215px;
  height: 400px;
  background: transparent;
  overflow: visible;
  position: relative;
  z-index: 1000;
}
.side-category.is-dropdown {
  position: absolute;
  top: 0;
  bottom: 10px; /* 补偿 banner-bottom 的 10px 底部 padding */
  left: 0; /* padding已去除，归零以完美左对齐 */
  z-index: 9999;
  box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.15);
}

.ad-group {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

/* 右侧高奢两段式侧边栏 */
.user-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 281px;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* 采购课堂卡片 */
.purchase-classroom {
  width: 281px;
  height: 116px;
  background: #f7f8fc;
  border: 1px solid #f7f8fc;
  border-radius: 12px;
  box-sizing: border-box;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.classroom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.classroom-title {
  font-size: 14px;
  font-weight: 800;
  color: #1a1a1a;
}

.classroom-more {
  font-size: 12px;
  color: #999999;
  cursor: pointer;
  transition: color 0.2s ease;
}

.classroom-more:hover {
  color: #e1251b;
}

.classroom-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  background: #ffffff;
  border-radius: 8px;
  padding: 6px 8px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease;
}

.classroom-content:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.classroom-content:hover .c-desc {
  color: #e1251b;
}

.classroom-time {
  background: #fff5f5;
  border: 1px solid #ffe3e3;
  border-radius: 6px;
  padding: 2px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 58px;
  box-sizing: border-box;
}

.c-year {
  font-size: 10px;
  color: #8c8c8c;
}

.c-week {
  font-size: 10px;
  font-weight: 800;
  color: #ff5a5f;
  margin-top: 1px;
}

.classroom-info {
  display: flex;
  align-items: center;
  min-width: 0;
}

.c-desc {
  font-size: 12px;
  font-weight: bold;
  color: #333333;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.classroom-cover {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #f0f0f0;
}

.classroom-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 👑 1. 外层白色大底框卡片：四周锁死黄金 16px 呼吸留白内边距，总高为 432px，内容区高度为完美闭合的 400px */
.banner-area {
  padding: 16px !important;
  height: 432px !important;
  box-sizing: border-box !important;
}

/* 👑 2. 下方内容容器：消除多重边距实现绝对的四角对齐填满，并将左侧分类与右侧广告间隙拉开至 16px */
.banner-bottom {
  padding: 0 !important;
  gap: 16px !important;
}

/* 👑 3. 顶部分类导航：浅灰色圆角背景盒，并向右平移 231px 完美与左侧分类框错开 */
.nav-bar {
  margin-left: 231px !important;
  width: auto !important; /* 宽度设为自适应，随着主容器收缩 */
  max-width: none !important; /* 彻底去除宽度上限以确保与下方广告右边缘完美齐平 */
  height: 48px !important;
  padding: 0 24px !important;
  background: #f7f8fc !important;
  border: 1px solid #f7f8fc !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  margin-bottom: 16px !important; /* 与下方内容拉开 16px 间距，使左侧分类栏使用 -64px margin-top 恰好完美顶部平齐 */
  flex-grow: 1 !important; /* 自动撑满 */
}

/* 👑 4. 左侧垂直分类区域：高能向上爬升 64px 与顶栏完美并肩对齐，高度补齐到完美的 400px，宽度锁死不缩小 */
.side-category {
  margin-top: -64px !important;
  width: 215px !important;
  height: 400px !important;
  position: relative !important;
  z-index: 1000 !important;
  flex-shrink: 0 !important; /* 强制不压缩，保持常驻尺寸 */
}

/* 使得左侧垂直分类的4个角承接 12px 的大厂大圆角，和横向导航与整体卡片无缝贴合 */
.side-category :deep(.cate-list) {
  border-radius: 12px !important;
}

/* 👑 5. 右侧两段式侧边栏：宽度强制281px，对齐中间导航条顶部，上下间距 16px，宽度锁死不缩小 */
.user-sidebar {
  width: 281px !important;
  height: 400px !important;
  margin-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important; /* 强制不压缩，保持常驻尺寸 */
}

/* ==================== 💎 全局上下滚动条高奢美化 ==================== */
::-webkit-scrollbar {
  width: 8px !important; /* 宽度从原生 17px 缩窄到极其精致的 8px */
  height: 8px !important; /* 横向滚动条高度 */
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.01) !important; /* 轨道极浅半透明，完全杜绝原生灰色的大块感 */
  border-radius: 4px !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.16) !important; /* 胶囊滑块轻量扁平灰，极具高级拟物呼吸感 */
  border-radius: 4px !important;
  transition: background 0.3s ease !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32) !important; /* Hover 时滑块变深灰色，清晰明朗 */
}

/* 👑 各个核心板块之间的 16px 恒定垂直呼吸间距保护 */
.scene-red-integrated {
  margin-top: 16px !important;
}
.products-section {
  margin-top: 16px !important;
}
</style>