timmy hat die Gist bearbeitet 10 months ago. Zu Änderung gehen
Keine Änderungen
timmy hat die Gist bearbeitet 10 months ago. Zu Änderung gehen
Keine Änderungen
timmy hat die Gist bearbeitet 1 year ago. Zu Änderung gehen
1 file changed, 78 insertions
beach_house_card.html(Datei erstellt)
| @@ -0,0 +1,78 @@ | |||
| 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>Beach House 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 dark:bg-gray-900 flex items-center justify-center min-h-screen"> | |
| 13 | + | <!-- 使用自訂元件 --> | |
| 14 | + | <beach-house-card></beach-house-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 BeachHouseCard extends LitElement { | |
| 20 | + | // 禁用 Shadow DOM 以使用 Tailwind CSS 的全域樣式 | |
| 21 | + | createRenderRoot() { | |
| 22 | + | return this; // 渲染到 Light DOM | |
| 23 | + | } | |
| 24 | + | ||
| 25 | + | render() { | |
| 26 | + | return html` | |
| 27 | + | <main class="py-6 px-4 sm:p-6 md:py-10 md:px-8"> | |
| 28 | + | <div class="max-w-4xl mx-auto grid grid-cols-1 lg:max-w-5xl lg:gap-x-20 lg:grid-cols-2"> | |
| 29 | + | <!-- 標題與描述 --> | |
| 30 | + | <div class="relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1"> | |
| 31 | + | <h1 class="mt-1 text-lg font-semibold text-white sm:text-slate-900 md:text-2xl dark:sm:text-white">Beach House in Collingwood</h1> | |
| 32 | + | <p class="text-sm leading-4 font-medium text-white sm:text-slate-500 dark:sm:text-slate-400">Entire house</p> | |
| 33 | + | </div> | |
| 34 | + | <!-- 圖片集 --> | |
| 35 | + | <div class="grid gap-4 col-start-1 col-end-3 row-start-1 sm:mb-6 sm:grid-cols-4 lg:gap-6 lg:col-start-2 lg:row-end-6 lg:row-span-6 lg:mb-0"> | |
| 36 | + | <img src="https://dummyimage.com/640x360/ccc/000&text=Main+House" alt="Main House" class="w-full h-60 object-cover rounded-lg sm:h-52 sm:col-span-2 lg:col-span-full" loading="lazy"> | |
| 37 | + | <img src="https://dummyimage.com/320x180/aaa/000&text=Interior+1" alt="Interior 1" class="hidden w-full h-52 object-cover rounded-lg sm:block sm:col-span-2 md:col-span-1 lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy"> | |
| 38 | + | <img src="https://dummyimage.com/320x180/bbb/000&text=Interior+2" alt="Interior 2" class="hidden w-full h-52 object-cover rounded-lg md:block lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy"> | |
| 39 | + | </div> | |
| 40 | + | <!-- 評價與地點 --> | |
| 41 | + | <dl class="mt-4 text-xs font-medium flex items-center row-start-2 sm:mt-1 sm:row-start-3 md:mt-2.5 lg:row-start-2"> | |
| 42 | + | <dt class="sr-only">Reviews</dt> | |
| 43 | + | <dd class="text-indigo-600 flex items-center dark:text-indigo-400"> | |
| 44 | + | <svg width="24" height="24" fill="none" aria-hidden="true" class="mr-1 stroke-current dark:stroke-indigo-500"> | |
| 45 | + | <path d="m12 5 2 5h5l-4 4 2.103 5L12 16l-5.103 3L9 14l-4-4h5l2-5Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| 46 | + | </svg> | |
| 47 | + | <span>4.89 <span class="text-slate-400 font-normal">(128)</span></span> | |
| 48 | + | </dd> | |
| 49 | + | <dt class="sr-only">Location</dt> | |
| 50 | + | <dd class="flex items-center"> | |
| 51 | + | <svg width="2" height="2" aria-hidden="true" fill="currentColor" class="mx-3 text-slate-300"> | |
| 52 | + | <circle cx="1" cy="1" r="1" /> | |
| 53 | + | </svg> | |
| 54 | + | <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 text-slate-400 dark:text-slate-500" aria-hidden="true"> | |
| 55 | + | <path d="M18 11.034C18 14.897 12 19 12 19s-6-4.103-6-7.966C6 7.655 8.819 5 12 5s6 2.655 6 6.034Z" /> | |
| 56 | + | <path d="M14 11a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" /> | |
| 57 | + | </svg> | |
| 58 | + | Collingwood, Ontario | |
| 59 | + | </dd> | |
| 60 | + | </dl> | |
| 61 | + | <!-- 按鈕 --> | |
| 62 | + | <div class="mt-4 col-start-1 row-start-3 self-center sm:mt-0 sm:col-start-2 sm:row-start-2 sm:row-span-2 lg:mt-6 lg:col-start-1 lg:row-start-3 lg:row-end-4"> | |
| 63 | + | <button type="button" class="bg-indigo-600 text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">Check availability</button> | |
| 64 | + | </div> | |
| 65 | + | <!-- 描述 --> | |
| 66 | + | <p class="mt-4 text-sm leading-6 col-start-1 sm:col-span-2 lg:mt-6 lg:row-start-4 lg:col-span-1 dark:text-slate-400"> | |
| 67 | + | This sunny and spacious room is for those traveling light and looking for a comfy and cosy place to lay their head for a night or two. This beach house sits in a vibrant neighborhood littered with cafes, pubs, restaurants and supermarkets and is close to all the major attractions such as Edinburgh Castle and Arthur's Seat. | |
| 68 | + | </p> | |
| 69 | + | </div> | |
| 70 | + | </main> | |
| 71 | + | `; | |
| 72 | + | } | |
| 73 | + | } | |
| 74 | + | ||
| 75 | + | customElements.define('beach-house-card', BeachHouseCard); | |
| 76 | + | </script> | |
| 77 | + | </body> | |
| 78 | + | </html> | |
Neuer
Älter