/* ═══════════════════════════════════════════════════════════════ 权威页移动端改版(0808 用户令,依据设计稿 design_handoff_mobile_authority_pages) 铁律(README 数据契约 + 用户令"数据一个都不能改变"): 只动样式与承载方式,不动任何 {{ 变量 }} / {% 逻辑 %} / 字段名 / 文案。 手风琴一律 CSS 折叠,正文完整留在 DOM 里——绝不异步加载,否则搜索引擎抓不到。 桌面端(≥769px)一切照旧,本文件所有规则都关在媒体查询里。 改版前基线:scripts/ui_data_guard.py --snap before(15页 3722 行可见文本) 改完必须 --diff 零差异。 ═══════════════════════════════════════════════════════════════ */ /* ── 设计令牌(照 README 版式规格) ───────────────────────── */ :root{ --ma-bg:#F6F7F9; --ma-card:#FFFFFF; --ma-radius:14px; --ma-shadow:0 1px 3px rgba(20,24,35,.05); --ma-red:#E8331C; --ma-link:#1A5FD0; --ma-link-bg:#EEF3FD; --ma-t1:#16181D; --ma-t2:#4B5060; --ma-t3:#6B7180; --ma-t4:#9AA0AD; --ma-line:#F2F4F7; --ma-border:#E6E8EE; --ma-dark:#1C2436; --ma-foot:#232A3A; /* 状态色 */ --ma-open:#1F8A55; --ma-open-bg:#E9F6EE; --ma-closed:#8A8F9C; --ma-closed-bg:#F2F4F7; --ma-notice:#6B7180; --ma-notice-bg:#F6F7F9; --ma-natl:#B06A10; --ma-natl-bg:#FDF3E2; --ma-local:#E8331C; --ma-local-bg:#FDECEA; } @media (max-width:768px){ /* ── 基础版式:画布 390,左右留白 16 ───────────────────── */ body{background:var(--ma-bg)} .ma-wrap{padding-left:16px !important;padding-right:16px !important} /* 吸底条留空,内容不被遮挡(README:预留 84px) */ main{padding-bottom:84px} /* ── ① 首屏介绍折叠:默认两行 + 展开全文 ───────────────── ⚠ 正文完整留在 DOM,只是视觉截断,不影响收录 */ .ma-clamp{position:relative} .ma-clamp .ma-clamp-body{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;transition:none} .ma-clamp input.ma-clamp-cb{display:none} .ma-clamp input.ma-clamp-cb:checked ~ .ma-clamp-body{-webkit-line-clamp:unset;overflow:visible} .ma-clamp input.ma-clamp-cb:checked ~ .ma-clamp-more .ma-more-on{display:none} .ma-clamp input.ma-clamp-cb:checked ~ .ma-clamp-more .ma-more-off{display:inline} .ma-clamp-more{display:inline-block;margin-top:6px;font-size:13px;color:var(--ma-link);cursor:pointer} .ma-clamp-more .ma-more-off{display:none} /* ── ① 关键信息卡 ──────────────────────────────────── */ .ma-keycard{background:var(--ma-card);border-radius:var(--ma-radius); box-shadow:var(--ma-shadow);padding:14px 16px;margin:12px 0} /* 全国页:四宫格 + 报考条件/报名入口两条通栏。 ⚠ 只用 CSS 的 order 换位置,**不动 DOM 顺序**——DOM 里字段顺序 (报名时间/报名入口/报名费用/考试时间/考试频次/报考条件)保持不变, 可见文本一行不增不减,护栏才比得过;换 DOM 会连带改抓取顺序。 */ #zige-strip.ma-key-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; border:0 !important;border-radius:var(--ma-radius) !important; box-shadow:var(--ma-shadow);background:var(--ma-line)} #zige-strip.ma-key-grid > .cert-strip-item{padding:12px 13px !important} /* 视觉顺序:报名时间 → 考试时间 → 报名费用 → 考试频次 → 报考条件 → 报名入口 */ #zige-strip.ma-key-grid > .cert-strip-item:nth-child(1){order:1} #zige-strip.ma-key-grid > .cert-strip-item:nth-child(4){order:2} #zige-strip.ma-key-grid > .cert-strip-item:nth-child(3){order:3} #zige-strip.ma-key-grid > .cert-strip-item:nth-child(5){order:4} /* 报考条件(长文,默认两行+展开)与报名入口(转化落点)通栏 */ #zige-strip.ma-key-grid > .cert-strip-item:nth-child(6){order:5;grid-column:1/-1} #zige-strip.ma-key-grid > .cert-strip-item:nth-child(2){order:6;grid-column:1/-1} #zige-strip.ma-key-grid .cert-strip-key{font-size:12px !important;color:var(--ma-t3)} #zige-strip.ma-key-grid .cert-strip-value{font-size:13.5px !important;line-height:1.6 !important; overflow-wrap:anywhere} /* 报名入口:通栏那条给足点击区(README:点击区最小 44px) */ #zige-strip.ma-key-grid > .cert-strip-item:nth-child(2) .cert-strip-value a{ display:flex;align-items:center;justify-content:center;min-height:44px; margin-top:4px;padding:6px 12px;border-radius:11px; background:var(--ma-link-bg);color:var(--ma-link);text-align:center;line-height:1.5} /* 省页:8 字段逐行(设计稿是"标签在上、值在下"的一行一条,不是左右分栏—— 报考条件那条 60 字,右对齐会甩出五行阶梯,反而更难读)。 ⚠ 行内样式(padding/font-size)优先级压媒体查询,这里一律 !important 才生效。 */ .ma-key-rows{background:var(--ma-line) !important;border:0 !important; border-radius:var(--ma-radius) !important;box-shadow:var(--ma-shadow); gap:1px !important} .ma-key-rows > div{padding:13px 15px !important} .ma-key-k{font-size:12px !important;color:var(--ma-t3);line-height:1.6; margin-bottom:5px !important} .ma-key-v{font-size:15px !important;line-height:1.55 !important;overflow-wrap:anywhere} .ma-key-v a{color:var(--ma-link)} /* 报名入口(第2条)= 首屏转化落点,按设计稿做成 46px 通栏按钮;文案链接照旧不动 */ .ma-key-rows > div:nth-child(2) .ma-key-v a{display:flex;align-items:center; justify-content:center;min-height:46px;margin-top:2px;padding:6px 12px; border-radius:11px;background:var(--ma-link-bg);color:var(--ma-link); text-decoration:none;text-align:center;line-height:1.5} .ma-src-note{margin-top:10px;padding-top:9px;border-top:1px dashed var(--ma-border); font-size:11px;color:var(--ma-t4);line-height:1.85} /* 角标(沿用原页面口径,不新增) */ .ma-tag{display:inline-block;font-size:11px;font-weight:700;border-radius:4px; padding:1px 7px;margin-left:6px;white-space:nowrap;vertical-align:1px} .ma-tag-natl{color:var(--ma-natl);background:var(--ma-natl-bg)} .ma-tag-local{color:var(--ma-local);background:var(--ma-local-bg)} .ma-tag-open{color:var(--ma-open);background:var(--ma-open-bg)} .ma-tag-closed{color:var(--ma-closed);background:var(--ma-closed-bg)} .ma-tag-notice{color:var(--ma-notice);background:var(--ma-notice-bg)} /* ── ③ 各省对比表 → 一省一卡片(桌面端表格不动) ───────── */ .ma-table-desktop{display:none !important} /* 表格在M端已经被卡片顶替,它的"左右滑动查看完整表格"提示还挂在外面, 指着一张看不见的表让人划(用户截图里就贴在卡片下面)——一起收掉 */ .prov-hint{display:none !important} .ma-prov-cards{display:block} .ma-prov-card{background:var(--ma-card);border:1px solid var(--ma-border); border-radius:12px;padding:12px 14px;margin-bottom:10px} .ma-prov-head{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-bottom:8px} .ma-prov-name{font-family:'Noto Serif SC',serif;font-size:16px;font-weight:900;color:var(--ma-t1)} .ma-prov-row{display:flex;gap:10px;padding:5px 0;font-size:13px;line-height:1.7} .ma-prov-row .k{color:var(--ma-t3);width:76px;flex:none} .ma-prov-row .v{color:var(--ma-t1);flex:1;min-width:0;overflow-wrap:anywhere} .ma-prov-foot{display:flex;gap:14px;margin-top:8px;padding-top:8px; border-top:1px solid var(--ma-line);font-size:13px} .ma-prov-foot a{color:var(--ma-link);font-weight:600} /* 默认 4 张,展开全部(0809 用户令"这个地方展示4个省份就行") */ .ma-prov-cards .ma-prov-card:nth-of-type(n+5){display:none} #maProvAll:checked ~ .ma-prov-cards .ma-prov-card{display:block} #maProvAll:checked ~ .ma-prov-toggle .ma-more-on{display:none} #maProvAll:checked ~ .ma-prov-toggle .ma-more-off{display:inline} .ma-prov-toggle{display:block;text-align:center;padding:11px;margin-bottom:10px; background:var(--ma-link-bg);color:var(--ma-link);border-radius:10px; font-size:13px;font-weight:600;cursor:pointer} .ma-prov-toggle .ma-more-off{display:none} .ma-prov-search{width:100%;height:44px;padding:0 14px;margin-bottom:10px; border:1px solid var(--ma-border);border-radius:10px;font-size:14px; background:var(--ma-card);outline:none} /* ── ④ 长内容手风琴(CSS折叠,正文留在DOM) ─────────────── */ .ma-acc{border-bottom:1px solid var(--ma-line)} .ma-acc:last-child{border-bottom:0} .ma-acc > input{display:none} .ma-acc > label{display:flex;align-items:center;justify-content:space-between;gap:10px; min-height:44px;padding:9px 0;cursor:pointer; font-family:'Noto Serif SC',serif;font-size:15px;font-weight:900;color:var(--ma-t1)} .ma-acc > label::after{content:'▼';font-size:10px;color:var(--ma-t4); font-family:system-ui,sans-serif;transition:transform .2s ease;flex:none} .ma-acc > input:checked + label::after{transform:rotate(180deg)} .ma-acc-body{max-height:0;overflow:hidden;transition:max-height .2s ease} .ma-acc > input:checked ~ .ma-acc-body{max-height:4000px;padding-bottom:12px} .ma-acc-body,.ma-acc-body p,.ma-acc-body div,.ma-acc-body td{ font-size:13px;line-height:1.75;color:var(--ma-t2)} .ma-acc-src{display:block;margin-top:6px;font-size:11px;color:var(--ma-t4)} /* ── ⑤ 吸底转化条 ─────────────────────────────────── */ .ma-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:80; padding:8px 16px calc(8px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94);backdrop-filter:blur(8px); border-top:1px solid var(--ma-border)} .ma-cta-bar a,.ma-cta-bar button{display:flex;align-items:center;justify-content:center; width:100%;height:48px;background:var(--ma-red);color:#fff;border:0; border-radius:10px;font-size:15px;font-weight:700;text-decoration:none} /* ── 通用排版对齐设计稿 ────────────────────────────── */ .ma-h1{font-family:'Noto Serif SC',serif;font-size:25px !important; line-height:1.28 !important;font-weight:900;color:var(--ma-t1)} .ma-sec{background:var(--ma-card);border-radius:var(--ma-radius); box-shadow:var(--ma-shadow);padding:14px 16px;margin-bottom:12px} .ma-sec > h2,.ma-sec-title{font-family:'Noto Serif SC',serif; font-size:17px !important;font-weight:900;color:var(--ma-t1);margin:0 0 10px !important; padding:0 !important;border:0 !important} .ma-num{font-variant-numeric:tabular-nums;letter-spacing:.02em} } /* 桌面端:M端专用元素一律不出 */ @media (min-width:769px){ .ma-prov-cards,.ma-prov-toggle,.ma-prov-search,.ma-cta-bar{display:none !important} /* 0808 补漏:折叠控件的 display 规则原本全关在 ≤768 里,桌面端