<script setup lang="ts">
|
import { getRgb } from '@sa/color';
|
import { DARK_CLASS } from '@/constants/app';
|
import { localStg } from '@/utils/storage';
|
import { toggleHtmlClass } from '@/utils/common';
|
import { $t } from '@/locales';
|
|
const themeColor = localStg.get('themeColor') || '#2080f0';
|
const darkMode = localStg.get('darkMode') || false;
|
const { r, g, b } = getRgb(themeColor);
|
|
const primaryColor = `--primary-color: ${r} ${g} ${b}`;
|
|
if (darkMode) {
|
toggleHtmlClass(DARK_CLASS).add();
|
}
|
</script>
|
|
<template>
|
<div class="fixed-center flex-col bg-layout" :style="primaryColor">
|
<!-- From Uiverse.io by Admin12121 -->
|
<div class="loader">
|
<div class="box box0">
|
<div></div>
|
</div>
|
<div class="box box1">
|
<div></div>
|
</div>
|
<div class="box box2">
|
<div></div>
|
</div>
|
<div class="box box3">
|
<div></div>
|
</div>
|
<div class="box box4">
|
<div></div>
|
</div>
|
<div class="box box5">
|
<div></div>
|
</div>
|
<div class="box box6">
|
<div></div>
|
</div>
|
<div class="box box7">
|
<div></div>
|
</div>
|
<div class="ground">
|
<div></div>
|
</div>
|
</div>
|
<h2 class="loading-title text-30px text-primary-400 font-500">{{ $t('system.title') }}</h2>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
@use '@/styles/scss/loading.scss';
|
</style>
|
