123 lines
2.5 KiB
Vue
123 lines
2.5 KiB
Vue
<template>
|
|
<q-dialog
|
|
v-model="visible"
|
|
maximized
|
|
persistent
|
|
transition-show="slide-up"
|
|
transition-hide="slide-down"
|
|
>
|
|
<div
|
|
class="flex items-center justify-center fullscrean-card column"
|
|
>
|
|
<div
|
|
id="icon-wrapper"
|
|
:style="{ position: 'relative', height: size + 'px', width: size + 'px'}"
|
|
>
|
|
<div class="animation icon-position"></div>
|
|
<transition
|
|
appear
|
|
enter-active-class="animated zoomIn slow"
|
|
>
|
|
<q-icon
|
|
v-if="showIcon"
|
|
:name = "icon"
|
|
color="brand"
|
|
size="160px"
|
|
class="icon-position"
|
|
/>
|
|
</transition>
|
|
</div>
|
|
<div class="text-h5 q-mb-lg q-mx-md" align="center">
|
|
{{ $t(message1) }}
|
|
</div>
|
|
|
|
<div
|
|
v-if="message2"
|
|
class="absolute-bottom q-py-lg q-mx-md" align="center"
|
|
>
|
|
{{ $t(message2) }}
|
|
</div>
|
|
</div>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, watch } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const props = defineProps<{
|
|
icon: string
|
|
message1: string
|
|
message2?: string
|
|
routeName: string
|
|
}>()
|
|
|
|
const visible = ref(false)
|
|
const showIcon = ref(false)
|
|
const router = useRouter()
|
|
const timers = ref<number[]>([])
|
|
const size = 160
|
|
|
|
const setupTimers = () => {
|
|
visible.value = true
|
|
const timer1 = window.setTimeout(() => {
|
|
showIcon.value = true
|
|
}, 300)
|
|
timers.value.push(timer1)
|
|
const timer2 = window.setTimeout(() => {
|
|
visible.value = false
|
|
showIcon.value = false
|
|
}, 2000)
|
|
timers.value.push(timer2)
|
|
}
|
|
|
|
const clearTimers = () => {
|
|
timers.value.forEach(timer => clearTimeout(timer))
|
|
timers.value = []
|
|
visible.value = false
|
|
showIcon.value = false
|
|
}
|
|
|
|
watch(visible, async (newVal) => {
|
|
if (newVal === false) await router.push({ name: props.routeName })
|
|
})
|
|
|
|
onMounted(setupTimers)
|
|
onUnmounted(clearTimers)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.fullscrean-card {
|
|
background-color: white;
|
|
}
|
|
|
|
@property --percentage {
|
|
initial-value: 0%;
|
|
inherits: false;
|
|
syntax: "<percentage>";
|
|
}
|
|
|
|
.animation {
|
|
background: conic-gradient(transparent var(--percentage), white 0);
|
|
width: 100%;
|
|
height: 100%;
|
|
animation: timer 1s linear;
|
|
animation-fill-mode:forwards;
|
|
z-index: 10;
|
|
position: absolute;
|
|
}
|
|
|
|
@keyframes timer {
|
|
to {
|
|
--percentage: 100%;
|
|
}
|
|
}
|
|
|
|
.icon-position {
|
|
position: absolute;
|
|
top:0;
|
|
left:0;
|
|
}
|
|
|
|
</style>
|