146 lines
4.4 KiB
Vue
146 lines
4.4 KiB
Vue
<template>
|
|
<div class="desktopConfig w-full right-0 left-0 absolute">
|
|
<div v-if="popVisible" class="top-0 bottom-0 wrap-fix bg-primary z-100 opacity-60">
|
|
<div class="absolute right-0 left-0 bottom-10vh flex flex-col items-center">
|
|
<div><BasicButton>درباره ما</BasicButton></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
<transition mode="out-in" name="fade">
|
|
<AConfigProvider
|
|
v-if="!showSplash"
|
|
:theme="{
|
|
token: {
|
|
colorPrimary: colors.primary,
|
|
colorLink: colors.primary,
|
|
colorLinkActive: colors.primary,
|
|
colorLinkHover: colors['primary-rgba']
|
|
}
|
|
}"
|
|
direction="rtl"
|
|
>
|
|
<router-view v-slot="{ Component, route }">
|
|
<!-- Use any custom transition and to `fade` -->
|
|
<transition :name="route.meta.transition || 'fade'">
|
|
<div>
|
|
<component :is="Component" />
|
|
</div>
|
|
</transition>
|
|
</router-view>
|
|
</AConfigProvider>
|
|
|
|
<div v-else class="flex bottom-0 wrap-fix top-0 bg-white z-1000000000000 justify-center">
|
|
<div class="top-0 wrap-fix h-1/3 w-screen flex">
|
|
<img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover" />
|
|
<img :src="img_pattern" alt="" class="absolute w-screen h-full object-none" />
|
|
</div>
|
|
<div class="wrap-fix bottom-0 h-1/3 w-screen">
|
|
<img
|
|
:src="img_bottomGradiant"
|
|
alt=""
|
|
class="absolute z-10 w-screen h-full object-cover"
|
|
/>
|
|
<img :src="img_pattern" alt="" class="absolute w-screen h-full object-none" />
|
|
</div>
|
|
<div class="self-center splash_appear_fade_in">
|
|
<img :src="logoFull" class="h-[20vh]">
|
|
<!-- <img :src="logo" alt="" class="z-100 bg-primary rounded-full w-full aspect-square self-center h-40" />-->
|
|
</div>
|
|
<div class="fixed w-full bottom-5 home_appear_fade_in_up">
|
|
<div class="text-center text-xs">نسخه: {{ pkg.version }}</div>
|
|
</div>
|
|
<div class="absolute bottom-10">
|
|
<a-spin :indicator="indicator" size="small" />
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<van-dialog
|
|
v-model:show="versionDialog"
|
|
class="updateButton"
|
|
confirm-button-text="به روزرسانی کنید"
|
|
show-confirm-button
|
|
@confirm="update()"
|
|
>
|
|
<div class="flex flex-col items-center p-2">
|
|
<DotLottieVue
|
|
class="w-full aspect-square"
|
|
autoplay
|
|
loop
|
|
src="https://lottie.host/cb620e8e-c64a-42e8-a6b5-8844146e5999/nmft7oBO8q.json"
|
|
/>
|
|
<div class="home_appear_fade_in_up mt-2">نسخه جدید قطره منتشر شد!</div>
|
|
</div>
|
|
</van-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { colors } from './themeConfig'
|
|
import pkg from '../package.json'
|
|
import { useRegisterSW } from 'virtual:pwa-register/vue'
|
|
import { h, onMounted, ref } from 'vue'
|
|
import { update } from 'lodash'
|
|
import img_topGradiant from '@/views/login/assets/img/gr_top_white.svg'
|
|
import img_pattern from '@/views/login/assets/img/pattern.svg'
|
|
import { LoadingOutlined } from '@ant-design/icons-vue'
|
|
|
|
import img_bottomGradiant from '@/views/login/assets/img/gr_bottom_white.svg'
|
|
import logoFull from '@/assets/img/logo_full_.png'
|
|
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
|
|
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
|
|
|
const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW()
|
|
|
|
const indicator = h(LoadingOutlined, {
|
|
style: {
|
|
fontSize: '24px'
|
|
},
|
|
spin: true
|
|
})
|
|
const showSplash = ref(true)
|
|
|
|
|
|
onMounted(() => {
|
|
checkVersion()
|
|
setTimeout(() => {
|
|
showSplash.value = false
|
|
}, 2000)
|
|
})
|
|
|
|
const versionDialog = ref<boolean>(false)
|
|
|
|
function checkVersion() {
|
|
const version = localStorage.getItem('version')
|
|
// if (true) {
|
|
if (!version){
|
|
update()
|
|
}
|
|
if (version != pkg.version) {
|
|
versionDialog.value = true
|
|
}
|
|
}
|
|
|
|
function update() {
|
|
localStorage.setItem('version', pkg.version)
|
|
updateServiceWorker()
|
|
window.location.reload()
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.updateButton .van-dialog__confirm .van-button__text {
|
|
color: @primary-color !important;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
}
|
|
|
|
@media screen and (min-width: 426px) {
|
|
.desktopConfig {
|
|
width: 426px;
|
|
position: relative !important;
|
|
}
|
|
}
|
|
</style>
|