diff --git a/app/globals.css b/app/globals.css index 9fbb1dc..64d6aae 100644 --- a/app/globals.css +++ b/app/globals.css @@ -387,6 +387,26 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado font-size: 10px; font-weight: 700; } +.precision-gear-panel { + display: grid; + grid-template-columns: minmax(260px, .8fr) 1.2fr; + gap: 28px; + align-items: center; + margin-top: 42px; + padding: 28px; + border: 1px solid #d8e3f5; + border-radius: 18px; + background: linear-gradient(135deg, #f5f9ff, #eef5ff 62%, #f8fbff); +} +.precision-gear-copy h3 { margin: 9px 0 9px; color: var(--ink); font-size: 25px; letter-spacing: -.03em; } +.precision-gear-copy > p:not(.eyebrow) { max-width: 410px; margin: 0; color: #6d7c92; font-size: 12px; line-height: 1.75; } +.precision-gear-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } +.precision-gear-stat { display: flex; align-items: baseline; gap: 7px; padding: 16px 17px; border: 1px solid rgba(176, 201, 239, .72); border-radius: 12px; background: rgba(255,255,255,.78); } +.precision-gear-stat strong { color: var(--blue); font-size: 25px; letter-spacing: -.04em; } +.precision-gear-stat span { color: #73829a; font-size: 11px; } +.precision-gear-subcats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; padding-top: 13px; border-top: 1px solid rgba(176, 201, 239, .58); } +.precision-gear-subcats span { padding: 6px 9px; border: 1px solid #d6e2f5; border-radius: 999px; color: #60718b; background: rgba(255,255,255,.72); font-size: 10px; } +.precision-gear-subcats b { margin-left: 3px; color: var(--blue); font-weight: 800; } .catalog-empty { padding: 60px 20px; text-align: center; border: 1px dashed #cbd5e3; border-radius: 15px; background: white; } .catalog-empty p { color: #8792a4; font-size: 12px; } .catalog-empty button { border: 0; color: var(--blue); background: transparent; cursor: pointer; font-weight: 700; } @@ -474,6 +494,7 @@ footer > span { color: #9aa4b2; font-size: 10px; } .how-section { gap: 45px; } .catalog-summary { grid-template-columns: repeat(4, 1fr); } .catalog-grid { grid-template-columns: repeat(2, 1fr); } + .precision-gear-panel { grid-template-columns: 1fr; } } @media (max-width: 720px) { @@ -499,6 +520,7 @@ footer > span { color: #9aa4b2; font-size: 10px; } .catalog-toolbar { top: 64px; } .catalog-scale-filter { grid-template-columns: 1fr; align-items: stretch; } .catalog-grid { grid-template-columns: 1fr; gap: 15px; } + .precision-gear-panel { gap: 20px; margin-top: 30px; padding: 22px 18px; } .catalog-card-body { padding: 15px; } .catalog-card-body h3 { height: auto; min-height: 42px; font-size: 14px; } .catalog-card-body dl { min-height: 90px; } diff --git a/app/page.tsx b/app/page.tsx index 92018ac..378cf0e 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -50,6 +50,20 @@ const PRIMARY_CATALOG_CATEGORIES = [ const CATALOG_FILTER_CATEGORIES = ["全部产品", ...PRIMARY_CATALOG_CATEGORIES, "静音舵机"]; +const PRECISION_GEAR_SUBCATEGORIES = [ + ["轴", 15], + ["单伞齿", 23], + ["单直齿", 160], + ["单皇冠齿", 9], + ["双联直齿", 186], + ["其他双联齿", 18], + ["双联皇冠齿", 16], + ["蜗杆", 32], + ["异形零件", 18], + ["离合齿", 29], + ["差速器组件", 5], +] as const; + const FEATURED_SPEC_ORDER = [ "堵转扭矩", "额定电压", @@ -404,6 +418,7 @@ export default function Home() { )} + + {selectedCatalogProduct && (