From f9be38047194b91f7d2c1be8565cf6f987adef44 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 8 Apr 2024 14:41:15 +0800
Subject: [PATCH] fix(VideoCard): correct styling distortion when in horizontal
 mode

---
 src/components/VideoCard/VideoCard.vue | 48 ++++++++++++++------------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 8b80e2e7..4df0f7f8 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -168,31 +168,33 @@ function handleUndo() {
     <template v-if="removed">
       <div
         :style="{ contentVisibility }"
-        pos="absolute top-0 left-0" w-full aspect-video
-        rounded="$bew-radius"
+        w-full
+        pos="absolute top-0 left-0" aspect-video
       >
-        <img
-          :src="`${removeHttpFromUrl(cover)}@672w_378h_1c`" alt=""
-          w-full h-full object-cover pos="absolute top-0 left-0" aspect-video
-          z--1 rounded-inherit
-        >
-
-        <div
-          pos="absolute top-0 left-0" w-full h-full flex="~ col gap-2 items-center justify-center"
-          bg="$bew-fill-4" backdrop-blur-20px mix-blend-luminosity
-        >
-          <p mb-2 color-white text-lg>
-            {{ $t('home.video_removed') }}
-          </p>
-          <Button
-            color="rgba(255,255,255,.35)" text-color="white" size="small"
-            @click="handleUndo"
+        <div :w="wValue" h-fit relative>
+          <img
+            :src="`${removeHttpFromUrl(cover)}@672w_378h_1c`" alt=""
+            w-full h-fit object-cover pos="absolute top-0 left-0" aspect-video
+            z--1 rounded="$bew-radius"
           >
-            <template #left>
-              <Icon icon="mingcute:back-line" text-lg />
-            </template>
-            {{ $t('common.undo') }}
-          </Button>
+
+          <div
+            pos="absolute top-0 left-0" w-full h-fit aspect-video flex="~ col gap-2 items-center justify-center"
+            bg="$bew-fill-4" backdrop-blur-20px mix-blend-luminosity rounded="$bew-radius"
+          >
+            <p mb-2 color-white text-lg>
+              {{ $t('home.video_removed') }}
+            </p>
+            <Button
+              color="rgba(255,255,255,.35)" text-color="white" size="small"
+              @click="handleUndo"
+            >
+              <template #left>
+                <Icon icon="mingcute:back-line" text-lg />
+              </template>
+              {{ $t('common.undo') }}
+            </Button>
+          </div>
         </div>
       </div>
     </template>