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

18
app/pages/confirmation/[token].vue
View File

@@ -160,20 +160,20 @@ async function cancelBookingConfirmation() {
</script>
<template>
<UContainer class="py-8">
<div class="mx-auto max-w-3xl space-y-5">
<div class="space-y-2 text-center">
<UBadge :label="t('confirm.badge')" color="primary" variant="soft" class="rounded-full" />
<h1 class="text-2xl font-bold tracking-tight text-highlighted sm:text-3xl">
<UContainer class="page-shell-compact">
<div class="space-y-5">
<div class="page-header text-center sm:items-center">
<UBadge :label="t('confirm.badge')" color="primary" variant="soft" class="page-eyebrow" />
<h1 class="page-title">
{{ t('confirm.title') }}
</h1>
<p class="text-sm text-muted">
<p class="page-description">
{{ t('confirm.description') }}
</p>
</div>
<UCard
class="border border-default bg-default shadow-sm"
class="surface-card overflow-hidden rounded-lg"
:ui="{ body: 'space-y-4 p-4 sm:p-5' }"
>
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
@@ -197,7 +197,7 @@ async function cancelBookingConfirmation() {
icon="i-lucide-badge-check"
/>
<div class="overflow-hidden rounded-xl border border-default">
<div class="overflow-hidden rounded-lg border border-default">
<div
v-for="row in detailRows"
:key="row.label"
@@ -221,7 +221,7 @@ async function cancelBookingConfirmation() {
</div>
</div>
<div class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
<div class="action-row">
<UButton
to="/"
:label="t('confirm.backToForm')"