📱 Fix book cover not align in mobile

likecoin · Nov 4, 2024 · c39563b · c39563b
1 parent 89ce48c
commit c39563b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/components/NFTBook/Cover.vue b/src/components/NFTBook/Cover.vue
@@ -5,7 +5,7 @@
       class="w-full h-full"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 210 297"
-      :style="`color: ${placeholderColor}`"
+      :style="`max-width: ${resize}; color: ${placeholderColor}`"
     >
       <rect width="210" height="297" fill="currentColor" opacity="0.2" />
       <path
@@ -17,7 +17,7 @@
     <img
       v-if="!isError"
       ref="img"
-      :class="coverClass"
+      :class="[{ hidden: !isLoaded }, coverClass]"
       :src="resizedSrc"
       :alt="isLoaded ? alt : ''"
       @load="handleMediaLoad"

diff --git a/src/components/NFTBook/ItemCard.vue b/src/components/NFTBook/ItemCard.vue
@@ -92,7 +92,16 @@
             @show.once="fetchInfo"
           />
         </client-only>
-        <div class="flex flex-col items-center shrink-0 w-full max-w-[200px]">
+        <div
+          :class="[
+            'flex',
+            'flex-col',
+            'items-center',
+            'shrink-0',
+            'w-full',
+            'laptop:max-w-[200px]',
+          ]"
+        >
           <NFTCover
             v-if="videoSrc"
             :class="['mt-[-48px]', coverClasses]"