App.vue 1.02 KB
<!--
 * @Date: 2025-10-30 10:28:42
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-11-04 21:09:39
 * @FilePath: /stdj_h5/src/App.vue
 * @Description: 文件描述
-->
<template>
    <div id="app">
        <router-view />
        <!-- 全局loading蒙版 -->
        <div v-if="is_loading" class="global-loading-overlay">
            <van-loading type="spinner" size="24px" color="#FFF" text-color="#FFF">加载中...</van-loading>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useLoadingStore } from '@/stores/loading.js'

// 使用Pinia全局loading状态
const loading_store = useLoadingStore()
const is_loading = computed(() => loading_store.is_loading)
</script>

<style lang="less">
// 全局样式已在 style.css 中定义
.global-loading-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
</style>