chore:

src/contentScripts/views/Anime/components/PopularAnimeCarousel.vue

@@ -1,28 +1,84 @@
 <script setup lang="ts">
 import type { PopularAnime } from './types'
+
 const popularAnimeList = reactive<PopularAnime[]>([])
+const activatedAnime = ref<PopularAnime>()
+const bannerContent = ref<HTMLElement>()
+const bannerHeight = ref<number>(0)
+
+onload = () => {
+  bannerHeight.value = bannerContent.value?.offsetHeight as number
+}
+
+onresize = () => {
+  bannerHeight.value = bannerContent.value?.offsetHeight as number
+}
 
 onMounted(() => {
   getPopularAnimeList()
 })
 
 function getPopularAnimeList() {
-  browser.runtime.sendMessage({
-    contentScriptQuery: 'getPopularAnimeList',
-  }).then((response) => {
-    const { code, result: { list } } = response
-    if (code === 0)
-      Object.assign(popularAnimeList, list.slice(0, 10) as PopularAnime[])
-  })
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getPopularAnimeList',
+    })
+    .then((response) => {
+      const {
+        code,
+        result: { list },
+      } = response
+      if (code === 0) {
+        Object.assign(popularAnimeList, list.slice(0, 7) as PopularAnime[])
+        activatedAnime.value = popularAnimeList[0]
+      }
+    })
 }
 </script>
 
 <template>
-  <ul grid="~ cols-5 gap-4" overflow-hidden>
+  <div
+    ref="bannerContent"
+    w-full
+    h-70vh
+    min-h-400px
+    pos="absolute top-0 left-0"
+    z="-1"
+    backdrop-blur-2xl
+  >
+    <div
+      :style="{ backgroundImage: `url(${activatedAnime?.cover})` }"
+      bg="cover center"
+      duration-600
+      w-full
+      h-full
+      pos="absolute"
+      opacity-60
+      after:content-none
+      after:pos="absolute top-0 left-0"
+      after:w-full after:h-full
+      after:backdrop-blur-2xl
+    />
+  </div>
+  <div h-70vh min-h-400px z-1>
+    <div text="3xl">
+      {{ activatedAnime?.title }}
+
+      <img
+        w="full"
+        :src="activatedAnime?.ss_horizontal_cover.replace('https:', '')"
+        rounded="$bew-radius"
+      >
+    </div>
+  </div>
+
+  <ul w-full flex gap-4 overflow-hidden m="t--150px">
     <li
       v-for="(item, index) in popularAnimeList"
       :key="index"
+      flex="1"
       flex-shrink-0
+      @mouseover="activatedAnime = item"
     >
       <img
         w="full"
@@ -34,6 +90,4 @@ function getPopularAnimeList() {
   </ul>
 </template>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

src/contentScripts/views/App.vue

@@ -60,6 +60,7 @@ function changeActivatePage(pageName: AppPage) {
         flex="~ col gap-2"
         rounded="r-$bew-radius"
         shadow="$bew-shadow-2"
+        style="backdrop-filter: var(--bew-filter-glass)"
       >
         <button
           class="tab-item"
@@ -105,7 +106,7 @@ function changeActivatePage(pageName: AppPage) {
       </div>
     </aside>
 
-    <main p="t-80px x-5" m="l-60px r-60px" w-full>
+    <main p="t-80px x-5" m="x-100px" w-full>
       <KeepAlive>
         <Home v-if="activatedPage === AppPage.Home" />
         <Search v-else-if="activatedPage === AppPage.Search" />
@@ -131,7 +132,6 @@ function changeActivatePage(pageName: AppPage) {
     hover:text-white
     dark-hover:bg-white
     dark-hover:text-black;
-  backdrop-filter: var(--bew-filter-glass);
 
   &.active {
     --at-apply: bg-$bew-theme-color dark-bg-white text-white dark-text-black;