💄 调整 ui

src/components/func/geetest.vue

@@ -107,7 +107,7 @@ defineExpose({ displayBox });
 
 .geetest-overlay {
   position: fixed;
-  z-index: 999;
+  z-index: 100;
   top: 0;
   left: 0;
   display: flex;
@@ -115,7 +115,7 @@ defineExpose({ displayBox });
   height: 100%;
   align-items: center;
   justify-content: center;
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(20px);
   background: rgb(0 0 0 / 50%);
 }
 

src/components/func/loading.ts

@@ -11,7 +11,7 @@ import loading from "./loading.vue";
 
 const loadingId = "tg-func-loading";
 
-export type LoadingParams = { show: boolean; title: string; subtitle?: string; empty?: boolean };
+export type LoadingParams = { show: boolean; title: string; subtitle: string; empty?: boolean };
 
 /**
  * @description 自定义 loading 组件

src/components/func/loading.vue

@@ -6,9 +6,12 @@
           <div class="loading-box">
             <div class="loading-title">
               <span>{{ data.title }}</span>
-              <span class="loading-circle" v-show="!empty" />
+              <div class="loading-circle" v-show="!empty">
+                <div />
+                <div />
+              </div>
             </div>
-            <div class="loading-subtitle">{{ data.subtitle }}</div>
+            <div class="loading-subtitle" v-show="data.subtitle !== ''">{{ data.subtitle }}</div>
             <div class="loading-img">
               <img v-if="!empty" src="/source/UI/loading.webp" alt="loading" />
               <img v-else src="/source/UI/empty.webp" alt="empty" />
@@ -111,7 +114,7 @@ defineExpose({ displayBox });
   height: 100%;
   align-items: center;
   justify-content: center;
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(10px);
   background: rgb(0 0 0 / 50%);
 }
 
@@ -150,25 +153,6 @@ defineExpose({ displayBox });
   font-weight: 600;
 }
 
-.loading-circle {
-  width: 40px;
-  height: 40px;
-  border: 5px solid #f4d8a8;
-  border-radius: 100%;
-  border-top-color: transparent;
-  animation: circle infinite 0.75s linear;
-}
-
-@keyframes circle {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .loading-subtitle {
   width: 100%;
   height: 25px;
@@ -190,3 +174,76 @@ defineExpose({ displayBox });
   }
 }
 </style>
+<!-- loading -->
+<style lang="css" scoped>
+.loading-circle,
+.loading-circle > div {
+  position: relative;
+  box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.loading-circle {
+  display: block;
+  width: 32px;
+  height: 32px;
+  color: #f4d8a8;
+  font-size: 0;
+}
+
+.loading-circle > div {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: inline-block;
+  border: 0 solid currentcolor;
+  border-radius: 100%;
+  background-color: currentcolor;
+  float: none;
+}
+
+.loading-circle > div:first-child {
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  border-width: 2px;
+  border-style: solid;
+  border-right-color: transparent;
+  border-left-color: transparent;
+  animation: ball-clip-rotate-pulse-rotate 1s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
+  background: transparent;
+}
+
+.loading-circle > div:last-child {
+  width: 16px;
+  height: 16px;
+  animation: ball-clip-rotate-pulse-scale 1s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
+}
+
+@keyframes ball-clip-rotate-pulse-rotate {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  50% {
+    transform: translate(-50%, -50%) rotate(180deg);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@keyframes ball-clip-rotate-pulse-scale {
+  0%,
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  30% {
+    opacity: 0.3;
+    transform: translate(-50%, -50%) scale(0.15);
+  }
+}
+</style>

src/components/main/t-postcard.vue

@@ -5,7 +5,7 @@
       <v-progress-circular color="primary" :indeterminate="true" v-else-if="card.cover !== ''" />
       <img src="/source/UI/defaultCover.webp" alt="cover" v-else />
       <div v-if="isAct" class="tpc-act">
-        <div class="tpc-status" :style="{ background: card.status?.colorCss }">
+        <div class="tpc-status">
           {{ card.status?.status }}
         </div>
         <div class="tpc-time">
@@ -18,14 +18,14 @@
       <div class="tpc-title" :title="card.title" @click="shareCard">{{ card.title }}</div>
       <TpAvatar v-if="card.user" :data="card.user" position="left" />
     </div>
-    <div class="tpc-bottom">
+    <div class="tpc-bottom" v-if="card.data">
       <div class="tpc-tags">
         <div v-for="topic in card.topics" :key="topic.id" class="tpc-tag" @click="toTopic(topic)">
           <v-icon>mdi-tag</v-icon>
           <span>{{ topic.name }}</span>
         </div>
       </div>
-      <div class="tpc-data" v-if="card.data">
+      <div class="tpc-data">
         <div class="tpc-info-item" :title="`浏览数：${card.data.view}`">
           <v-icon>mdi-eye</v-icon>
           <span>{{ card.data.view }}</span>
@@ -98,6 +98,10 @@ const selectedList = computed({
     emits("update:selected", v);
   },
 });
+const cardBg = computed<string>(() => {
+  if (card.value && card.value.status) return card.value.status.colorCss;
+  return "none";
+});
 
 onMounted(async () => await reload(props.modelValue));
 
@@ -414,6 +418,7 @@ async function toTopic(topic: TGApp.Plugins.Mys.Topic.Info): Promise<void> {
   align-items: center;
   justify-content: flex-start;
   padding: 5px 30px 5px 5px;
+  background-color: v-bind(cardBg);
   clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
   color: var(--tgc-white-1);
 

src/pages/common/Home.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, shallowRef } from "vue";
+import { onMounted, onUnmounted, ref, shallowRef, toRaw } from "vue";
 
 import showLoading from "../../components/func/loading.js";
 import showSnackbar from "../../components/func/snackbar.js";
@@ -53,6 +53,7 @@ const homeStore = useHomeStore();
 const endNum = ref<number>(0);
 const components = shallowRef<any[]>([]);
 const showHome = ref<string[]>(homeStore.getShowValue());
+const loadComp = ref<string[]>(toRaw(showHome.value));
 
 const gameSelectList = TGConstant.BBS.CHANNELS;
 const curGid = ref<string>(gameSelectList[0].gid);
@@ -99,13 +100,29 @@ async function submitHome(): Promise<void> {
   setTimeout(() => window.location.reload(), 1000);
 }
 
+function getName(name: string): string {
+  switch (name) {
+    case "t-pool":
+      return "限时祈愿";
+    case "t-position":
+      return "近期活动";
+    case "t-calendar":
+      return "素材日历";
+    default:
+      return "";
+  }
+}
+
 // 组件加载完成
 async function loadEnd(item: any): Promise<void> {
   await TGLogger.Info(`[Home][loadEnd] ${item.__name} 加载完成`);
+  loadComp.value = loadComp.value.filter((v) => v !== getName(item.__name));
   endNum.value++;
   if (endNum.value === components.value.length) {
     showLoading.end();
+    return;
   }
+  showLoading.update("正在加载首页...", `正在加载：${loadComp.value.join("、")}`);
 }
 
 onUnmounted(() => (components.value = []));