From 060f8b2e603ad1d9ba3bf989b7bef0b08dad134f Mon Sep 17 00:00:00 2001
From: kadycui <kadycui@qq.com>
Date: Sat, 2 Sep 2023 15:56:19 +0800
Subject: [PATCH] =?UTF-8?q?ADD:=20=E9=AA=A8=E6=9E=B6=E5=B1=8F=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index.vue | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 641f608..534fd1b 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,15 +1,36 @@
 <template>
     <div>
         <el-row :gutter="20">
+            <template v-if="panels.length == 0">
+                <el-col :span="6" v-for="i in 4" :key="i">
+                    <el-skeleton style="width: 100%;" animated loading>
+                        <template #template>
+                            <el-card shadow="hover" class="border-0">
+                                <template #header>
+                                    <div class="flex justify-between">
+                                        <el-skeleton-item variant="text" style="width: 50%" />
+                                        <el-skeleton-item variant="text" style="width: 10%" />
+                                    </div>
+                                </template>
+                                <el-skeleton-item variant="h3" style="width: 80%" />
+                                <el-divider />
+                                <div class="flex justify-between text-sm text-gray-500">
+                                    <el-skeleton-item variant="text" style="width: 50%" />
+                                    <el-skeleton-item variant="text" style="width: 10%" />
+                                </div>
+                            </el-card>
+                        </template>
+                    </el-skeleton>
+                </el-col>
+            </template>
+
+
             <el-col :span="6" :offset="0" v-for="(item, index) in panels" :key="index">
                 <el-card shadow="hover" class="border-0">
                     <template #header>
                         <div class="flex justify-between">
                             <span class="text-sm">{{ item.title }}</span>
-                            <el-tag 
-                            :type="item.unitColor" 
-                            effect="plain"
-                            >
+                            <el-tag :type="item.unitColor" effect="plain">
                                 {{ item.unit }}
                             </el-tag>
                         </div>
@@ -18,7 +39,7 @@
                         {{ item.value }}
                     </span>
                     <el-divider />
-                    <div  class="flex justify-between text-sm text-gray-500">
+                    <div class="flex justify-between text-sm text-gray-500">
                         <span>{{ item.subTitle }}</span>
                         <span>{{ item.subValue }}</span>
                     </div>
-- 
GitLab