tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ 使用骨架屏优化统计数据加载

Browse Source
This commit is contained in:
ray
2024-07-06 10:15:45 +08:00
parent 8d77598c21
commit 30b97c9c77
1 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/dashboard/index.vue
View File

@@ -73,22 +73,28 @@
v-for="(item, index) in visitStatsList"
:key="index"
>
<el-skeleton :loading="loading" animated>
<el-skeleton :loading="loading" :rows="5" animated>
<template #template>
<div>
<el-skeleton-item variant="text" style="width: 60%" />
<div class="mt-2">
<el-skeleton-item variant="text" style="width: 40%" />
<el-card>
<div>
<el-skeleton-item variant="h3" style="width: 40%" />
<el-skeleton-item
variant="rect"
style="float: right; width: 2em; height: 2em"
style="float: right; width: 1em; height: 1em"
/>
</div>
<div class="mt-2">
<el-skeleton-item variant="text" style="width: 100%" />
<el-skeleton-item variant="text" style="width: 80%" />
<div class="mt-10 flex-x-between">
<el-skeleton-item variant="text" style="width: 30%" />
<el-skeleton-item
variant="circle"
style="width: 2em; height: 2em"
/>
</div>
</div>
<div class="mt-5 flex-x-between">
<el-skeleton-item variant="text" style="width: 50%" />
<el-skeleton-item variant="text" style="width: 1em" />
</div>
</el-card>
</template>
<template v-if="!loading">
<el-card shadow="never">