feat: 添加 PageLoading 加载组件

baiwumm · Jun 19, 2024 · 5239d36 · 5239d36
1 parent bcf81a9
commit 5239d36
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 7 deletions.
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
@@ -9,6 +9,48 @@
   --scrollbar-hover: rgba(255, 255, 255, .25);
 }
 
+@keyframes loaderBefore {
+  0% {
+   width: 0.5em;
+   box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
+  }
+
+  35% {
+   width: 2.5em;
+   box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
+  }
+
+  70% {
+   width: 0.5em;
+   box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
+  }
+
+  100% {
+   box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
+  }
+ }
+
+ @keyframes loaderAfter {
+  0% {
+   height: 0.5em;
+   box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
+  }
+
+  35% {
+   height: 2.5em;
+   box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
+  }
+
+  70% {
+   height: 0.5em;
+   box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
+  }
+
+  100% {
+   box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
+  }
+ }
+
 /* 修改滚动条样式 */
 *::-webkit-scrollbar {
   width: 5px;

diff --git a/src/components/PageLoading/index.vue b/src/components/PageLoading/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <div
+    class="relative flex w-full h-40 justify-center items-center flex-col z-[99] overflow-hidden bg-white dark:bg-slate-900"
+  >
+    <div
+      class="absolute w-12 h-12 rotate-[165deg] before:content-[''] after:content-[''] before:absolute after:absolute before:top-2/4 after:top-2/4 before:left-2/4 after:left-2/4 before:block after:block before:w-[.5em] after:w-[.5em] before:h-[.5em] after:h-[.5em] before:rounded after:rounded before:-translate-x-1/2 after:-translate-x-1/2 before:-translate-y-2/4 after:-translate-y-2/4 before:animate-[loaderBefore_2s_infinite] after:animate-[loaderAfter_2s_infinite]"
+    />
+  </div>
+</template>
diff --git a/src/components/WebsiteCard/index.vue b/src/components/WebsiteCard/index.vue
@@ -7,7 +7,7 @@
           <div class="text-lg">{{ websiteInfo.name }}</div>
           <div class="flex gap-1 items-center text-xs text-slate-400 font-thin">
             <template v-for="(tag, index) in websiteInfo.tags" :key="index">
-              <span>
+              <span class="line-clamp-1">
                 {{ tag }}
               </span>
               <template v-if="index !== websiteInfo.tags.length - 1">
@@ -37,4 +37,7 @@ const handleClick = () => {
 :deep(.el-avatar) {
   background-color: transparent;
 }
+:deep(.el-divider--vertical) {
+  margin: 0 4px;
+}
 </style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -1,10 +1,9 @@
 <template>
-  <div
-    class="flex justify-center items-center font-black text-5xl flex-col gap-2"
-    style="min-height: calc(100vh - 10rem)"
-  >
-    Hello World!
+  <div class="flex flex-col gap-2 px-4" style="min-height: calc(100vh - 10rem)">
     <ClientOnly>
+      <template #fallback>
+        <PageLoading />
+      </template>
       <el-button-group v-loading="categoryStatus === 'pending'">
         <el-button text :bg="!category_id" @click="category_id = ''">全部</el-button>
         <el-button
@@ -17,7 +16,7 @@
       </el-button-group>
       <div
         v-loading="websiteStatus === 'pending'"
-        class="grid gap-5 w-full px-4 justify-center"
+        class="grid gap-5 w-full justify-center"
         style="grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr))"
       >
         <template v-if="websiteList?.data?.list?.length">