<template>
    <view v-if="visible" class="start-loading-container">
        <view class="start-loading-view" :style="{ background: themeStore.theme.startLoginBgColor }">
            <!-- <theme-image class="start-loding-icon" :src="appStore.startImgUrls.loginLogo" mode="aspectFit"></theme-image> -->
            <image :src="appStore.startImgUrls.loginLogo" mode="aspectFit" class="start-loding-icon" />
        </view>
    </view>
</template>

<script setup>
import { useAppStore } from "@/store/useAppStore";
import { useThemeStore } from "@/store/useThemeStore";

const themeStore = useThemeStore();
const appStore = useAppStore()

const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
});
</script>

<style lang="scss" scoped>
.start-loading-container {
    position: relative;

    .start-loading-view {
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        .start-loding-icon {
            width: 400rpx;
            height: 400rpx;
            padding-bottom: 200rpx;
        }
    }
}
</style>
