timmy revisó este gist 10 months ago. Ir a la revisión
Sin cambios
timmy revisó este gist 10 months ago. Ir a la revisión
Sin cambios
timmy revisó este gist 1 year ago. Ir a la revisión
1 file changed, 89 insertions
product_card.html(archivo creado)
| @@ -0,0 +1,89 @@ | |||
| 1 | + | <!DOCTYPE html> | |
| 2 | + | <html lang="en"> | |
| 3 | + | <head> | |
| 4 | + | <meta charset="UTF-8"> | |
| 5 | + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| 6 | + | <title>Product Card</title> | |
| 7 | + | <!-- 引入 Tailwind CSS --> | |
| 8 | + | <script src="https://cdn.tailwindcss.com"></script> | |
| 9 | + | <!-- 引入 Lit --> | |
| 10 | + | <script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script> | |
| 11 | + | </head> | |
| 12 | + | <body class="bg-gray-100 flex items-center justify-center min-h-screen"> | |
| 13 | + | <!-- 使用自訂元件 --> | |
| 14 | + | <product-card></product-card> | |
| 15 | + | ||
| 16 | + | <script type="module"> | |
| 17 | + | import { LitElement, html, css } from 'https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm'; | |
| 18 | + | ||
| 19 | + | class ProductCard extends LitElement { | |
| 20 | + | // 禁用 Shadow DOM，讓 Tailwind CSS 生效 | |
| 21 | + | createRenderRoot() { | |
| 22 | + | return this; // 渲染到 Light DOM | |
| 23 | + | } | |
| 24 | + | ||
| 25 | + | render() { | |
| 26 | + | return html` | |
| 27 | + | <div class="flex font-sans bg-white shadow-lg rounded-lg overflow-hidden max-w-4xl"> | |
| 28 | + | <!-- 左側圖片 --> | |
| 29 | + | <div class="flex-none w-1/3 relative"> | |
| 30 | + | <img src="https://dummyimage.com/300x400/ccc/000&text=Product+Image" alt="Product Image" class="absolute inset-0 w-full h-full object-cover" loading="lazy" /> | |
| 31 | + | </div> | |
| 32 | + | <!-- 右側內容 --> | |
| 33 | + | <form class="flex-auto p-6"> | |
| 34 | + | <div class="flex flex-wrap items-center"> | |
| 35 | + | <h1 class="flex-auto text-2xl font-bold text-slate-900"> | |
| 36 | + | Modern Utility Jacket | |
| 37 | + | </h1> | |
| 38 | + | <div class="text-xl font-semibold text-slate-500"> | |
| 39 | + | $129.00 | |
| 40 | + | </div> | |
| 41 | + | <div class="w-full text-sm text-green-600 mt-2"> | |
| 42 | + | In stock and ready to ship | |
| 43 | + | </div> | |
| 44 | + | </div> | |
| 45 | + | <div class="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200"> | |
| 46 | + | <div class="space-x-2 flex text-sm"> | |
| 47 | + | <!-- 尺寸選擇 --> | |
| 48 | + | ${['XS', 'S', 'M', 'L', 'XL'].map( | |
| 49 | + | (size) => html` | |
| 50 | + | <label> | |
| 51 | + | <input class="sr-only peer" name="size" type="radio" value="${size.toLowerCase()}" /> | |
| 52 | + | <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white"> | |
| 53 | + | ${size} | |
| 54 | + | </div> | |
| 55 | + | </label> | |
| 56 | + | ` | |
| 57 | + | )} | |
| 58 | + | </div> | |
| 59 | + | </div> | |
| 60 | + | <!-- 行動按鈕 --> | |
| 61 | + | <div class="flex space-x-4 mb-6 text-sm font-medium"> | |
| 62 | + | <div class="flex-auto flex space-x-4"> | |
| 63 | + | <button class="h-10 px-6 font-semibold rounded-md bg-blue-500 text-white hover:bg-blue-600" type="submit"> | |
| 64 | + | Buy now | |
| 65 | + | </button> | |
| 66 | + | <button class="h-10 px-6 font-semibold rounded-md border border-slate-200 text-slate-900 hover:bg-gray-100" type="button"> | |
| 67 | + | Add to bag | |
| 68 | + | </button> | |
| 69 | + | </div> | |
| 70 | + | <button class="flex-none flex items-center justify-center w-10 h-10 rounded-md text-slate-300 border border-slate-200 hover:text-red-500 hover:border-red-500" type="button" aria-label="Like"> | |
| 71 | + | <svg width="24" height="24" fill="currentColor" aria-hidden="true"> | |
| 72 | + | <path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" /> | |
| 73 | + | </svg> | |
| 74 | + | </button> | |
| 75 | + | </div> | |
| 76 | + | <!-- 說明文字 --> | |
| 77 | + | <p class="text-sm text-slate-700"> | |
| 78 | + | Free shipping on orders over $100. | |
| 79 | + | </p> | |
| 80 | + | </form> | |
| 81 | + | </div> | |
| 82 | + | `; | |
| 83 | + | } | |
| 84 | + | } | |
| 85 | + | ||
| 86 | + | customElements.define('product-card', ProductCard); | |
| 87 | + | </script> | |
| 88 | + | </body> | |
| 89 | + | </html> | |
Siguiente
Anterior