From 3cddf1ce18e03cb673d8956bf3bb0db4a5cb711f Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 2 Jul 2024 04:33:44 +0000
Subject: [PATCH] fix: product service card img

---
 .../TotalProductCardComponent.vue             | 50 +++++++++----------
 1 file changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 1530cb18..b8dde5e3 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -190,35 +190,31 @@ withDefaults(
         </div>
       </div>
 
-      <div
+      <q-img
         class="col rounded q-my-md items-center justify-center flex"
-        :class="[
-          data?.type === 'product' ? 'card__green' : 'card__orange',
-          $q.dark.isActive ? 'dark' : '',
-        ]"
-        style="overflow: hidden"
+        style="background-color: transparent"
+        loading="lazy"
+        :src="`${baseUrl}/${data?.type === 'service' ? 'service' : 'product'}/${data?.id}/image`"
       >
-        <q-img
-          loading="lazy"
-          :src="`${baseUrl}/${data?.type === 'service' ? 'service' : 'product'}/${data?.id}/image`"
-        >
-          <template #error>
-            <div
-              class="full-width items-center justify-center flex"
-              style="background-color: transparent"
-            >
-              <q-img
-                :src="
-                  data?.type === 'product'
-                    ? '/shop-image.png'
-                    : '/service-image.png'
-                "
-                width="5rem"
-              />
-            </div>
-          </template>
-        </q-img>
-      </div>
+        <template #error>
+          <div
+            class="full-width full-height items-center justify-center flex"
+            :class="{
+              card__green: data?.type === 'product',
+              card__orange: data?.type === 'service',
+            }"
+          >
+            <q-img
+              :src="
+                data?.type === 'product'
+                  ? '/shop-image.png'
+                  : '/service-image.png'
+              "
+              width="5rem"
+            />
+          </div>
+        </template>
+      </q-img>
 
       <div class="row justify-between items-center q-mb-xs">
         <div class="q-pr-md" v-if="data?.type === 'service'">