From 1d09f4817bf7dbe0258098fa64446d616f912f01 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Sat, 18 Nov 2023 00:28:12 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/t-calendar.vue           |  2 +-
 src/components/home/t-pool.vue               |  3 +-
 src/components/home/t-position.vue           |  8 +++-
 src/components/itembox/tib-calendar-item.vue | 47 +++++++++++++-------
 src/components/overlay/to-calendar.vue       |  7 ++-
 src/pages/common/Achievements.vue            | 14 +++++-
 6 files changed, 58 insertions(+), 23 deletions(-)

diff --git a/src/components/home/t-calendar.vue b/src/components/home/t-calendar.vue
index e4739977..4f017de7 100644
--- a/src/components/home/t-calendar.vue
+++ b/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>
         <!-- 如果是某人生日，礼物图标颜色为红色 -->
diff --git a/src/components/home/t-pool.vue b/src/components/home/t-pool.vue
index bcef8a55..231674f9 100644
--- a/src/components/home/t-pool.vue
+++ b/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 {
diff --git a/src/components/home/t-position.vue b/src/components/home/t-position.vue
index b868dd51..14599c19 100644
--- a/src/components/home/t-position.vue
+++ b/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>
diff --git a/src/components/itembox/tib-calendar-item.vue b/src/components/itembox/tib-calendar-item.vue
index e87da0d8..a7e7cc5b 100644
--- a/src/components/itembox/tib-calendar-item.vue
+++ b/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>
diff --git a/src/components/overlay/to-calendar.vue b/src/components/overlay/to-calendar.vue
index 9305328b..db8c7c1c 100644
--- a/src/components/overlay/to-calendar.vue
+++ b/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 {
diff --git a/src/pages/common/Achievements.vue b/src/pages/common/Achievements.vue
index 9a796f61..c990623b 100644
--- a/src/pages/common/Achievements.vue
+++ b/src/pages/common/Achievements.vue
@@ -28,7 +28,7 @@
         <div class="version-icon-series">v{{ series.version }}</div>
         <v-list-item>
           <template #prepend>
-            <v-img width="40px" style="margin-right: 10px" :src="getIcon(series.id)" />
+            <v-img class="series-icon" :src="getIcon(series.id)" />
           </template>
           <v-list-item-title :title="series.name">
             {{ series.name }}
@@ -558,6 +558,18 @@ async function getAchievements(
   text-align: center;
 }
 
+.series-icon {
+  width: 40px;
+  height: 40px;
+  padding: 5px;
+  border-radius: 5px;
+  margin-right: 10px;
+  background:
+    linear-gradient(to bottom, rgb(255 255 255 / 15%) 0%, rgb(0 0 0 / 15%) 100%),
+    radial-gradient(at top center, rgb(255 255 255 / 40%) 0%, rgb(0 0 0 / 40%) 120%) #989898;
+  background-blend-mode: multiply, multiply;
+}
+
 .version-icon-single {
   color: var(--tgc-pink-1);
   font-family: var(--font-title);