/* ============================================================ 全站底部导航栏（手机端标准 tab bar） 用法：每个页面 引入本文件， 前引入 bottom-nav.js ============================================================ */ .bottom-nav{ position:fixed; left:0; right:0; bottom:0; margin:0 auto; max-width:680px; width:100%; height:56px; display:flex; align-items:stretch; background:#ffffff; border-top:1px solid #e6e8f0; box-shadow:0 -4px 16px rgba(20,23,40,.08); z-index:999; padding-bottom:env(safe-area-inset-bottom); } .bottom-nav .bn-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-decoration:none; color:#9aa1b2; font-size:11px; line-height:1; -webkit-tap-highlight-color:transparent; } .bottom-nav .bn-item i{ font-size:20px; margin-bottom:3px; } .bottom-nav .bn-item.active{ color:#4f46e5; } .bottom-nav .bn-item.active i{ color:#4f46e5; } /* 给页面内容留出底部空间，避免被导航挡住 */ body.has-bottom-nav{ padding-bottom:calc(64px + env(safe-area-inset-bottom)) !important; }