77 lines
2.8 KiB
Vue
77 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
// meta
|
|
|
|
definePageMeta({
|
|
layout: "none",
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full flex-col-center gap-3 h-svh relative">
|
|
<div
|
|
class="bg-[url(/img/pattern-1.png)] -z-10 size-full fixed inset-0 opacity-70"
|
|
:style="{
|
|
backgroundSize: 150,
|
|
mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0.3) 80%)',
|
|
}"
|
|
/>
|
|
|
|
<NuxtImg src="/logo/logo-col.png" class="size-44 -mt-12" />
|
|
|
|
<div
|
|
class="max-w-[500px] w-full p-6 gap-6 flex flex-col items-center bg-white border shadow-black/10 justify-center border-slate-300 rounded-3xl relative overflow-hidden"
|
|
>
|
|
<div
|
|
class="w-full h-[5rem] bg-success-500 absolute left-0 top-0 flex-center gap-2 text-white"
|
|
>
|
|
<Icon name="bi:check" size="28" />
|
|
<h1 class="typo-h-6 font-normal">تراکنش موفق</h1>
|
|
</div>
|
|
|
|
<div class="w-full flex flex-col gap-5 pt-[5.5rem] p-1">
|
|
<div
|
|
class="w-full flex flex-row-reverse items-center justify-between"
|
|
>
|
|
<span>مبلغ تراكنش </span>
|
|
<span>١٢٣ تومان</span>
|
|
</div>
|
|
<div
|
|
class="w-full flex flex-row-reverse items-center justify-between"
|
|
>
|
|
<span>شماره پيكَيرى </span>
|
|
<span>١٢٣ تومان</span>
|
|
</div>
|
|
<div
|
|
class="w-full flex flex-row-reverse items-center justify-between"
|
|
>
|
|
<span>شماره ارجاع </span>
|
|
<span>١٢٣ تومان</span>
|
|
</div>
|
|
<div
|
|
class="w-full flex flex-row-reverse items-center justify-between"
|
|
>
|
|
<span>تاريخ و ساعت </span>
|
|
<span>١٢٣ تومان</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full flex items-center justify-between gap-5">
|
|
<NuxtLink to="/" class="w-full">
|
|
<Button
|
|
class="w-full rounded-full"
|
|
start-icon="ci:left-rotation"
|
|
variant="secondary"
|
|
>بازگشت به فروشگاه</Button
|
|
>
|
|
</NuxtLink>
|
|
<Button
|
|
class="w-full rounded-full bg-success-500 hover:text-success-500 hover:border-success-500 hover:**:!stroke-success-500"
|
|
start-icon="ci:share"
|
|
variant="primary"
|
|
>دانلود فاکتور</Button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|