Kingsmai/dticket.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): standardize page layouts and component styling

Browse Source 
Introduce structural CSS classes for page shells, headers, and surface cards
Update primary theme color to red and neutral to zinc across the application
This commit is contained in:
xiaomai
2026-05-08 16:25:42 +08:00
parent bc009cffda
commit 227c64d346
12 changed files with 454 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/pages/seat/[token].vue
View File

@@ -32,20 +32,20 @@ const totalFormatted = computed(() => formatBookingCurrency(receipt.value.bookin
</script>
<template>
<UContainer class="py-8">
<div class="mx-auto max-w-4xl space-y-6">
<div class="space-y-2 text-center">
<UBadge label="Seat Ticket" color="primary" variant="soft" class="rounded-full" />
<h1 class="text-2xl font-bold tracking-tight text-highlighted sm:text-3xl">
<UContainer class="page-shell-narrow">
<div class="space-y-6">
<div class="page-header text-center sm:items-center">
<UBadge label="Seat Ticket" color="primary" variant="soft" class="page-eyebrow" />
<h1 class="page-title">
{{ getSeatLabel(receipt.seat.seatNumber) }}
</h1>
<p class="text-sm text-muted">
<p class="page-description">
{{ eventDetails.title }}
</p>
</div>
<div class="grid gap-6 lg:grid-cols-[18rem_minmax(0,1fr)]">
<UCard class="border border-default bg-default shadow-sm" :ui="{ body: 'space-y-4 p-4 sm:p-5' }">
<UCard class="surface-card overflow-hidden rounded-lg" :ui="{ body: 'space-y-4 p-4 sm:p-5' }">
<div class="space-y-1 text-center">
<p class="text-sm font-semibold text-highlighted">
QR Code
@@ -59,7 +59,7 @@ const totalFormatted = computed(() => formatBookingCurrency(receipt.value.bookin
<QrCodeSvg :value="receipt.seat.seatUrl" :size="220" />
</div>
<div class="rounded-2xl border border-default bg-elevated p-4 text-sm text-default">
<div class="surface-panel rounded-lg p-4 text-sm text-default">
<p class="font-medium text-highlighted">
{{ receipt.seat.recipientName || receipt.booking.customerName }}
</p>
@@ -72,7 +72,7 @@ const totalFormatted = computed(() => formatBookingCurrency(receipt.value.bookin
</div>
</UCard>
<UCard class="border border-default bg-default shadow-sm" :ui="{ body: 'space-y-5 p-4 sm:p-5' }">
<UCard class="surface-card overflow-hidden rounded-lg" :ui="{ body: 'space-y-5 p-4 sm:p-5' }">
<div class="space-y-1">
<h2 class="text-xl font-semibold text-highlighted">
Booking Details
@@ -83,7 +83,7 @@ const totalFormatted = computed(() => formatBookingCurrency(receipt.value.bookin
</div>
<div class="grid gap-3 sm:grid-cols-2">
<div class="rounded-2xl border border-default bg-elevated p-4">
<div class="surface-panel rounded-lg p-4">
<p class="text-xs uppercase tracking-wide text-muted">
Guest / Organizer
</p>
@@ -91,7 +91,7 @@ const totalFormatted = computed(() => formatBookingCurrency(receipt.value.bookin
{{ receipt.booking.customerName }}
</p>
</div>
<div class="rounded-2xl border border-default bg-elevated p-4">
<div class="surface-panel rounded-lg p-4">
<p class="text-xs uppercase tracking-wide text-muted">
Ticket Category
</p>
@@ -99,7 +99,7 @@ const totalFormatted = computed(() => formatBookingCurrency(receipt.value.bookin
{{ ticketLabel }}
</p>
</div>
<div class="rounded-2xl border border-default bg-elevated p-4">
<div class="surface-panel rounded-lg p-4">
<p class="text-xs uppercase tracking-wide text-muted">
Total Seats
</p>
@@ -107,7 +107,7 @@ const totalFormatted = computed(() => formatBookingCurrency(receipt.value.bookin
{{ receipt.booking.seatCount }} seats
</p>
</div>
<div class="rounded-2xl border border-default bg-elevated p-4">
<div class="surface-panel rounded-lg p-4">
<p class="text-xs uppercase tracking-wide text-muted">
Total Booking Value
</p>
@@ -117,7 +117,7 @@ const totalFormatted = computed(() => formatBookingCurrency(receipt.value.bookin
</div>
</div>
<div class="space-y-3 rounded-2xl border border-default bg-elevated p-4">
<div class="surface-panel space-y-3 rounded-lg p-4">
<div class="flex items-center gap-3 text-sm text-default">
<UIcon name="i-lucide-calendar-days" class="size-4 text-muted" />
<span>{{ eventDetails.dateLabel }}</span>
@@ -132,7 +132,7 @@ const totalFormatted = computed(() => formatBookingCurrency(receipt.value.bookin
</div>
</div>
<div class="rounded-2xl border border-default bg-elevated p-4 text-sm text-default">
<div class="surface-panel rounded-lg p-4 text-sm text-default">
<p class="font-medium text-highlighted">
Seat shared {{ receipt.seat.sharedAt ? formatDateTime(receipt.seat.sharedAt) : 'recently' }}
</p>