123

src/views/home/datacomponents/JDCategory.vue

@@ -0,0 +1,681 @@
+<template>
+  <div
+    class="cate-menu"
+    :class="{ 'is-hovered': isHovered }"
+    @mouseenter="isHovered = true"
+    @mouseleave="
+      isHovered = false;
+      activeIndex = -1;
+    "
+  >
+    <ul class="cate-list">
+      <li v-for="(c, i) in displayedCategories" :key="i" class="cate-item" :class="{ active: activeIndex === i }" @mouseenter="activeIndex = i">
+        <div class="cate-link-container">
+          <a href="#" class="main-cat-link" :title="c.mainCategory">
+            {{ c.mainCategory.length > 4 ? c.mainCategory.slice(0, 3) + '...' : c.mainCategory }}
+          </a>
+          <div class="sub-cats-wrapper">
+            <template v-for="(sub, subIdx) in c.subCategories.slice(0, 3)" :key="subIdx">
+              <span class="sub-divider" v-if="subIdx > 0">/</span>
+              <a href="#" class="sub-cat-link" :title="sub.title">
+                {{ sub.title }}
+              </a>
+            </template>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+    <!-- 巨大悬浮菜单面板 (悬停一级菜单的面板样式与内容保持不变) -->
+    <div class="category-pop" v-show="activeIndex !== -1 && displayedCategories[activeIndex]">
+      <div class="pop-header flex-between" v-if="displayedCategories[activeIndex]">
+        <div class="pop-tags flex">
+          <span v-for="(tag, tIdx) in displayedCategories[activeIndex].tags || []" :key="tIdx" class="p-tag">
+            {{ tag }}
+          </span>
+        </div>
+        <div class="pop-logo">
+          <span class="red-t">优易</span
+          ><span class="black-t">{{
+            displayedCategories[activeIndex].logoTitle ? displayedCategories[activeIndex].logoTitle.replace('优易', '') : ''
+          }}</span
+          ><br />
+          <span class="small-t">{{ displayedCategories[activeIndex].logoDesc }}</span>
+        </div>
+      </div>
+
+      <div class="pop-body">
+        <dl v-for="(sub, sIdx) in displayedCategories[activeIndex]?.subCategories || []" :key="sIdx" class="sub-dl flex">
+          <dt>
+            <a href="#" class="sub-dt-link">{{ sub.title }}</a>
+          </dt>
+          <dd>
+            <a v-for="(item, iIdx) in sub.items" :key="iIdx" href="#">
+              {{ item }}
+            </a>
+          </dd>
+        </dl>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { categoryMainList } from '@/api/home/index-data';
+
+categoryMainList({ status: 1 }).then((res) => {
+  if (res.code == 200) {
+  }
+});
+
+const activeIndex = ref(-1);
+const isHovered = ref(false);
+const displayedCategories = computed(() => {
+  return isHovered.value ? categories : categories.slice(0, 11);
+});
+
+// 线条风格 SVG base64 图标 (保留做潜在备用)
+const iconPC =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxyZWN0IHg9IjIiIHk9IjQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNCIgcng9IjIiLz48cGF0aCBkPSJNOCAyMmgybS0yIDBsNC00bTQgNGgybS0yIDBsLTQtNCIvPjwvc3ZnPg==';
+const iconAC =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxyZWN0IHg9IjIiIHk9IjYiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMiIgcng9IjIiLz48cGF0aCBkPSJNMiAxMGgyMG0tMTYgNGg0Ii8+PC9zdmc+';
+const iconPrint =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik02IDlWMmgtNHY3bTggMEg0djExaDE2VjltLTYgMTB2LTVoOHY1Ii8+PC9zdmc+';
+const iconTea =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik00IDhoMTJ2OGExIDEgMCAwIDEtMSAxSDVhMSAxIDAgMCAxLTEtMVY4em0xMiAyYTQgNCAwIDAgMSAwIDguLTJtLTItMTh2NG0tNCAwdjQiLz48L3N2Zz4=';
+const iconPhone =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxyZWN0IHg9IjUiIHk9IjIiIHdpZHRoPSIxNCIgaGVpZ2h0PSIyMCIgcng9IjIiLz48cGF0aCBkPSJNMTIgMThoLjAxIi8+PC9zdmc+';
+const iconMask =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xMiAyMmM0LjQgMCA4LTMuNiA4LThzLTMuNi04LTgtOC04IDMuNi04IDhzMy42IDggOCA4em0wIDB2LThtLTQgNGg4Ii8+PC9zdmc+';
+const iconMed =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xMiA0djE2bS04LThoMTZtLTQgNGExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSA0IDB6Ii8+PC9zdmc+';
+const iconCar =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xOSA4bDEgNG0tMTYgMGwxLTRoMTJtLTIgMmgybTEgMTB2LTHLTMvN20xMCAwaDRtLTYgUXg0bTE0IDBoMnY0SDZ2LTQiLz4=';
+const iconTent =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xMiAzTDIgMjFoMjBtLTEwLTE4bDkgMTguNW0tMTggMGg4Ii8+PC9zdmc+';
+
+const categories = [
+  {
+    mainCategory: '电脑、数码',
+    subCategoriesText: '外设产品 / 办公设备',
+    name: '办公电脑 / 办公打印 / 电脑组件',
+    icon: iconPC,
+    logoTitle: '优易3C数码',
+    logoDesc: '电脑 | 数码 | 手机 | 图书 | 文具',
+    tags: ['设备固资', '职场环境', '3C数码电子城'],
+    subCategories: [
+      {
+        title: '办公电脑',
+        items: [
+          '台式机',
+          '商用台式机',
+          '品牌一体机',
+          '商用一体机',
+          '游戏笔记本',
+          '轻薄笔记本',
+          '设计师本',
+          '移动工作站',
+          '塔式工作站',
+          '平板电脑',
+          'iPad Pro',
+          '安卓平板',
+          '电子书阅读器',
+          '阅卷机',
+          '绘图仪',
+          '手写绘图板',
+          '触控笔',
+          '笔记本电池',
+          '电脑包',
+          '清洁套装',
+          '防尘罩',
+          '键盘保护膜'
+        ]
+      },
+      {
+        title: '办公打印',
+        items: [
+          '多功能复合机',
+          '激光复合机',
+          '激光打印机',
+          '商用喷墨机',
+          '专业针式打印',
+          '条码打印机',
+          '热敏打印机',
+          '3D打印机',
+          '扫描仪',
+          '高速扫描枪',
+          '大型碎纸机',
+          '保密碎纸机',
+          '自动装订机',
+          '胶装机',
+          '冷热塑封机',
+          '切纸刀',
+          '高拍仪',
+          '便携投影',
+          '传真设备'
+        ]
+      },
+      {
+        title: '电脑组件',
+        items: [
+          '显示器',
+          '4K高刷显示器',
+          '曲面屏显示器',
+          'SSD固态硬盘',
+          'NVMe高速SSD',
+          '机械硬盘',
+          '企业级硬盘',
+          '显卡',
+          '游戏显卡',
+          '专业计算显卡',
+          '内存条',
+          'DDR5内存',
+          '主板',
+          '商用CPU',
+          '水冷散热器',
+          '风冷散热器',
+          '电脑机箱',
+          '商用电源',
+          '外置光驱',
+          '蓝光刻录机'
+        ]
+      },
+      {
+        title: '电脑外设',
+        items: ['机柜', '键盘', '扩展坞', '手柄方向盘', '鼠标', '鼠标垫', '移动固态硬盘', '移动机械硬盘', '硬盘盒', '游戏耳机', '游戏机', '游戏周边']
+      },
+      {
+        title: '智能会议',
+        items: [
+          '直播设备',
+          'U盘',
+          'UPS电源',
+          '办公大屏',
+          '投影机',
+          '会议平板',
+          '会议摄像头',
+          '音响',
+          '会议音响',
+          '麦克风',
+          '路由器',
+          '网络机顶盒',
+          '交换机',
+          '网络存储',
+          '网线'
+        ]
+      },
+      { title: 'IT运维', items: ['交换机', '路由器', '网络机顶盒', '网络存储', '网卡', '网线', '网络配件', '网络仪器仪表', '线缆', '普通网络设备'] },
+      { title: '核心文具', items: ['钢笔', '签字笔', '白板笔', '记号笔', '圆珠笔', '铅笔', '本册', '计算器', '剪刀', '美工刀', '订书机', '回形针'] },
+      { title: '会议大屏', items: ['LED显示屏', '液晶拼接屏', '智能白板', '激光投影仪', '电子沙盘', '会议中控', '音频处理器', '数字调音台'] },
+      { title: '网络安防', items: ['红外摄像机', '网络录像机', '智能门禁', '防盗报警', '电子围栏', '巡更系统', '对讲机', '安检门'] },
+      { title: '服务器区', items: ['刀片服务器', '机架服务器', '塔式服务器', '云服务器', '群晖网络存储', '威联通NAS', '数据备份柜'] },
+      { title: '办公家具', items: ['网椅办公椅', '皮质老板椅', '主管桌椅', '会议折叠桌', '钢制卷门柜', '储物架', '接待台沙发'] },
+      { title: '福利茶歇', items: ['手冲挂耳咖啡', '大红袍茶叶', '坚果尊享礼盒', '小黑麦面包', '纯净水', '苏打水', '无糖气泡水', '盒装牛奶'] },
+      { title: '电力电工', items: ['防过载插排', '智能电能表', '双绞网线', '网络测线仪', '压线钳', '焊锡丝', '数显万用表'] },
+      { title: '后勤保障', items: ['手推扫地机', '工业大干湿吸尘器', '高压冲洗枪', '大容量冷藏柜', '商用电微波炉', '智能商用直饮机'] },
+      { title: '快递包材', items: ['三层特硬快递箱', '防震气泡膜', '高粘度封箱带', '热敏快递面单', '强力封签', '仓储缠绕膜'] },
+      { title: '工业测绘', items: ['高精度激光测距仪', '红外热像仪', '数字噪音声级计', '手持风速仪', '甲醛测试仪', '测厚仪'] },
+      { title: '清洁卫浴', items: ['免洗消毒液', '超浓缩洁厕灵', '环保垃圾袋', '乳胶耐酸碱手套', '静电除尘纸', '长柄拖把'] },
+      { title: '奢品数码', items: ['单反相机', '无人机航拍器', '云台稳定器', '全景相机', '运动DV', '碳纤维三脚架', '补光灯'] }
+    ]
+  },
+  // {
+  //   mainCategory: '家用电器',
+  //   subCategoriesText: '个护健康 / 生活电器',
+  //   name: '室温调节 / 冷藏保鲜 / 办公家具',
+  //   icon: iconAC,
+  //   logoTitle: '优易家电家居',
+  //   logoDesc: '空调 | 冰箱 | 洗衣机 | 沙发 | 办公桌',
+  //   tags: ['清凉一夏', '企业家具采购', '保鲜达人'],
+  //   subCategories: [
+  //     { title: '室温调节', items: ['挂壁式空调', '柜式空调', '中央空调', '空气净化器', '电风扇', '冷风扇', '除湿机', '加湿机'] },
+  //     { title: '冷藏保鲜', items: ['单门冰箱', '双门冰箱', '多门冰箱', '立式冷柜', '卧式冷柜', '车载冰箱', '制冰机'] },
+  //     { title: '办公家具', items: ['办公椅', '老板椅', '会议桌', '办公桌', '文件柜', '前台接待台', '屏风工位', '折叠椅', '沙发', '茶几'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '运动户外',
+  //   subCategoriesText: '户外装备 / 健身训练',
+  //   name: '户外装备 / 体育用品 / 工装工服',
+  //   icon: iconTent,
+  //   logoTitle: '优易运动户外',
+  //   logoDesc: '帐篷 | 睡袋 | 羽毛球 | 跑步机 | 定制工装',
+  //   tags: ['户外团建', '企业运动会', '统一形象'],
+  //   subCategories: [
+  //     { title: '户外装备', items: ['露营帐篷', '户外折叠椅', '睡袋', '登山杖', '烧烤炉', '户外电源', '保冷箱'] },
+  //     { title: '体育用品', items: ['羽毛球拍', '乒乓球拍', '篮球', '足球', '跑步机', '动感单车', '哑铃', '运动手环'] },
+  //     { title: '工装定制', items: ['企业T恤定制', '冲锋衣工装', '西服职业装', '劳保防护服', '棒球帽定制'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '厨具',
+  //   subCategoriesText: '烹饪锅具 / 刀剪砧板',
+  //   name: '商用家电 / 空调冰洗 / 采购',
+  //   icon: iconAC,
+  //   logoTitle: '优易商用家电',
+  //   logoDesc: '商用冷柜 | 展示柜 | 商用开水器 | 烘干机',
+  //   tags: ['职场设备', '后勤保障', '商用批采'],
+  //   subCategories: [
+  //     { title: '商用设备', items: ['商用制冰机', '立式展示冷柜', '商用开水器', '大容量净水器', '商用微波炉'] },
+  //     { title: '后勤家电', items: ['大功率吸尘器', '商用洗烘一体机', '商用除湿机', '红酒柜', '消毒柜'] },
+  //     { title: '采购专区', items: ['大屏商用电视', '工程投影机', '新风换气系统', '商用集成灶'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '生活日用',
+  //   subCategoriesText: '日用百货 / 净化除味',
+  //   name: '茶歇福利 / 个护清洁 / 日用福利',
+  //   icon: iconTea,
+  //   logoTitle: '优易企业福利',
+  //   logoDesc: '咖啡 | 茶叶 | 零食 | 卫生纸 | 洗发水',
+  //   tags: ['下午茶', '员工关怀', '节日福利'],
+  //   subCategories: [
+  //     {
+  //       title: '茶歇饮品',
+  //       items: ['挂耳咖啡', '速溶咖啡', '咖啡豆', '红茶', '绿茶', '乌龙茶', '花草茶', '矿泉水', '苏打水', '果汁', '可乐', '牛奶']
+  //     },
+  //     { title: '休闲零食', items: ['坚果礼盒', '饼干', '薯片', '肉干', '巧克力', '糖果', '小面包', '蜜饯'] },
+  //     { title: '个护日用', items: ['抽纸', '卷纸', '湿纸巾', '洗发水', '沐浴露', '牙膏', '牙刷', '洗手液', '毛巾', '洗衣液'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '家居清洁',
+  //   subCategoriesText: '清洁纸品 / 清洁工具',
+  //   name: '打印耗材 / 办公文具 / 清洁用品',
+  //   icon: iconPrint,
+  //   logoTitle: '优易办公文仪',
+  //   logoDesc: '墨盒 | 硒鼓 | 纸张 | 拖把 | 洗手液',
+  //   tags: ['高效办公', '企业大扫除', '文具批采'],
+  //   subCategories: [
+  //     { title: '打印耗材', items: ['硒鼓', '墨盒', '色带', '墨水', '碳粉', '打印纸', '相片纸', '复印纸', '收银纸'] },
+  //     { title: '办公文具', items: ['中性笔', '白板笔', '记号笔', '笔记本', '文件夹', '计算器', '碎纸机', '装订机', '胶带', '别针'] },
+  //     { title: '清洁用品', items: ['垃圾桶', '垃圾袋', '洗手液', '消毒液', '洁厕灵', '洗洁精', '抹布', '拖把', '扫帚', '空气清新剂'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '工业品',
+  //   subCategoriesText: '安防用品 / 工业包装',
+  //   name: '个人防护 / 清洁用品 / 电动工具',
+  //   icon: iconMask,
+  //   logoTitle: '优易工业劳保',
+  //   logoDesc: '口罩 | 手套 | 安全帽 | 电钻 | 扳手',
+  //   tags: ['安全施工', '生产防护', '维修必备'],
+  //   subCategories: [
+  //     { title: '个人防护', items: ['医用口罩', 'N95口罩', '防护手套', '安全帽', '工作服', '劳保鞋', '护目镜', '耳塞', '安全带'] },
+  //     { title: '清洁用品', items: ['工业吸尘器', '洗地机', '高压水枪', '垃圾分类桶', '工业擦拭纸', '洗手膏'] },
+  //     { title: '电动工具', items: ['冲击钻', '手电钻', '角磨机', '热风枪', '电锤', '电动扳手', '电烙铁', '测量仪器'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '服饰内衣',
+  //   subCategoriesText: '服饰配件',
+  //   name: '包装耗材 / 纸箱胶带 / 批采',
+  //   icon: iconTea,
+  //   logoTitle: '优易包装物料',
+  //   logoDesc: '气泡膜 | 快递袋 | 封箱胶带 | 定制纸箱',
+  //   tags: ['仓储物流', '企业发货', '耗材批采'],
+  //   subCategories: [
+  //     { title: '包装物料', items: ['三层纸箱', '五层特硬纸箱', '气泡膜', '珍珠棉', '缠绕膜', '泡沫板', '封箱胶带', '双面胶'] },
+  //     { title: '快递包装', items: ['PE快递袋', '气泡信封袋', '热敏面单纸', '封签', '扎带', '防静电袋'] },
+  //     { title: '批采物料', items: ['大卷胶带', '打包带', '打包机', '拉伸膜缠绕机', '称重电子秤'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '个人护理',
+  //   subCategoriesText: '洗发护发 / 美发造型',
+  //   name: '电子数码 / 茗茶酒水 / 美妆护肤',
+  //   icon: iconPhone,
+  //   logoTitle: '优易数码奢品',
+  //   logoDesc: '手机 | 相机 | 茅台 | 礼盒 | 雅诗兰黛',
+  //   tags: ['商务送礼', '高端数码', '员工体面'],
+  //   subCategories: [
+  //     { title: '智能数码', items: ['智能手机', '智能手表', '无线耳机', '数码相机', '单反镜头', '投影仪', '智能音箱', 'VR眼镜', '充电宝'] },
+  //     { title: '名酒茗茶', items: ['飞天茅台', '五粮液', '国窖1573', '奔富红酒', '西湖龙井', '大红袍', '普洱茶饼', '普洱熟茶', '铁观音'] },
+  //     { title: '高端美妆', items: ['雅诗兰黛', '兰蔻', 'SK-II', '香奈儿', '迪奥', '防晒霜', '补水喷雾', '男士洁面'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '居家布艺',
+  //   subCategoriesText: '抱枕/靠垫 / 桌椅套件',
+  //   name: '汽车用品 / 车辆养护 / 整车采购',
+  //   icon: iconCar,
+  //   logoTitle: '优易汽车商城',
+  //   logoDesc: '行车记录仪 | 机油 | 轮胎 | 新能源车',
+  //   tags: ['企业车队', '车辆保值', '出行保障'],
+  //   subCategories: [
+  //     { title: '汽车电器', items: ['行车记录仪', '车载充气泵', '车载吸尘器', '车载蓝牙', '车载净化器', '倒车雷达'] },
+  //     { title: '车辆养护', items: ['合成机油', '防冻液', '玻璃水', '火花塞', '雨刮片', '车载香水', '洗车液', '打蜡抛光'] },
+  //     { title: '整车采购', items: ['商务MPV', '企业公务车', '新能源物流车', '员工代步车', '充电桩'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '床上用品',
+  //   subCategoriesText: '床单/被套/枕套 / 三件套',
+  //   name: '养生茶饮 / 滋补礼盒 / 营养保健',
+  //   icon: iconMed,
+  //   logoTitle: '优易健康养生',
+  //   logoDesc: '枸杞 | 人参 | 燕窝 | 维生素 | 血压计',
+  //   tags: ['健康员工', '商务滋补', '关爱常在'],
+  //   subCategories: [
+  //     { title: '养生茶饮', items: ['黑枸杞', '胖大海', '菊花茶', '红枣片', '金银花', '养生壶', '保温杯'] },
+  //     { title: '滋补礼盒', items: ['长白山人参', '即食燕窝', '冬虫夏草', '阿胶糕', '西洋参片', '石斛', '鹿茸'] },
+  //     { title: '营养保健', items: ['复合维生素', '钙片', '深海鱼油', '褪黑素', '益生菌', '蛋白粉', '血压计', '血糖仪'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '手机通讯',
+  //   name: '智能手机 / 拍照手机 / 游戏手机',
+  //   icon: iconPhone,
+  //   logoTitle: '优易手机通讯',
+  //   logoDesc: 'Apple | 华为 | 小米 | 手机配件',
+  //   tags: ['智能生活', '商务机型', '贴心配件'],
+  //   subCategories: [
+  //     { title: '手机', items: ['Apple', '华为', '小米', '荣耀', 'OPPO', 'vivo', '一加'] },
+  //     { title: '手机配件', items: ['手机壳', '贴膜', '充电器', '数据线', '移动电源', '车载配件'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '收纳用品',
+  //   name: '收纳箱 / 旅行收纳 / 桌面收纳',
+  //   icon: iconCar,
+  //   logoTitle: '优易居家收纳',
+  //   logoDesc: '收纳箱 | 整理盒 | 旅行包 | 置物架',
+  //   tags: ['整洁居家', '轻松旅行', '有序桌面'],
+  //   subCategories: [
+  //     { title: '收纳箱', items: ['塑料收纳箱', '布艺收纳盒', '整理箱', '内衣收纳', '鞋盒'] },
+  //     { title: '旅行收纳', items: ['旅行洗漱包', '压缩袋', '收纳袋', '行李箱配件'] },
+  //     { title: '桌面收纳', items: ['桌面置物架', '化妆品收纳', '笔筒', '钥匙收纳'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '家居饰品',
+  //   name: '节庆用品 / 婚庆用品 / 装饰摆件',
+  //   icon: iconTent,
+  //   logoTitle: '优易家居饰品',
+  //   logoDesc: '红灯笼 | 气球 | 花瓶 | 摆件',
+  //   tags: ['欢度佳节', '温馨婚庆', '雅致摆件'],
+  //   subCategories: [
+  //     { title: '节庆用品', items: ['红灯笼', '春联', '窗花', '气球', '拉花', '彩灯'] },
+  //     { title: '婚庆用品', items: ['喜贴', '红包', '拉花', '喜字', '婚庆气球'] },
+  //     { title: '装饰摆件', items: ['花瓶', '花艺', '创意摆件', '沙漏', '相框'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '家具',
+  //   name: '柜类 / 沙发类 / 椅类',
+  //   icon: iconPC,
+  //   logoTitle: '优易品质家具',
+  //   logoDesc: '衣柜 | 沙发 | 办公椅 | 电脑桌',
+  //   tags: ['温馨卧室', '舒适客厅', '高效办公'],
+  //   subCategories: [
+  //     { title: '柜类', items: ['衣柜', '书柜', '鞋柜', '电视柜', '斗柜', '床头柜'] },
+  //     { title: '沙发类', items: ['真皮沙发', '布艺沙发', '单人沙发', '折叠沙发床'] },
+  //     { title: '椅类', items: ['办公椅', '电脑椅', '餐椅', '休闲椅', '折叠椅', '凳子'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '文教办公',
+  //   name: '装订文具 / 画具画材 / 本册纸张',
+  //   icon: iconPrint,
+  //   logoTitle: '优易文教办公',
+  //   logoDesc: '订书机 | 颜料 | 笔记本 | 草稿纸',
+  //   tags: ['高效文印', '艺术画材', '精美本册'],
+  //   subCategories: [
+  //     { title: '装订文具', items: ['订书机', '打孔器', '回形针', '长尾夹', '装订胶圈'] },
+  //     { title: '画具画材', items: ['画笔', '颜料', '画架', '画纸', '调色盘', '调色杯'] },
+  //     { title: '本册纸张', items: ['笔记本', '便签纸', '复印纸', '草稿纸', '手账本'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '水饮冲调',
+  //   name: '饮料 / 饮用水 / 冲调谷物',
+  //   icon: iconTea,
+  //   logoTitle: '优易水饮冲调',
+  //   logoDesc: '果汁 | 矿泉水 | 麦片 | 芝麻糊',
+  //   tags: ['清凉饮料', '纯净好水', '营养谷物'],
+  //   subCategories: [
+  //     { title: '饮料', items: ['碳酸饮料', '果汁', '茶饮料', '功能饮料', '苏打水'] },
+  //     { title: '饮用水', items: ['矿泉水', '纯净水', '苏打水', '桶装水'] },
+  //     { title: '冲调谷物', items: ['燕麦片', '芝麻糊', '藕粉', '核桃粉', '麦片'] }
+  //   ]
+  // },
+  // {
+  //   mainCategory: '休闲食品',
+  //   name: '海味零食 / 饼干 / 膨化食品',
+  //   icon: iconTea,
+  //   logoTitle: '优易休闲食品',
+  //   logoDesc: '海苔 | 曲奇饼干 | 薯片 | 爆米花',
+  //   tags: ['深海美味', '香脆饼干', '美味膨化'],
+  //   subCategories: [
+  //     { title: '海味零食', items: ['鱿鱼丝', '海苔', '鱼干', '小鱼仔', '蟹柳'] },
+  //     { title: '饼干', items: ['曲奇', '夹心饼干', '苏打饼干', '威化饼干', '蛋卷'] },
+  //     { title: '膨化食品', items: ['薯片', '虾条', '爆米花', '锅巴', '爆豆'] }
+  //   ]
+  // }
+];
+</script>
+
+<style scoped>
+.cate-menu {
+  position: relative;
+  width: 215px;
+  height: 400px;
+  z-index: 100;
+  transition: height 0.15s ease-out;
+}
+
+.cate-menu.is-hovered {
+  height: 610px;
+}
+
+.cate-list {
+  padding: 10px 0 !important;
+  background: #f7f8fc;
+  border: 1px solid #f7f8fc;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.cate-item {
+  flex: 1;
+  padding: 0 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  transition: all 0.15s ease;
+  border: 1px solid transparent;
+}
+
+.cate-item.active,
+.cate-item:hover {
+  background: #fff !important;
+  z-index: 201 !important;
+  width: calc(100% + 1px) !important;
+}
+
+.cate-link-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
+}
+
+.main-cat-link {
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+  margin-right: 6px;
+  flex-shrink: 0;
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.main-cat-link:hover {
+  color: #e1251b !important;
+  text-decoration: underline;
+}
+
+.sub-cats-wrapper {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  color: #8c8c8c;
+  font-size: 12px;
+}
+
+.sub-cat-link {
+  color: #8c8c8c;
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.sub-cat-link:hover {
+  color: #e1251b !important;
+  text-decoration: underline;
+}
+
+.sub-divider {
+  margin: 0 4px;
+  color: #d3d3d3;
+  user-select: none;
+}
+
+/* 右侧巨大弹出层 */
+.category-pop {
+  position: absolute;
+  left: 215px;
+  top: 0;
+  width: 950px;
+  height: 100% !important;
+  background: #fff;
+  border: 1px solid #e1251b;
+  border-radius: 12px;
+  box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.12);
+  padding: 20px 24px !important;
+  z-index: 200;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部标签和 Logo */
+.pop-header {
+  margin-bottom: 16px !important;
+  align-items: flex-end !important;
+  flex-shrink: 0 !important;
+}
+.pop-tags {
+  gap: 12px;
+}
+.p-tag {
+  background: #f4f4f4;
+  color: #333;
+  font-size: 12px;
+  padding: 6px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.p-tag:hover {
+  background: #e1251b;
+  color: #fff;
+}
+
+.pop-logo {
+  text-align: right;
+  line-height: 1.2;
+}
+.red-t {
+  color: #e1251b;
+  font-size: 18px;
+  font-weight: 900;
+}
+.black-t {
+  color: #000;
+  font-size: 18px;
+  font-weight: 900;
+}
+.small-t {
+  font-size: 12px !important;
+  color: #e1251b;
+  letter-spacing: 1px;
+  font-weight: 500 !important;
+  margin-top: 8px !important;
+  display: inline-block !important;
+}
+
+/* 主体列表区域 (支持独立优雅的上下滚动) */
+.pop-body {
+  flex: 1 !important;
+  overflow-y: auto !important;
+  padding-left: 16px !important;
+  padding-right: 8px !important;
+  box-sizing: border-box !important;
+}
+
+/* 二级面板内部滚动条 */
+.pop-body::-webkit-scrollbar {
+  width: 6px !important;
+}
+.pop-body::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.01) !important;
+  border-radius: 3px !important;
+}
+.pop-body::-webkit-scrollbar-thumb {
+  background: rgba(225, 37, 27, 0.15) !important;
+  border-radius: 3px !important;
+  transition: background 0.3s ease !important;
+}
+.pop-body::-webkit-scrollbar-thumb:hover {
+  background: rgba(225, 37, 27, 0.35) !important;
+}
+
+/* 主体列表区域 */
+.sub-dl {
+  margin-bottom: 12px;
+  align-items: flex-start;
+  line-height: 1.8;
+}
+.sub-dl dt {
+  width: 75px;
+  margin-right: 15px;
+  text-align: left;
+  white-space: nowrap;
+}
+.sub-dt-link {
+  font-weight: bold;
+  font-size: 12px;
+  color: #000;
+  text-decoration: none;
+  transition: color 0.15s ease;
+  cursor: pointer;
+  display: block;
+}
+.sub-dt-link:hover {
+  color: #e1251b !important;
+}
+.sub-dl dd {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 16px;
+}
+.sub-dl dd a {
+  font-size: 12px;
+  color: #8c8c8c;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.sub-dl dd a:hover {
+  color: #e1251b;
+}
+</style>