44 lines
1.3 KiB
Vue
44 lines
1.3 KiB
Vue
<!--
|
|
LoadingOverlay.vue
|
|
加载遮罩层组件
|
|
用于显示加载状态的动画效果
|
|
-->
|
|
<template>
|
|
<div
|
|
v-if="isLoading"
|
|
class="absolute inset-0 flex items-center justify-center bg-[#0b1120]/80 backdrop-blur-sm z-10"
|
|
>
|
|
<div class="flex flex-col items-center gap-4">
|
|
<!-- 加载动画 -->
|
|
<div class="relative">
|
|
<div class="absolute inset-0 rounded-full border-2 border-cyan-500/30 animate-ping"></div>
|
|
<div class="absolute inset-0 rounded-full border-2 border-cyan-500/50 animate-pulse"></div>
|
|
<el-icon class="is-loading text-4xl text-cyan-400 relative z-10"><Loading /></el-icon>
|
|
</div>
|
|
<!-- 加载文本 -->
|
|
<span class="text-cyan-400 font-mono tracking-[0.2em] text-sm animate-pulse">
|
|
{{ text || 'SYSTEM LOADING...' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
/**
|
|
* LoadingOverlay 组件
|
|
* 显示加载状态的遮罩层，带有动画效果
|
|
*/
|
|
import { Loading } from '@element-plus/icons-vue';
|
|
|
|
// ============================================================
|
|
// Props 定义
|
|
// ============================================================
|
|
|
|
defineProps<{
|
|
/** 是否显示加载状态 */
|
|
isLoading: boolean
|
|
/** 自定义加载文本 */
|
|
text?: string
|
|
}>()
|
|
</script>
|