timmy ha revisionato questo gist 10 months ago. Vai alla revisione
Nessuna modifica
timmy ha revisionato questo gist 10 months ago. Vai alla revisione
Nessuna modifica
timmy ha revisionato questo gist 1 year ago. Vai alla revisione
1 file changed, 89 insertions
product_card.html(file creato)
| @@ -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> | |
Più nuovi
Più vecchi