App.vue
1.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<template>
<a-config-provider
:theme="{
algorithm: app.isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
token: {
colorPrimary: '#8c7cf0',
borderRadius: 12,
fontFamily: 'Outfit, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif'
}
}"
>
<router-view />
</a-config-provider>
</template>
<script setup lang="ts">
import { theme } from 'ant-design-vue'
import { useAppStore } from '@/stores/app'
const app = useAppStore()
</script>
<style>
/* Loading bar simulation */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, #8c7cf0, #f1bfd8);
z-index: 9999;
width: 0;
transition: width 0.3s ease;
}
body.loading::before {
width: 80%;
animation: loading-pulse 2s infinite linear;
}
@keyframes loading-pulse {
0% { width: 0%; opacity: 1; }
50% { width: 70%; opacity: 0.8; }
100% { width: 90%; opacity: 0.6; }
}
body:not(.loading)::before {
width: 100%;
opacity: 0;
transition: width 0.3s ease, opacity 0.3s 0.2s ease;
}
</style>