/* 站内搜索（2026-09-28）：顶栏搜索框 · 首页 hero 大搜索 · 联想下拉 · 结果页 全站由 /assets/js/cmh-search.js 注入 ；首页与 /search/ 在 里直接引（避免首屏闪）。 颜色 / 字体全部沿用各页 :root（cmh-brand.css 统一成 navy #123478 / orange #e58820）。 */ /* ── 顶栏紧凑搜索框 ─────────────────────────────────────────── */ .cmh-sf { position: relative; display: flex; align-items: center; } .cmh-sf-nav { width: 220px; transition: width .25s ease; } .cmh-sf-nav:focus-within { width: 320px; } .cmh-sf input { width: 100%; height: 38px; padding: 0 2.2rem 0 .8rem; font: inherit; font-size: .82rem; color: var(--ink, #123478); background: var(--paper, #fff); border: 1px solid var(--line-strong, rgba(18,52,120,.34)); border-radius: 2px; outline: none; -webkit-appearance: none; appearance: none; } .cmh-sf input::placeholder { color: var(--ink-mute, rgba(18,52,120,.52)); } .cmh-sf input:focus { border-color: var(--ink, #123478); box-shadow: 0 0 0 3px rgba(18,52,120,.08); } .cmh-sf input::-webkit-search-cancel-button { -webkit-appearance: none; } .cmh-sf-go { position: absolute; right: 0; top: 0; height: 100%; width: 2.2rem; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--ink, #123478); cursor: pointer; padding: 0; } .cmh-sf-go svg { width: 16px; height: 16px; } @media (max-width: 1180px) { .cmh-sf-nav { width: 170px; } .cmh-sf-nav:focus-within { width: 260px; } } /* ≤ 900px：顶栏放不下（首页系列在 640–1024 之间 .nav-actions 还显示着，再塞一个输入框 logo 就被挤出屏幕），收成放大镜 */ @media (max-width: 900px) { .cmh-sf-nav { display: none !important; } } /* 手机：顶栏只留一个放大镜，点开整屏搜索层 */ .cmh-sf-mbtn { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; background: none; border: 0; color: var(--ink, #123478); cursor: pointer; padding: 0; margin-right: .2rem; } .cmh-sf-mbtn svg { width: 20px; height: 20px; } @media (max-width: 900px) { .cmh-sf-mbtn { display: inline-flex; } } .cmh-sf-overlay { position: fixed; inset: 0; z-index: 300; background: var(--paper, #fff); padding: 1rem var(--gutter, 1rem) 2rem; display: flex; flex-direction: column; gap: .8rem; } .cmh-sf-overlay[hidden] { display: none !important; } .cmh-sf-overlay .cmh-sf { width: 100%; } .cmh-sf-overlay .cmh-sf input { height: 46px; font-size: 1rem; } .cmh-sf-overlay-top { display: flex; align-items: center; gap: .6rem; } .cmh-sf-close { background: none; border: 0; font: inherit; font-size: .85rem; color: var(--ink, #123478); cursor: pointer; padding: .6rem .2rem; white-space: nowrap; } /* ── 首页 hero 大搜索 ────────────────────────────────────────── */ .cmh-hs { margin: 1.6rem 0 1.2rem; max-width: 640px; } .cmh-hs-tabs { display: inline-flex; border: 1px solid rgba(255,255,255,.35); border-bottom: 0; border-radius: 2px 2px 0 0; overflow: hidden; } .cmh-hs-tabs label { position: relative; } .cmh-hs-tabs input { position: absolute; opacity: 0; pointer-events: none; } .cmh-hs-tabs span { display: block; padding: .45rem .95rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); cursor: pointer; transition: background .2s, color .2s; } .cmh-hs-tabs input:checked + span { background: #fff; color: var(--ink, #123478); } .cmh-hs-tabs input:focus-visible + span { outline: 2px solid var(--cinnabar, #e58820); outline-offset: -2px; } .cmh-hs-row { position: relative; display: flex; background: #fff; border-radius: 0 2px 2px 2px; box-shadow: 0 14px 40px -18px rgba(0,0,0,.45); } .cmh-hs-row .cmh-sf { flex: 1; } .cmh-hs-row .cmh-sf input { height: 54px; border: 0; font-size: 1rem; padding-left: 1.1rem; border-radius: 2px 0 0 2px; } .cmh-hs-row .cmh-sf input:focus { box-shadow: none; } .cmh-hs-row .cmh-sf-go { display: none; } .cmh-hs-btn { display: inline-flex; align-items: center; gap: .5rem; padding: 0 1.4rem; background: var(--cinnabar, #e58820); color: #fff; border: 0; font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .04em; cursor: pointer; border-radius: 0 2px 2px 0; transition: filter .2s; } .cmh-hs-btn:hover { filter: brightness(1.06); } .cmh-hs-hint { margin-top: .6rem; font-size: .74rem; color: rgba(255,255,255,.72); display: flex; flex-wrap: wrap; gap: .3rem .6rem; } .cmh-hs-hint a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; } .cmh-hs-hint a:hover { text-decoration-color: #fff; } @media (max-width: 640px) { .cmh-hs-row .cmh-sf input { height: 48px; font-size: .95rem; } .cmh-hs-btn { padding: 0 1rem; } .cmh-hs-btn span { display: none; } } /* ── 联想下拉 ─────────────────────────────────────────────────── */ .cmh-sg { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 320; background: var(--paper, #fff); border: 1px solid var(--line-strong, rgba(18,52,120,.34)); border-radius: 2px; box-shadow: 0 18px 44px -18px rgba(18,52,120,.35); max-height: min(70vh, 520px); overflow: auto; text-align: left; color: var(--ink, #123478); } .cmh-sg[hidden] { display: none !important; } .cmh-sg-fixed { position: fixed; top: auto; left: auto; right: auto; z-index: 320; } .cmh-sg-fixed .cmh-sg-i, .cmh-sg-fixed .cmh-sg-all { font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif); } .cmh-sg-g { font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute, rgba(18,52,120,.52)); padding: .7rem .9rem .25rem; } .cmh-sg-i { display: flex; align-items: center; gap: .7rem; padding: .5rem .9rem; text-decoration: none; color: inherit; cursor: pointer; font-size: .86rem; } .cmh-sg-i[aria-selected="true"], .cmh-sg-i:hover { background: rgba(18,52,120,.06); } .cmh-sg-i img { width: 34px; height: 34px; object-fit: cover; border-radius: 2px; background: rgba(18,52,120,.06); flex: none; } .cmh-sg-i .ph { width: 34px; height: 34px; border-radius: 2px; background: rgba(18,52,120,.06); flex: none; display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-mute, rgba(18,52,120,.52)); } .cmh-sg-i b { font-weight: 500; } .cmh-sg-i mark { background: rgba(229,136,32,.22); color: inherit; padding: 0; } .cmh-sg-i small { display: block; font-size: .72rem; color: var(--ink-mute, rgba(18,52,120,.52)); } .cmh-sg-all { display: block; padding: .7rem .9rem; border-top: 1px solid var(--line, rgba(18,52,120,.16)); font-size: .8rem; font-weight: 600; color: var(--cinnabar, #e58820); text-decoration: none; } .cmh-sg-all[aria-selected="true"], .cmh-sg-all:hover { background: rgba(229,136,32,.08); } .cmh-sg-empty { padding: .8rem .9rem; font-size: .8rem; color: var(--ink-mute, rgba(18,52,120,.52)); } /* ── 结果页 ───────────────────────────────────────────────────── */ .srp { padding: 1.6rem 0 4rem; } .srp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .srp-head h1 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 500; letter-spacing: -.02em; margin: 0; } .srp-head h1 em { font-style: normal; color: var(--cinnabar, #e58820); } .srp-sub { font-size: .82rem; color: var(--ink-mute, rgba(18,52,120,.52)); margin-top: .3rem; } .srp-form { width: min(100%, 560px); } .srp-form .cmh-sf input { height: 44px; font-size: .95rem; } .srp-tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line, rgba(18,52,120,.16)); margin: .6rem 0 1.4rem; overflow-x: auto; } .srp-tab { padding: .7rem 1rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute, rgba(18,52,120,.52)); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .srp-tab span { font-weight: 400; margin-left: .35rem; opacity: .8; } .srp-tab[aria-current="page"] { color: var(--ink, #123478); border-bottom-color: var(--cinnabar, #e58820); } .srp-tab:hover { color: var(--ink, #123478); } .srp-body { display: grid; grid-template-columns: 220px 1fr; gap: 2.2rem; align-items: start; } @media (max-width: 860px) { .srp-body { grid-template-columns: 1fr; gap: 1.2rem; } } .srp-facets { display: grid; gap: 1.2rem; font-size: .82rem; } .srp-facet h3 { font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute, rgba(18,52,120,.52)); margin: 0 0 .4rem; } .srp-facet a { display: flex; justify-content: space-between; gap: .6rem; padding: .28rem 0; color: var(--ink-soft, rgba(18,52,120,.8)); text-decoration: none; } .srp-facet a:hover { color: var(--ink, #123478); } .srp-facet a[aria-current="true"] { color: var(--ink, #123478); font-weight: 600; } .srp-facet a[aria-current="true"]::before { content: "✓ "; color: var(--cinnabar, #e58820); } .srp-facet a span { color: var(--ink-mute, rgba(18,52,120,.52)); font-variant-numeric: tabular-nums; } .srp-facet-more { font-size: .74rem; color: var(--ink-mute, rgba(18,52,120,.52)); cursor: pointer; background: none; border: 0; padding: .2rem 0; font-family: inherit; } @media (max-width: 860px) { .srp-facets { display: flex; flex-wrap: wrap; gap: .5rem; } .srp-facet h3 { display: none; } .srp-facet { display: contents; } .srp-facet a { padding: .3rem .7rem; border: 1px solid var(--line-strong, rgba(18,52,120,.34)); border-radius: 2px; font-size: .74rem; } .srp-facet a[aria-current="true"] { background: var(--ink, #123478); color: #fff; border-color: var(--ink, #123478); } .srp-facet a[aria-current="true"]::before { content: none; } .srp-facet a span { display: none; } .srp-facet-more { display: none; } } .srp-active { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; } .srp-active a { font-size: .74rem; padding: .25rem .6rem; background: rgba(18,52,120,.06); border-radius: 2px; text-decoration: none; color: var(--ink, #123478); } .srp-active a::after { content: " ×"; opacity: .6; } .srp-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: 1rem; font-size: .82rem; color: var(--ink-mute, rgba(18,52,120,.52)); } .srp-sort { display: flex; gap: .2rem; } .srp-sort a { padding: .3rem .6rem; text-decoration: none; color: var(--ink-mute, rgba(18,52,120,.52)); border-radius: 2px; } .srp-sort a[aria-current="true"] { color: var(--ink, #123478); background: rgba(18,52,120,.06); font-weight: 600; } .srp-list { display: grid; gap: .8rem; } .srp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; } .srp-card { display: grid; grid-template-columns: 132px 1fr; gap: 1.1rem; padding: 1rem; border: 1px solid var(--line, rgba(18,52,120,.16)); border-radius: 2px; text-decoration: none; color: inherit; background: var(--paper, #fff); transition: border-color .2s, box-shadow .2s, transform .2s; } .srp-card:hover { border-color: var(--line-strong, rgba(18,52,120,.34)); box-shadow: 0 12px 30px -18px rgba(18,52,120,.35); transform: translateY(-2px); } .srp-card.noimg { grid-template-columns: 1fr; } .srp-thumb { aspect-ratio: 4/3; background: rgba(18,52,120,.06); border-radius: 2px; overflow: hidden; } .srp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .srp-pcard { display: flex; flex-direction: column; gap: .5rem; padding: .7rem; border: 1px solid var(--line, rgba(18,52,120,.16)); border-radius: 2px; text-decoration: none; color: inherit; background: var(--paper, #fff); transition: border-color .2s, box-shadow .2s, transform .2s; } .srp-pcard:hover { border-color: var(--line-strong, rgba(18,52,120,.34)); box-shadow: 0 12px 30px -18px rgba(18,52,120,.35); transform: translateY(-2px); } .srp-pcard .srp-thumb { aspect-ratio: 1/1; } .srp-title { font-size: .98rem; font-weight: 600; letter-spacing: -.01em; margin: 0; line-height: 1.3; } .srp-title mark { background: rgba(229,136,32,.22); color: inherit; padding: 0; } .srp-meta { font-size: .76rem; color: var(--ink-mute, rgba(18,52,120,.52)); margin-top: .2rem; display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; } .srp-snip { font-size: .84rem; color: var(--ink-soft, rgba(18,52,120,.8)); margin: .45rem 0 0; line-height: 1.55; } .srp-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; } .srp-tags span { font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; padding: .18rem .45rem; border: 1px solid var(--line, rgba(18,52,120,.16)); border-radius: 2px; color: var(--ink-mute, rgba(18,52,120,.52)); } .chip-v { display: inline-flex; align-items: center; gap: .3rem; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 2px; background: var(--ink, #123478); color: #fff; } .chip-v.open { background: transparent; color: var(--ink-mute, rgba(18,52,120,.52)); border: 1px solid var(--line-strong, rgba(18,52,120,.34)); } .srp-pcard .srp-title { font-size: .88rem; } .srp-pcard .srp-meta { font-size: .72rem; } .srp-state { padding: 2.2rem 1.2rem; border: 1px dashed var(--line-strong, rgba(18,52,120,.34)); border-radius: 2px; text-align: center; font-size: .9rem; color: var(--ink-soft, rgba(18,52,120,.8)); } .srp-state.err { border-color: #c0392b; color: #c0392b; border-style: solid; } .srp-state button { margin-top: .8rem; font: inherit; font-size: .8rem; padding: .5rem 1rem; background: var(--ink, #123478); color: #fff; border: 0; cursor: pointer; border-radius: 2px; } .srp-rfq { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1.2rem 1.4rem; margin: 1rem 0; background: var(--ink, #123478); color: #fff; border-radius: 2px; } .srp-rfq h3 { margin: 0 0 .25rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; } .srp-rfq p { margin: 0; font-size: .84rem; opacity: .85; } .srp-rfq a { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; background: var(--cinnabar, #e58820); color: #fff; text-decoration: none; font-size: .8rem; font-weight: 600; letter-spacing: .04em; border-radius: 2px; white-space: nowrap; } @media (max-width: 640px) { .srp-rfq { grid-template-columns: 1fr; } } .srp-related { margin: 1.6rem 0 0; font-size: .82rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .srp-related b { font-weight: 600; margin-right: .3rem; color: var(--ink-mute, rgba(18,52,120,.52)); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; } .srp-related a { padding: .3rem .7rem; border: 1px solid var(--line-strong, rgba(18,52,120,.34)); border-radius: 999px; text-decoration: none; color: var(--ink, #123478); } .srp-related a:hover { border-color: var(--ink, #123478); } .srp-pager { display: flex; justify-content: center; gap: .3rem; margin-top: 1.6rem; font-size: .82rem; } .srp-pager a, .srp-pager span { min-width: 34px; padding: .45rem .6rem; text-align: center; border: 1px solid var(--line, rgba(18,52,120,.16)); border-radius: 2px; text-decoration: none; color: var(--ink, #123478); } .srp-pager [aria-current="page"] { background: var(--ink, #123478); color: #fff; border-color: var(--ink, #123478); } .srp-pager .dis { opacity: .35; pointer-events: none; } .srp-mode { font-size: .7rem; color: var(--ink-mute, rgba(18,52,120,.52)); }