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

Adapt product image windows to source ratios

Browse Source
This commit is contained in:
Jacky Ser
2026-08-11 15:12:57 +08:00
parent 794857f465
commit 9627c5043e
1 changed files with 9 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/globals.css
View File

@@ -170,8 +170,8 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
.recommendation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 10px; } .recommendation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 10px; }
.recommendation-card { min-width: 0; min-height: 442px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dce3ed; border-radius: 14px; background: white; box-shadow: 0 8px 24px rgba(38,70,125,.06); } .recommendation-card { min-width: 0; min-height: 442px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dce3ed; border-radius: 14px; background: white; box-shadow: 0 8px 24px rgba(38,70,125,.06); }
.recommendation-card.is-primary { border-color: #cfdaf0; box-shadow: 0 8px 24px rgba(38,70,125,.1); } .recommendation-card.is-primary { border-color: #cfdaf0; box-shadow: 0 8px 24px rgba(38,70,125,.1); }
.recommendation-image-wrap { position: relative; height: 132px; flex: 0 0 132px; background: #eff4fb; } .recommendation-image-wrap { position: relative; display: grid; place-items: center; overflow: hidden; background: #eff4fb; }
.recommendation-image-wrap img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .recommendation-image-wrap img { display: block; width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.match-badge { position: absolute; left: 12px; top: 12px; padding: 6px 9px; border-radius: 7px; color: white; background: var(--orange); font-size: 9px; font-weight: 800; } .match-badge { position: absolute; left: 12px; top: 12px; padding: 6px 9px; border-radius: 7px; color: white; background: var(--orange); font-size: 9px; font-weight: 800; }
.recommendation-content { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 14px 13px 12px; } .recommendation-content { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 14px 13px 12px; }
.match-score { position: absolute; right: 16px; top: 15px; display: grid; text-align: right; color: #7c889a; font-size: 9px; } .match-score { position: absolute; right: 16px; top: 15px; display: grid; text-align: right; color: #7c889a; font-size: 9px; }
@@ -330,16 +330,17 @@ 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: 280px; height: auto;
display: grid; min-height: 220px;
place-items: center; display: block;
padding: 0;
border: 0; border: 0;
border-bottom: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4;
background: linear-gradient(145deg, #f8fafe, #eef3fa); background: linear-gradient(145deg, #f8fafe, #eef3fa);
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
} }
.catalog-image-button img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s ease; } .catalog-image-button img { display: block; width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s ease; }
.catalog-image-button:hover img { transform: scale(1.07); } .catalog-image-button:hover img { transform: scale(1.07); }
.catalog-image-button small { .catalog-image-button small {
position: absolute; position: absolute;
@@ -438,8 +439,8 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
font-size: 20px; font-size: 20px;
} }
.catalog-modal-product { display: grid; grid-template-columns: 360px 1fr; align-items: center; gap: 34px; } .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 { min-height: 240px; display: flex; align-items: center; justify-content: 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 { display: block; max-width: 100%; max-height: min(55vh, 460px); width: auto; height: auto; 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; }
.catalog-source-note { color: #96a0af; font-size: 9px; } .catalog-source-note { color: #96a0af; font-size: 9px; }
@@ -473,7 +474,6 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.how-section { gap: 45px; } .how-section { gap: 45px; }
.catalog-summary { grid-template-columns: repeat(4, 1fr); } .catalog-summary { grid-template-columns: repeat(4, 1fr); }
.catalog-grid { grid-template-columns: repeat(2, 1fr); } .catalog-grid { grid-template-columns: repeat(2, 1fr); }
.catalog-image-button { height: 260px; }
} }
@media (max-width: 720px) { @media (max-width: 720px) {
@@ -491,7 +491,6 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.choice-grid, .two-fields, .parameter-grid, .form-grid, .recommendation-grid { grid-template-columns: 1fr; } .choice-grid, .two-fields, .parameter-grid, .form-grid, .recommendation-grid { grid-template-columns: 1fr; }
.torque-presets { grid-template-columns: repeat(4, 1fr); } .torque-presets { grid-template-columns: repeat(4, 1fr); }
.recommendation-card { min-height: 0; } .recommendation-card { min-height: 0; }
.recommendation-image-wrap { height: 190px; flex-basis: 190px; }
.capability-strip { grid-template-columns: 1fr 1fr; gap: 24px 0; padding: 28px 16px; } .capability-strip { grid-template-columns: 1fr 1fr; gap: 24px 0; padding: 28px 16px; }
.capability-strip div:nth-child(2) { border-right: 0; } .capability-strip div:nth-child(2) { border-right: 0; }
.section-heading { align-items: flex-start; flex-direction: column; gap: 18px; } .section-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
@@ -500,14 +499,12 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.catalog-toolbar { top: 64px; } .catalog-toolbar { top: 64px; }
.catalog-scale-filter { grid-template-columns: 1fr; align-items: stretch; } .catalog-scale-filter { grid-template-columns: 1fr; align-items: stretch; }
.catalog-grid { grid-template-columns: 1fr; gap: 15px; } .catalog-grid { grid-template-columns: 1fr; gap: 15px; }
.catalog-image-button { height: 280px; }
.catalog-card-body { padding: 15px; } .catalog-card-body { padding: 15px; }
.catalog-card-body h3 { height: auto; min-height: 42px; font-size: 14px; } .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: 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; }