86 lines
1.6 KiB
Vue
86 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { userStore } from '@/stores'
|
|
import { storeToRefs } from 'pinia'
|
|
withDefaults(
|
|
defineProps<{
|
|
modelValue: boolean
|
|
tip?: string
|
|
}>(),
|
|
{
|
|
modelValue: false,
|
|
tip: '正在统计成绩中',
|
|
},
|
|
)
|
|
const emits = defineEmits(['update:modelValue', 'ok'])
|
|
const OSS_URL = import.meta.env.VITE_OSS_URL
|
|
const { userInfo } = storeToRefs(userStore())
|
|
|
|
function getLoading(type: number) {
|
|
return `${OSS_URL}/xuexiaole_clinet/learnWord/loading${type}.gif`
|
|
}
|
|
// function onOk() {
|
|
// emits('update:modelValue', false)
|
|
// }
|
|
</script>
|
|
<template>
|
|
<div v-if="modelValue" class="mask">
|
|
<img :src="(getLoading(userInfo.sex) as any) || 1" />
|
|
|
|
<div class="tip">
|
|
{{ tip }}
|
|
<div class="dot">.</div>
|
|
<div class="dot">.</div>
|
|
<div class="dot">.</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
//
|
|
.mask {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
backdrop-filter: blur(4px);
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #00000040;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.tip {
|
|
font-family: $font-special;
|
|
font-size: 3.33vh;
|
|
font-weight: 400;
|
|
line-height: 5vh;
|
|
text-align: center;
|
|
color: beige;
|
|
display: flex;
|
|
.dot {
|
|
&:nth-child(2) {
|
|
animation: loading 1s 0s linear infinite;
|
|
}
|
|
&:nth-child(3) {
|
|
animation: loading 1s 0.2s linear infinite;
|
|
}
|
|
}
|
|
}
|
|
@keyframes loading {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
</style>
|