Files
vmall/apps/mall/pages/checkout/success.vue
T
Chengdong Zhang 0d0e10b97b feat(ui): adopt Tailwind v4 design system and archive change
- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin
- Add @vmall/shared/theme.css tokens with html[data-accent] presets
- Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage,
  VAccentSwatch, useAccent) as a Nuxt module
- Convert all three apps to kit + utilities; delete ui.css/mall.css and
  every <style scoped>; consoles get accent presets, mall locked to red
- Fix VCard boolean prop default (padding) and PDP/store stale
  useAsyncData keys on param navigation
- Archive adopt-tailwind-design-system; new frontend-ui capability spec
2026-09-22 18:22:50 +08:00

32 lines
1.3 KiB
Vue

<script setup lang="ts">
definePageMeta({ middleware: "auth" });
const { t } = useI18n();
const stepLabels = computed(() => [
t("checkout.steps.cart"),
t("checkout.steps.order"),
t("checkout.steps.payment"),
t("checkout.steps.complete"),
]);
</script>
<template>
<div class="min-h-screen bg-bg font-sans text-text">
<div class="mx-auto max-w-mall px-4 py-6">
<UiStepBar :steps="stepLabels" :active="3" />
<VCard class="px-5 py-16 text-center">
<div class="mx-auto flex h-[72px] w-[72px] items-center justify-center rounded-full bg-success text-5xl leading-none text-white" aria-hidden="true"></div>
<h1 class="mb-2 mt-5 text-2xl font-medium">{{ t("checkout.successTitle") }}</h1>
<p class="m-0 text-muted">{{ t("checkout.successMessage") }}</p>
<div class="mt-7 flex justify-center gap-3">
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover" to="/user/orders">{{ t("checkout.viewOrders") }}</NuxtLink>
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-bg" to="/">{{ t("checkout.continueShopping") }}</NuxtLink>
</div>
</VCard>
</div>
</div>
</template>