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

Refine responsive product detail specs

Browse Source
This commit is contained in:
Jacky Ser
2026-08-12 18:30:50 +08:00
parent 62a3d6ed14
commit 511dbcd0e8
2 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/globals.css
View File

@@ -499,12 +499,12 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
.catalog-modal-inline-info small { color: #96a0af; font-size: 8px; } .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 { 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-image img { display: block; max-width: 100%; max-height: min(56vh, 510px); width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.catalog-spec-table { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid #e0e5ed; border-radius: 11px; background: #e0e5ed; } .catalog-spec-table { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid #e0e5ed; border-radius: 11px; background: white; }
.catalog-spec-table div { min-width: 0; min-height: 58px; padding: 10px 12px; display: grid; align-content: center; gap: 4px; background: white; } .catalog-spec-table div { min-width: 0; min-height: 43px; padding: 5px 7px; display: grid; align-content: center; gap: 1px; background: white; box-shadow: inset 0 0 0 1px #e0e5ed; }
.catalog-spec-table span, .catalog-spec-table span,
.catalog-spec-table strong { min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .catalog-spec-table strong { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.catalog-spec-table span { color: #8b96a7; font-size: 8px; line-height: 1.35; } .catalog-spec-table span { color: #8b96a7; font-size: 8.5px; line-height: 1.15; }
.catalog-spec-table strong { font-size: 10px; line-height: 1.4; } .catalog-spec-table strong { font-size: 10.5px; line-height: 1.2; }
.catalog-modal-actions { display: flex; align-items: center; gap: 18px; margin-top: 20px; } .catalog-modal-actions { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.catalog-modal-actions .panel-primary { flex: 0 0 auto; } .catalog-modal-actions .panel-primary { flex: 0 0 auto; }
.catalog-modal-actions .modal-save-button { width: auto; min-width: 124px; margin-top: 0; flex: 0 0 auto; } .catalog-modal-actions .modal-save-button { width: auto; min-width: 124px; margin-top: 0; flex: 0 0 auto; }
@@ -534,7 +534,7 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.catalog-grid { grid-template-columns: repeat(2, 1fr); } .catalog-grid { grid-template-columns: repeat(2, 1fr); }
.precision-gear-panel { grid-template-columns: 1fr; } .precision-gear-panel { grid-template-columns: 1fr; }
.precision-gear-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .precision-gear-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-spec-table { grid-template-columns: repeat(3, minmax(0, 1fr)); } .catalog-spec-table { grid-template-columns: repeat(4, minmax(0, 1fr)); }
} }
@media (max-width: 720px) { @media (max-width: 720px) {
@@ -614,10 +614,10 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.catalog-modal-inline-info h2 { font-size: 18px; } .catalog-modal-inline-info h2 { font-size: 18px; }
.catalog-modal-image { min-height: 290px; } .catalog-modal-image { min-height: 290px; }
.catalog-modal-image img { max-height: 290px; } .catalog-modal-image img { max-height: 290px; }
.catalog-spec-table { grid-template-columns: repeat(2, minmax(0, 1fr)); } .catalog-spec-table { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-spec-table div { min-height: 52px; padding: 8px 9px; gap: 3px; } .catalog-spec-table div { min-height: 39px; padding: 4px 5px; gap: 1px; }
.catalog-spec-table span { font-size: 8px; } .catalog-spec-table span { font-size: 7.5px; }
.catalog-spec-table strong { font-size: 9px; } .catalog-spec-table strong { font-size: 8.5px; line-height: 1.15; }
.catalog-modal-actions { align-items: stretch; flex-direction: column; } .catalog-modal-actions { align-items: stretch; flex-direction: column; }
.catalog-modal-actions .modal-save-button { width: 100%; } .catalog-modal-actions .modal-save-button { width: 100%; }
.products-section { padding: 75px 16px; } .products-section { padding: 75px 16px; }
@@ -626,6 +626,10 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.footer-brand { justify-self: center; } .footer-brand { justify-self: center; }
} }
@media (max-width: 380px) {
.catalog-spec-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print { @media print {
.site-header, .hero-copy, .capability-strip, .products-section, .how-section, footer, .selector-topbar, .result-actions, .restart-button { display: none !important; } .site-header, .hero-copy, .capability-strip, .products-section, .how-section, footer, .selector-topbar, .result-actions, .restart-button { display: none !important; }
.hero { display: block; min-height: auto; padding: 0; background: white; } .hero { display: block; min-height: auto; padding: 0; background: white; }

18
app/page.tsx
View File

@@ -693,7 +693,7 @@ export default function Home() {
setSaveProductMessage("PNG图片已下载"); setSaveProductMessage("PNG图片已下载");
} }
} catch (error) { } catch (error) {
console.error("保存产品图片失败", error); console.error("保存产品参数图片失败", error);
setSaveProductMessage("图片生成失败，请稍后重试"); setSaveProductMessage("图片生成失败，请稍后重试");
} finally { } finally {
setSavingProductKey(""); setSavingProductKey("");
@@ -1193,9 +1193,9 @@ export default function Home() {
subtitle: `${match.product.category} · ${match.product.size || "尺寸待复核"}`, subtitle: `${match.product.category} · ${match.product.size || "尺寸待复核"}`,
extraSpecs: [["AI匹配度", `${match.confidence}%`]], extraSpecs: [["AI匹配度", `${match.confidence}%`]],
})} })}
aria-label={`保存${match.product.name}产品图片`} aria-label={`保存${match.product.name}产品参数图片`}
> >
{savingProductKey.startsWith(`${match.product.id}-`) ? "正在生成…" : "保存产品"} <span>↓</span> {savingProductKey.startsWith(`${match.product.id}-`) ? "正在生成…" : "保存产品参数图片"} <span>↓</span>
</button> </button>
</div> </div>
</article> </article>
@@ -1392,9 +1392,9 @@ export default function Home() {
badge: product.category, badge: product.category,
subtitle: "完整产品参数", subtitle: "完整产品参数",
})} })}
aria-label={`保存${product.name}产品图片`} aria-label={`保存${product.name}产品参数图片`}
> >
{savingProductKey === `${product.id}-${product.category}` ? "正在生成…" : "保存产品"} <span>↓</span> {savingProductKey === `${product.id}-${product.category}` ? "正在生成…" : "保存产品参数图片"} <span>↓</span>
</button> </button>
</div> </div>
</article> </article>
@@ -1501,9 +1501,9 @@ export default function Home() {
subtitle: product.subCategory, subtitle: product.subCategory,
extraSpecs: [["产品子类", product.subCategory]], extraSpecs: [["产品子类", product.subCategory]],
})} })}
aria-label={`保存${product.name}产品图片`} aria-label={`保存${product.name}产品参数图片`}
> >
{savingProductKey === `${product.id}-${product.subCategory}` ? "正在生成…" : "保存产品"} <span>↓</span> {savingProductKey === `${product.id}-${product.subCategory}` ? "正在生成…" : "保存产品参数图片"} <span>↓</span>
</button> </button>
</div> </div>
</article> </article>
@@ -1618,9 +1618,9 @@ export default function Home() {
badge: selectedCatalogProduct.category, badge: selectedCatalogProduct.category,
subtitle: "完整产品参数", subtitle: "完整产品参数",
})} })}
aria-label={`保存${selectedCatalogProduct.name}产品图片`} aria-label={`保存${selectedCatalogProduct.name}产品参数图片`}
> >
{savingProductKey === `${selectedCatalogProduct.id}-${selectedCatalogProduct.category}` ? "正在生成…" : "保存产品"} <span>↓</span> {savingProductKey === `${selectedCatalogProduct.id}-${selectedCatalogProduct.category}` ? "正在生成…" : "保存产品参数图片"} <span>↓</span>
</button> </button>
<p>具体价格、交期及最终适配结果以工程师确认和正式文件为准。</p> <p>具体价格、交期及最终适配结果以工程师确认和正式文件为准。</p>
</div> </div>