Mamalizz
90 lines
3.3 KiB
Vue
90 lines
3.3 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-16 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-10 items-center bg-white border shadow-black/10 justify-center border-slate-300 rounded-xl"
|
|
>
|
|
<video
|
|
class="aspect-square w-[350px] animate-fade-in"
|
|
src="/video/heymlz/heymlz-handshake-full.webm"
|
|
:style="{
|
|
filter: 'drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.15))',
|
|
}"
|
|
autoplay
|
|
playsinline
|
|
webkit-playsinline
|
|
muted
|
|
/>
|
|
|
|
<div class="-translate-y-24 flex-center gap-3">
|
|
<Icon
|
|
name="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%, #000000ff 0%, #ff000000 34%);
|
|
}
|
|
</style>
|