Created
July 24, 2026 01:13
-
-
Save TTlls/5e6a566d4cd288a859387a9475051ad9 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>商品详情页</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f5f5f5; padding: 20px; } .container { max-width: 800px; margin: 0 auto; background-color: #ffffff; border-radius: 12px; padding: 24px 20px 30px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .section-title { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 12px; padding-left: 12px; border-left: 4px solid #ff6b35; line-height: 1.4; } .product-title { font-size: 24px; font-weight: 700; color: #1a1a1a; text-align: center; margin-bottom: 20px; line-height: 1.5; word-break: break-all; } .sku-section { margin-bottom: 24px; } .sku-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .sku-item { background-color: #f8f8f8; border-radius: 8px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e8e8e8; transition: all 0.2s; } .sku-item:hover { border-color: #ff6b35; background-color: #fff5f0; } .sku-spec { font-size: 14px; color: #333; font-weight: 500; flex: 1; } .sku-price { font-size: 16px; color: #ff3b30; font-weight: 700; white-space: nowrap; margin-left: 10px; } .audience-section { margin-bottom: 24px; } .audience-img-wrapper { border-radius: 8px; overflow: hidden; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; } .audience-img-wrapper img { width: 100%; height: auto; display: block; } .images-section { margin-bottom: 24px; } .images-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .main-img-item { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background-color: #f0f0f0; cursor: pointer; border: 2px solid transparent; transition: border-color 0.3s; } .main-img-item:hover { border-color: #ff6b35; } .main-img-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .detail-section { margin-top: 8px; } .detail-img-wrapper { margin-bottom: 10px; border-radius: 8px; overflow: hidden; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; } .detail-img-wrapper img { width: 100%; max-width: 800px; height: auto; display: block; } .lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 1000; justify-content: center; align-items: center; cursor: pointer; padding: 40px; } .lightbox.active { display: flex; } .lightbox img { max-width: 90%; max-height: 90%; object-fit: contain; border-radius: 4px; box-shadow: 0 4px 40px rgba(0, 0, 0, 0.4); } .lightbox .close-btn { position: absolute; top: 20px; right: 30px; font-size: 36px; color: #fff; cursor: pointer; font-weight: 300; transition: transform 0.2s; } .lightbox .close-btn:hover { transform: scale(1.2); } .empty-tip { color: #999; font-size: 14px; padding: 12px 0 8px 12px; } @media (max-width: 480px) { .container { padding: 16px 12px; } .product-title { font-size: 20px; } .sku-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .sku-item { padding: 10px 12px; flex-direction: column; align-items: flex-start; gap: 4px; } .sku-price { font-size: 15px; } .images-grid { gap: 6px; } .lightbox { padding: 16px; } } </style> </head> <body> <div class="container"> <h1 class="product-title">手撕面包原味巧克力味开袋即食海绵般的口感没有科技与狠活顺丰</h1> <div class="sku-section"> <div class="section-title">规格和价格</div> <div class="sku-grid"> <div class="sku-item"><span class="sku-spec">原味面包：420g*2枚</span><span class="sku-price">69.9元</span></div><div class="sku-item"><span class="sku-spec">巧克力面包：460g*2枚</span><span class="sku-price">89.9元</span></div><div class="sku-item"><span class="sku-spec">原味420g*1+巧克力味460g*1</span><span class="sku-price">79.9元</span></div><div class="sku-item"><span class="sku-spec">新品 黑全麦面包420g*2枚</span><span class="sku-price">89.9元</span></div><div class="sku-item"><span class="sku-spec">黑全麦420g*1+原味420g*1</span><span class="sku-price">79.9元</span></div> </div> </div> <div class="audience-section"> <div class="section-title">受众数据</div> <div class="audience-img-wrapper"> <img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/9b9c5802-c347-48fe-84f7-0b7c0430ea50.png" alt="受众数据" onerror="this.style.display='none'"> </div> </div> <div class="images-section"> <div class="section-title">主图</div> <div class="images-grid"> <div class="main-img-item" onclick="openLightbox(this)"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/9b7e1534-c666-475e-9a4f-441cdbca31c0.png" alt="主图" loading="lazy" onerror="this.style.display='none'"></div><div class="main-img-item" onclick="openLightbox(this)"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/308d029e-4e56-4b2c-9f72-50f7ae6a8a4e.png" alt="主图" loading="lazy" onerror="this.style.display='none'"></div><div class="main-img-item" onclick="openLightbox(this)"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/d8a7ebef-9328-4d82-aead-d57b7b3f92ac.png" alt="主图" loading="lazy" onerror="this.style.display='none'"></div><div class="main-img-item" onclick="openLightbox(this)"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/4221589e-7927-441e-a4d9-7ea7cfe7db86.png" alt="主图" loading="lazy" onerror="this.style.display='none'"></div><div class="main-img-item" onclick="openLightbox(this)"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/b1cdec4e-13f1-46df-b9b0-2b92a04b29f9.png" alt="主图" loading="lazy" onerror="this.style.display='none'"></div> </div> </div> <div class="detail-section"> <div class="section-title">商品详情</div> <div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/c47f4542-b7df-448e-831e-45621f33e1bd.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div><div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/b1a75927-36d2-45ec-a2ce-cfbd96e6c4b9.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div><div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/1fc6d2bc-36ff-464c-9cba-1da331259d7b.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div><div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/a0e04431-7e4c-4a0f-997e-db6ea4e68fcd.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div><div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/9dec15f3-6233-46c5-95c9-38655916cfb2.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div><div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/96632a3d-32f0-493d-92b7-4c9413598652.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div><div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/fdae2206-02fa-461f-8a67-7b5d21b1c693.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div><div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/860394fd-2bed-4983-b155-d970d19d0261.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div><div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/d1b9b2f7-e372-42cf-8fe8-c88710a0a3bc.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div><div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/b9da957f-13a2-4ba5-bbac-f4b56a07e1a5.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div><div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/aba70215-f779-4454-8889-d93b72f6784c.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div><div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/02e01fac-57bd-48c9-9e00-89b7a42b5112.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div><div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/d7177017-a986-419f-9dba-9d1822fed77b.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div><div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/5fb6359e-98c2-4078-8d34-8fbd8980fece.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div><div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/f0902de2-8f7e-4ba9-ade9-e7aa9ea71f67.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div><div class="detail-img-wrapper"><img src="https://ve-template-0920.oss-cn-shanghai.aliyuncs.com/1e3a5165-30ef-4225-8cb8-37d462c95a38.png" alt="商品详情图" loading="lazy" onerror="this.style.display='none'"></div> </div> </div> <div class="lightbox" id="lightbox" onclick="closeLightbox()"> <span class="close-btn">×</span> <img id="lightbox-img" src="" alt="预览大图"> </div> <script> function openLightbox(el) { var img = el.querySelector('img'); if (img && img.src) { document.getElementById('lightbox-img').src = img.src; document.getElementById('lightbox').classList.add('active'); document.body.style.overflow = 'hidden'; } } function closeLightbox() { document.getElementById('lightbox').classList.remove('active'); document.body.style.overflow = ''; } document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeLightbox(); }); document.getElementById('lightbox-img').addEventListener('click', function(e) { e.stopPropagation(); }); </script> </body> </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment