body { font-family: -apple-system, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; margin: 0; padding: 0; color: #333; line-height: 1.6; background: #fff; } :root{ /* 结构色 (零新增) */ --ink:#18181C; --paper:#FCFBF8; --line:#ece7dd; --wine:#960630; /* 三态语义色 —— 沿用本页原有色, 只统一规格 */ --stock:#28a745; --out:#b06a00; --out-bg:#fff4e0; --out-line:#ffd699; --price:#e60012; --mute:#888; --mute2:#aaa; --mute3:#bbb; --hair:#f5f5f5; /* 间距体系 —— 全页只用这 6 个值 */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; /* 卡片规格 —— 全页唯一一套（A1「零常态阴影」2026-10-28：--card-sh 归零, 常态不再投影） */ --r:10px; --card-bd:1px solid var(--line); --card-sh:0; /* 报价表列宽 —— 表头与数据行共用同一个值, 这是"列列对齐"的结构性保证 */ --cols:minmax(220px,1fr) 108px 140px 116px 100px 208px; } *{box-sizing:border-box;} /* 数字排版: 等宽数字, 让小数点/千分位竖成一条线 */ .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; white-space:nowrap;letter-spacing:-.01em;} .pageStatsBar{ --snum:26px; --slab:12px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:#fff; border:var(--card-bd); border-radius:var(--r); overflow:hidden; margin:-8px 0 var(--s5) 0; } .pageStatsBar > div{ display:flex; flex-direction:column; justify-content:flex-end; padding:var(--s4) var(--s2); text-align:center; min-width:0; border-left:1px solid var(--line); } .pageStatsBar > div:first-child{border-left:0;} .pageStatsBar .s-num{ font-size:var(--snum); font-weight:700; line-height:1.2; color:var(--ink); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; white-space:nowrap; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; } .pageStatsBar .s-num.is-price{color:var(--price);} .pageStatsBar .s-num.is-date{font-weight:400;color:var(--mute);} .pageStatsBar .s-num.is-empty{font-weight:400;color:var(--mute3);} .pageStatsBar .s-lab{font-size:var(--slab); color:var(--mute); margin-top:6px; line-height:1.4;} /* ---- 大百科简介卡: 与统计条/监测卡共用同一套卡片规格 ---- */ .baikeIntroCard{ background:var(--paper); border:var(--card-bd); border-radius:var(--r); padding:var(--s5); margin-bottom:var(--s5); } /* ---- 监测卡 ---- */ .specGroupsWrapper{ background:#fff; border:var(--card-bd); border-radius:var(--r); overflow:hidden; margin-bottom:var(--s5); } .mon-head{background:var(--ink); color:#fff; padding:var(--s3) var(--s4); display:flex; justify-content:space-between; align-items:center; gap:var(--s2); flex-wrap:wrap;} .mon-head .t{font-size:17px; font-weight:700;} .mon-head .s{font-size:13px; color:rgba(255,255,255,.72);} .mon-body{padding:var(--s4);} .mon-desc{font-size:13px; color:var(--mute); line-height:1.7; margin:0 0 var(--s4);} /* ---- 规格 Tab: 桌面换行, 窄屏单行横滚 ---- */ .specTabs{display:flex; gap:var(--s2); flex-wrap:wrap; margin:0 0 var(--s4); padding:0; list-style:none;} .specTab{font-family:inherit; font-size:13px; line-height:1.4; cursor:pointer; padding:8px 14px; border-radius:8px; white-space:nowrap; background:#fff; color:#555; border:1px solid var(--line); transition:background .15s,color .15s,border-color .15s;} .specTab b{font-weight:700; opacity:.6; margin-left:3px;} .specTab:hover{border-color:var(--wine); color:var(--wine);} .specTab.is-active{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:700;} .specTab.is-active b{opacity:.9;} /* ---- 报价表 (A1 报价竖向条带流) ---- 一条报价 = 一个条带 (.prow), 竖向堆叠成一条流; 带内固定三段: 段① 商品 = .c-name (图+商品名) + .c-stock (库存) 段② 价格·折算 = .c-amt (人民币价 + 原币折算 + 标记) + .c-per (单支约) 段③ 按钮组 = .c-time (更新时间) + .c-src (去来源站按钮) 段与段之间用「加宽的列距」分隔 (段② 从第 3 列起, 段③ 从第 5 列起), 表头 .phead 同步加同样的 margin ⇒ 6 列仍逐列对齐 (--cols 不变); 行与行之间 1px 灰边; 常态零阴影 (--card-sh 已归零)。 DOM 不变: 一行报价仍是 6 个格子, 只在 CSS 层分成三段。 ---- */ .phead,.prow{display:grid; grid-template-columns:var(--cols); gap:var(--s3); align-items:center;} .phead{padding:10px var(--s4); background:var(--paper); border-bottom:1px solid var(--line); font-size:12px; color:var(--mute);} .phead .r{text-align:right;} /* 三段分隔 (表头与数据行同步, 保证列列对齐) */ .phead > div:nth-child(3),.prow .c-amt{margin-left:var(--s4);} .phead > div:nth-child(5),.prow .c-time{margin-left:var(--s4);} .prow{padding:10px var(--s4); border-bottom:1px solid var(--cigar-line-2); font-size:14px;} .prow:last-child{border-bottom:0;} .prow:hover{background:var(--paper);} .c-name{display:flex; align-items:center; gap:var(--s2); min-width:0;} img.thumb{flex:0 0 40px; width:40px; height:40px; object-fit:contain; border:1px solid var(--line); border-radius:6px; background:#fff;} .c-name .nm,.c-name a.nm{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;} a.specRowNameLink{color:var(--ink); text-decoration:none;} a.specRowNameLink:hover{color:var(--wine); text-decoration:underline;} a.specRowImgLink{display:block; line-height:0; flex:0 0 auto; border-radius:4px;} a.specRowImgLink:hover img{opacity:.7;} .c-stock{text-align:center;} .c-amt,.c-per,.c-time,.c-src{text-align:right;} .c-time{color:var(--mute); font-size:13px;} .c-val{min-width:0;} /* 三态胶囊 —— 统一规格 (圆角/边框/字号/字重), 颜色沿用原有三态色 */ .badge{display:inline-block; padding:2px 8px; border-radius:5px; font-size:12px; line-height:1.5; font-weight:700; white-space:nowrap;} .badge.s{color:var(--stock); background:#fff; border:1px solid var(--line);} .badge.o{color:var(--out); background:var(--out-bg); border:1px solid var(--out-line);} .badge.n{color:var(--mute); background:#f5f5f5; border:1px solid var(--line); font-weight:400;} .amt{font-size:16px; font-weight:700; line-height:1.3;} .amt.s{color:var(--price);} .amt.o{color:#999;} .amt.n{color:var(--mute3); font-size:14px; font-weight:400;} .orig{display:block; font-size:12px; color:var(--mute2); margin-top:1px;} .omark{display:block; font-size:11px; color:var(--out); margin-top:1px;} .per{font-size:13px;} .per.y{color:var(--stock);} .per.n{color:var(--mute3);} /* 报价行按钮降噪: 只留一个实心主按钮(去来源站) */ .c-src{display:flex; flex-direction:column; align-items:flex-end; gap:var(--s1);} .btn-src{display:inline-block; background:var(--ink); color:#fff; padding:7px 12px; border-radius:6px; font-size:13px; text-decoration:none; white-space:nowrap; line-height:1.4;} .btn-src:hover{background:#000;} /* ---- 分组卡 ---- */ .specGroup{border:var(--card-bd); border-radius:var(--r); overflow:hidden; background:#fff;} .specGroup + .specGroup{margin-top:var(--s3);} .specGroup .ghead{background:var(--ink); color:#fff; padding:10px var(--s4); display:flex; justify-content:space-between; align-items:center; gap:var(--s2); flex-wrap:wrap;} .specGroup .ghead .n{font-weight:700; font-size:14px;} .specGroup .ghead .c{font-size:12px; color:rgba(255,255,255,.72);} /* ---- 三态图例 + 价格口径脚注 ---- */ .legend{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); padding:var(--s3) var(--s4); background:var(--paper); border-top:1px solid var(--line); font-size:12px; color:var(--mute);} .legend span{display:inline-flex; align-items:center; gap:6px;} .legend .dot{width:8px; height:8px; border-radius:50%; display:inline-block;} .legend .dot.s{background:var(--stock);} .legend .dot.o{background:var(--out);} .legend .dot.n{background:var(--mute3);} .ptFoot{padding:var(--s3) var(--s4); border-top:1px solid var(--line); font-size:12px; color:var(--mute); line-height:1.75;} .ptFoot strong{color:var(--out); font-weight:700;} .pricetrackDisclosure{background:#F7F7F5; border-left:3px solid #bbb; border-radius:8px; padding:var(--s3) var(--s4); margin:0 0 var(--s5); font-size:13px; color:#777; line-height:1.8;} a:focus-visible,button:focus-visible{outline:2px solid var(--wine); outline-offset:2px;} /* ================================================================ 移动端 <=768px —— 统计条改 2 列 3 行, 表格改堆叠, Tab 改单行横滚 ================================================================ */ @media (max-width:768px){ .pageStatsBar{ --snum:21px; grid-template-columns:repeat(2,minmax(0,1fr)); } .pageStatsBar > div{ border-left:0; border-top:1px solid var(--line); padding:var(--s3) var(--s2); } .pageStatsBar > div:first-child{border-left:0;} /* 2 列网格里的纵向分隔线只出现在第 2/4 格 (每行第 2 列) */ .pageStatsBar > div:nth-child(even){border-left:1px solid var(--line);} /* 第 1 行顶格不画横线 */ .pageStatsBar > div:nth-child(-n+2){border-top:0;} /* 「在售起价」整宽做底部高亮, 不跟别的格挤 */ .pageStatsBar > div:last-child{grid-column:1 / -1;} .mon-body{padding:var(--s3);} .specTabs{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:var(--s2); scrollbar-width:thin;} .specTab{flex:0 0 auto;} /* 表格改堆叠: 标签在左, 数值仍右对齐 (老做法是全部左对齐, 数字列失去可比性) */ .phead{display:none;} .prow{grid-template-columns:minmax(0,1fr); gap:var(--s2); padding:var(--s3) var(--s4); align-items:start;} /* 单列堆叠后不再需要三段分隔的加宽列距, 归零 (否则标签行左侧缩进不一致) */ .prow .c-amt,.prow .c-time{margin-left:0;} .c-name{align-items:flex-start;} .c-name img,img.thumb{flex:0 0 36px; width:36px; height:36px;} .c-name .nm,.c-name a.nm{white-space:normal; overflow:visible;} .prow [data-label]{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); text-align:right;} .prow [data-label]::before{content:attr(data-label); flex:0 0 auto; font-size:11px; color:var(--mute2); font-weight:400;} .prow [data-label] .c-val{flex:1 1 auto; text-align:right;} .c-src{flex-wrap:wrap;} .legend,.ptFoot{padding-left:var(--s3); padding-right:var(--s3);} } @media (prefers-reduced-motion:reduce){*{transition:none!important;}} /* 面包屑链接 — 原 build_static_merged.py render_breadcrumb 内 body 级