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

Add product card image saving

Browse Source
This commit is contained in:
Jacky Ser
2026-08-12 16:23:15 +08:00
parent 81098ea237
commit 62a3d6ed14
2 changed files with 326 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
app/globals.css
View File

@@ -358,10 +358,10 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
.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 h3 { height: 42px; margin: 0 0 12px; overflow: hidden; font-size: 14px; line-height: 1.5; }
.catalog-card-body dl { min-height: 83px; margin: 0; padding: 10px; border-radius: 9px; background: #f6f8fb; }
.catalog-card-body dl div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 9px; }
.catalog-card-body dt { color: #8a95a7; }
.catalog-card-body dd { max-width: 58%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-weight: 650; }
.catalog-card-body dl { min-height: 0; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-radius: 9px; background: #f6f8fb; }
.catalog-card-body dl div { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 3px 0; font-size: 9px; }
.catalog-card-body dt { overflow: hidden; color: #8a95a7; text-overflow: ellipsis; white-space: nowrap; }
.catalog-card-body dd { max-width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-weight: 650; }
.catalog-card-body > button {
width: 100%;
margin-top: 12px;
@@ -375,6 +375,12 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
font-size: 10px;
font-weight: 700;
}
.catalog-card-body > .product-save-button { margin-top: 5px; padding: 8px 10px; border: 1px solid #d8e3f3; border-radius: 8px; color: #185ee8; background: #f7faff; }
.product-save-button { width: 100%; min-height: 33px; margin-top: 10px; padding: 8px 10px; display: inline-flex; align-items: center; justify-content: space-between; border: 1px solid #d8e3f3; border-radius: 8px; color: #185ee8; background: #f7faff; cursor: pointer; font-size: 10px; font-weight: 750; }
.product-save-button:hover { border-color: #a9c4f2; color: #104ec6; background: #eef5ff; }
.product-save-button span { font-size: 13px; line-height: 1; }
.product-save-button.is-saving { visibility: hidden; }
.product-save-toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; transform: translateX(-50%); max-width: min(90vw, 360px); padding: 10px 15px; border: 1px solid #cbdaf2; border-radius: 999px; color: #174baf; background: rgba(248,251,255,.96); box-shadow: 0 12px 32px rgba(24,64,126,.18); font-size: 11px; font-weight: 750; text-align: center; backdrop-filter: blur(10px); }
.precision-gear-panel {
display: grid;
grid-template-columns: minmax(260px, .8fr) 1.2fr;
@@ -425,6 +431,7 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
.precision-gear-card-body dl div { display: flex; justify-content: space-between; gap: 5px; padding: 2px 0; font-size: 8px; }
.precision-gear-card-body dt { color: #8a95a7; }
.precision-gear-card-body dd { max-width: 62%; margin: 0; overflow: hidden; color: #52617a; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-weight: 700; }
.precision-gear-card-body .product-save-button { margin-top: 10px; }
.precision-gear-empty { margin-top: 15px; }
.precision-gear-load-more { margin-top: 22px; }
.catalog-empty { padding: 60px 20px; text-align: center; border: 1px dashed #cbd5e3; border-radius: 15px; background: white; }
@@ -492,12 +499,15 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
.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-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; }
.catalog-spec-table strong { font-size: 10px; }
.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 div { min-width: 0; min-height: 58px; padding: 10px 12px; display: grid; align-content: center; gap: 4px; background: white; }
.catalog-spec-table span,
.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 strong { font-size: 10px; line-height: 1.4; }
.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 .modal-save-button { width: auto; min-width: 124px; margin-top: 0; flex: 0 0 auto; }
.catalog-modal-actions p { margin: 0; color: #8b95a5; font-size: 9px; line-height: 1.6; }
.how-section { padding: 100px max(32px, calc((100vw - 1180px) / 2)); display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; color: white; background: linear-gradient(135deg, #0c1528, #14284e); }
.eyebrow.light { color: #77a5ff; }
@@ -524,6 +534,7 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.catalog-grid { grid-template-columns: repeat(2, 1fr); }
.precision-gear-panel { grid-template-columns: 1fr; }
.precision-gear-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-spec-table { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
@@ -592,7 +603,10 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.precision-gear-card-body { padding: 9px; }
.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-card-body dl { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 9px 8px; }
.catalog-card-body dl div { min-width: 0; display: grid; align-content: start; justify-content: initial; gap: 3px; padding: 2px 0; font-size: 8px; }
.catalog-card-body dt { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-card-body dd { max-width: 100%; overflow: hidden; font-size: 9px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.catalog-modal-backdrop { padding: 10px; }
.catalog-modal { padding: 22px 16px; }
.catalog-modal-visual-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; }
@@ -600,8 +614,12 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.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; }
.catalog-spec-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-spec-table div { min-height: 52px; padding: 8px 9px; gap: 3px; }
.catalog-spec-table span { font-size: 8px; }
.catalog-spec-table strong { font-size: 9px; }
.catalog-modal-actions { align-items: stretch; flex-direction: column; }
.catalog-modal-actions .modal-save-button { width: 100%; }
.products-section { padding: 75px 16px; }
.how-section { grid-template-columns: 1fr; padding: 75px 20px; }
footer { grid-template-columns: 1fr; justify-items: center; gap: 15px; }