From dab2fa4a13bdd48417dd1a8f7e8599198f65b23f Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 30 Jun 2023 17:04:19 +0800
Subject: [PATCH] fix layout

---
 src/@layouts/styles/_default-layout.scss      |  2 +-
 src/@layouts/styles/_placeholders.scss        |  2 +-
 src/App.vue                                   |  2 +-
 src/components/cards/MediaCard.vue            | 10 ++-----
 src/components/cards/SubscribeCard.vue        | 29 +++++++++----------
 .../DefaultLayoutWithVerticalNav.vue          | 22 +++++---------
 6 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/src/@layouts/styles/_default-layout.scss b/src/@layouts/styles/_default-layout.scss
index 7f12d9a5..3aa6b5dc 100644
--- a/src/@layouts/styles/_default-layout.scss
+++ b/src/@layouts/styles/_default-layout.scss
@@ -15,7 +15,7 @@ body {
   flex-grow: 1;
 
   // TODO: Use grid gutter variable here
-  padding-block: 1.5rem;
+  padding-block: 0.5rem;
 }
 
 .layout-footer {
diff --git a/src/@layouts/styles/_placeholders.scss b/src/@layouts/styles/_placeholders.scss
index c10e25b5..1463f237 100644
--- a/src/@layouts/styles/_placeholders.scss
+++ b/src/@layouts/styles/_placeholders.scss
@@ -4,7 +4,7 @@
 %boxed-content {
   @at-root #{&}-spacing {
     // TODO: Use grid gutter variable here
-    padding-inline: 1.5rem;
+    padding-inline: 0.5rem;
   }
 
   inline-size: 100%;
diff --git a/src/App.vue b/src/App.vue
index 656203df..641ac741 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const route = useRoute()
+const route = useRoute();
 </script>
 
 <template>
diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 8312b769..18b0c3ce 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -31,8 +31,8 @@ const getChipColor = (type: string) => {
         :width="props.width"
         class="outline-none shadow ring-gray-500"
         :class="{
-          'scale-105 shadow-lg': hover.isHovering,
-          'ring-1 transition duration-300 ': isImageLoaded,
+          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+          'ring-1': isImageLoaded,
         }"
       >
         <VImg
@@ -96,10 +96,4 @@ const getChipColor = (type: string) => {
 .on-hover img {
   @apply brightness-50;
 }
-
-.media-slide-card {
-  position: relative;
-  flex: 0 0 auto;
-  max-inline-size: 11rem;
-}
 </style>
diff --git a/src/components/cards/SubscribeCard.vue b/src/components/cards/SubscribeCard.vue
index 100e2c44..af715e44 100644
--- a/src/components/cards/SubscribeCard.vue
+++ b/src/components/cards/SubscribeCard.vue
@@ -4,7 +4,7 @@ import { formatSeason } from "@core/utils/formatters";
 
 // 输入参数
 const props = defineProps({
-  media: Object as PropType<Subscribe>
+  media: Object as PropType<Subscribe>,
 });
 
 // 根据 type 返回不同的图标
@@ -25,28 +25,25 @@ const getPercentage = (total: number, lack: number) => {
   }
   return Math.round(((total - lack) / total) * 100);
 };
-
 </script>
 
 <template>
   <VCard
-    :key="props.media?.id" 
+    :key="props.media?.id"
     :image="props.media?.backdrop || props.media?.poster"
-    class="card-with-overlay">
+    class="card-with-overlay"
+  >
     <VCardItem>
       <template #prepend>
-        <VIcon
-          size="1.9rem"
-          color="white"
-          :icon="getIcon(props.media?.type||'')"
-        />
+        <VIcon size="1.9rem" color="white" :icon="getIcon(props.media?.type || '')" />
       </template>
       <VCardTitle class="text-white">
-        {{ props.media?.name }} {{ formatSeason(props.media?.season ? props.media?.season.toString() : "") }}
+        {{ props.media?.name }}
+        {{ formatSeason(props.media?.season ? props.media?.season.toString() : "") }}
       </VCardTitle>
       <template #append>
         <div class="me-n3">
-          <MoreBtn color="white"/>
+          <MoreBtn color="white" />
         </div>
       </template>
     </VCardItem>
@@ -57,9 +54,7 @@ const getPercentage = (total: number, lack: number) => {
       </p>
     </VCardText>
 
-    <VCardText
-      class="d-flex justify-space-between align-center flex-wrap"
-    >
+    <VCardText class="d-flex justify-space-between align-center flex-wrap">
       <div class="d-flex align-center">
         <IconBtn icon="mdi-star" color="white" class="me-1" />
         <span class="text-subtitle-2 text-white me-4">{{ props.media?.vote }}</span>
@@ -79,7 +74,9 @@ const getPercentage = (total: number, lack: number) => {
 
     <VProgressLinear
       v-if="props.media?.total_episode || 0 > 0"
-      :model-value="getPercentage(props.media?.total_episode || 0, props.media?.lack_episode || 0)"
+      :model-value="
+        getPercentage(props.media?.total_episode || 0, props.media?.lack_episode || 0)
+      "
       bg-color="success"
       color="success"
     />
@@ -87,7 +84,7 @@ const getPercentage = (total: number, lack: number) => {
 </template>
 
 <style lang="scss">
-.card-with-overlay img{
+.card-with-overlay img {
   @apply brightness-50;
 }
 </style>
diff --git a/src/layouts/components/DefaultLayoutWithVerticalNav.vue b/src/layouts/components/DefaultLayoutWithVerticalNav.vue
index edc4651f..ca0d8c8d 100644
--- a/src/layouts/components/DefaultLayoutWithVerticalNav.vue
+++ b/src/layouts/components/DefaultLayoutWithVerticalNav.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import VerticalNavSectionTitle from '@/@layouts/components/VerticalNavSectionTitle.vue'
-import VerticalNavLayout from '@layouts/components/VerticalNavLayout.vue'
-import VerticalNavLink from '@layouts/components/VerticalNavLink.vue'
+import VerticalNavSectionTitle from "@/@layouts/components/VerticalNavSectionTitle.vue";
+import VerticalNavLayout from "@layouts/components/VerticalNavLayout.vue";
+import VerticalNavLink from "@layouts/components/VerticalNavLink.vue";
 
 // Components
-import Footer from '@/layouts/components/Footer.vue'
-import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
-import UserProfile from '@/layouts/components/UserProfile.vue'
+import Footer from "@/layouts/components/Footer.vue";
+import NavbarThemeSwitcher from "@/layouts/components/NavbarThemeSwitcher.vue";
+import UserProfile from "@/layouts/components/UserProfile.vue";
 
 // Banner
 </script>
@@ -17,18 +17,12 @@ import UserProfile from '@/layouts/components/UserProfile.vue'
     <template #navbar="{ toggleVerticalOverlayNavActive }">
       <div class="d-flex h-100 align-center">
         <!-- 👉 Vertical nav toggle in overlay mode -->
-        <IconBtn
-          class="ms-n3 d-lg-none"
-          @click="toggleVerticalOverlayNavActive(true)"
-        >
+        <IconBtn class="ms-n3 d-lg-none" @click="toggleVerticalOverlayNavActive(true)">
           <VIcon icon="mdi-menu" />
         </IconBtn>
 
         <!-- 👉 Search -->
-        <div
-          class="d-flex align-center cursor-pointer"
-          style="user-select: none;"
-        >
+        <div class="d-flex align-center cursor-pointer" style="user-select: none">
           <!-- 👉 Search Trigger button -->
           <IconBtn>
             <VIcon icon="mdi-magnify" />