/* ============================================================ 德睿 · 年级与地区定位器 ------------------------------------------------------------------ 前端 1:1 复刻自复刻版（server_code/derui/assets/css/components.css 的 「顶部定位器」整段），仅做两件事： 1) 把复刻版的主题变量（--text/--brand/--border…）落到本文件作用域的 --drg-* 上，避免与 zibll 的变量体系互相污染； 2) 补 zibll 导航的挂载定位（.navbar-header 内浮动布局）。 结构/尺寸/动效一律不改，改样式请回复刻版同源修改后同步。 入口：桌面 = 胶囊 .nav-scope（LOGO 右侧，navbar-header 内） 移动 = 双行纯文本 .ns-m-entry（汉堡右侧、LOGO 旁） 弹层：桌面居中对话框 / 移动整屏推入；地区层 = 底部上滑 + A-Z 索引 ============================================================ */ /* 变量作用域：胶囊、弹层、toast 三处各自是独立子树，必须都挂上 */ .nav-scope, .ns-dlg, .ns-toast { --drg-brand: #0075de; --drg-brand-deep: #0063bc; --drg-brand-soft: rgba(0, 117, 222, .10); --drg-border: #e6e9ee; --drg-border-strong: #d5dae3; --drg-bg-soft: #f4f6f9; --drg-hover: #eef1f5; --drg-text: #4a5464; --drg-ink: #1f2733; --drg-muted: #6b7480; --drg-faint: #9aa3af; --drg-dark: #16181d; --drg-r-pill: 999px; --drg-ease: cubic-bezier(.4, 0, .2, 1); } /* zibll 深色模式：三套前缀都覆盖（主题在 8.x/9.x 用过不同 class） */ body.dark-theme .nav-scope, body.dark-theme .ns-dlg, body.dark-theme .ns-toast, [data-theme="dark"] .nav-scope, [data-theme="dark"] .ns-dlg, [data-theme="dark"] .ns-toast, html.dark .nav-scope, html.dark .ns-dlg, html.dark .ns-toast, body.night .nav-scope, body.night .ns-dlg, body.night .ns-toast, .dark .nav-scope, .dark .ns-dlg, .dark .ns-toast { --drg-border: #2b3038; --drg-border-strong: #3a4049; --drg-bg-soft: #23272e; --drg-hover: #2a2f37; --drg-text: #b9c1cd; --drg-ink: #eef1f5; --drg-muted: #8d96a3; --drg-faint: #6f7885; --drg-dark: #0d0f13; --drg-brand: #3c9bf0; --drg-brand-deep: #57aaf5; --drg-brand-soft: rgba(60, 155, 240, .16); } /* 深色模式下弹层卡片与胶囊底色（复刻版写死 #fff 的两处） */ body.dark-theme .ns-dlg-card, [data-theme="dark"] .ns-dlg-card, html.dark .ns-dlg-card, body.night .ns-dlg-card, .dark .ns-dlg-card { background: #1b1f25; } body.dark-theme .ns-dlg-foot, [data-theme="dark"] .ns-dlg-foot, html.dark .ns-dlg-foot, body.night .ns-dlg-foot, .dark .ns-dlg-foot { background: #1b1f25; } body.dark-theme .ns-btn, [data-theme="dark"] .ns-btn, html.dark .ns-btn, body.night .ns-btn, .dark .ns-btn { background: #1b1f25; } /* ---------- zibll 导航挂载（唯一新增的一段，不属于复刻版） ---------- */ /* 挂载点 = .navbar-header 末尾：桌面紧跟 LOGO，移动端排在汉堡之后（不破坏 .navbar-brand + .navbar-toggle 的相邻选择器，否则主题会把汉堡挪到右边）。 */ .navbar-header > .nav-scope { float: left; margin: 6px 0 0 6px; } .navbar-header > .ns-m-entry { float: left; margin-left: 4px; } @media (max-width: 767px) { .navbar-header > .nav-scope { display: none !important; } .navbar-header > .ns-m-entry { margin-top: 3px; margin-right: 0; } /* zibll 移动端顶栏 50px，双行文本要压住不撑高 */ .ns-m-entry { min-height: 40px; padding: 2px 6px; } /* 移动端 LOGO：高度 34px（原 36 - 2），宽度按原比例自适应（2026-10-26） */ .navbar-header .navbar-logo img, .mobile-navbar .navbar-logo img { height: 34px !important; width: auto !important; } /* 移动端弹层打开时导航层级补偿（见下方全局规则，此处不再重复） */ } /* ============================================================ 弹层打开时的导航层级补偿（复刻版同源，2026-10-19 线上回归） ------------------------------------------------------------ 问题：zibll 主题 .nav-fixed .header 只有 z-index:999， 而我们的弹层 .ns-dlg=10010 / .ns-dlg-top=10020， 弹窗一开就把顶部导航整条盖住（复刻版曾反复调过，线上漏带）。 根因（2026-10-19 逐帧实测）：zibll 主题给 .header 写了 transition:0.15s（无属性名 = 全部属性），于是把 z-index 从 999 改成 10040 时浏览器把它当可动画属性逐帧插值： 999 → 6196 → 7718 → 9358 → 9976 → 10040，约 164ms 才到位。 而弹窗 350ms 就把整屏推下来，前 164ms 导航还压在弹窗下方 → 视觉上「弹窗从导航上盖过去」。 复刻版没这个问题：.nav 只写了 transition:top .3s，z-index 是瞬变的。 方案：只调 z-index 不动 position，并显式声明 transition-property 排除 z-index， 保证层级切换是瞬时的（visibility/background 等主题动效不受影响）。 ============================================================ */ body.ns-dlg-open .header, body.ns-dlg-open .nav, body.ns-dlg-open .mobile-navbar { z-index: 10040 !important; /* 关键：主题的 transition:0.15s 会把 z-index 也做成 164ms 的逐帧插值， 导致弹窗滑入前半程导航仍在弹窗下方。这里显式排除 z-index，让层级瞬时切换。 */ transition-property: padding, background, box-shadow, color !important; transition-duration: .15s !important; } @media (min-width: 768px) { .navbar-header > .ns-m-entry { display: none !important; } } /* ============================================================ 顶部定位器：当前年级 + 地区（core.js → initNavScope 注入） 入口：桌面=胶囊 .nav-scope（.nav-actions 内）；移动=LOGO 右侧双行纯文本 .ns-m-entry 弹层：同一份 DOM —— 桌面=屏幕居中对话框 / 移动=底部上滑弹层（媒体查询切换） 一级「选择学习阶段」= 图1 复刻（地区触发在标题上 + 学段分组胶囊 + 底部「确定」） 二级「选择所在地区」= 图2 复刻（当前地区条 + 自动获取 + A-Z 字母索引省份列表） 语义：年级=常看的年级；地区=版本推导+推荐排序。两者都不参与权限判定、不影响价格。 ============================================================ */ .nav-scope {position:relative;flex-shrink:0;} .ns-btn {display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:1px solid var(--drg-border);border-radius:var(--drg-r-pill);background:#fff;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--drg-text);cursor:pointer;white-space:nowrap;transition:border-color .2s var(--drg-ease),background .2s var(--drg-ease),color .2s var(--drg-ease);} .ns-btn:hover {border-color:var(--drg-border-strong);background:var(--drg-hover);color:var(--drg-ink);} .ns-ic {display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex-shrink:0;color:var(--drg-brand);vertical-align:middle;} /* 图标必须显式描边：主题/插件的 svg 全局样式会把 fill 打回默认黑色实心， 且 .header svg{color:...} 会覆盖描边色 —— 这里用高权重锁死 fill/stroke。 */ .ns-ic svg {display:block;width:100%;height:100%;overflow:visible;fill:none !important;stroke:currentColor !important;} /* 主题 .header svg{color:var(--header-color)} 会把描边色改回主题色（常为黑）， 这里只把「导航区」的图标色钉回品牌蓝；弹窗内保持 currentColor， 以便将来选中项换底色时对钩还能跟着变白。 */ .header .ns-ic svg, .header .ns-loc-ic svg, .navbar-header .ns-ic svg, .ns-m-entry .ns-ic svg, .ns-btn .ns-ic svg { color: var(--drg-brand) !important; stroke: var(--drg-brand) !important; } .ns-btn .ns-t {max-width:7em;overflow:hidden;text-overflow:ellipsis;} .ns-btn .ns-sub {font-weight:500;color:var(--drg-muted);margin-left:-2px;} /* 倒三角 = 实心三角（非描边箭头）。画法：24×24 视框内一条实心等边三角形路径， fill:currentColor + stroke:none；主题 svg 全局样式会强改 fill，故用 !important 锁死。 */ .ns-caret {width:12px;height:12px;flex-shrink:0;opacity:.5;display:inline-block;vertical-align:middle;fill:currentColor !important;stroke:none !important;} .ns-caret path {fill:currentColor !important;stroke:none !important;} .header .ns-caret, .navbar-header .ns-caret, .ns-m-entry .ns-caret { color: var(--drg-muted) !important; } /* 窄屏：地区文案已改为官方简称（如「大理」），宽度可控， 所以只在小桌面才收起地区（原 1180 → 940，贴着移动端 900 的断点）， 让地区在绝大多数桌面宽度都可见。 */ @media (max-width:940px) {.ns-btn .ns-sub {display:none;}} /* ---------- 移动端入口：LOGO 右侧双行纯文本 ---------- 字号与导航整体比例匹配（导航基线 14px；年级只略大作主识别，地区作副行）。 热区 min-height 44px（拇指最小可点标准，导航 60px 内垂直居中不撑高）； 地区行带地点标（mask 跟随文字色），让副行一眼读出「位置」而非孤立地名。 */ .ns-m-entry {display:none;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;border:0;background:transparent;font-family:inherit;cursor:pointer;padding:2px 8px;margin-right:auto;border-radius:8px;line-height:1.25;white-space:nowrap;min-height:44px;} .ns-m-entry:active {background:var(--drg-hover);} .ns-me-g {display:inline-flex;align-items:center;gap:3px;font-size:14.5px;font-weight:700;color:var(--drg-ink);letter-spacing:-.01em;} .ns-me-g svg {width:11px;height:11px;color:var(--drg-faint);fill:currentColor !important;stroke:none !important;} .ns-me-r {display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;color:var(--drg-muted);max-width:9em;overflow:hidden;} .ns-me-r::before {content:'';width:10px;height:10px;flex:none;background:currentColor; -webkit-mask:center/contain no-repeat url("data:image/svg+xml;utf8,"); mask:center/contain no-repeat url("data:image/svg+xml;utf8,");} /* ---------- 弹层外壳（桌面居中缩放 / 移动整屏铺满，共用） ---------- 显隐：外壳只切 visibility（开=立即、关=等卡片退场动画走完），遮罩单独淡入淡出； 卡片各自负责自己的动效（一级 PC 缩放 / 移动整屏推入；二级一律底部上滑）。 */ .ns-dlg {position:fixed;inset:0;z-index:10010;visibility:hidden;pointer-events:none;transition:visibility 0s linear .36s;} .ns-dlg.open {visibility:visible;pointer-events:auto;transition:visibility 0s;} .ns-dlg-top {z-index:10020;} .ns-dlg-mask {position:absolute;inset:0;background:rgba(20,18,15,.5);opacity:0;transition:opacity .24s var(--drg-ease);} .ns-dlg.open .ns-dlg-mask {opacity:1;} .ns-dlg-top .ns-dlg-mask {background:rgba(20,18,15,.32);} /* 一级（学习阶段）：淡入淡出 + 由小放大 */ .ns-dlg-card {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);width:600px;max-width:calc(100vw - 40px);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:22px;box-shadow:0 26px 70px rgba(15,15,15,.24);opacity:0;will-change:transform,opacity;transition:transform .24s var(--drg-ease),opacity .24s var(--drg-ease);} .ns-dlg.open .ns-dlg-card {transform:translate(-50%,-50%) scale(1);opacity:1;} /* 二级（地区）：无论 PC / 移动都从底下向上滑出。 高度必须给「确定值」—— 内容撑高时卡片被 max-height 裁切， 列表拿不到受限高度就不会内部滚动，字母索引与省/市行一起被裁掉。 */ .ns-dlg-top .ns-dlg-card {height:76vh;max-height:88vh;transform:translate(-50%,calc(-50% + 48px));opacity:0;} .ns-dlg-top.open .ns-dlg-card {transform:translate(-50%,-50%);opacity:1;} /* 头部 */ .ns-dlg-head {position:relative;flex:0 0 auto;padding:16px 34px 14px;} .ns-dlg-title {margin:6px 0 0;font-size:24px;font-weight:700;color:var(--drg-ink);letter-spacing:-.01em;line-height:1.35;} .ns-dlg-sub {margin:8px 0 0;font-size:14px;line-height:1.65;color:var(--drg-muted);} /* 关闭钮：统一为 zibll 原生规格（2026-10-19） 原生 = bootstrap .close（float:right/21px/opacity .2/padding:0/border:0） + 主题 .close{transition:.2s;opacity:.4;color:var(--muted-color)} + .ic-close{transition:.3s} .ic-close:hover{transform:rotate(270deg);color:inherit} 即：透明无背景、21×21、灰 X、hover 旋转 270°。 不再用 36×36 圆形灰底（那是我们自造的，与会员弹窗不一致）。 */ .ns-dlg-x {position:absolute;top:18px;right:22px;width:21px;height:21px;padding:0;border:0;background:none;border-radius:0;color:var(--drg-muted);opacity:.4;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;z-index:1;} .ns-dlg-x:hover, .ns-dlg-x:focus {background:none;color:var(--drg-ink);opacity:.4;} .ns-dlg-x svg {width:21px;height:21px;display:block;fill:currentColor;transition:.3s;} .ns-dlg-x:hover svg, .ns-dlg-x:focus svg {transform:rotate(270deg);} /* 图2：标题居中式（地区层） */ .ns-dlg-head.center {padding-left:64px;padding-right:64px;text-align:center;} .ns-dlg-head.center .ns-dlg-title {margin-top:2px;} /* 一级（学习阶段）PC：顶部留白加一档（16+56）；关闭钮与右上角等距（top=right=22） */ .ns-dlg:not(.ns-dlg-top) .ns-dlg-head {padding-top:72px;} .ns-dlg:not(.ns-dlg-top) .ns-dlg-x {top:22px;} /* 一级头部顶行：地区触发（图1 左上角「📍成都▾」位，与右上 X 同一水平带） */ .ns-top-loc {display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:600;color:var(--drg-text);cursor:pointer;padding:6px 10px 6px 8px;margin:0 0 2px -8px;border-radius:8px;white-space:nowrap;transition:background .18s var(--drg-ease),color .18s var(--drg-ease);} .ns-top-loc:hover {background:var(--drg-hover);color:var(--drg-ink);} .ns-top-loc .ns-caret {width:11px;height:11px;opacity:.5;} .ns-loc-ic {display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex:0 0 auto;color:var(--drg-brand);vertical-align:middle;} .ns-loc-ic svg {display:block;width:100%;height:100%;overflow:visible;fill:none !important;stroke:currentColor !important;} /* 主体（唯一可滚动区，头尾固定） */ .ns-dlg-body {flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 34px 12px;} /* 学段 + 年级按钮（圆角矩形，高 44px；未选浅灰 / 选中主色淡底，无描边） */ .ns-stage + .ns-stage {margin-top:30px;} .ns-stage[hidden] {display:none;} .ns-stage-h {display:flex;align-items:center;gap:12px;margin:0;padding:16px 0;font-size:15px;font-weight:700;color:var(--drg-ink);} .ns-stage-h::after {content:'';flex:1;height:1px;background:var(--drg-border);} .ns-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} .ns-g {position:relative;height:44px;border:1px solid transparent;background:var(--drg-bg-soft);border-radius:10px;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--drg-text);cursor:pointer;transition:background .16s var(--drg-ease),color .16s var(--drg-ease),border-color .16s var(--drg-ease);} .ns-g:hover {background:var(--drg-hover);color:var(--drg-ink);} .ns-g.on {background:rgba(0,117,222,.10);border-color:transparent;color:var(--drg-brand);font-weight:700;} .ns-g.on:hover {background:rgba(0,117,222,.14);} /* 底部：「确定」大按钮（圆角矩形；底部留白加一档 20+16） */ .ns-dlg-foot {flex:0 0 auto;margin-top:40px;padding:16px 34px calc(36px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--drg-border);background:#fff;} .ns-ok {width:100%;height:54px;border:0;border-radius:12px;background:var(--drg-brand);color:#fff;font-family:inherit;font-size:16.5px;font-weight:700;cursor:pointer;transition:background .18s var(--drg-ease),transform .12s var(--drg-ease);} .ns-ok:hover {background:var(--drg-brand-deep);} .ns-ok:active {transform:scale(.985);} .ns-ok-note {margin:12px 0 0;text-align:center;font-size:12px;line-height:1.6;color:var(--drg-faint);} .ns-ok-note b {color:var(--drg-muted);font-weight:600;} /* ---------- 二级：选择所在地区（图2-4 复刻） ---------- 主体改为纵向 flex 容器（否则 .ns-rwrap 的 flex 高度失效 → 右列字母索引跟着整个 body 一起滚，快捷方式点不到）。 */ .ns-body-region {display:flex;flex-direction:column;padding:2px 34px 0;overflow:hidden;} /* 当前地区条：左右贴边（PC/移动一致），标签「当前地区」与「自动获取」加粗， 定位到的地区值 500 */ .ns-loc-bar {flex:0 0 auto;display:flex;align-items:center;gap:10px;margin:8px 0 0;padding:13px 24px;background:var(--drg-bg-soft);border-radius:0;} .ns-lb-t {flex:1;min-width:0;font-size:14.5px;font-weight:700;color:var(--drg-text);} .ns-lb-t b {color:var(--drg-ink);font-weight:500;} .ns-lb-geo {flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:700;color:var(--drg-brand);cursor:pointer;padding:4px 2px;white-space:nowrap;} .ns-lb-geo .ns-loc-ic {width:14px;height:14px;} /* 省 / 市选项卡（图2-4：激活项主色，下方 2px 指示条；字重 500） */ .ns-tabs {flex:0 0 auto;display:flex;gap:28px;margin:18px 24px 0;padding:0 2px;border-bottom:1px solid var(--drg-border);} .ns-tab {position:relative;border:0;background:transparent;font-family:inherit;font-size:16px;font-weight:500;color:var(--drg-ink);cursor:pointer;padding:10px 2px 12px;white-space:nowrap;transition:color .16s var(--drg-ease);} .ns-tab:hover {color:var(--drg-brand);} .ns-tab.on {color:var(--drg-brand);font-weight:600;} .ns-tab.on::after {content:'';position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:2px;background:var(--drg-brand);} /* 省 / 市 双 pane 横向轨道：点「市」→ 左移一屏（省左滑出、市右滑入）；点「省」→ 右移回位 */ .ns-rwrap {flex:1 1 auto;min-height:0;display:flex;margin-top:12px;overflow:hidden;} /* 省 / 市 双 pane 横向轨道：点「市」→ 左移一屏（省左滑出、市右滑入）；点「省」→ 右移回位。 轨道必须 flex:none 且 200% 宽 —— 只写 width:200% 会被 flex-shrink 压回容器宽， 两个 pane 各剩半屏、位移量也只有一半。 */ .ns-rtrack {flex:0 0 200%;width:200%;display:flex;height:100%;transition:transform .32s var(--drg-ease);will-change:transform;} .ns-rtrack.at-city {transform:translateX(-50%);} .ns-rpane {flex:0 0 50%;width:50%;min-width:0;height:100%;display:flex;} .ns-rlist {position:relative;flex:1 1 auto;min-width:0;height:100%;overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 16px 24px;} /* 字母列：固定宽度、每行占位（空行也占位），地区名跨行左对齐—— 字母像独立一列，不把省份名挤得参差 */ .ns-row-l {flex:0 0 20px;min-width:20px;font-size:12px;font-weight:700;color:var(--drg-faint);letter-spacing:.04em;} .ns-row {display:flex;align-items:center;gap:10px;width:100%;height:50px;padding:0 2px;border:0;border-bottom:1px solid var(--drg-border);background:transparent;font-family:inherit;font-size:15.5px;font-weight:500;color:var(--drg-text);cursor:pointer;text-align:left;transition:color .14s var(--drg-ease);} .ns-row:last-child {border-bottom:0;} .ns-row:hover {color:var(--drg-ink);} .ns-row-ck {flex:0 0 auto;display:none;width:16px;height:16px;color:var(--drg-brand);align-items:center;justify-content:center;vertical-align:middle;} .ns-row-ck svg {display:block;width:100%;height:100%;overflow:visible;fill:none !important;stroke:currentColor !important;} .ns-row.on .ns-row-ck {display:inline-flex;} /* 选中只亮对钩（特例：名字随之右移一格） */ .ns-empty {margin:24px 0 0;font-size:14px;line-height:1.7;color:var(--drg-faint);} /* 右侧 A-Z 索引：固定在本 pane 内、整列垂直居中，绝不随列表滚动 （flex-wrap:nowrap → 字母各占一行不分行；safe center 保证溢出时从顶部可读） */ .ns-rail {flex:0 0 30px;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;justify-content:safe center;gap:0;padding:6px 0;overflow-y:auto;overscroll-behavior:contain;} .ns-rail button {flex:0 0 auto;width:100%;border:0;background:transparent;font-family:inherit;font-size:11px;line-height:1.45;font-weight:600;color:var(--drg-faint);cursor:pointer;padding:0 2px;border-radius:6px;text-align:center;} .ns-rail button:hover {color:var(--drg-brand);background:var(--drg-brand-soft);} /* 轻提示 */ .ns-toast {position:fixed;left:50%;top:76px;transform:translateX(-50%) translateY(-8px);background:var(--drg-dark);color:#fff;font-size:13px;font-weight:500;padding:9px 16px;border-radius:999px;box-shadow:0 8px 24px rgba(15,15,15,.2);opacity:0;pointer-events:none;transition:opacity .2s var(--drg-ease),transform .2s var(--drg-ease);z-index:10031;} .ns-toast.on {opacity:1;transform:translateX(-50%) translateY(0);} /* ---------- 移动端 ---------- 一级（学习阶段）：整屏铺满，动效与顶部菜单完全同款—— 面板自上而下推入 .35s cubic-bezier(.16,1,.3,1)；退出 .175s ease-in 延迟 .15s； 内容（头/体/尾）再延迟淡入 .4s ease-out .2s（= 菜单里 li 的编排，先「伸展」后「淡入」） 二级（地区）：底部上滑弹层；打开时一级原地固定不动（只被遮罩压暗） */ @media (max-width:900px) { .ns-m-entry {display:inline-flex;} /* —— 一级：整屏推入（复刻版原样，勿改） —— 卡片铺满全屏从顶部推入，靠 body.ns-dlg-open 把导航 z-index 抬到 10040 压住面板， 而不是靠给面板让位。改成 top:52px 会让面板不铺满、退场方向也反过来。 */ .ns-dlg-card {left:0;right:0;top:0;bottom:0;width:auto;max-width:none;height:100%;max-height:none;border-radius:0;box-shadow:none;opacity:1;transform:translateY(-100%);transition:transform .175s ease-in .15s,opacity .175s ease-in;} .ns-dlg.open .ns-dlg-card {transform:translateY(0);transition:transform .35s cubic-bezier(.16,1,.3,1),opacity 0s;} /* —— 弹层打开时把导航提到最顶层（z > 一级 10010 / 二级 10020）—— 导航条始终可见可点，不被弹层与遮罩盖住；两级都在时同样生效。 注：z-index 补偿已上移到文件顶部统一处理（兼容 .header/.nav 两套类名），此处不再重复。 */ /* —— 内容延迟淡入（菜单 li 同款：开 .4s ease-out .2s / 关 .15s ease-in 立即） —— */ .ns-dlg:not(.ns-dlg-top) .ns-dlg-head, .ns-dlg:not(.ns-dlg-top) .ns-dlg-body, .ns-dlg:not(.ns-dlg-top) .ns-dlg-foot {opacity:0;transition:opacity .15s ease-in;} .ns-dlg.open:not(.ns-dlg-top) .ns-dlg-head, .ns-dlg.open:not(.ns-dlg-top) .ns-dlg-body, .ns-dlg.open:not(.ns-dlg-top) .ns-dlg-foot {opacity:1;transition:opacity .4s ease-out .2s;} /* —— 二级：底部弹层（高 ≈ 屏幕七成） —— */ .ns-dlg-top .ns-dlg-card {top:auto;bottom:0;height:70vh;max-height:80vh;border-radius:24px 24px 0 0;box-shadow:0 -10px 44px rgba(15,15,15,.2);transform:translateY(102%);transition:transform .22s ease-in;} .ns-dlg-top.open .ns-dlg-card {transform:translateY(0);transition:transform .32s cubic-bezier(.16,1,.3,1);} /* 抓手条只给二级（一级整屏不需要） */ .ns-dlg-top .ns-dlg-card::before {content:'';flex:0 0 auto;width:40px;height:4px;margin:10px auto 0;border-radius:999px;background:var(--drg-border-strong);} /* 一级整屏：顶部留白 104px（136-64+32，留出顶部导航/状态栏空间，内容不顶到边） */ .ns-dlg:not(.ns-dlg-top) .ns-dlg-head {padding-top:calc(104px + env(safe-area-inset-top,0px));} .ns-dlg-head {padding:18px 24px 14px;} .ns-dlg-title {font-size:25px;} .ns-dlg-sub {margin-top:10px;font-size:13.5px;} .ns-dlg-x {top:16px;right:16px;} /* 一级整屏：关闭钮贴弹窗可见区右上角、与右缘等距（导航占 60px，故 top=60+16） */ /* 一级整屏：关闭钮贴弹窗可见区右上角、与右缘等距（导航占 60px，故 top=60+16） */ .ns-dlg:not(.ns-dlg-top) .ns-dlg-x {top:calc(76px + env(safe-area-inset-top,0px));} .ns-dlg-head.center {padding-left:56px;padding-right:56px;} .ns-top-loc {margin:0 0 6px -8px;} .ns-dlg-body {padding:12px 24px 16px;} .ns-body-region {padding:4px 24px 0;} .ns-stage + .ns-stage {margin-top:32px;} .ns-stage-h {font-size:15px;} .ns-grid {gap:12px;} .ns-dlg-foot {margin-top:0;padding:14px 24px calc(18px + env(safe-area-inset-bottom,0px));} .ns-ok {height:50px;font-size:16px;} /* 地区层：标题→当前地区→选项卡→列表，段与段之间留出间距；当前地区条左右贴边 */ .ns-loc-bar {margin:10px 0 0;padding-left:24px;padding-right:24px;} .ns-tabs {margin:18px 24px 0;} .ns-rlist {padding:2px 2px 16px 24px;} .ns-row {height:52px;font-size:16px;} } /* 加载态：地区数据未就绪时列表区给一行提示（复刻版数据内联，无此状态） */ .ns-loading { display: flex; align-items: center; justify-content: center; gap: 8px; height: 120px; font-size: 14px; color: var(--drg-faint); } .ns-loading::before { content: ''; width: 14px; height: 14px; border: 2px solid var(--drg-border-strong); border-top-color: var(--drg-brand); border-radius: 50%; animation: ns-spin .8s linear infinite; } @keyframes ns-spin { to { transform: rotate(360deg); } }