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

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

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