From 63a89693e67599dd7b5eb0abb6d50c1abbc13e39 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 17 Oct 2023 22:23:54 +0800
Subject: [PATCH] style: adjust styles

---
 .../LongCoverCard/LongCoverCard.vue           |  2 +-
 src/components/VideoCard/VideoCard.vue        | 58 +++++++++----------
 src/contentScripts/views/Anime/Anime.vue      | 24 +++++---
 3 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/src/components/LongCoverCard/LongCoverCard.vue b/src/components/LongCoverCard/LongCoverCard.vue
index fc67d716..51064bf7 100644
--- a/src/components/LongCoverCard/LongCoverCard.vue
+++ b/src/components/LongCoverCard/LongCoverCard.vue
@@ -124,7 +124,7 @@ defineProps<{
         {{ title }}
       </a>
     </p>
-    <div text="$bew-text-2" mb-10 flex flex-wrap gap-2 items-center>
+    <div text="$bew-text-2" flex flex-wrap gap-2 items-center>
       <div
         v-if="capsuleText"
         text="$bew-theme-color" bg="$bew-theme-color-20"
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index b64de42f..73ea22a1 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
+import { getCSRF, removeHttpFromUrl } from '~/utils/main'
 import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils/dataFormatter'
 
 const props = defineProps<{
@@ -145,26 +145,6 @@ function handelMouseLeave() {
       @mouseleave="handelMouseLeave"
     >
       <div :style="{ display: horizontal ? 'flex' : 'block', gap: horizontal ? '1.5rem' : '0' }">
-        <div
-          v-if="rank" flex="~ justify-center" pos="absolute left-1 top-1" z-10
-          group-hover:transform="translate--4px" transition="all ease-in-out 300"
-        >
-          <div
-            v-if="rank <= 3"
-            bg="$bew-theme-color" text-center lh-30px h-30px w-30px text-white rounded="1/2" shadow="$bew-shadow-1"
-            border="1 $bew-theme-color"
-            text="2xl" fw-bold
-          >
-            {{ rank }}
-          </div>
-          <div
-            v-else
-            bg="$bew-elevated-solid-1" text-center lh-30px h-30px w-30px rounded="1/2" shadow="$bew-shadow-1"
-            border="1 $bew-border-color"
-          >
-            {{ rank }}
-          </div>
-        </div>
         <!-- Cover -->
         <div
           :style="{ width: horizontal ? '250px' : '100%' }"
@@ -176,8 +156,26 @@ function handelMouseLeave() {
             8px 8px 0 2px var(--bew-theme-color-60),
             14px 14px 0 2px var(--bew-theme-color-40)"
           transition="all ease-in-out 300" group-hover:z-2
-          @click.stop="openLinkToNewTab(videoUrl)"
         >
+          <!-- Ranking Number -->
+          <div v-if="rank" absolute p-2>
+            <div
+              v-if="Number(rank) <= 3"
+              bg="$bew-theme-color" text-center lh-30px h-30px w-30px text-white rounded="1/2" shadow="$bew-shadow-1"
+              border="1 $bew-theme-color"
+              text="2xl" fw-bold
+            >
+              {{ rank }}
+            </div>
+            <div
+              v-else
+              bg="$bew-elevated-solid-1" text-center lh-30px h-30px w-30px rounded="1/2" shadow="$bew-shadow-1"
+              border="1 $bew-border-color"
+            >
+              {{ rank }}
+            </div>
+          </div>
+
           <!-- Video Duration -->
           <div
             v-if="duration || durationStr"
@@ -215,13 +213,15 @@ function handelMouseLeave() {
           </button>
 
           <!-- Video cover -->
-          <img
-            :src="`${removeHttpFromUrl(cover)}@672w_378h_1c`"
-            loading="lazy"
-            w="full" max-w-full align-middle aspect-video
-            bg="cover center"
-            rounded="$bew-radius"
-          >
+          <a :href="videoUrl" target="_blank">
+            <img
+              :src="`${removeHttpFromUrl(cover)}@672w_378h_1c`"
+              loading="lazy"
+              w="full" max-w-full align-middle aspect-video
+              bg="cover center"
+              rounded="$bew-radius"
+            >
+          </a>
         </div>
 
         <!-- Other Information -->
diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index 9fae44ce..165a2a49 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -106,13 +106,13 @@ function getPopularAnimeList() {
       </section> -->
 
       <!-- Your Watchlist -->
-      <section v-if="getUserID()" mb-8 mt-4>
+      <section v-if="getUserID()" class="anime-section">
         <div flex justify-between items-center mb-6>
           <h3 text="3xl $bew-text-1" font="bold">
             {{ $t('anime.your_watch_list') }}
           </h3>
           <Button
-            size="small"
+            size="large"
             style="
               --b-button-shadow: var(--bew-shadow-1);
             "
@@ -157,13 +157,13 @@ function getPopularAnimeList() {
       </section>
 
       <!-- Popular Anime -->
-      <section mb-8>
+      <section class="anime-section">
         <div flex justify-between items-center mb-6>
           <h3 text="3xl $bew-text-1" font="bold">
             {{ $t('anime.popular_anime') }}
           </h3>
           <Button
-            size="small"
+            size="large"
             style="
               --b-button-shadow: var(--bew-shadow-1);
             "
@@ -205,18 +205,18 @@ function getPopularAnimeList() {
       </section>
 
       <!-- Anime Timetable -->
-      <section mb-8>
-        <div flex justify-between items-end mb-6>
+      <section class="anime-section">
+        <div flex justify-between items-end>
           <h3 text="3xl $bew-text-1" font="bold">
             {{ $t('anime.anime_timetable.title') }}
           </h3>
         </div>
 
-        <AnimeTimeTable />
+        <AnimeTimeTable w="[calc(100%+1.5rem)]" />
       </section>
 
       <!-- Recommended for you -->
-      <section>
+      <section class="anime-section">
         <h3 text="3xl $bew-text-1" font="bold" mb-6>
           {{ $t('anime.recommended_for_you') }}
         </h3>
@@ -231,6 +231,7 @@ function getPopularAnimeList() {
             :title="item.title"
             :desc="item.sub_title"
             :capsule-text="item.rating"
+            mb-10
             @mouseenter="activatedSeasonId = item.season_id"
             @mouseleave="activatedSeasonId = 0"
           />
@@ -238,6 +239,7 @@ function getPopularAnimeList() {
           <template v-if="isLoadingRecommendAnime">
             <LongCoverCardSkeleton
               v-for="item in 30" :key="item"
+              mb-10
             />
           </template>
         </div>
@@ -248,4 +250,8 @@ function getPopularAnimeList() {
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.anime-section {
+  --at-apply: mb-8 mt-14 first:mt-4;
+}
+</style>