MJ-IT/gdm-Servo-model
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enlarge catalog product images

Browse Source
This commit is contained in:
Jacky Ser
2026-08-10 16:27:18 +08:00
parent 3f9202b315
commit 99f9f079b3
2 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/globals.css
View File

@@ -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); } .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 { margin: 11px 2px 0; color: #8792a3; font-size: 10px; }
.catalog-result-count strong { color: var(--blue); font-size: 12px; } .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 { .catalog-card {
min-width: 0; min-width: 0;
border: 1px solid #dce3ed; border: 1px solid #dce3ed;
@@ -310,7 +310,7 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
.catalog-image-button { .catalog-image-button {
position: relative; position: relative;
width: 100%; width: 100%;
height: 190px; height: 280px;
display: grid; display: grid;
place-items: center; place-items: center;
border: 0; border: 0;
@@ -319,7 +319,8 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
cursor: pointer; cursor: pointer;
overflow: hidden; 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 { .catalog-image-button small {
position: absolute; position: absolute;
top: 10px; top: 10px;
@@ -332,6 +333,18 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
font-size: 8px; font-size: 8px;
font-weight: 750; 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-placeholder { color: #9eb3d3; font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.catalog-card-body { padding: 16px; } .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; } .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 { .catalog-modal {
position: relative; position: relative;
width: min(760px, 100%); width: min(900px, 100%);
max-height: min(820px, 92vh); max-height: min(820px, 92vh);
padding: 28px; padding: 28px;
overflow-y: auto; overflow-y: auto;
@@ -404,8 +417,8 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
cursor: pointer; cursor: pointer;
font-size: 20px; font-size: 20px;
} }
.catalog-modal-product { display: grid; grid-template-columns: 210px 1fr; align-items: center; gap: 28px; } .catalog-modal-product { display: grid; grid-template-columns: 360px 1fr; align-items: center; gap: 34px; }
.catalog-modal-image { height: 180px; display: grid; place-items: center; border-radius: 13px; overflow: hidden; background: #f2f5fa; } .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-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 h2 { margin: 4px 0 10px; font-size: 27px; line-height: 1.3; letter-spacing: -.025em; }
.catalog-modal-product code { color: #5d6b81; font-size: 11px; } .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; } .hero-copy { max-width: 760px; }
.selector-shell { width: min(100%, 720px); } .selector-shell { width: min(100%, 720px); }
.how-section { gap: 45px; } .how-section { gap: 45px; }
.catalog-grid { grid-template-columns: repeat(2, 1fr); }
.catalog-image-button { height: 260px; }
} }
@media (max-width: 720px) { @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 { grid-template-columns: repeat(2, 1fr); }
.catalog-summary button:last-child { grid-column: 1 / -1; } .catalog-summary button:last-child { grid-column: 1 / -1; }
.catalog-toolbar { top: 64px; } .catalog-toolbar { top: 64px; }
.catalog-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .catalog-grid { grid-template-columns: 1fr; gap: 15px; }
.catalog-image-button { height: 150px; } .catalog-image-button { height: 280px; }
.catalog-card-body { padding: 12px; } .catalog-card-body { padding: 15px; }
.catalog-card-body h3 { height: 60px; font-size: 13px; } .catalog-card-body h3 { height: auto; min-height: 42px; font-size: 14px; }
.catalog-card-body dl { min-height: 90px; } .catalog-card-body dl { min-height: 90px; }
.catalog-modal-backdrop { padding: 10px; } .catalog-modal-backdrop { padding: 10px; }
.catalog-modal { padding: 22px 16px; } .catalog-modal { padding: 22px 16px; }
.catalog-modal-product { grid-template-columns: 1fr; gap: 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-spec-table { grid-template-columns: 1fr; }
.catalog-modal-actions { align-items: stretch; flex-direction: column; } .catalog-modal-actions { align-items: stretch; flex-direction: column; }
.products-section { padding: 75px 16px; } .products-section { padding: 75px 16px; }

1
app/page.tsx
View File

@@ -814,6 +814,7 @@ export default function Home() {
<span className="catalog-placeholder">GAUDELOT</span> <span className="catalog-placeholder">GAUDELOT</span>
)} )}
<small>{product.category}</small> <small>{product.category}</small>
<span className="catalog-zoom-hint">点击查看大图</span>
</button> </button>
<div className="catalog-card-body"> <div className="catalog-card-body">
<p>{product.code}</p> <p>{product.code}</p>