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

Move catalog gallery controls onto image

Browse Source
This commit is contained in:
Jacky Ser
2026-08-11 16:56:38 +08:00
parent b7e32000bf
commit c131483255
2 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/globals.css
View File

@@ -489,20 +489,20 @@ 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: minmax(0, 1.35fr) minmax(260px, .8fr); align-items: stretch; gap: 28px; }
.catalog-modal-visual-card { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 9px; }
.catalog-modal-visual-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.catalog-modal-visual-label { color: #687791; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.catalog-modal-product { display: block; }
.catalog-modal-visual-card { position: relative; min-width: 0; }
.catalog-modal-visual-toolbar { position: absolute; top: 14px; left: 14px; z-index: 2; max-width: calc(100% - 28px); display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding: 4px; border: 1px solid rgba(220,229,242,.88); border-radius: 10px; background: rgba(255,255,255,.9); box-shadow: 0 5px 15px rgba(31,55,96,.09); backdrop-filter: blur(8px); }
.catalog-modal-gallery-switch { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #dce5f2; border-radius: 8px; background: #f5f8fd; }
.catalog-modal-gallery-switch button { padding: 6px 9px; border: 0; border-radius: 6px; color: #7c899c; background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; }
.catalog-modal-gallery-switch button.active { color: var(--blue); background: white; box-shadow: 0 2px 7px rgba(31,71,139,.09); }
.catalog-modal-gallery-switch button:disabled { cursor: not-allowed; opacity: .4; }
.catalog-modal-inline-info { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.catalog-modal-inline-info > span { color: var(--blue); font-size: 10px; font-weight: 800; }
.catalog-modal-inline-info h2 { max-width: min(560px, 100%); margin: 0; color: var(--ink); font-size: 20px; line-height: 1.3; letter-spacing: -.025em; }
.catalog-modal-inline-info code { color: #5d6b81; font-size: 10px; }
.catalog-modal-inline-info small { color: #96a0af; font-size: 8px; }
.catalog-modal-image { min-height: min(56vh, 520px); display: flex; align-items: center; justify-content: center; border: 1px solid #e1e7f0; border-radius: 13px; overflow: hidden; background: #f5f7fb; }
.catalog-modal-image img { display: block; max-width: 100%; max-height: min(56vh, 510px); width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.catalog-modal-product-info { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; padding: 25px 4px 8px; }
.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-source-note { color: #96a0af; font-size: 9px; }
.catalog-spec-table { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid #e0e5ed; border-radius: 11px; background: #e0e5ed; }
.catalog-spec-table div { min-height: 38px; padding: 7px 10px; display: grid; align-content: center; gap: 3px; background: white; }
.catalog-spec-table span { color: #8b96a7; font-size: 8px; }
@@ -570,8 +570,9 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.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-product-info { padding: 0 3px; }
.catalog-modal-visual-toolbar { top: 10px; left: 10px; max-width: calc(100% - 20px); align-items: flex-start; flex-direction: column; gap: 10px; }
.catalog-modal-inline-info { width: 100%; }
.catalog-modal-inline-info h2 { font-size: 18px; }
.catalog-modal-image { min-height: 290px; }
.catalog-modal-image img { max-height: 290px; }
.catalog-spec-table { grid-template-columns: 1fr; }

25
app/page.tsx
View File

@@ -1218,7 +1218,6 @@ export default function Home() {
<div className="catalog-modal-product">
<div className="catalog-modal-visual-card">
<div className="catalog-modal-visual-toolbar">
<span className="catalog-modal-visual-label">产品图片</span>
<div className="catalog-modal-gallery-switch" role="tablist" aria-label="切换产品图片">
<button
type="button"
@@ -1236,6 +1235,18 @@ export default function Home() {
aria-selected={catalogVisualMode === "size"}
>产品尺寸</button>
</div>
<div className="catalog-modal-inline-info">
<span>{selectedCatalogProduct.category}</span>
<h2 id="catalog-modal-title">{selectedCatalogProduct.name}</h2>
<code>{selectedCatalogProduct.code}</code>
<small>
{selectedCatalogProduct.page > 0
? `官方产品目录第 ${selectedCatalogProduct.page} 页`
: selectedCatalogProduct.category === "舵盘配件"
? "商城产品资料 · 舵盘配件"
: "商城产品资料 · 精密齿轮配件"}
</small>
</div>
</div>
<div className="catalog-modal-image">
{catalogVisualMode === "size" && selectedCatalogDimensionImage ? (
@@ -1247,18 +1258,6 @@ export default function Home() {
)}
</div>
</div>
<div className="catalog-modal-product-info">
<p className="step-kicker">{selectedCatalogProduct.category}</p>
<h2 id="catalog-modal-title">{selectedCatalogProduct.name}</h2>
<code>{selectedCatalogProduct.code}</code>
<p className="catalog-source-note">
{selectedCatalogProduct.page > 0
? `官方产品目录第 ${selectedCatalogProduct.page} 页`
: selectedCatalogProduct.category === "舵盘配件"
? "商城产品资料 · 舵盘配件"
: "商城产品资料 · 精密齿轮配件"}
</p>
</div>
</div>
<div className="catalog-spec-table">
{Object.entries(selectedCatalogProduct.specs).map(([label, value]) => (