From c08094a999ddaafbd65539567c9a8f8f29ae0c17 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Fri, 27 Jan 2023 02:30:50 +0800
Subject: [PATCH] chore: style change

---
 .../Anime/components/PopularAnimeCarousel.vue |  7 ++--
 src/contentScripts/views/App.vue              | 42 +++++++++----------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/contentScripts/views/Anime/components/PopularAnimeCarousel.vue b/src/contentScripts/views/Anime/components/PopularAnimeCarousel.vue
index 1f76210e..422fbcd5 100644
--- a/src/contentScripts/views/Anime/components/PopularAnimeCarousel.vue
+++ b/src/contentScripts/views/Anime/components/PopularAnimeCarousel.vue
@@ -45,7 +45,7 @@ function getPopularAnimeList() {
     z="-1"
   >
     <div
-      :style="{ backgroundImage: `url(${activatedAnime?.cover})` }"
+      :style="{ backgroundImage: `url(${activatedAnime?.ss_horizontal_cover})` }"
       bg="cover center"
       duration-600
       w-full
@@ -54,11 +54,12 @@ function getPopularAnimeList() {
       after:content-none
       after:pos="absolute top-0 left-0"
       after:w-full after:h-full
-      after:backdrop-blur-2xl
+      after:backdrop-blur-xl
       opacity-30
     />
   </div>
 
+  <!-- banner -->
   <div h-600px z-1 pos="relative" flex justify-center>
     <div>
       <img
@@ -72,7 +73,7 @@ function getPopularAnimeList() {
     </div>
   </div>
 
-  <ul w-full flex gap-4 overflow-hidden m="t--150px" z-1 relative>
+  <ul w-full flex gap-6 overflow-hidden m="t--150px" z-1 relative>
     <li
       v-for="(item, index) in popularAnimeList"
       :key="index"
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 62801f91..db10f712 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -116,6 +116,26 @@ function changeActivatePage(pageName: AppPage) {
 </template>
 
 <style lang="scss" scoped>
+.topbar-enter-active,
+.topbar-leave-active {
+  transition: all 0.5s ease;
+}
+
+.topbar-enter-from,
+.topbar-leave-to {
+  @apply opacity-0 transform -translate-y-full;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  @apply opacity-0;
+}
+
 .tab-item {
   --shadow: 0 0 30px 4px var(--bew-theme-color-50);
   --shadow-dark: 0 0 30px 4px rgba(255, 255, 255, 0.6);
@@ -142,25 +162,3 @@ function changeActivatePage(pageName: AppPage) {
   }
 }
 </style>
-
-<style lang="scss">
-.topbar-enter-active,
-.topbar-leave-active {
-  transition: all 0.5s ease;
-}
-
-.topbar-enter-from,
-.topbar-leave-to {
-  @apply opacity-0 transform -translate-y-full;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.5s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  @apply opacity-0;
-}
-</style>