marzban-dev
75 lines
2.8 KiB
Vue
75 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
|
|
type Props = {
|
|
isShow: boolean;
|
|
};
|
|
|
|
// props
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const { isShow } = toRefs(props);
|
|
|
|
// computeds
|
|
|
|
const visible = computed({
|
|
get: () => isShow.value,
|
|
set: () => null,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<DialogRoot v-model:open="visible">
|
|
<DialogPortal>
|
|
<DialogOverlay
|
|
class="bg-black/50 backdrop-blur-sm data-[state=open]:animate-overlay-show fixed inset-0 z-999"
|
|
/>
|
|
|
|
<div
|
|
class="fixed inset-0 w-full h-svh z-9999 flex-center"
|
|
v-if="visible"
|
|
>
|
|
<div class="overflow-y-auto max-h-svh absolute left-[50%] py-10 w-fit max-w-[50rem] translate-x-[-50%]">
|
|
<DialogContent
|
|
class="min-w-[30vw] max-w-[50vw] data-[state=open]:animate-content-show text-black font-iran-yekan-x focus:outline-none z-[100]"
|
|
>
|
|
<div class="w-full h-[350px] shrink-0 rounded-2xl relative overflow-hidden flex-center">
|
|
<div
|
|
class="bg-custom-conic size-[200%] absolute -top-1/2 -left-1/2 animate-spin [animation-duration:3s] z-[1]"
|
|
></div>
|
|
<div
|
|
class="shrink-0 p-6 pt-20 z-[2] absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-[98.8%] h-[98.5%] flex flex-col gap-24 items-center bg-white border shadow-black/10 justify-center border-slate-300 rounded-xl"
|
|
>
|
|
<NuxtImg
|
|
class="aspect-square w-[300px]"
|
|
src="/img/heymlz/heymlz-payment-progress.gif"
|
|
loading="lazy"
|
|
fetch-priority="low"
|
|
/>
|
|
|
|
<div class="-translate-y-28 flex-center gap-3">
|
|
<Icon
|
|
name="ci:svg-spinners-3-dots-bounce"
|
|
size="20"
|
|
/>
|
|
<span class="text-lg"> در حال انتقال به درگاه پرداخت </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</div>
|
|
</div>
|
|
</DialogPortal>
|
|
</DialogRoot>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bg-custom-conic {
|
|
background-size: 100% 100%;
|
|
background-position: 0px 0px, 0px 0px;
|
|
background-image: radial-gradient(142% 91% at -6% 90%, #ff000000 1%, #ff000000 99%),
|
|
conic-gradient(from 0deg at 50% 50%, var(--color-blue-500) 0%, #ff000000 34%);
|
|
}
|
|
</style>
|