OmniAI/omniai-ds-code-package
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add responsive layouts for template cards and hot clone

Browse Source
This commit is contained in:
Codex
2026-06-16 11:44:55 +08:00
parent c1c7cb3cc7
commit 79f220dbbf
1 changed files with 65 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/ecommerce-standalone.css
+65 -7
View File
@@ -2781,7 +2781,7 @@
position: absolute !important;
left: 50% !important;
z-index: 12 !important;
width: min(1036px, calc(100% - 56px)) !important;
width: min(1220px, calc(100% - 40px)) !important;
margin-right: 0 !important;
margin-left: 0 !important;
;
@@ -9043,20 +9043,22 @@
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-template-strip {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 12px !important;
width: 100% !important;
margin: 14px 0 10px !important;
gap: 10px !important;
width: min(100%, 1088px) !important;
margin: 16px auto 12px !important;
box-sizing: border-box !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-template-card {
position: relative !important;
display: block !important;
width: 100% !important;
aspect-ratio: 1.46 / 1 !important;
min-height: 92px !important;
min-width: 0 !important;
aspect-ratio: 3.06 / 1 !important;
min-height: 100px !important;
padding: 0 !important;
border: 1px solid rgba(30, 189, 219, 0.18) !important;
border-radius: 16px !important;
border-radius: 14px !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 251, 253, 0.98)),
#ffffff !important;
@@ -9342,6 +9344,18 @@
min-height: 60px !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-template-strip {
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
width: min(100%, 540px) !important;
margin: 12px auto 10px !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-template-card {
aspect-ratio: 2.9 / 1 !important;
min-height: 84px !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview {
padding-inline: 18px !important;
}
@@ -9378,6 +9392,50 @@
content: "" !important;
background: rgba(30, 189, 219, 0.12) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images {
gap: 8px !important;
padding: 8px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-quick-hot-add-btn,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-hot-add-btn {
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
flex-basis: 56px !important;
}
}
@media (max-width: 480px) {
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-template-strip {
width: 100% !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-template-card {
min-height: 76px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images {
gap: 6px !important;
padding: 6px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-quick-hot-add-btn,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-hot-add-btn {
width: 50px !important;
height: 50px !important;
min-width: 50px !important;
min-height: 50px !important;
flex-basis: 50px !important;
}
}
@keyframes ecommerce-soft-popover-out {