⚡️ 调整部分 ui

src/components/home/t-calendar.vue

@@ -2,7 +2,7 @@
   <div class="calendar-box">
     <div class="calendar-title">
       <div class="calendar-title-left">
-        <v-icon size="small">mdi-calendar-clock</v-icon>
+        <v-icon size="small" style="opacity: 0.8">mdi-calendar-clock</v-icon>
         <span>今日素材</span>
         <span>{{ dateNow }}</span>
         <!-- 如果是某人生日，礼物图标颜色为红色 -->

src/components/home/t-pool.vue

@@ -250,8 +250,7 @@ onUnmounted(() => {
 .pool-title-left img {
   width: 25px;
   height: 25px;
-  border-radius: 50%;
-  background: var(--common-shadow-4);
+  filter: brightness(0.8);
 }
 
 .pool-title-right {

src/components/home/t-position.vue

@@ -34,7 +34,6 @@
           </div>
           <div class="position-card-text">
             <v-icon>mdi-clock-outline</v-icon>
-            <span>剩余时间：</span>
             <span v-if="positionTimeGet[card.postId] !== '已结束'">{{
               positionTimeGet[card.postId]
             }}</span>
@@ -130,6 +129,7 @@ onUnmounted(() => {
   width: 20px;
   height: 20px;
   margin: 0 10px;
+  filter: brightness(0.9);
 }
 
 .position-grid {
@@ -182,5 +182,11 @@ onUnmounted(() => {
   display: inline-block;
   min-width: 200px;
   align-items: flex-start;
+  margin-right: 5px;
+}
+
+.position-card-text :nth-child(1) {
+  color: var(--btn-text);
+  filter: brightness(0.8);
 }
 </style>

src/components/itembox/tib-calendar-item.vue

@@ -2,7 +2,7 @@
   <TItemBox :model-value="box" />
 </template>
 <script lang="ts" setup>
-import { computed } from "vue";
+import { onMounted, ref } from "vue";
 
 import TItemBox from "../main/t-itembox.vue";
 import type { TItemBoxData } from "../main/t-itembox.vue";
@@ -14,33 +14,48 @@ interface TibCalendarItemProps {
 }
 
 const props = defineProps<TibCalendarItemProps>();
-const box = computed<TItemBoxData>(() => {
+const box = ref<TItemBoxData>({
+  bg: "",
+  icon: "",
+  size: "100px",
+  height: "100px",
+  display: "inner",
+  clickable: false,
+  lt: "",
+  ltSize: "30px",
+  innerHeight: 25,
+  innerIcon: "",
+  innerText: "",
+});
+
+onMounted(() => {
   if (props.model === "avatar") {
-    return {
+    box.value = {
       bg: props.data.bg,
       icon: props.data.icon,
       size: "100px",
       height: "100px",
       display: "inner",
       clickable: props.clickable,
-      lt: props.data.elementIcon,
+      lt: props.data.elementIcon ?? "",
       ltSize: "30px",
       innerHeight: 25,
       innerIcon: props.data.weaponIcon,
       innerText: props.data.name,
     };
+  } else {
+    box.value = {
+      bg: props.data.bg,
+      icon: props.data.icon,
+      size: "100px",
+      height: "100px",
+      display: "inner",
+      clickable: props.clickable,
+      lt: props.data.weaponIcon,
+      ltSize: "30px",
+      innerHeight: 25,
+      innerText: props.data.name,
+    };
   }
-  return {
-    bg: props.data.bg,
-    icon: props.data.icon,
-    size: "100px",
-    height: "100px",
-    display: "inner",
-    clickable: props.clickable,
-    lt: props.data.weaponIcon,
-    ltSize: "30px",
-    innerHeight: 25,
-    innerText: props.data.name,
-  };
 });
 </script>

src/components/overlay/to-calendar.vue

@@ -143,10 +143,13 @@ function toDetail(item: TGApp.App.Calendar.Item): void {
 
 .toc-src-box :nth-child(2) {
   height: 30px;
-  border-radius: 50%;
   margin: 5px;
   aspect-ratio: 1;
-  background: var(--common-shadow-4);
+  filter: invert(87%) sepia(14%) saturate(216%) hue-rotate(180deg) brightness(81%) contrast(87%);
+}
+
+.dark .toc-src-box :nth-child(2) {
+  filter: none;
 }
 
 .toc-src-text {