diff --git a/app/globals.css b/app/globals.css index a70b3d6..6e85ffe 100644 --- a/app/globals.css +++ b/app/globals.css @@ -297,7 +297,7 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado .category-pills button.active { border-color: var(--blue); color: white; background: var(--blue); } .catalog-result-count { margin: 11px 2px 0; color: #8792a3; font-size: 10px; } .catalog-result-count strong { color: var(--blue); font-size: 12px; } -.catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } +.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .catalog-card { min-width: 0; border: 1px solid #dce3ed; @@ -310,7 +310,7 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado .catalog-image-button { position: relative; width: 100%; - height: 190px; + height: 280px; display: grid; place-items: center; border: 0; @@ -319,7 +319,8 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado cursor: pointer; overflow: hidden; } -.catalog-image-button img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } +.catalog-image-button img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s ease; } +.catalog-image-button:hover img { transform: scale(1.07); } .catalog-image-button small { position: absolute; top: 10px; @@ -332,6 +333,18 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado font-size: 8px; font-weight: 750; } +.catalog-zoom-hint { + position: absolute; + right: 11px; + bottom: 11px; + padding: 6px 9px; + border-radius: 7px; + color: #315686; + background: rgba(255,255,255,.92); + box-shadow: 0 3px 12px rgba(31,56,93,.1); + font-size: 9px; + font-weight: 700; +} .catalog-placeholder { color: #9eb3d3; font-size: 14px; font-weight: 800; letter-spacing: .12em; } .catalog-card-body { padding: 16px; } .catalog-card-body > p { margin: 0 0 5px; color: #8793a5; font-size: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } @@ -382,7 +395,7 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado } .catalog-modal { position: relative; - width: min(760px, 100%); + width: min(900px, 100%); max-height: min(820px, 92vh); padding: 28px; overflow-y: auto; @@ -404,8 +417,8 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado cursor: pointer; font-size: 20px; } -.catalog-modal-product { display: grid; grid-template-columns: 210px 1fr; align-items: center; gap: 28px; } -.catalog-modal-image { height: 180px; display: grid; place-items: center; border-radius: 13px; overflow: hidden; background: #f2f5fa; } +.catalog-modal-product { display: grid; grid-template-columns: 360px 1fr; align-items: center; gap: 34px; } +.catalog-modal-image { height: 300px; display: grid; place-items: center; border-radius: 13px; overflow: hidden; background: #f2f5fa; } .catalog-modal-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .catalog-modal-product h2 { margin: 4px 0 10px; font-size: 27px; line-height: 1.3; letter-spacing: -.025em; } .catalog-modal-product code { color: #5d6b81; font-size: 11px; } @@ -438,6 +451,8 @@ footer > span { color: #9aa4b2; font-size: 10px; } .hero-copy { max-width: 760px; } .selector-shell { width: min(100%, 720px); } .how-section { gap: 45px; } + .catalog-grid { grid-template-columns: repeat(2, 1fr); } + .catalog-image-button { height: 260px; } } @media (max-width: 720px) { @@ -462,15 +477,15 @@ footer > span { color: #9aa4b2; font-size: 10px; } .catalog-summary { grid-template-columns: repeat(2, 1fr); } .catalog-summary button:last-child { grid-column: 1 / -1; } .catalog-toolbar { top: 64px; } - .catalog-grid { grid-template-columns: 1fr 1fr; gap: 10px; } - .catalog-image-button { height: 150px; } - .catalog-card-body { padding: 12px; } - .catalog-card-body h3 { height: 60px; font-size: 13px; } + .catalog-grid { grid-template-columns: 1fr; gap: 15px; } + .catalog-image-button { height: 280px; } + .catalog-card-body { padding: 15px; } + .catalog-card-body h3 { height: auto; min-height: 42px; font-size: 14px; } .catalog-card-body dl { min-height: 90px; } .catalog-modal-backdrop { padding: 10px; } .catalog-modal { padding: 22px 16px; } .catalog-modal-product { grid-template-columns: 1fr; gap: 16px; } - .catalog-modal-image { height: 220px; } + .catalog-modal-image { height: 290px; } .catalog-spec-table { grid-template-columns: 1fr; } .catalog-modal-actions { align-items: stretch; flex-direction: column; } .products-section { padding: 75px 16px; } diff --git a/app/page.tsx b/app/page.tsx index 6a7265d..8150daf 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -814,6 +814,7 @@ export default function Home() { GAUDELOT )} {product.category} + 点击查看大图
{product.code}