From f3a6b340de0ff3e47f26977c5e161a35dbf987a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E6=99=9A=E7=9A=84=E9=B8=A1=E9=B8=A3?=
 <110297461+MidnightCrowing@users.noreply.github.com>
Date: Sun, 7 Jul 2024 21:25:32 +0800
Subject: [PATCH] fix(TopBarPop): fade in animation

---
 src/components/TopBar/components/FavoritesPop.vue  | 11 +++++------
 src/components/TopBar/components/HistoryPop.vue    |  8 ++++----
 src/components/TopBar/components/MomentsPop.vue    |  8 ++++----
 src/components/TopBar/components/WatchLaterPop.vue |  8 ++++----
 4 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/TopBar/components/FavoritesPop.vue b/src/components/TopBar/components/FavoritesPop.vue
index 6524c052..16a0ae82 100644
--- a/src/components/TopBar/components/FavoritesPop.vue
+++ b/src/components/TopBar/components/FavoritesPop.vue
@@ -151,7 +151,7 @@ defineExpose({
       style="backdrop-filter: var(--bew-filter-glass-1)"
       flex="~" items-center justify-between
       p="x-6"
-      pos="fixed top-0 left-0"
+      pos="relative top-0 left-0"
       w="full"
       h-50px
       bg="$bew-content"
@@ -178,9 +178,9 @@ defineExpose({
       </div>
     </header>
 
-    <main flex="~" overflow-hidden rounded="$bew-radius">
+    <main flex="~" overflow-hidden rounded="b-$bew-radius">
       <aside
-        w="120px" h="430px" overflow="y-scroll" rounded="l-$bew-radius"
+        w="120px" h="380px" overflow="y-scroll" rounded="bl-$bew-radius"
         flex="shrink-0" bg="$bew-fill-1"
       >
         <ul grid="~ cols-1">
@@ -189,7 +189,6 @@ defineExpose({
             :key="item.id"
             :class="activatedMediaId === item.id ? 'activated-category' : ''"
             p="y-2 x-6"
-            first:m="t-[50px]"
             cursor="pointer"
             transition="~ duration-300"
             @click="changeCategory(item)"
@@ -203,7 +202,7 @@ defineExpose({
       <div
         ref="favoriteVideosWrap"
         flex="~ col gap-2 1"
-        h="430px"
+        h="380px"
         overflow="y-scroll"
         p="x-4"
         pos="relative"
@@ -237,7 +236,7 @@ defineExpose({
             :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
             hover:bg="$bew-fill-2"
             rounded="$bew-radius"
-            m="first:t-50px last:b-4" p="2"
+            m="last:b-4" p="2"
             class="group"
             transition="~ duration-300"
           >
diff --git a/src/components/TopBar/components/HistoryPop.vue b/src/components/TopBar/components/HistoryPop.vue
index 1e1b75d4..82b49fec 100644
--- a/src/components/TopBar/components/HistoryPop.vue
+++ b/src/components/TopBar/components/HistoryPop.vue
@@ -181,7 +181,7 @@ function getHistoryList(type: Business, view_at = 0 as number) {
       flex="~"
       justify="between"
       p="y-4 x-6"
-      pos="fixed top-0 left-0"
+      pos="relative top-0 left-0"
       w="full"
       bg="$bew-elevated"
       z="2"
@@ -210,11 +210,11 @@ function getHistoryList(type: Business, view_at = 0 as number) {
     </header>
 
     <!-- historys wrapper -->
-    <main overflow-hidden rounded="$bew-radius">
+    <main overflow-hidden rounded="b-$bew-radius">
       <div
         ref="historysWrap"
         flex="~ col gap-2"
-        h="430px"
+        h="380px"
         overflow="y-scroll"
         p="x-4"
       >
@@ -241,7 +241,7 @@ function getHistoryList(type: Business, view_at = 0 as number) {
             v-for="historyItem in historys"
             :key="historyItem.kid"
             :href="getHistoryUrl(historyItem)" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
-            m="last:b-4 first:t-50px" p="2"
+            m="last:b-4" p="2"
             rounded="$bew-radius"
             hover:bg="$bew-fill-2"
             duration-300
diff --git a/src/components/TopBar/components/MomentsPop.vue b/src/components/TopBar/components/MomentsPop.vue
index 75b4539f..a17e8ac1 100644
--- a/src/components/TopBar/components/MomentsPop.vue
+++ b/src/components/TopBar/components/MomentsPop.vue
@@ -291,7 +291,7 @@ defineExpose({
       justify="between"
       items-center
       p="y-4 x-6"
-      pos="fixed top-0 left-0"
+      pos="relative top-0 left-0"
       w="full"
       bg="$bew-elevated"
       z="1"
@@ -320,8 +320,8 @@ defineExpose({
     </header>
 
     <!-- moments wrapper -->
-    <main overflow-hidden rounded="$bew-radius">
-      <div ref="momentsWrap" h="430px" overflow="y-scroll x-hidden" p="x-4">
+    <main overflow-hidden rounded="b-$bew-radius">
+      <div ref="momentsWrap" h="380px" overflow="y-scroll x-hidden" p="x-4">
         <!-- loading -->
         <Loading
           v-if="isLoading && moments.length === 0"
@@ -348,7 +348,7 @@ defineExpose({
             :key="index"
             :href="moment.link" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
             flex="~ justify-between"
-            m="b-2 first:t-50px" p="2"
+            m="b-2" p="2"
             rounded="$bew-radius"
             hover:bg="$bew-fill-2"
             duration-300
diff --git a/src/components/TopBar/components/WatchLaterPop.vue b/src/components/TopBar/components/WatchLaterPop.vue
index 733ed698..d8f2d54e 100644
--- a/src/components/TopBar/components/WatchLaterPop.vue
+++ b/src/components/TopBar/components/WatchLaterPop.vue
@@ -66,7 +66,7 @@ function getAllWatchLaterList() {
       flex="~"
       justify="between"
       p="y-4 x-6"
-      pos="fixed top-0 left-0"
+      pos="relative top-0 left-0"
       w="full"
       bg="$bew-elevated"
       z="2"
@@ -95,10 +95,10 @@ function getAllWatchLaterList() {
     </header>
 
     <!-- watchLater wrapper -->
-    <main overflow-hidden rounded="$bew-radius">
+    <main overflow-hidden rounded="b-$bew-radius">
       <div
         flex="~ col gap-2"
-        h="430px"
+        h="380px"
         overflow="y-scroll"
         p="x-4"
       >
@@ -125,7 +125,7 @@ function getAllWatchLaterList() {
             v-for="item in watchLaterList"
             :key="item.aid"
             :href="getWatchLaterUrl(item.bvid)" :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
-            m="last:b-4 first:t-50px" p="2"
+            m="last:b-4" p="2"
             rounded="$bew-radius"
             hover:bg="$bew-fill-2"
             duration-300