[{"data":1,"prerenderedAt":3529},["ShallowReactive",2],{"article-vue-layout-navbar-theme-switch":3},{"id":4,"title":5,"body":6,"date":3513,"description":3514,"extension":3515,"meta":3516,"navigation":672,"path":3524,"rawbody":3525,"seo":3526,"stem":3527,"__hash__":3528},"content\u002Fyehangzhou\u002Fnotes\u002Fvue-layout-navbar-theme-switch.md","一个简单的页面布局：导航+主体，包括自动主题切换、滚动隐藏导航栏",{"type":7,"value":8,"toc":3506},"minimark",[9,16,20,23,31,74,77,80,3385,3388,3411,3414,3422,3425,3500,3503],[10,11,12],"blockquote",{},[13,14,15],"p",{},"开箱即用的 Vue 3 布局模板，附带滚动隐藏导航栏与系统主题自适应",[17,18,19],"h2",{"id":19},"简介",[13,21,22],{},"日常开发中，我们经常需要一个干净、规范的页面骨架——顶部导航栏固定，下方滚动内容区。这个看似简单的需求，如果每次都从零写一遍，既浪费时间又容易遗漏细节。",[13,24,25,26,30],{},"这里分享一个我常用的布局组件，基于 ",[27,28,29],"strong",{},"Vue 3 + TypeScript","，包含了以下几个开箱即用的特性：",[32,33,34,41,52,62,68],"ul",{},[35,36,37,40],"li",{},[27,38,39],{},"固定导航栏 + 滚动自动隐藏","：滚动时导航栏上滑收起，回到顶部自动出现，移动端常见的交互模式",[35,42,43,46,47,51],{},[27,44,45],{},"毛玻璃视觉效果","：",[48,49,50],"code",{},"backdrop-filter: blur(10px)"," 营造半透明质感，不遮挡内容",[35,53,54,57,58,61],{},[27,55,56],{},"自动适配系统主题","：通过 CSS ",[48,59,60],{},"prefers-color-scheme"," 媒体查询，跟随系统明\u002F暗模式自动切换",[35,63,64,67],{},[27,65,66],{},"响应式移动端适配","：大屏展示完整菜单，小屏自动折叠为汉堡菜单",[35,69,70,73],{},[27,71,72],{},"自定义滚动条样式","：与品牌色保持视觉统一",[13,75,76],{},"直接复制代码即可使用，无需额外安装依赖。",[17,78,79],{"id":79},"完整代码",[81,82,87],"pre",{"className":83,"code":84,"language":85,"meta":86,"style":86},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cnav class=\"navbar\" :class=\"{ 'navbar-hidden': !isShowNav }\">\n    \u003Cdiv class=\"nav-container\">\n      \u003Cdiv class=\"nav-brand\">Logo\u003C\u002Fdiv>\n      \u003Cul class=\"nav-menu\">\n        \u003Cli>\u003Ca href=\"#home\">Home\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#posts\">Posts\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#download\">Download\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#about\">About\u003C\u002Fa>\u003C\u002Fli>\n      \u003C\u002Ful>\n      \u003Cdiv class=\"nav-actions\">\n        \u003Cbutton class=\"nav-toggle\">☰\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fnav>\n  \u003Cmain class=\"main-container\">\n    \u003Cp style=\"height:100px;\">Content1\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content2\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content3\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content4\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content5\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content6\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content7\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content8\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content9\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content10\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content11\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content12\u003C\u002Fp>\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { onMounted, onUnmounted, ref } from \"vue\";\n\nconst isShowNav = ref(true);\nlet scrollTimer: number | null = null;\n\nconst handleScrollWithDebounce = () => {\n  if (scrollTimer) {\n    clearTimeout(scrollTimer);\n  }\n  scrollTimer = window.setTimeout(() => {\n    const scrollTop = window.scrollY || document.documentElement.scrollTop;\n    if (scrollTop > 50) {\n      isShowNav.value = false;\n    } else {\n      isShowNav.value = true;\n    }\n  }, 50);\n};\n\nonMounted(() => {\n  window.addEventListener('scroll', handleScrollWithDebounce);\n});\n\nonUnmounted(() => {\n  window.removeEventListener('scroll', handleScrollWithDebounce);\n  if (scrollTimer) {\n    clearTimeout(scrollTimer);\n  }\n});\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.navbar {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  padding: 0 20px;\n  background: rgba(29, 29, 29, 0.95);\n  backdrop-filter: blur(10px);\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n  transition: transform 0.3s ease-in-out;\n  height: 64px;\n  display: flex;\n  align-items: center;\n}\n\n.navbar-hidden {\n  transform: translateY(-100%);\n}\n\n.nav-container {\n  max-width: 1200px;\n  width: 100%;\n  margin: 0 auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.nav-brand {\n  font-size: 20px;\n  font-weight: 700;\n  color: #ffffff;\n  letter-spacing: 1px;\n  cursor: pointer;\n}\n\n.nav-menu {\n  display: flex;\n  list-style: none;\n  gap: 32px;\n  margin: 0;\n  padding: 0;\n  align-items: center;\n}\n\n.nav-menu li a {\n  color: rgba(255, 255, 255, 0.8);\n  text-decoration: none;\n  font-size: 15px;\n  font-weight: 500;\n  padding: 8px 12px;\n  border-radius: 6px;\n  transition: all 0.2s ease;\n  position: relative;\n}\n\n.nav-menu li a:hover {\n  color: #ffffff;\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.nav-menu li a::after {\n  content: '';\n  position: absolute;\n  bottom: 4px;\n  left: 50%;\n  width: 0;\n  height: 2px;\n  background: #4a9eff;\n  transition: all 0.3s ease;\n  transform: translateX(-50%);\n}\n\n.nav-menu li a:hover::after {\n  width: 60%;\n}\n\n.nav-actions {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.nav-toggle {\n  display: none;\n  background: none;\n  border: none;\n  color: #ffffff;\n  font-size: 24px;\n  cursor: pointer;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background 0.2s ease;\n}\n\n.nav-toggle:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n\u002F* 响应式设计 *\u002F\n@media (max-width: 768px) {\n  .nav-toggle {\n    display: block;\n  }\n\n  .nav-menu {\n    position: absolute;\n    top: 64px;\n    left: 0;\n    right: 0;\n    flex-direction: column;\n    background: rgba(29, 29, 29, 0.98);\n    backdrop-filter: blur(10px);\n    padding: 20px;\n    gap: 12px;\n    transform: scaleY(0);\n    transform-origin: top;\n    transition: transform 0.3s ease;\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\n  }\n\n  .nav-menu.active {\n    transform: scaleY(1);\n  }\n\n  .nav-menu li {\n    width: 100%;\n  }\n\n  .nav-menu li a {\n    display: block;\n    text-align: center;\n    padding: 12px;\n    font-size: 16px;\n  }\n\n  .nav-menu li a::after {\n    display: none;\n  }\n}\n\n\u002F* 滚动条样式优化 *\u002F\n::-webkit-scrollbar {\n  width: 6px;\n}\n\n::-webkit-scrollbar-track {\n  background: #1d1d1d;\n}\n\n::-webkit-scrollbar-thumb {\n  background: #4a9eff;\n  border-radius: 3px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background: #3a8aef;\n}\n\n\u002F* 自动主题切换：亮色模式 *\u002F\n@media (prefers-color-scheme: light) {\n  .navbar {\n    background: rgba(255, 255, 255, 0.95);\n    backdrop-filter: blur(10px);\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  }\n\n  .nav-brand {\n    color: #1d1d1d;\n  }\n\n  .nav-menu li a {\n    color: rgba(0, 0, 0, 0.7);\n  }\n\n  .nav-menu li a:hover {\n    color: #000000;\n    background: rgba(0, 0, 0, 0.05);\n  }\n\n  .nav-toggle {\n    color: #1d1d1d;\n  }\n\n  .nav-toggle:hover {\n    background: rgba(0, 0, 0, 0.05);\n  }\n\n  @media (max-width: 768px) {\n    .nav-menu {\n      background: rgba(255, 255, 255, 0.98);\n      border-top: 1px solid rgba(0, 0, 0, 0.1);\n    }\n  }\n}\n\n.main-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding-top: 100px;\n}\n\u003C\u002Fstyle>\n","vue","",[48,88,89,105,135,153,175,191,225,254,283,312,322,338,360,369,379,389,406,428,448,468,488,508,528,548,568,588,608,628,648,657,667,674,695,714,719,744,771,776,795,804,813,819,840,860,878,891,902,914,920,931,937,942,954,971,977,982,994,1008,1015,1022,1027,1032,1041,1046,1059,1067,1081,1094,1106,1118,1131,1149,1181,1201,1243,1262,1277,1290,1303,1309,1314,1322,1343,1348,1353,1361,1376,1391,1406,1417,1430,1441,1446,1451,1459,1474,1487,1500,1515,1528,1533,1538,1546,1557,1570,1585,1596,1607,1618,1623,1628,1641,1670,1682,1696,1708,1727,1742,1762,1774,1779,1784,1798,1809,1837,1842,1847,1861,1874,1886,1901,1914,1925,1939,1951,1969,1988,1993,1998,2012,2026,2031,2036,2044,2055,2066,2080,2085,2090,2098,2109,2120,2132,2143,2157,2168,2186,2199,2218,2223,2228,2236,2263,2268,2273,2280,2301,2309,2322,2327,2332,2340,2352,2366,2378,2390,2403,2432,2450,2464,2478,2495,2508,2524,2559,2564,2569,2577,2592,2597,2602,2611,2625,2630,2635,2646,2657,2669,2682,2697,2702,2707,2720,2731,2736,2741,2746,2752,2760,2773,2778,2783,2791,2803,2808,2813,2821,2832,2846,2851,2856,2864,2876,2881,2886,2892,2900,2908,2935,2952,2990,2995,3000,3008,3020,3025,3030,3041,3069,3074,3079,3092,3104,3132,3137,3142,3149,3160,3165,3170,3178,3205,3210,3215,3233,3241,3269,3303,3308,3313,3318,3323,3331,3344,3357,3371,3376],{"__ignoreMap":86},[90,91,94,98,102],"span",{"class":92,"line":93},"line",1,[90,95,97],{"class":96},"sVt8B","\u003C",[90,99,101],{"class":100},"s9eBZ","template",[90,103,104],{"class":96},">\n",[90,106,108,111,114,118,121,125,128,130,133],{"class":92,"line":107},2,[90,109,110],{"class":96},"  \u003C",[90,112,113],{"class":100},"nav",[90,115,117],{"class":116},"sScJk"," class",[90,119,120],{"class":96},"=",[90,122,124],{"class":123},"sZZnC","\"navbar\"",[90,126,127],{"class":116}," :class",[90,129,120],{"class":96},[90,131,132],{"class":123},"\"{ 'navbar-hidden': !isShowNav }\"",[90,134,104],{"class":96},[90,136,138,141,144,146,148,151],{"class":92,"line":137},3,[90,139,140],{"class":96},"    \u003C",[90,142,143],{"class":100},"div",[90,145,117],{"class":116},[90,147,120],{"class":96},[90,149,150],{"class":123},"\"nav-container\"",[90,152,104],{"class":96},[90,154,156,159,161,163,165,168,171,173],{"class":92,"line":155},4,[90,157,158],{"class":96},"      \u003C",[90,160,143],{"class":100},[90,162,117],{"class":116},[90,164,120],{"class":96},[90,166,167],{"class":123},"\"nav-brand\"",[90,169,170],{"class":96},">Logo\u003C\u002F",[90,172,143],{"class":100},[90,174,104],{"class":96},[90,176,178,180,182,184,186,189],{"class":92,"line":177},5,[90,179,158],{"class":96},[90,181,32],{"class":100},[90,183,117],{"class":116},[90,185,120],{"class":96},[90,187,188],{"class":123},"\"nav-menu\"",[90,190,104],{"class":96},[90,192,194,197,199,202,205,208,210,213,216,218,221,223],{"class":92,"line":193},6,[90,195,196],{"class":96},"        \u003C",[90,198,35],{"class":100},[90,200,201],{"class":96},">\u003C",[90,203,204],{"class":100},"a",[90,206,207],{"class":116}," href",[90,209,120],{"class":96},[90,211,212],{"class":123},"\"#home\"",[90,214,215],{"class":96},">Home\u003C\u002F",[90,217,204],{"class":100},[90,219,220],{"class":96},">\u003C\u002F",[90,222,35],{"class":100},[90,224,104],{"class":96},[90,226,228,230,232,234,236,238,240,243,246,248,250,252],{"class":92,"line":227},7,[90,229,196],{"class":96},[90,231,35],{"class":100},[90,233,201],{"class":96},[90,235,204],{"class":100},[90,237,207],{"class":116},[90,239,120],{"class":96},[90,241,242],{"class":123},"\"#posts\"",[90,244,245],{"class":96},">Posts\u003C\u002F",[90,247,204],{"class":100},[90,249,220],{"class":96},[90,251,35],{"class":100},[90,253,104],{"class":96},[90,255,257,259,261,263,265,267,269,272,275,277,279,281],{"class":92,"line":256},8,[90,258,196],{"class":96},[90,260,35],{"class":100},[90,262,201],{"class":96},[90,264,204],{"class":100},[90,266,207],{"class":116},[90,268,120],{"class":96},[90,270,271],{"class":123},"\"#download\"",[90,273,274],{"class":96},">Download\u003C\u002F",[90,276,204],{"class":100},[90,278,220],{"class":96},[90,280,35],{"class":100},[90,282,104],{"class":96},[90,284,286,288,290,292,294,296,298,301,304,306,308,310],{"class":92,"line":285},9,[90,287,196],{"class":96},[90,289,35],{"class":100},[90,291,201],{"class":96},[90,293,204],{"class":100},[90,295,207],{"class":116},[90,297,120],{"class":96},[90,299,300],{"class":123},"\"#about\"",[90,302,303],{"class":96},">About\u003C\u002F",[90,305,204],{"class":100},[90,307,220],{"class":96},[90,309,35],{"class":100},[90,311,104],{"class":96},[90,313,315,318,320],{"class":92,"line":314},10,[90,316,317],{"class":96},"      \u003C\u002F",[90,319,32],{"class":100},[90,321,104],{"class":96},[90,323,325,327,329,331,333,336],{"class":92,"line":324},11,[90,326,158],{"class":96},[90,328,143],{"class":100},[90,330,117],{"class":116},[90,332,120],{"class":96},[90,334,335],{"class":123},"\"nav-actions\"",[90,337,104],{"class":96},[90,339,341,343,346,348,350,353,356,358],{"class":92,"line":340},12,[90,342,196],{"class":96},[90,344,345],{"class":100},"button",[90,347,117],{"class":116},[90,349,120],{"class":96},[90,351,352],{"class":123},"\"nav-toggle\"",[90,354,355],{"class":96},">☰\u003C\u002F",[90,357,345],{"class":100},[90,359,104],{"class":96},[90,361,363,365,367],{"class":92,"line":362},13,[90,364,317],{"class":96},[90,366,143],{"class":100},[90,368,104],{"class":96},[90,370,372,375,377],{"class":92,"line":371},14,[90,373,374],{"class":96},"    \u003C\u002F",[90,376,143],{"class":100},[90,378,104],{"class":96},[90,380,382,385,387],{"class":92,"line":381},15,[90,383,384],{"class":96},"  \u003C\u002F",[90,386,113],{"class":100},[90,388,104],{"class":96},[90,390,392,394,397,399,401,404],{"class":92,"line":391},16,[90,393,110],{"class":96},[90,395,396],{"class":100},"main",[90,398,117],{"class":116},[90,400,120],{"class":96},[90,402,403],{"class":123},"\"main-container\"",[90,405,104],{"class":96},[90,407,409,411,413,416,418,421,424,426],{"class":92,"line":408},17,[90,410,140],{"class":96},[90,412,13],{"class":100},[90,414,415],{"class":116}," style",[90,417,120],{"class":96},[90,419,420],{"class":123},"\"height:100px;\"",[90,422,423],{"class":96},">Content1\u003C\u002F",[90,425,13],{"class":100},[90,427,104],{"class":96},[90,429,431,433,435,437,439,441,444,446],{"class":92,"line":430},18,[90,432,140],{"class":96},[90,434,13],{"class":100},[90,436,415],{"class":116},[90,438,120],{"class":96},[90,440,420],{"class":123},[90,442,443],{"class":96},">Content2\u003C\u002F",[90,445,13],{"class":100},[90,447,104],{"class":96},[90,449,451,453,455,457,459,461,464,466],{"class":92,"line":450},19,[90,452,140],{"class":96},[90,454,13],{"class":100},[90,456,415],{"class":116},[90,458,120],{"class":96},[90,460,420],{"class":123},[90,462,463],{"class":96},">Content3\u003C\u002F",[90,465,13],{"class":100},[90,467,104],{"class":96},[90,469,471,473,475,477,479,481,484,486],{"class":92,"line":470},20,[90,472,140],{"class":96},[90,474,13],{"class":100},[90,476,415],{"class":116},[90,478,120],{"class":96},[90,480,420],{"class":123},[90,482,483],{"class":96},">Content4\u003C\u002F",[90,485,13],{"class":100},[90,487,104],{"class":96},[90,489,491,493,495,497,499,501,504,506],{"class":92,"line":490},21,[90,492,140],{"class":96},[90,494,13],{"class":100},[90,496,415],{"class":116},[90,498,120],{"class":96},[90,500,420],{"class":123},[90,502,503],{"class":96},">Content5\u003C\u002F",[90,505,13],{"class":100},[90,507,104],{"class":96},[90,509,511,513,515,517,519,521,524,526],{"class":92,"line":510},22,[90,512,140],{"class":96},[90,514,13],{"class":100},[90,516,415],{"class":116},[90,518,120],{"class":96},[90,520,420],{"class":123},[90,522,523],{"class":96},">Content6\u003C\u002F",[90,525,13],{"class":100},[90,527,104],{"class":96},[90,529,531,533,535,537,539,541,544,546],{"class":92,"line":530},23,[90,532,140],{"class":96},[90,534,13],{"class":100},[90,536,415],{"class":116},[90,538,120],{"class":96},[90,540,420],{"class":123},[90,542,543],{"class":96},">Content7\u003C\u002F",[90,545,13],{"class":100},[90,547,104],{"class":96},[90,549,551,553,555,557,559,561,564,566],{"class":92,"line":550},24,[90,552,140],{"class":96},[90,554,13],{"class":100},[90,556,415],{"class":116},[90,558,120],{"class":96},[90,560,420],{"class":123},[90,562,563],{"class":96},">Content8\u003C\u002F",[90,565,13],{"class":100},[90,567,104],{"class":96},[90,569,571,573,575,577,579,581,584,586],{"class":92,"line":570},25,[90,572,140],{"class":96},[90,574,13],{"class":100},[90,576,415],{"class":116},[90,578,120],{"class":96},[90,580,420],{"class":123},[90,582,583],{"class":96},">Content9\u003C\u002F",[90,585,13],{"class":100},[90,587,104],{"class":96},[90,589,591,593,595,597,599,601,604,606],{"class":92,"line":590},26,[90,592,140],{"class":96},[90,594,13],{"class":100},[90,596,415],{"class":116},[90,598,120],{"class":96},[90,600,420],{"class":123},[90,602,603],{"class":96},">Content10\u003C\u002F",[90,605,13],{"class":100},[90,607,104],{"class":96},[90,609,611,613,615,617,619,621,624,626],{"class":92,"line":610},27,[90,612,140],{"class":96},[90,614,13],{"class":100},[90,616,415],{"class":116},[90,618,120],{"class":96},[90,620,420],{"class":123},[90,622,623],{"class":96},">Content11\u003C\u002F",[90,625,13],{"class":100},[90,627,104],{"class":96},[90,629,631,633,635,637,639,641,644,646],{"class":92,"line":630},28,[90,632,140],{"class":96},[90,634,13],{"class":100},[90,636,415],{"class":116},[90,638,120],{"class":96},[90,640,420],{"class":123},[90,642,643],{"class":96},">Content12\u003C\u002F",[90,645,13],{"class":100},[90,647,104],{"class":96},[90,649,651,653,655],{"class":92,"line":650},29,[90,652,384],{"class":96},[90,654,396],{"class":100},[90,656,104],{"class":96},[90,658,660,663,665],{"class":92,"line":659},30,[90,661,662],{"class":96},"\u003C\u002F",[90,664,101],{"class":100},[90,666,104],{"class":96},[90,668,670],{"class":92,"line":669},31,[90,671,673],{"emptyLinePlaceholder":672},true,"\n",[90,675,677,679,682,685,688,690,693],{"class":92,"line":676},32,[90,678,97],{"class":96},[90,680,681],{"class":100},"script",[90,683,684],{"class":116}," setup",[90,686,687],{"class":116}," lang",[90,689,120],{"class":96},[90,691,692],{"class":123},"\"ts\"",[90,694,104],{"class":96},[90,696,698,702,705,708,711],{"class":92,"line":697},33,[90,699,701],{"class":700},"szBVR","import",[90,703,704],{"class":96}," { onMounted, onUnmounted, ref } ",[90,706,707],{"class":700},"from",[90,709,710],{"class":123}," \"vue\"",[90,712,713],{"class":96},";\n",[90,715,717],{"class":92,"line":716},34,[90,718,673],{"emptyLinePlaceholder":672},[90,720,722,725,729,732,735,738,741],{"class":92,"line":721},35,[90,723,724],{"class":700},"const",[90,726,728],{"class":727},"sj4cs"," isShowNav",[90,730,731],{"class":700}," =",[90,733,734],{"class":116}," ref",[90,736,737],{"class":96},"(",[90,739,740],{"class":727},"true",[90,742,743],{"class":96},");\n",[90,745,747,750,753,756,759,762,765,767,769],{"class":92,"line":746},36,[90,748,749],{"class":700},"let",[90,751,752],{"class":96}," scrollTimer",[90,754,755],{"class":700},":",[90,757,758],{"class":727}," number",[90,760,761],{"class":700}," |",[90,763,764],{"class":727}," null",[90,766,731],{"class":700},[90,768,764],{"class":727},[90,770,713],{"class":96},[90,772,774],{"class":92,"line":773},37,[90,775,673],{"emptyLinePlaceholder":672},[90,777,779,781,784,786,789,792],{"class":92,"line":778},38,[90,780,724],{"class":700},[90,782,783],{"class":116}," handleScrollWithDebounce",[90,785,731],{"class":700},[90,787,788],{"class":96}," () ",[90,790,791],{"class":700},"=>",[90,793,794],{"class":96}," {\n",[90,796,798,801],{"class":92,"line":797},39,[90,799,800],{"class":700},"  if",[90,802,803],{"class":96}," (scrollTimer) {\n",[90,805,807,810],{"class":92,"line":806},40,[90,808,809],{"class":116},"    clearTimeout",[90,811,812],{"class":96},"(scrollTimer);\n",[90,814,816],{"class":92,"line":815},41,[90,817,818],{"class":96},"  }\n",[90,820,822,825,827,830,833,836,838],{"class":92,"line":821},42,[90,823,824],{"class":96},"  scrollTimer ",[90,826,120],{"class":700},[90,828,829],{"class":96}," window.",[90,831,832],{"class":116},"setTimeout",[90,834,835],{"class":96},"(() ",[90,837,791],{"class":700},[90,839,794],{"class":96},[90,841,843,846,849,851,854,857],{"class":92,"line":842},43,[90,844,845],{"class":700},"    const",[90,847,848],{"class":727}," scrollTop",[90,850,731],{"class":700},[90,852,853],{"class":96}," window.scrollY ",[90,855,856],{"class":700},"||",[90,858,859],{"class":96}," document.documentElement.scrollTop;\n",[90,861,863,866,869,872,875],{"class":92,"line":862},44,[90,864,865],{"class":700},"    if",[90,867,868],{"class":96}," (scrollTop ",[90,870,871],{"class":700},">",[90,873,874],{"class":727}," 50",[90,876,877],{"class":96},") {\n",[90,879,881,884,886,889],{"class":92,"line":880},45,[90,882,883],{"class":96},"      isShowNav.value ",[90,885,120],{"class":700},[90,887,888],{"class":727}," false",[90,890,713],{"class":96},[90,892,894,897,900],{"class":92,"line":893},46,[90,895,896],{"class":96},"    } ",[90,898,899],{"class":700},"else",[90,901,794],{"class":96},[90,903,905,907,909,912],{"class":92,"line":904},47,[90,906,883],{"class":96},[90,908,120],{"class":700},[90,910,911],{"class":727}," true",[90,913,713],{"class":96},[90,915,917],{"class":92,"line":916},48,[90,918,919],{"class":96},"    }\n",[90,921,923,926,929],{"class":92,"line":922},49,[90,924,925],{"class":96},"  }, ",[90,927,928],{"class":727},"50",[90,930,743],{"class":96},[90,932,934],{"class":92,"line":933},50,[90,935,936],{"class":96},"};\n",[90,938,940],{"class":92,"line":939},51,[90,941,673],{"emptyLinePlaceholder":672},[90,943,945,948,950,952],{"class":92,"line":944},52,[90,946,947],{"class":116},"onMounted",[90,949,835],{"class":96},[90,951,791],{"class":700},[90,953,794],{"class":96},[90,955,957,960,963,965,968],{"class":92,"line":956},53,[90,958,959],{"class":96},"  window.",[90,961,962],{"class":116},"addEventListener",[90,964,737],{"class":96},[90,966,967],{"class":123},"'scroll'",[90,969,970],{"class":96},", handleScrollWithDebounce);\n",[90,972,974],{"class":92,"line":973},54,[90,975,976],{"class":96},"});\n",[90,978,980],{"class":92,"line":979},55,[90,981,673],{"emptyLinePlaceholder":672},[90,983,985,988,990,992],{"class":92,"line":984},56,[90,986,987],{"class":116},"onUnmounted",[90,989,835],{"class":96},[90,991,791],{"class":700},[90,993,794],{"class":96},[90,995,997,999,1002,1004,1006],{"class":92,"line":996},57,[90,998,959],{"class":96},[90,1000,1001],{"class":116},"removeEventListener",[90,1003,737],{"class":96},[90,1005,967],{"class":123},[90,1007,970],{"class":96},[90,1009,1011,1013],{"class":92,"line":1010},58,[90,1012,800],{"class":700},[90,1014,803],{"class":96},[90,1016,1018,1020],{"class":92,"line":1017},59,[90,1019,809],{"class":116},[90,1021,812],{"class":96},[90,1023,1025],{"class":92,"line":1024},60,[90,1026,818],{"class":96},[90,1028,1030],{"class":92,"line":1029},61,[90,1031,976],{"class":96},[90,1033,1035,1037,1039],{"class":92,"line":1034},62,[90,1036,662],{"class":96},[90,1038,681],{"class":100},[90,1040,104],{"class":96},[90,1042,1044],{"class":92,"line":1043},63,[90,1045,673],{"emptyLinePlaceholder":672},[90,1047,1049,1051,1054,1057],{"class":92,"line":1048},64,[90,1050,97],{"class":96},[90,1052,1053],{"class":100},"style",[90,1055,1056],{"class":116}," scoped",[90,1058,104],{"class":96},[90,1060,1062,1065],{"class":92,"line":1061},65,[90,1063,1064],{"class":116},".navbar",[90,1066,794],{"class":96},[90,1068,1070,1073,1076,1079],{"class":92,"line":1069},66,[90,1071,1072],{"class":727},"  position",[90,1074,1075],{"class":96},": ",[90,1077,1078],{"class":727},"fixed",[90,1080,713],{"class":96},[90,1082,1084,1087,1089,1092],{"class":92,"line":1083},67,[90,1085,1086],{"class":727},"  top",[90,1088,1075],{"class":96},[90,1090,1091],{"class":727},"0",[90,1093,713],{"class":96},[90,1095,1097,1100,1102,1104],{"class":92,"line":1096},68,[90,1098,1099],{"class":727},"  left",[90,1101,1075],{"class":96},[90,1103,1091],{"class":727},[90,1105,713],{"class":96},[90,1107,1109,1112,1114,1116],{"class":92,"line":1108},69,[90,1110,1111],{"class":727},"  right",[90,1113,1075],{"class":96},[90,1115,1091],{"class":727},[90,1117,713],{"class":96},[90,1119,1121,1124,1126,1129],{"class":92,"line":1120},70,[90,1122,1123],{"class":727},"  z-index",[90,1125,1075],{"class":96},[90,1127,1128],{"class":727},"1000",[90,1130,713],{"class":96},[90,1132,1134,1137,1139,1141,1144,1147],{"class":92,"line":1133},71,[90,1135,1136],{"class":727},"  padding",[90,1138,1075],{"class":96},[90,1140,1091],{"class":727},[90,1142,1143],{"class":727}," 20",[90,1145,1146],{"class":700},"px",[90,1148,713],{"class":96},[90,1150,1152,1155,1157,1160,1162,1165,1168,1170,1172,1174,1176,1179],{"class":92,"line":1151},72,[90,1153,1154],{"class":727},"  background",[90,1156,1075],{"class":96},[90,1158,1159],{"class":727},"rgba",[90,1161,737],{"class":96},[90,1163,1164],{"class":727},"29",[90,1166,1167],{"class":96},", ",[90,1169,1164],{"class":727},[90,1171,1167],{"class":96},[90,1173,1164],{"class":727},[90,1175,1167],{"class":96},[90,1177,1178],{"class":727},"0.95",[90,1180,743],{"class":96},[90,1182,1184,1187,1189,1192,1194,1197,1199],{"class":92,"line":1183},73,[90,1185,1186],{"class":727},"  backdrop-filter",[90,1188,1075],{"class":96},[90,1190,1191],{"class":727},"blur",[90,1193,737],{"class":96},[90,1195,1196],{"class":727},"10",[90,1198,1146],{"class":700},[90,1200,743],{"class":96},[90,1202,1204,1207,1209,1211,1214,1216,1219,1221,1224,1226,1228,1230,1232,1234,1236,1238,1241],{"class":92,"line":1203},74,[90,1205,1206],{"class":727},"  box-shadow",[90,1208,1075],{"class":96},[90,1210,1091],{"class":727},[90,1212,1213],{"class":727}," 2",[90,1215,1146],{"class":700},[90,1217,1218],{"class":727}," 10",[90,1220,1146],{"class":700},[90,1222,1223],{"class":727}," rgba",[90,1225,737],{"class":96},[90,1227,1091],{"class":727},[90,1229,1167],{"class":96},[90,1231,1091],{"class":727},[90,1233,1167],{"class":96},[90,1235,1091],{"class":727},[90,1237,1167],{"class":96},[90,1239,1240],{"class":727},"0.3",[90,1242,743],{"class":96},[90,1244,1246,1249,1252,1254,1257,1260],{"class":92,"line":1245},75,[90,1247,1248],{"class":727},"  transition",[90,1250,1251],{"class":96},": transform ",[90,1253,1240],{"class":727},[90,1255,1256],{"class":700},"s",[90,1258,1259],{"class":727}," ease-in-out",[90,1261,713],{"class":96},[90,1263,1265,1268,1270,1273,1275],{"class":92,"line":1264},76,[90,1266,1267],{"class":727},"  height",[90,1269,1075],{"class":96},[90,1271,1272],{"class":727},"64",[90,1274,1146],{"class":700},[90,1276,713],{"class":96},[90,1278,1280,1283,1285,1288],{"class":92,"line":1279},77,[90,1281,1282],{"class":727},"  display",[90,1284,1075],{"class":96},[90,1286,1287],{"class":727},"flex",[90,1289,713],{"class":96},[90,1291,1293,1296,1298,1301],{"class":92,"line":1292},78,[90,1294,1295],{"class":727},"  align-items",[90,1297,1075],{"class":96},[90,1299,1300],{"class":727},"center",[90,1302,713],{"class":96},[90,1304,1306],{"class":92,"line":1305},79,[90,1307,1308],{"class":96},"}\n",[90,1310,1312],{"class":92,"line":1311},80,[90,1313,673],{"emptyLinePlaceholder":672},[90,1315,1317,1320],{"class":92,"line":1316},81,[90,1318,1319],{"class":116},".navbar-hidden",[90,1321,794],{"class":96},[90,1323,1325,1328,1330,1333,1335,1338,1341],{"class":92,"line":1324},82,[90,1326,1327],{"class":727},"  transform",[90,1329,1075],{"class":96},[90,1331,1332],{"class":727},"translateY",[90,1334,737],{"class":96},[90,1336,1337],{"class":727},"-100",[90,1339,1340],{"class":700},"%",[90,1342,743],{"class":96},[90,1344,1346],{"class":92,"line":1345},83,[90,1347,1308],{"class":96},[90,1349,1351],{"class":92,"line":1350},84,[90,1352,673],{"emptyLinePlaceholder":672},[90,1354,1356,1359],{"class":92,"line":1355},85,[90,1357,1358],{"class":116},".nav-container",[90,1360,794],{"class":96},[90,1362,1364,1367,1369,1372,1374],{"class":92,"line":1363},86,[90,1365,1366],{"class":727},"  max-width",[90,1368,1075],{"class":96},[90,1370,1371],{"class":727},"1200",[90,1373,1146],{"class":700},[90,1375,713],{"class":96},[90,1377,1379,1382,1384,1387,1389],{"class":92,"line":1378},87,[90,1380,1381],{"class":727},"  width",[90,1383,1075],{"class":96},[90,1385,1386],{"class":727},"100",[90,1388,1340],{"class":700},[90,1390,713],{"class":96},[90,1392,1394,1397,1399,1401,1404],{"class":92,"line":1393},88,[90,1395,1396],{"class":727},"  margin",[90,1398,1075],{"class":96},[90,1400,1091],{"class":727},[90,1402,1403],{"class":727}," auto",[90,1405,713],{"class":96},[90,1407,1409,1411,1413,1415],{"class":92,"line":1408},89,[90,1410,1282],{"class":727},[90,1412,1075],{"class":96},[90,1414,1287],{"class":727},[90,1416,713],{"class":96},[90,1418,1420,1423,1425,1428],{"class":92,"line":1419},90,[90,1421,1422],{"class":727},"  justify-content",[90,1424,1075],{"class":96},[90,1426,1427],{"class":727},"space-between",[90,1429,713],{"class":96},[90,1431,1433,1435,1437,1439],{"class":92,"line":1432},91,[90,1434,1295],{"class":727},[90,1436,1075],{"class":96},[90,1438,1300],{"class":727},[90,1440,713],{"class":96},[90,1442,1444],{"class":92,"line":1443},92,[90,1445,1308],{"class":96},[90,1447,1449],{"class":92,"line":1448},93,[90,1450,673],{"emptyLinePlaceholder":672},[90,1452,1454,1457],{"class":92,"line":1453},94,[90,1455,1456],{"class":116},".nav-brand",[90,1458,794],{"class":96},[90,1460,1462,1465,1467,1470,1472],{"class":92,"line":1461},95,[90,1463,1464],{"class":727},"  font-size",[90,1466,1075],{"class":96},[90,1468,1469],{"class":727},"20",[90,1471,1146],{"class":700},[90,1473,713],{"class":96},[90,1475,1477,1480,1482,1485],{"class":92,"line":1476},96,[90,1478,1479],{"class":727},"  font-weight",[90,1481,1075],{"class":96},[90,1483,1484],{"class":727},"700",[90,1486,713],{"class":96},[90,1488,1490,1493,1495,1498],{"class":92,"line":1489},97,[90,1491,1492],{"class":727},"  color",[90,1494,1075],{"class":96},[90,1496,1497],{"class":727},"#ffffff",[90,1499,713],{"class":96},[90,1501,1503,1506,1508,1511,1513],{"class":92,"line":1502},98,[90,1504,1505],{"class":727},"  letter-spacing",[90,1507,1075],{"class":96},[90,1509,1510],{"class":727},"1",[90,1512,1146],{"class":700},[90,1514,713],{"class":96},[90,1516,1518,1521,1523,1526],{"class":92,"line":1517},99,[90,1519,1520],{"class":727},"  cursor",[90,1522,1075],{"class":96},[90,1524,1525],{"class":727},"pointer",[90,1527,713],{"class":96},[90,1529,1531],{"class":92,"line":1530},100,[90,1532,1308],{"class":96},[90,1534,1536],{"class":92,"line":1535},101,[90,1537,673],{"emptyLinePlaceholder":672},[90,1539,1541,1544],{"class":92,"line":1540},102,[90,1542,1543],{"class":116},".nav-menu",[90,1545,794],{"class":96},[90,1547,1549,1551,1553,1555],{"class":92,"line":1548},103,[90,1550,1282],{"class":727},[90,1552,1075],{"class":96},[90,1554,1287],{"class":727},[90,1556,713],{"class":96},[90,1558,1560,1563,1565,1568],{"class":92,"line":1559},104,[90,1561,1562],{"class":727},"  list-style",[90,1564,1075],{"class":96},[90,1566,1567],{"class":727},"none",[90,1569,713],{"class":96},[90,1571,1573,1576,1578,1581,1583],{"class":92,"line":1572},105,[90,1574,1575],{"class":727},"  gap",[90,1577,1075],{"class":96},[90,1579,1580],{"class":727},"32",[90,1582,1146],{"class":700},[90,1584,713],{"class":96},[90,1586,1588,1590,1592,1594],{"class":92,"line":1587},106,[90,1589,1396],{"class":727},[90,1591,1075],{"class":96},[90,1593,1091],{"class":727},[90,1595,713],{"class":96},[90,1597,1599,1601,1603,1605],{"class":92,"line":1598},107,[90,1600,1136],{"class":727},[90,1602,1075],{"class":96},[90,1604,1091],{"class":727},[90,1606,713],{"class":96},[90,1608,1610,1612,1614,1616],{"class":92,"line":1609},108,[90,1611,1295],{"class":727},[90,1613,1075],{"class":96},[90,1615,1300],{"class":727},[90,1617,713],{"class":96},[90,1619,1621],{"class":92,"line":1620},109,[90,1622,1308],{"class":96},[90,1624,1626],{"class":92,"line":1625},110,[90,1627,673],{"emptyLinePlaceholder":672},[90,1629,1631,1633,1636,1639],{"class":92,"line":1630},111,[90,1632,1543],{"class":116},[90,1634,1635],{"class":100}," li",[90,1637,1638],{"class":100}," a",[90,1640,794],{"class":96},[90,1642,1644,1646,1648,1650,1652,1655,1657,1659,1661,1663,1665,1668],{"class":92,"line":1643},112,[90,1645,1492],{"class":727},[90,1647,1075],{"class":96},[90,1649,1159],{"class":727},[90,1651,737],{"class":96},[90,1653,1654],{"class":727},"255",[90,1656,1167],{"class":96},[90,1658,1654],{"class":727},[90,1660,1167],{"class":96},[90,1662,1654],{"class":727},[90,1664,1167],{"class":96},[90,1666,1667],{"class":727},"0.8",[90,1669,743],{"class":96},[90,1671,1673,1676,1678,1680],{"class":92,"line":1672},113,[90,1674,1675],{"class":727},"  text-decoration",[90,1677,1075],{"class":96},[90,1679,1567],{"class":727},[90,1681,713],{"class":96},[90,1683,1685,1687,1689,1692,1694],{"class":92,"line":1684},114,[90,1686,1464],{"class":727},[90,1688,1075],{"class":96},[90,1690,1691],{"class":727},"15",[90,1693,1146],{"class":700},[90,1695,713],{"class":96},[90,1697,1699,1701,1703,1706],{"class":92,"line":1698},115,[90,1700,1479],{"class":727},[90,1702,1075],{"class":96},[90,1704,1705],{"class":727},"500",[90,1707,713],{"class":96},[90,1709,1711,1713,1715,1718,1720,1723,1725],{"class":92,"line":1710},116,[90,1712,1136],{"class":727},[90,1714,1075],{"class":96},[90,1716,1717],{"class":727},"8",[90,1719,1146],{"class":700},[90,1721,1722],{"class":727}," 12",[90,1724,1146],{"class":700},[90,1726,713],{"class":96},[90,1728,1730,1733,1735,1738,1740],{"class":92,"line":1729},117,[90,1731,1732],{"class":727},"  border-radius",[90,1734,1075],{"class":96},[90,1736,1737],{"class":727},"6",[90,1739,1146],{"class":700},[90,1741,713],{"class":96},[90,1743,1745,1747,1749,1752,1755,1757,1760],{"class":92,"line":1744},118,[90,1746,1248],{"class":727},[90,1748,1075],{"class":96},[90,1750,1751],{"class":727},"all",[90,1753,1754],{"class":727}," 0.2",[90,1756,1256],{"class":700},[90,1758,1759],{"class":727}," ease",[90,1761,713],{"class":96},[90,1763,1765,1767,1769,1772],{"class":92,"line":1764},119,[90,1766,1072],{"class":727},[90,1768,1075],{"class":96},[90,1770,1771],{"class":727},"relative",[90,1773,713],{"class":96},[90,1775,1777],{"class":92,"line":1776},120,[90,1778,1308],{"class":96},[90,1780,1782],{"class":92,"line":1781},121,[90,1783,673],{"emptyLinePlaceholder":672},[90,1785,1787,1789,1791,1793,1796],{"class":92,"line":1786},122,[90,1788,1543],{"class":116},[90,1790,1635],{"class":100},[90,1792,1638],{"class":100},[90,1794,1795],{"class":116},":hover",[90,1797,794],{"class":96},[90,1799,1801,1803,1805,1807],{"class":92,"line":1800},123,[90,1802,1492],{"class":727},[90,1804,1075],{"class":96},[90,1806,1497],{"class":727},[90,1808,713],{"class":96},[90,1810,1812,1814,1816,1818,1820,1822,1824,1826,1828,1830,1832,1835],{"class":92,"line":1811},124,[90,1813,1154],{"class":727},[90,1815,1075],{"class":96},[90,1817,1159],{"class":727},[90,1819,737],{"class":96},[90,1821,1654],{"class":727},[90,1823,1167],{"class":96},[90,1825,1654],{"class":727},[90,1827,1167],{"class":96},[90,1829,1654],{"class":727},[90,1831,1167],{"class":96},[90,1833,1834],{"class":727},"0.1",[90,1836,743],{"class":96},[90,1838,1840],{"class":92,"line":1839},125,[90,1841,1308],{"class":96},[90,1843,1845],{"class":92,"line":1844},126,[90,1846,673],{"emptyLinePlaceholder":672},[90,1848,1850,1852,1854,1856,1859],{"class":92,"line":1849},127,[90,1851,1543],{"class":116},[90,1853,1635],{"class":100},[90,1855,1638],{"class":100},[90,1857,1858],{"class":116},"::after",[90,1860,794],{"class":96},[90,1862,1864,1867,1869,1872],{"class":92,"line":1863},128,[90,1865,1866],{"class":727},"  content",[90,1868,1075],{"class":96},[90,1870,1871],{"class":123},"''",[90,1873,713],{"class":96},[90,1875,1877,1879,1881,1884],{"class":92,"line":1876},129,[90,1878,1072],{"class":727},[90,1880,1075],{"class":96},[90,1882,1883],{"class":727},"absolute",[90,1885,713],{"class":96},[90,1887,1889,1892,1894,1897,1899],{"class":92,"line":1888},130,[90,1890,1891],{"class":727},"  bottom",[90,1893,1075],{"class":96},[90,1895,1896],{"class":727},"4",[90,1898,1146],{"class":700},[90,1900,713],{"class":96},[90,1902,1904,1906,1908,1910,1912],{"class":92,"line":1903},131,[90,1905,1099],{"class":727},[90,1907,1075],{"class":96},[90,1909,928],{"class":727},[90,1911,1340],{"class":700},[90,1913,713],{"class":96},[90,1915,1917,1919,1921,1923],{"class":92,"line":1916},132,[90,1918,1381],{"class":727},[90,1920,1075],{"class":96},[90,1922,1091],{"class":727},[90,1924,713],{"class":96},[90,1926,1928,1930,1932,1935,1937],{"class":92,"line":1927},133,[90,1929,1267],{"class":727},[90,1931,1075],{"class":96},[90,1933,1934],{"class":727},"2",[90,1936,1146],{"class":700},[90,1938,713],{"class":96},[90,1940,1942,1944,1946,1949],{"class":92,"line":1941},134,[90,1943,1154],{"class":727},[90,1945,1075],{"class":96},[90,1947,1948],{"class":727},"#4a9eff",[90,1950,713],{"class":96},[90,1952,1954,1956,1958,1960,1963,1965,1967],{"class":92,"line":1953},135,[90,1955,1248],{"class":727},[90,1957,1075],{"class":96},[90,1959,1751],{"class":727},[90,1961,1962],{"class":727}," 0.3",[90,1964,1256],{"class":700},[90,1966,1759],{"class":727},[90,1968,713],{"class":96},[90,1970,1972,1974,1976,1979,1981,1984,1986],{"class":92,"line":1971},136,[90,1973,1327],{"class":727},[90,1975,1075],{"class":96},[90,1977,1978],{"class":727},"translateX",[90,1980,737],{"class":96},[90,1982,1983],{"class":727},"-50",[90,1985,1340],{"class":700},[90,1987,743],{"class":96},[90,1989,1991],{"class":92,"line":1990},137,[90,1992,1308],{"class":96},[90,1994,1996],{"class":92,"line":1995},138,[90,1997,673],{"emptyLinePlaceholder":672},[90,1999,2001,2003,2005,2007,2010],{"class":92,"line":2000},139,[90,2002,1543],{"class":116},[90,2004,1635],{"class":100},[90,2006,1638],{"class":100},[90,2008,2009],{"class":116},":hover::after",[90,2011,794],{"class":96},[90,2013,2015,2017,2019,2022,2024],{"class":92,"line":2014},140,[90,2016,1381],{"class":727},[90,2018,1075],{"class":96},[90,2020,2021],{"class":727},"60",[90,2023,1340],{"class":700},[90,2025,713],{"class":96},[90,2027,2029],{"class":92,"line":2028},141,[90,2030,1308],{"class":96},[90,2032,2034],{"class":92,"line":2033},142,[90,2035,673],{"emptyLinePlaceholder":672},[90,2037,2039,2042],{"class":92,"line":2038},143,[90,2040,2041],{"class":116},".nav-actions",[90,2043,794],{"class":96},[90,2045,2047,2049,2051,2053],{"class":92,"line":2046},144,[90,2048,1282],{"class":727},[90,2050,1075],{"class":96},[90,2052,1287],{"class":727},[90,2054,713],{"class":96},[90,2056,2058,2060,2062,2064],{"class":92,"line":2057},145,[90,2059,1295],{"class":727},[90,2061,1075],{"class":96},[90,2063,1300],{"class":727},[90,2065,713],{"class":96},[90,2067,2069,2071,2073,2076,2078],{"class":92,"line":2068},146,[90,2070,1575],{"class":727},[90,2072,1075],{"class":96},[90,2074,2075],{"class":727},"12",[90,2077,1146],{"class":700},[90,2079,713],{"class":96},[90,2081,2083],{"class":92,"line":2082},147,[90,2084,1308],{"class":96},[90,2086,2088],{"class":92,"line":2087},148,[90,2089,673],{"emptyLinePlaceholder":672},[90,2091,2093,2096],{"class":92,"line":2092},149,[90,2094,2095],{"class":116},".nav-toggle",[90,2097,794],{"class":96},[90,2099,2101,2103,2105,2107],{"class":92,"line":2100},150,[90,2102,1282],{"class":727},[90,2104,1075],{"class":96},[90,2106,1567],{"class":727},[90,2108,713],{"class":96},[90,2110,2112,2114,2116,2118],{"class":92,"line":2111},151,[90,2113,1154],{"class":727},[90,2115,1075],{"class":96},[90,2117,1567],{"class":727},[90,2119,713],{"class":96},[90,2121,2123,2126,2128,2130],{"class":92,"line":2122},152,[90,2124,2125],{"class":727},"  border",[90,2127,1075],{"class":96},[90,2129,1567],{"class":727},[90,2131,713],{"class":96},[90,2133,2135,2137,2139,2141],{"class":92,"line":2134},153,[90,2136,1492],{"class":727},[90,2138,1075],{"class":96},[90,2140,1497],{"class":727},[90,2142,713],{"class":96},[90,2144,2146,2148,2150,2153,2155],{"class":92,"line":2145},154,[90,2147,1464],{"class":727},[90,2149,1075],{"class":96},[90,2151,2152],{"class":727},"24",[90,2154,1146],{"class":700},[90,2156,713],{"class":96},[90,2158,2160,2162,2164,2166],{"class":92,"line":2159},155,[90,2161,1520],{"class":727},[90,2163,1075],{"class":96},[90,2165,1525],{"class":727},[90,2167,713],{"class":96},[90,2169,2171,2173,2175,2177,2179,2182,2184],{"class":92,"line":2170},156,[90,2172,1136],{"class":727},[90,2174,1075],{"class":96},[90,2176,1896],{"class":727},[90,2178,1146],{"class":700},[90,2180,2181],{"class":727}," 8",[90,2183,1146],{"class":700},[90,2185,713],{"class":96},[90,2187,2189,2191,2193,2195,2197],{"class":92,"line":2188},157,[90,2190,1732],{"class":727},[90,2192,1075],{"class":96},[90,2194,1896],{"class":727},[90,2196,1146],{"class":700},[90,2198,713],{"class":96},[90,2200,2202,2204,2206,2210,2212,2214,2216],{"class":92,"line":2201},158,[90,2203,1248],{"class":727},[90,2205,1075],{"class":96},[90,2207,2209],{"class":2208},"s7hpK","background",[90,2211,1754],{"class":727},[90,2213,1256],{"class":700},[90,2215,1759],{"class":727},[90,2217,713],{"class":96},[90,2219,2221],{"class":92,"line":2220},159,[90,2222,1308],{"class":96},[90,2224,2226],{"class":92,"line":2225},160,[90,2227,673],{"emptyLinePlaceholder":672},[90,2229,2231,2234],{"class":92,"line":2230},161,[90,2232,2233],{"class":116},".nav-toggle:hover",[90,2235,794],{"class":96},[90,2237,2239,2241,2243,2245,2247,2249,2251,2253,2255,2257,2259,2261],{"class":92,"line":2238},162,[90,2240,1154],{"class":727},[90,2242,1075],{"class":96},[90,2244,1159],{"class":727},[90,2246,737],{"class":96},[90,2248,1654],{"class":727},[90,2250,1167],{"class":96},[90,2252,1654],{"class":727},[90,2254,1167],{"class":96},[90,2256,1654],{"class":727},[90,2258,1167],{"class":96},[90,2260,1834],{"class":727},[90,2262,743],{"class":96},[90,2264,2266],{"class":92,"line":2265},163,[90,2267,1308],{"class":96},[90,2269,2271],{"class":92,"line":2270},164,[90,2272,673],{"emptyLinePlaceholder":672},[90,2274,2276],{"class":92,"line":2275},165,[90,2277,2279],{"class":2278},"sJ8bj","\u002F* 响应式设计 *\u002F\n",[90,2281,2283,2286,2289,2292,2294,2297,2299],{"class":92,"line":2282},166,[90,2284,2285],{"class":700},"@media",[90,2287,2288],{"class":96}," (",[90,2290,2291],{"class":727},"max-width",[90,2293,1075],{"class":96},[90,2295,2296],{"class":727},"768",[90,2298,1146],{"class":700},[90,2300,877],{"class":96},[90,2302,2304,2307],{"class":92,"line":2303},167,[90,2305,2306],{"class":116},"  .nav-toggle",[90,2308,794],{"class":96},[90,2310,2312,2315,2317,2320],{"class":92,"line":2311},168,[90,2313,2314],{"class":727},"    display",[90,2316,1075],{"class":96},[90,2318,2319],{"class":727},"block",[90,2321,713],{"class":96},[90,2323,2325],{"class":92,"line":2324},169,[90,2326,818],{"class":96},[90,2328,2330],{"class":92,"line":2329},170,[90,2331,673],{"emptyLinePlaceholder":672},[90,2333,2335,2338],{"class":92,"line":2334},171,[90,2336,2337],{"class":116},"  .nav-menu",[90,2339,794],{"class":96},[90,2341,2343,2346,2348,2350],{"class":92,"line":2342},172,[90,2344,2345],{"class":727},"    position",[90,2347,1075],{"class":96},[90,2349,1883],{"class":727},[90,2351,713],{"class":96},[90,2353,2355,2358,2360,2362,2364],{"class":92,"line":2354},173,[90,2356,2357],{"class":727},"    top",[90,2359,1075],{"class":96},[90,2361,1272],{"class":727},[90,2363,1146],{"class":700},[90,2365,713],{"class":96},[90,2367,2369,2372,2374,2376],{"class":92,"line":2368},174,[90,2370,2371],{"class":727},"    left",[90,2373,1075],{"class":96},[90,2375,1091],{"class":727},[90,2377,713],{"class":96},[90,2379,2381,2384,2386,2388],{"class":92,"line":2380},175,[90,2382,2383],{"class":727},"    right",[90,2385,1075],{"class":96},[90,2387,1091],{"class":727},[90,2389,713],{"class":96},[90,2391,2393,2396,2398,2401],{"class":92,"line":2392},176,[90,2394,2395],{"class":727},"    flex-direction",[90,2397,1075],{"class":96},[90,2399,2400],{"class":727},"column",[90,2402,713],{"class":96},[90,2404,2406,2409,2411,2413,2415,2417,2419,2421,2423,2425,2427,2430],{"class":92,"line":2405},177,[90,2407,2408],{"class":727},"    background",[90,2410,1075],{"class":96},[90,2412,1159],{"class":727},[90,2414,737],{"class":96},[90,2416,1164],{"class":727},[90,2418,1167],{"class":96},[90,2420,1164],{"class":727},[90,2422,1167],{"class":96},[90,2424,1164],{"class":727},[90,2426,1167],{"class":96},[90,2428,2429],{"class":727},"0.98",[90,2431,743],{"class":96},[90,2433,2435,2438,2440,2442,2444,2446,2448],{"class":92,"line":2434},178,[90,2436,2437],{"class":727},"    backdrop-filter",[90,2439,1075],{"class":96},[90,2441,1191],{"class":727},[90,2443,737],{"class":96},[90,2445,1196],{"class":727},[90,2447,1146],{"class":700},[90,2449,743],{"class":96},[90,2451,2453,2456,2458,2460,2462],{"class":92,"line":2452},179,[90,2454,2455],{"class":727},"    padding",[90,2457,1075],{"class":96},[90,2459,1469],{"class":727},[90,2461,1146],{"class":700},[90,2463,713],{"class":96},[90,2465,2467,2470,2472,2474,2476],{"class":92,"line":2466},180,[90,2468,2469],{"class":727},"    gap",[90,2471,1075],{"class":96},[90,2473,2075],{"class":727},[90,2475,1146],{"class":700},[90,2477,713],{"class":96},[90,2479,2481,2484,2486,2489,2491,2493],{"class":92,"line":2480},181,[90,2482,2483],{"class":727},"    transform",[90,2485,1075],{"class":96},[90,2487,2488],{"class":727},"scaleY",[90,2490,737],{"class":96},[90,2492,1091],{"class":727},[90,2494,743],{"class":96},[90,2496,2498,2501,2503,2506],{"class":92,"line":2497},182,[90,2499,2500],{"class":727},"    transform-origin",[90,2502,1075],{"class":96},[90,2504,2505],{"class":727},"top",[90,2507,713],{"class":96},[90,2509,2511,2514,2516,2518,2520,2522],{"class":92,"line":2510},183,[90,2512,2513],{"class":727},"    transition",[90,2515,1251],{"class":96},[90,2517,1240],{"class":727},[90,2519,1256],{"class":700},[90,2521,1759],{"class":727},[90,2523,713],{"class":96},[90,2525,2527,2530,2532,2534,2536,2539,2541,2543,2545,2547,2549,2551,2553,2555,2557],{"class":92,"line":2526},184,[90,2528,2529],{"class":727},"    border-top",[90,2531,1075],{"class":96},[90,2533,1510],{"class":727},[90,2535,1146],{"class":700},[90,2537,2538],{"class":727}," solid",[90,2540,1223],{"class":727},[90,2542,737],{"class":96},[90,2544,1654],{"class":727},[90,2546,1167],{"class":96},[90,2548,1654],{"class":727},[90,2550,1167],{"class":96},[90,2552,1654],{"class":727},[90,2554,1167],{"class":96},[90,2556,1834],{"class":727},[90,2558,743],{"class":96},[90,2560,2562],{"class":92,"line":2561},185,[90,2563,818],{"class":96},[90,2565,2567],{"class":92,"line":2566},186,[90,2568,673],{"emptyLinePlaceholder":672},[90,2570,2572,2575],{"class":92,"line":2571},187,[90,2573,2574],{"class":116},"  .nav-menu.active",[90,2576,794],{"class":96},[90,2578,2580,2582,2584,2586,2588,2590],{"class":92,"line":2579},188,[90,2581,2483],{"class":727},[90,2583,1075],{"class":96},[90,2585,2488],{"class":727},[90,2587,737],{"class":96},[90,2589,1510],{"class":727},[90,2591,743],{"class":96},[90,2593,2595],{"class":92,"line":2594},189,[90,2596,818],{"class":96},[90,2598,2600],{"class":92,"line":2599},190,[90,2601,673],{"emptyLinePlaceholder":672},[90,2603,2605,2607,2609],{"class":92,"line":2604},191,[90,2606,2337],{"class":116},[90,2608,1635],{"class":100},[90,2610,794],{"class":96},[90,2612,2614,2617,2619,2621,2623],{"class":92,"line":2613},192,[90,2615,2616],{"class":727},"    width",[90,2618,1075],{"class":96},[90,2620,1386],{"class":727},[90,2622,1340],{"class":700},[90,2624,713],{"class":96},[90,2626,2628],{"class":92,"line":2627},193,[90,2629,818],{"class":96},[90,2631,2633],{"class":92,"line":2632},194,[90,2634,673],{"emptyLinePlaceholder":672},[90,2636,2638,2640,2642,2644],{"class":92,"line":2637},195,[90,2639,2337],{"class":116},[90,2641,1635],{"class":100},[90,2643,1638],{"class":100},[90,2645,794],{"class":96},[90,2647,2649,2651,2653,2655],{"class":92,"line":2648},196,[90,2650,2314],{"class":727},[90,2652,1075],{"class":96},[90,2654,2319],{"class":727},[90,2656,713],{"class":96},[90,2658,2660,2663,2665,2667],{"class":92,"line":2659},197,[90,2661,2662],{"class":727},"    text-align",[90,2664,1075],{"class":96},[90,2666,1300],{"class":727},[90,2668,713],{"class":96},[90,2670,2672,2674,2676,2678,2680],{"class":92,"line":2671},198,[90,2673,2455],{"class":727},[90,2675,1075],{"class":96},[90,2677,2075],{"class":727},[90,2679,1146],{"class":700},[90,2681,713],{"class":96},[90,2683,2685,2688,2690,2693,2695],{"class":92,"line":2684},199,[90,2686,2687],{"class":727},"    font-size",[90,2689,1075],{"class":96},[90,2691,2692],{"class":727},"16",[90,2694,1146],{"class":700},[90,2696,713],{"class":96},[90,2698,2700],{"class":92,"line":2699},200,[90,2701,818],{"class":96},[90,2703,2705],{"class":92,"line":2704},201,[90,2706,673],{"emptyLinePlaceholder":672},[90,2708,2710,2712,2714,2716,2718],{"class":92,"line":2709},202,[90,2711,2337],{"class":116},[90,2713,1635],{"class":100},[90,2715,1638],{"class":100},[90,2717,1858],{"class":116},[90,2719,794],{"class":96},[90,2721,2723,2725,2727,2729],{"class":92,"line":2722},203,[90,2724,2314],{"class":727},[90,2726,1075],{"class":96},[90,2728,1567],{"class":727},[90,2730,713],{"class":96},[90,2732,2734],{"class":92,"line":2733},204,[90,2735,818],{"class":96},[90,2737,2739],{"class":92,"line":2738},205,[90,2740,1308],{"class":96},[90,2742,2744],{"class":92,"line":2743},206,[90,2745,673],{"emptyLinePlaceholder":672},[90,2747,2749],{"class":92,"line":2748},207,[90,2750,2751],{"class":2278},"\u002F* 滚动条样式优化 *\u002F\n",[90,2753,2755,2758],{"class":92,"line":2754},208,[90,2756,2757],{"class":116},"::-webkit-scrollbar",[90,2759,794],{"class":96},[90,2761,2763,2765,2767,2769,2771],{"class":92,"line":2762},209,[90,2764,1381],{"class":727},[90,2766,1075],{"class":96},[90,2768,1737],{"class":727},[90,2770,1146],{"class":700},[90,2772,713],{"class":96},[90,2774,2776],{"class":92,"line":2775},210,[90,2777,1308],{"class":96},[90,2779,2781],{"class":92,"line":2780},211,[90,2782,673],{"emptyLinePlaceholder":672},[90,2784,2786,2789],{"class":92,"line":2785},212,[90,2787,2788],{"class":116},"::-webkit-scrollbar-track",[90,2790,794],{"class":96},[90,2792,2794,2796,2798,2801],{"class":92,"line":2793},213,[90,2795,1154],{"class":727},[90,2797,1075],{"class":96},[90,2799,2800],{"class":727},"#1d1d1d",[90,2802,713],{"class":96},[90,2804,2806],{"class":92,"line":2805},214,[90,2807,1308],{"class":96},[90,2809,2811],{"class":92,"line":2810},215,[90,2812,673],{"emptyLinePlaceholder":672},[90,2814,2816,2819],{"class":92,"line":2815},216,[90,2817,2818],{"class":116},"::-webkit-scrollbar-thumb",[90,2820,794],{"class":96},[90,2822,2824,2826,2828,2830],{"class":92,"line":2823},217,[90,2825,1154],{"class":727},[90,2827,1075],{"class":96},[90,2829,1948],{"class":727},[90,2831,713],{"class":96},[90,2833,2835,2837,2839,2842,2844],{"class":92,"line":2834},218,[90,2836,1732],{"class":727},[90,2838,1075],{"class":96},[90,2840,2841],{"class":727},"3",[90,2843,1146],{"class":700},[90,2845,713],{"class":96},[90,2847,2849],{"class":92,"line":2848},219,[90,2850,1308],{"class":96},[90,2852,2854],{"class":92,"line":2853},220,[90,2855,673],{"emptyLinePlaceholder":672},[90,2857,2859,2862],{"class":92,"line":2858},221,[90,2860,2861],{"class":116},"::-webkit-scrollbar-thumb:hover",[90,2863,794],{"class":96},[90,2865,2867,2869,2871,2874],{"class":92,"line":2866},222,[90,2868,1154],{"class":727},[90,2870,1075],{"class":96},[90,2872,2873],{"class":727},"#3a8aef",[90,2875,713],{"class":96},[90,2877,2879],{"class":92,"line":2878},223,[90,2880,1308],{"class":96},[90,2882,2884],{"class":92,"line":2883},224,[90,2885,673],{"emptyLinePlaceholder":672},[90,2887,2889],{"class":92,"line":2888},225,[90,2890,2891],{"class":2278},"\u002F* 自动主题切换：亮色模式 *\u002F\n",[90,2893,2895,2897],{"class":92,"line":2894},226,[90,2896,2285],{"class":700},[90,2898,2899],{"class":96}," (prefers-color-scheme: light) {\n",[90,2901,2903,2906],{"class":92,"line":2902},227,[90,2904,2905],{"class":116},"  .navbar",[90,2907,794],{"class":96},[90,2909,2911,2913,2915,2917,2919,2921,2923,2925,2927,2929,2931,2933],{"class":92,"line":2910},228,[90,2912,2408],{"class":727},[90,2914,1075],{"class":96},[90,2916,1159],{"class":727},[90,2918,737],{"class":96},[90,2920,1654],{"class":727},[90,2922,1167],{"class":96},[90,2924,1654],{"class":727},[90,2926,1167],{"class":96},[90,2928,1654],{"class":727},[90,2930,1167],{"class":96},[90,2932,1178],{"class":727},[90,2934,743],{"class":96},[90,2936,2938,2940,2942,2944,2946,2948,2950],{"class":92,"line":2937},229,[90,2939,2437],{"class":727},[90,2941,1075],{"class":96},[90,2943,1191],{"class":727},[90,2945,737],{"class":96},[90,2947,1196],{"class":727},[90,2949,1146],{"class":700},[90,2951,743],{"class":96},[90,2953,2955,2958,2960,2962,2964,2966,2968,2970,2972,2974,2976,2978,2980,2982,2984,2986,2988],{"class":92,"line":2954},230,[90,2956,2957],{"class":727},"    box-shadow",[90,2959,1075],{"class":96},[90,2961,1091],{"class":727},[90,2963,1213],{"class":727},[90,2965,1146],{"class":700},[90,2967,1218],{"class":727},[90,2969,1146],{"class":700},[90,2971,1223],{"class":727},[90,2973,737],{"class":96},[90,2975,1091],{"class":727},[90,2977,1167],{"class":96},[90,2979,1091],{"class":727},[90,2981,1167],{"class":96},[90,2983,1091],{"class":727},[90,2985,1167],{"class":96},[90,2987,1834],{"class":727},[90,2989,743],{"class":96},[90,2991,2993],{"class":92,"line":2992},231,[90,2994,818],{"class":96},[90,2996,2998],{"class":92,"line":2997},232,[90,2999,673],{"emptyLinePlaceholder":672},[90,3001,3003,3006],{"class":92,"line":3002},233,[90,3004,3005],{"class":116},"  .nav-brand",[90,3007,794],{"class":96},[90,3009,3011,3014,3016,3018],{"class":92,"line":3010},234,[90,3012,3013],{"class":727},"    color",[90,3015,1075],{"class":96},[90,3017,2800],{"class":727},[90,3019,713],{"class":96},[90,3021,3023],{"class":92,"line":3022},235,[90,3024,818],{"class":96},[90,3026,3028],{"class":92,"line":3027},236,[90,3029,673],{"emptyLinePlaceholder":672},[90,3031,3033,3035,3037,3039],{"class":92,"line":3032},237,[90,3034,2337],{"class":116},[90,3036,1635],{"class":100},[90,3038,1638],{"class":100},[90,3040,794],{"class":96},[90,3042,3044,3046,3048,3050,3052,3054,3056,3058,3060,3062,3064,3067],{"class":92,"line":3043},238,[90,3045,3013],{"class":727},[90,3047,1075],{"class":96},[90,3049,1159],{"class":727},[90,3051,737],{"class":96},[90,3053,1091],{"class":727},[90,3055,1167],{"class":96},[90,3057,1091],{"class":727},[90,3059,1167],{"class":96},[90,3061,1091],{"class":727},[90,3063,1167],{"class":96},[90,3065,3066],{"class":727},"0.7",[90,3068,743],{"class":96},[90,3070,3072],{"class":92,"line":3071},239,[90,3073,818],{"class":96},[90,3075,3077],{"class":92,"line":3076},240,[90,3078,673],{"emptyLinePlaceholder":672},[90,3080,3082,3084,3086,3088,3090],{"class":92,"line":3081},241,[90,3083,2337],{"class":116},[90,3085,1635],{"class":100},[90,3087,1638],{"class":100},[90,3089,1795],{"class":116},[90,3091,794],{"class":96},[90,3093,3095,3097,3099,3102],{"class":92,"line":3094},242,[90,3096,3013],{"class":727},[90,3098,1075],{"class":96},[90,3100,3101],{"class":727},"#000000",[90,3103,713],{"class":96},[90,3105,3107,3109,3111,3113,3115,3117,3119,3121,3123,3125,3127,3130],{"class":92,"line":3106},243,[90,3108,2408],{"class":727},[90,3110,1075],{"class":96},[90,3112,1159],{"class":727},[90,3114,737],{"class":96},[90,3116,1091],{"class":727},[90,3118,1167],{"class":96},[90,3120,1091],{"class":727},[90,3122,1167],{"class":96},[90,3124,1091],{"class":727},[90,3126,1167],{"class":96},[90,3128,3129],{"class":727},"0.05",[90,3131,743],{"class":96},[90,3133,3135],{"class":92,"line":3134},244,[90,3136,818],{"class":96},[90,3138,3140],{"class":92,"line":3139},245,[90,3141,673],{"emptyLinePlaceholder":672},[90,3143,3145,3147],{"class":92,"line":3144},246,[90,3146,2306],{"class":116},[90,3148,794],{"class":96},[90,3150,3152,3154,3156,3158],{"class":92,"line":3151},247,[90,3153,3013],{"class":727},[90,3155,1075],{"class":96},[90,3157,2800],{"class":727},[90,3159,713],{"class":96},[90,3161,3163],{"class":92,"line":3162},248,[90,3164,818],{"class":96},[90,3166,3168],{"class":92,"line":3167},249,[90,3169,673],{"emptyLinePlaceholder":672},[90,3171,3173,3176],{"class":92,"line":3172},250,[90,3174,3175],{"class":116},"  .nav-toggle:hover",[90,3177,794],{"class":96},[90,3179,3181,3183,3185,3187,3189,3191,3193,3195,3197,3199,3201,3203],{"class":92,"line":3180},251,[90,3182,2408],{"class":727},[90,3184,1075],{"class":96},[90,3186,1159],{"class":727},[90,3188,737],{"class":96},[90,3190,1091],{"class":727},[90,3192,1167],{"class":96},[90,3194,1091],{"class":727},[90,3196,1167],{"class":96},[90,3198,1091],{"class":727},[90,3200,1167],{"class":96},[90,3202,3129],{"class":727},[90,3204,743],{"class":96},[90,3206,3208],{"class":92,"line":3207},252,[90,3209,818],{"class":96},[90,3211,3213],{"class":92,"line":3212},253,[90,3214,673],{"emptyLinePlaceholder":672},[90,3216,3218,3221,3223,3225,3227,3229,3231],{"class":92,"line":3217},254,[90,3219,3220],{"class":700},"  @media",[90,3222,2288],{"class":96},[90,3224,2291],{"class":727},[90,3226,1075],{"class":96},[90,3228,2296],{"class":727},[90,3230,1146],{"class":700},[90,3232,877],{"class":96},[90,3234,3236,3239],{"class":92,"line":3235},255,[90,3237,3238],{"class":116},"    .nav-menu",[90,3240,794],{"class":96},[90,3242,3244,3247,3249,3251,3253,3255,3257,3259,3261,3263,3265,3267],{"class":92,"line":3243},256,[90,3245,3246],{"class":727},"      background",[90,3248,1075],{"class":96},[90,3250,1159],{"class":727},[90,3252,737],{"class":96},[90,3254,1654],{"class":727},[90,3256,1167],{"class":96},[90,3258,1654],{"class":727},[90,3260,1167],{"class":96},[90,3262,1654],{"class":727},[90,3264,1167],{"class":96},[90,3266,2429],{"class":727},[90,3268,743],{"class":96},[90,3270,3272,3275,3277,3279,3281,3283,3285,3287,3289,3291,3293,3295,3297,3299,3301],{"class":92,"line":3271},257,[90,3273,3274],{"class":727},"      border-top",[90,3276,1075],{"class":96},[90,3278,1510],{"class":727},[90,3280,1146],{"class":700},[90,3282,2538],{"class":727},[90,3284,1223],{"class":727},[90,3286,737],{"class":96},[90,3288,1091],{"class":727},[90,3290,1167],{"class":96},[90,3292,1091],{"class":727},[90,3294,1167],{"class":96},[90,3296,1091],{"class":727},[90,3298,1167],{"class":96},[90,3300,1834],{"class":727},[90,3302,743],{"class":96},[90,3304,3306],{"class":92,"line":3305},258,[90,3307,919],{"class":96},[90,3309,3311],{"class":92,"line":3310},259,[90,3312,818],{"class":96},[90,3314,3316],{"class":92,"line":3315},260,[90,3317,1308],{"class":96},[90,3319,3321],{"class":92,"line":3320},261,[90,3322,673],{"emptyLinePlaceholder":672},[90,3324,3326,3329],{"class":92,"line":3325},262,[90,3327,3328],{"class":116},".main-container",[90,3330,794],{"class":96},[90,3332,3334,3336,3338,3340,3342],{"class":92,"line":3333},263,[90,3335,1366],{"class":727},[90,3337,1075],{"class":96},[90,3339,1371],{"class":727},[90,3341,1146],{"class":700},[90,3343,713],{"class":96},[90,3345,3347,3349,3351,3353,3355],{"class":92,"line":3346},264,[90,3348,1396],{"class":727},[90,3350,1075],{"class":96},[90,3352,1091],{"class":727},[90,3354,1403],{"class":727},[90,3356,713],{"class":96},[90,3358,3360,3363,3365,3367,3369],{"class":92,"line":3359},265,[90,3361,3362],{"class":727},"  padding-top",[90,3364,1075],{"class":96},[90,3366,1386],{"class":727},[90,3368,1146],{"class":700},[90,3370,713],{"class":96},[90,3372,3374],{"class":92,"line":3373},266,[90,3375,1308],{"class":96},[90,3377,3379,3381,3383],{"class":92,"line":3378},267,[90,3380,662],{"class":96},[90,3382,1053],{"class":100},[90,3384,104],{"class":96},[17,3386,3387],{"id":3387},"如何使用",[3389,3390,3391,3398,3404],"ol",{},[35,3392,3393,3394,3397],{},"将上述代码保存为 ",[48,3395,3396],{},"Layout.vue"," 文件",[35,3399,3400,3401],{},"在父组件中引入并使用：",[48,3402,3403],{},"\u003CLayout \u002F>",[35,3405,3406,3407,3410],{},"将 ",[48,3408,3409],{},"\u003Cmain>"," 中的占位内容替换为你的实际页面内容",[17,3412,3413],{"id":3413},"依赖要求",[32,3415,3416,3419],{},[35,3417,3418],{},"Vue 3.x",[35,3420,3421],{},"TypeScript（可选，纯 JavaScript 环境移除类型标注即可）",[17,3423,3424],{"id":3424},"自定义建议",[3426,3427,3428,3445],"table",{},[3429,3430,3431],"thead",{},[3432,3433,3434,3439,3442],"tr",{},[3435,3436,3438],"th",{"align":3437},"left","配置项",[3435,3440,3441],{"align":3437},"位置",[3435,3443,3444],{"align":3437},"默认值",[3446,3447,3448,3461,3474,3487],"tbody",{},[3432,3449,3450,3454,3458],{},[3451,3452,3453],"td",{"align":3437},"品牌色",[3451,3455,3456],{"align":3437},[48,3457,1948],{},[3451,3459,3460],{"align":3437},"蓝色",[3432,3462,3463,3466,3471],{},[3451,3464,3465],{"align":3437},"滚动触发阈值",[3451,3467,3468],{"align":3437},[48,3469,3470],{},"scrollTop > 50",[3451,3472,3473],{"align":3437},"50px",[3432,3475,3476,3479,3484],{},[3451,3477,3478],{"align":3437},"导航栏高度",[3451,3480,3481],{"align":3437},[48,3482,3483],{},"height: 64px",[3451,3485,3486],{"align":3437},"64px",[3432,3488,3489,3492,3497],{},[3451,3490,3491],{"align":3437},"内容区最大宽度",[3451,3493,3494],{"align":3437},[48,3495,3496],{},"max-width: 1200px",[3451,3498,3499],{"align":3437},"1200px",[13,3501,3502],{},"代码完全自包含，复制即用。你可以根据项目需求自由调整上述参数。",[1053,3504,3505],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":86,"searchDepth":107,"depth":107,"links":3507},[3508,3509,3510,3511,3512],{"id":19,"depth":107,"text":19},{"id":79,"depth":107,"text":79},{"id":3387,"depth":107,"text":3387},{"id":3413,"depth":107,"text":3413},{"id":3424,"depth":107,"text":3424},"2026-07-28 03:43:44","基于 Vue 3 的开箱即用页面布局模板，包含固定导航栏、滚动自动隐藏、毛玻璃效果、系统主题自动适配和移动端响应式，复制代码即可使用。","md",{"tags":3517,"image":86},[3518,3519,3520,3521,3522,3523],"Vue 3","TypeScript","前端布局","自动主题切换","响应式设计","滚动隐藏导航栏","\u002Fyehangzhou\u002Fnotes\u002Fvue-layout-navbar-theme-switch","---\ntitle: '一个简单的页面布局：导航+主体，包括自动主题切换、滚动隐藏导航栏'\ndescription: '基于 Vue 3 的开箱即用页面布局模板，包含固定导航栏、滚动自动隐藏、毛玻璃效果、系统主题自动适配和移动端响应式，复制代码即可使用。'\ndate: 2026-07-28 03:43:44\ntags: [\"Vue 3\",\"TypeScript\",\"前端布局\",\"自动主题切换\",\"响应式设计\",\"滚动隐藏导航栏\"]\nimage: ''\n---\n> 开箱即用的 Vue 3 布局模板，附带滚动隐藏导航栏与系统主题自适应\n\n## 简介\n\n日常开发中，我们经常需要一个干净、规范的页面骨架——顶部导航栏固定，下方滚动内容区。这个看似简单的需求，如果每次都从零写一遍，既浪费时间又容易遗漏细节。\n\n这里分享一个我常用的布局组件，基于 **Vue 3 + TypeScript**，包含了以下几个开箱即用的特性：\n\n- **固定导航栏 + 滚动自动隐藏**：滚动时导航栏上滑收起，回到顶部自动出现，移动端常见的交互模式\n- **毛玻璃视觉效果**：`backdrop-filter: blur(10px)` 营造半透明质感，不遮挡内容\n- **自动适配系统主题**：通过 CSS `prefers-color-scheme` 媒体查询，跟随系统明\u002F暗模式自动切换\n- **响应式移动端适配**：大屏展示完整菜单，小屏自动折叠为汉堡菜单\n- **自定义滚动条样式**：与品牌色保持视觉统一\n\n直接复制代码即可使用，无需额外安装依赖。\n\n## 完整代码\n\n```vue\n\u003Ctemplate>\n  \u003Cnav class=\"navbar\" :class=\"{ 'navbar-hidden': !isShowNav }\">\n    \u003Cdiv class=\"nav-container\">\n      \u003Cdiv class=\"nav-brand\">Logo\u003C\u002Fdiv>\n      \u003Cul class=\"nav-menu\">\n        \u003Cli>\u003Ca href=\"#home\">Home\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#posts\">Posts\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#download\">Download\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#about\">About\u003C\u002Fa>\u003C\u002Fli>\n      \u003C\u002Ful>\n      \u003Cdiv class=\"nav-actions\">\n        \u003Cbutton class=\"nav-toggle\">☰\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fnav>\n  \u003Cmain class=\"main-container\">\n    \u003Cp style=\"height:100px;\">Content1\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content2\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content3\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content4\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content5\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content6\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content7\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content8\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content9\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content10\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content11\u003C\u002Fp>\n    \u003Cp style=\"height:100px;\">Content12\u003C\u002Fp>\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { onMounted, onUnmounted, ref } from \"vue\";\n\nconst isShowNav = ref(true);\nlet scrollTimer: number | null = null;\n\nconst handleScrollWithDebounce = () => {\n  if (scrollTimer) {\n    clearTimeout(scrollTimer);\n  }\n  scrollTimer = window.setTimeout(() => {\n    const scrollTop = window.scrollY || document.documentElement.scrollTop;\n    if (scrollTop > 50) {\n      isShowNav.value = false;\n    } else {\n      isShowNav.value = true;\n    }\n  }, 50);\n};\n\nonMounted(() => {\n  window.addEventListener('scroll', handleScrollWithDebounce);\n});\n\nonUnmounted(() => {\n  window.removeEventListener('scroll', handleScrollWithDebounce);\n  if (scrollTimer) {\n    clearTimeout(scrollTimer);\n  }\n});\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.navbar {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  padding: 0 20px;\n  background: rgba(29, 29, 29, 0.95);\n  backdrop-filter: blur(10px);\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n  transition: transform 0.3s ease-in-out;\n  height: 64px;\n  display: flex;\n  align-items: center;\n}\n\n.navbar-hidden {\n  transform: translateY(-100%);\n}\n\n.nav-container {\n  max-width: 1200px;\n  width: 100%;\n  margin: 0 auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.nav-brand {\n  font-size: 20px;\n  font-weight: 700;\n  color: #ffffff;\n  letter-spacing: 1px;\n  cursor: pointer;\n}\n\n.nav-menu {\n  display: flex;\n  list-style: none;\n  gap: 32px;\n  margin: 0;\n  padding: 0;\n  align-items: center;\n}\n\n.nav-menu li a {\n  color: rgba(255, 255, 255, 0.8);\n  text-decoration: none;\n  font-size: 15px;\n  font-weight: 500;\n  padding: 8px 12px;\n  border-radius: 6px;\n  transition: all 0.2s ease;\n  position: relative;\n}\n\n.nav-menu li a:hover {\n  color: #ffffff;\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.nav-menu li a::after {\n  content: '';\n  position: absolute;\n  bottom: 4px;\n  left: 50%;\n  width: 0;\n  height: 2px;\n  background: #4a9eff;\n  transition: all 0.3s ease;\n  transform: translateX(-50%);\n}\n\n.nav-menu li a:hover::after {\n  width: 60%;\n}\n\n.nav-actions {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.nav-toggle {\n  display: none;\n  background: none;\n  border: none;\n  color: #ffffff;\n  font-size: 24px;\n  cursor: pointer;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background 0.2s ease;\n}\n\n.nav-toggle:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n\u002F* 响应式设计 *\u002F\n@media (max-width: 768px) {\n  .nav-toggle {\n    display: block;\n  }\n\n  .nav-menu {\n    position: absolute;\n    top: 64px;\n    left: 0;\n    right: 0;\n    flex-direction: column;\n    background: rgba(29, 29, 29, 0.98);\n    backdrop-filter: blur(10px);\n    padding: 20px;\n    gap: 12px;\n    transform: scaleY(0);\n    transform-origin: top;\n    transition: transform 0.3s ease;\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\n  }\n\n  .nav-menu.active {\n    transform: scaleY(1);\n  }\n\n  .nav-menu li {\n    width: 100%;\n  }\n\n  .nav-menu li a {\n    display: block;\n    text-align: center;\n    padding: 12px;\n    font-size: 16px;\n  }\n\n  .nav-menu li a::after {\n    display: none;\n  }\n}\n\n\u002F* 滚动条样式优化 *\u002F\n::-webkit-scrollbar {\n  width: 6px;\n}\n\n::-webkit-scrollbar-track {\n  background: #1d1d1d;\n}\n\n::-webkit-scrollbar-thumb {\n  background: #4a9eff;\n  border-radius: 3px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background: #3a8aef;\n}\n\n\u002F* 自动主题切换：亮色模式 *\u002F\n@media (prefers-color-scheme: light) {\n  .navbar {\n    background: rgba(255, 255, 255, 0.95);\n    backdrop-filter: blur(10px);\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  }\n\n  .nav-brand {\n    color: #1d1d1d;\n  }\n\n  .nav-menu li a {\n    color: rgba(0, 0, 0, 0.7);\n  }\n\n  .nav-menu li a:hover {\n    color: #000000;\n    background: rgba(0, 0, 0, 0.05);\n  }\n\n  .nav-toggle {\n    color: #1d1d1d;\n  }\n\n  .nav-toggle:hover {\n    background: rgba(0, 0, 0, 0.05);\n  }\n\n  @media (max-width: 768px) {\n    .nav-menu {\n      background: rgba(255, 255, 255, 0.98);\n      border-top: 1px solid rgba(0, 0, 0, 0.1);\n    }\n  }\n}\n\n.main-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding-top: 100px;\n}\n\u003C\u002Fstyle>\n```\n\n## 如何使用\n\n1. 将上述代码保存为 `Layout.vue` 文件\n2. 在父组件中引入并使用：`\u003CLayout \u002F>`\n3. 将 `\u003Cmain>` 中的占位内容替换为你的实际页面内容\n\n## 依赖要求\n\n- Vue 3.x\n- TypeScript（可选，纯 JavaScript 环境移除类型标注即可）\n\n## 自定义建议\n\n| 配置项 | 位置 | 默认值 |\n| :--- | :--- | :--- |\n| 品牌色 | `#4a9eff` | 蓝色 |\n| 滚动触发阈值 | `scrollTop > 50` | 50px |\n| 导航栏高度 | `height: 64px` | 64px |\n| 内容区最大宽度 | `max-width: 1200px` | 1200px |\n\n代码完全自包含，复制即用。你可以根据项目需求自由调整上述参数。\n",{"title":5,"description":3514},"yehangzhou\u002Fnotes\u002Fvue-layout-navbar-theme-switch","iKb3ERBhcHGooXOiKin1WhYj-0uhnjJe8zAZYq_AimI",1785182131705]