/* 移动端适配 */ @media (max-width: 768px) { .navtop-standingPosition { top: 60px;  /* 移动端头栏更小 */ } .category-nav { top: 120px;  /* 60px + 60px */ height: calc(100vh - 106px); } .col-sm-12 { margin-left: 0; width: 100%; padding-top: 66px; padding-left: 10px; padding-right: 10px; } .page-desc { max-width: 200px; } .products-container { padding-left: 2px !important; padding-right: 2px !important; } } /* 折叠按钮样式 */ .sidebar-toggle { position: fixed; left: 20px; bottom: 90px; width: 40px; height: 40px; background: #2B6DE5; color: #fff; border-radius: 50%; display: none;  /* 默认隐藏 */ align-items: center; justify-content: center; cursor: pointer; z-index: 1000; box-shadow: 0 2px 8px rgba(43, 109, 229, 0.3); transition: all 0.3s ease; } .sidebar-toggle:hover { background: #2259c7; } .sidebar-toggle i { font-size: 18px; } /* 顶部导航样式 */ .navtop-standingPosition { height: 50px; background: #fff; position: fixed; top: 60px;  /* 为头栏留出空间 */ left: 0; right: 0; z-index: 998;  /* 降低z-index，确保hover效果不被遮挡 */ border-bottom: 1px solid #d4d6d9; } .nav-top-page { height: 100%; padding: 0 20px; display: flex; align-items: center; } .return { display: inline-flex; align-items: center; color: #666; font-size: 13px; min-width: 60px; margin-right: 20px; text-decoration: none; } .return:hover { color: #2B6DE5; text-decoration: none; } .return i { font-size: 16px; margin-right: 4px; } .page-title { font-size: 16px; font-weight: 600; color: #333; margin: 0; flex: 1; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 100px);  /* 减去返回按钮的宽度 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .page-desc { font-size: 14px; color: #495057; margin: 0; font-weight: normal; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 移动端适配 */ @media (max-width: 768px) { .sidebar-toggle { display: flex;  /* 移动端显示 */ } .category-nav { transform: translateX(-250px);  /* 默认隐藏 */ transition: transform 0.3s ease; } .category-nav.show { transform: translateX(0);  /* 显示侧栏 */ } } li { list-style-type: none !important; } /* 导航卡片整体样式 */ .category-nav { background: #fff; border-radius: 0; box-shadow: none; border-right: 1px solid #f1f1f1; position: fixed; left: 0; top: 110px;  /* 为头栏和顶栏留出空间 */ width: 250px; overflow-y: auto; z-index: 998;  /* 低于顶栏 */ height: calc(100vh - 120px);  /* 减去头栏和顶栏高度 */ padding: 0 10px 5px 10px; } /* 搜索框区域 */ .search-section { position: sticky; top: 0; z-index: 10; padding: 15px 0 15px 0; background: #fff; border-bottom: 1px solid #f1f1f1; } .pro-search-box .form-control { height: 36px; border-radius: 0; background: #fff !important; border: 1px solid #d4d6d9 !important; color: #181818; font-size: 13px; padding-left: 35px; width: 100%; } .pro-search-box .form-control::placeholder { color: #999; } .pro-search-box .position-relative { position: relative; width: 100%; display: flex; align-items: center; } .pro-search-box .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #999; font-size: 16px; cursor: pointer; pointer-events: auto; } .pro-search-box .form-control:focus { outline: none; border-color: #2B6DE5 !important; box-shadow: none; } /* 分类列表样式 */ .prolist { padding: 0 0 15px 0; } .category-item { border-bottom: 1px solid #f1f1f1; background-color: #f7f7f9; } /* 一级菜单样式 */ .first-level { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; font-size: 13px; color: #181818; font-weight: normal; cursor: pointer; border-left: 3px solid transparent; transition: all 0.2s ease; } .first-level:hover { background: #f3f6fe; } .first-level.active { background: #ebf3fd; } /* 箭头样式 */ .arrow-icon { font-size: 12px; color: #999; transition: all 0.3s ease; transform: rotate(90deg);  /* 初始角度 */ } .first-level:hover .arrow-icon, .first-level.active .arrow-icon { color: #2B6DE5; } .category-item.open .arrow-icon { transform: rotate(270deg);  /* 展开时旋转90度 */ } /* 二级菜单样式 */ .submenu { display: block;  /* 改为block */ background: #f9f9f9; max-height: 0;  /* 初始高度为0 */ overflow: hidden; transition: max-height 0.3s ease-out;  /* 添加过渡效果 */ } .category-item.open .submenu { max-height: 500px;  /* 展开时的最大高度 */ } .submenu-item { display: block; padding: 10px 15px 10px 28px; font-size: 12px; color: #181818; text-decoration: none; border-left: 3px solid transparent; transition: all 0.2s ease; } .submenu-content { display: flex; align-items: center; justify-content: space-between; width: 100%; } .submenu-left { display: flex; align-items: center; gap: 6px; } .submenu-tag { background-color: rgba(252, 241, 235, 1); color: rgba(254, 95, 71, 1); padding: 0 8px; height: 20px; line-height: 20px; font-size: 12px; font-weight: bold; border-radius: 2px; white-space: nowrap; } .submenu-item:hover { background: #f3f6fe; color: #181818; text-decoration: none; } .submenu-item.active { background: #e0eeff; border-left-color: #1e50d4; } /* 国旗图标样式 */ .country-flag { width: 24px; height: 14px; margin-right: 2px; } /* 修改滚动条样式 */ .category-nav::-webkit-scrollbar { width: 6px; } .category-nav::-webkit-scrollbar-thumb { background: #e6e6e6; border-radius: 3px; } .category-nav::-webkit-scrollbar-track { background: #f5f5f5; }