/* ========================================================= 极易智联 · 统一站点导航 nav.css 单一来源：所有页面共用同一套导航样式。主题：默认深底（nav-dark，可省略）；浅底产品页加 ========================================================= */ /* ---------- 基础结构（主题无关） ---------- */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; } .navbar-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 72px; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: inline-flex; align-items: center; } .nav-logo img { height: 30px; width: auto; } .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; } .nav-links > li { position: relative; } .nav-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; padding: 8px 2px; position: relative; transition: color .2s ease; } .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--jy-blue, #2563FF); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); } /* 下拉触发器 */ .nav-group-trigger { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; font-family: inherit; background: none; border: none; cursor: pointer; padding: 8px 2px; transition: color .2s ease; } .nav-chevron { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform .2s ease; } .nav-group:hover .nav-chevron, .nav-group.open .nav-chevron { transform: rotate(225deg); } /* 下拉面板（双主题统一为白底深色字，保证可读） */ .nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); padding-top: 10px; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease, transform .2s ease; } .nav-group:hover .nav-dropdown, .nav-group.open .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-dropdown-panel { background: #fff; border-radius: 14px; padding: 8px; min-width: 208px; box-shadow: 0 20px 50px rgba(10,15,26,.18); border: 1px solid rgba(10,15,26,.06); } .nav-dropdown-panel a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; color: #1F2A44; font-size: 14px; font-weight: 500; text-decoration: none; transition: background .15s ease, color .15s ease; } .nav-dropdown-panel a:hover { background: #F1F5FF; color: var(--jy-blue, #2563FF); } /* CTA 按钮 */ .nav-cta { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; color: #fff; background: linear-gradient(135deg, #2563FF, #00C8FF); box-shadow: 0 8px 20px rgba(37,99,255,.28); transition: transform .2s ease, box-shadow .2s ease; } .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(37,99,255,.36); } /* 顶部滚动进度条 */ .scroll-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, #2563FF, #00C8FF); transition: width .1s linear; } /* 汉堡按钮（移动端显示） */ .menu-btn { display: none; background: none; border: none; color: inherit; cursor: pointer; padding: 6px; } /* ---------- 默认：深底主题（nav-dark，可省略） ---------- */ /* 始终显示深色玻璃导航栏（与浅色页一致，不透明） */ .navbar { background: rgba(10,15,26,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 30px rgba(0,0,0,.32); } .navbar.scrolled { background: rgba(10,15,26,.97); box-shadow: 0 10px 34px rgba(0,0,0,.42); } .nav-link, .nav-group-trigger { color: rgba(255,255,255,.78); } .nav-link:hover, .nav-link.active, .nav-group-trigger:hover, .nav-group-trigger.active { color: #fff; } .logo-white { display: block; } .logo-color { display: none; } .menu-btn { color: #fff; } /* ---------- 浅底产品页主题（） ---------- */ body.nav-light .navbar { background: rgba(255,255,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 30px rgba(10,15,26,.10); } body.nav-light .navbar.scrolled { background: rgba(255,255,255,.98); box-shadow: 0 10px 34px rgba(10,15,26,.12); } body.nav-light .nav-link, body.nav-light .nav-group-trigger { color: #475569; } body.nav-light .nav-link:hover, body.nav-light .nav-group-trigger:hover { color: #0F172A; } body.nav-light .nav-link.active, body.nav-light .nav-group-trigger.active { color: var(--jy-blue, #2563FF); } body.nav-light .logo-white { display: none; } body.nav-light .logo-color { display: block; } body.nav-light .menu-btn { color: #0F172A; } /* ---------- 移动端菜单 ---------- */ .mobile-menu { position: fixed; top: 72px; left: 0; right: 0; z-index: 999; display: none; flex-direction: column; padding: 12px 24px 20px; max-height: calc(100vh - 72px); overflow-y: auto; background: rgba(10,15,26,.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .mobile-menu.open { display: flex; } .mobile-menu a { padding: 14px 4px; font-size: 16px; font-weight: 500; text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); } .mobile-menu .nav-cta { color: #fff; text-align: center; margin-top: 12px; border-bottom: none; border-radius: 999px; } body.nav-light .mobile-menu { background: rgba(255,255,255,.98); box-shadow: 0 20px 40px rgba(10,15,26,.12); } body.nav-light .mobile-menu a { color: #1F2A44; border-bottom: 1px solid rgba(10,15,26,.08); } body.nav-light .mobile-menu .nav-cta { color: #fff; } /* 遮罩（由 nav.js 动态创建） */ .nav-overlay { position: fixed; inset: 0; z-index: 998; background: rgba(10,15,26,.45); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .nav-overlay.show { opacity: 1; visibility: visible; } /* ---------- 响应式 ---------- */ @media (max-width: 1024px) { .nav-links { display: none; } .menu-btn { display: inline-flex; } .nav-dropdown { display: none; } }