💄 添加滤镜过渡效果

src/components/app/top-nameCard.vue

@@ -49,10 +49,15 @@ const isGrey = computed<boolean>(() => {
   background-repeat: no-repeat;
   cursor: pointer;
   font-family: var(--font-title);
+  transition: filter 0.5s ease-in-out;
 
   &.grey {
     filter: grayscale(1);
   }
+
+  &.grey:hover {
+    filter: grayscale(0);
+  }
 }
 
 .dark .top-nc-box {

src/components/userAchi/tua-series.vue

@@ -3,13 +3,14 @@
     class="tuas-card"
     @click="selectSeries"
     v-if="data"
+    :title="data.name"
     :class="{
       'tuas-selected': props.cur === props.series,
-      'tuas-finish': showCard,
+      'tuas-radius': showCard,
     }"
   >
     <div class="tuas-version">v{{ data.version }}</div>
-    <div class="tuas-reward" v-if="showCard" :title="data.card">
+    <div class="tuas-reward" v-if="showCard">
       <img
         :class="{ finish: progress === 100 }"
         alt="card"
@@ -116,10 +117,18 @@ function selectSeries(): void {
     background: var(--box-bg-1);
   }
 
-  &.tuas-finish {
+  &.tuas-radius {
     border-top-right-radius: 30px;
     border-bottom-right-radius: 30px;
   }
+
+  &:hover {
+    .tuas-reward {
+      img {
+        filter: unset;
+      }
+    }
+  }
 }
 
 .dark .tuas-card {
@@ -158,6 +167,7 @@ function selectSeries(): void {
     object-fit: contain;
     opacity: 0.3;
     filter: grayscale(1);
+    transition: filter 0.5s ease-in-out;
 
     &.finish {
       filter: unset;

src/components/userAvatar/tua-avatar-box.vue

@@ -148,6 +148,10 @@ function getWeaponTitle(): string {
   border-radius: 4px;
   cursor: pointer;
   row-gap: 4px;
+
+  &:hover .tua-abl-bg {
+    filter: grayscale(0);
+  }
 }
 
 .dark .tua-ab-box {
@@ -247,6 +251,7 @@ function getWeaponTitle(): string {
   backdrop-filter: blur(5px);
   background: var(--box-bg-3);
   filter: grayscale(1);
+  transition: filter 0.5s ease-in-out;
 
   &.ori {
     filter: unset;