update: 添加skeleton

csthenry · Aug 27, 2023 · 23a78e5 · 23a78e5
1 parent 4400e6b
commit 23a78e5
Showing 1 changed file with 60 additions and 58 deletions.
diff --git a/hoj-vue/src/views/oj/Home.vue b/hoj-vue/src/views/oj/Home.vue
@@ -249,66 +249,68 @@
               <i class="el-icon-s-data"></i> {{ $t('m.Recent_7_Days_AC_Rank')}}
             </span>
           </div>
-          <vxe-table
-            border="inner"
-            stripe
-            auto-resize
-            align="center"
-            :data="recentUserACRecord"
-            max-height="500px"
-            :loading="loading.recent7ACRankLoading"
-          >
-            <vxe-table-column
-              type="seq"
-              min-width="50"
-            >
-              <template v-slot="{ rowIndex }">
-                <span :class="getRankTagClass(rowIndex)">{{ rowIndex + 1 }}
-                </span>
-                <span :class="'cite no' + rowIndex"></span>
-              </template>
-            </vxe-table-column>
-            <vxe-table-column
-              field="username"
-              :title="$t('m.Username')"
-              min-width="200"
-              align="left"
+          <el-skeleton :rows="5" :loading="loading.recent7ACRankLoading" animated>
+            <vxe-table
+              border="inner"
+              stripe
+              auto-resize
+              align="center"
+              :data="recentUserACRecord"
+              max-height="500px"
+              :loading="loading.recent7ACRankLoading"
             >
-              <template v-slot="{ row }">
-                <avatar
-                  :username="row.username"
-                  :inline="true"
-                  :size="25"
-                  color="#FFF"
-                  :src="row.avatar"
-                  class="user-avatar"
-                ></avatar>
-                <a
-                  @click="goUserHome(row.username, row.uid)"
-                  style="color:#2d8cf0;"
-                >{{ row.username }}</a>
-                <span
-                  style="margin-left:2px"
-                  v-if="row.titleName"
-                >
-                  <el-tag
-                    effect="dark"
-                    size="small"
-                    :color="row.titleColor"
+              <vxe-table-column
+                type="seq"
+                min-width="50"
+              >
+                <template v-slot="{ rowIndex }">
+                  <span :class="getRankTagClass(rowIndex)">{{ rowIndex + 1 }}
+                  </span>
+                  <span :class="'cite no' + rowIndex"></span>
+                </template>
+              </vxe-table-column>
+              <vxe-table-column
+                field="username"
+                :title="$t('m.Username')"
+                min-width="200"
+                align="left"
+              >
+                <template v-slot="{ row }">
+                  <avatar
+                    :username="row.username"
+                    :inline="true"
+                    :size="25"
+                    color="#FFF"
+                    :src="row.avatar"
+                    class="user-avatar"
+                  ></avatar>
+                  <a
+                    @click="goUserHome(row.username, row.uid)"
+                    style="color:#2d8cf0;"
+                  >{{ row.username }}</a>
+                  <span
+                    style="margin-left:2px"
+                    v-if="row.titleName"
                   >
-                    {{ row.titleName }}
-                  </el-tag>
-                </span>
-              </template>
-            </vxe-table-column>
-            <vxe-table-column
-              field="ac"
-              :title="$t('m.AC')"
-              min-width="50"
-              align="left"
-            >
-            </vxe-table-column>
-          </vxe-table>
+                    <el-tag
+                      effect="dark"
+                      size="small"
+                      :color="row.titleColor"
+                    >
+                      {{ row.titleName }}
+                    </el-tag>
+                  </span>
+                </template>
+              </vxe-table-column>
+              <vxe-table-column
+                field="ac"
+                :title="$t('m.AC')"
+                min-width="50"
+                align="left"
+              >
+              </vxe-table-column>
+            </vxe-table>
+          </el-skeleton>
         </el-card>
         <el-card class="card-top">
           <div