fix card

pages/categories/index.vue

@@ -172,7 +172,6 @@
                             item-text="name"
                             item-value="id"
                             label="Parent*"
-                            :rules="requiredRules"
                           >
                             <template #item="{item}">
                               <div :class="`category-${item.depth}`">
@@ -702,4 +701,10 @@ img {
   width: 100px;
   height: 150px;
 }
+.v-card:hover .v-card-actions {
+  display: block !important;
+}
+.v-card-actions {
+  display: none !important;
+}
 </style>

pages/home-page/categories/_id/index.vue

@@ -42,13 +42,11 @@
               link
             >
               <div>
-                <router-link :to="`/home-page/products/${item.id}`">
                 <v-img
                   :src="item.images[0]"
                   height="250px"
                   cover
                 />
-                </router-link>
               </div>
               <v-card-title class="d-flex justify-center" style="color: black">
                 {{ item.name }}
@@ -56,10 +54,11 @@
               <v-card-subtitle class="d-flex justify-center">
                 {{ item.price + "$" }}
               </v-card-subtitle>
-              <v-card-actions class="d-flex justify-center">
+              <v-card-actions class="d-flex justify-center card-actions">
                 <v-btn
                   :class="{ 'show-btns': hover }"
                   icon
+                  style="margin-left:8px"
                   @click="getDataItem"
                 >
                   <v-icon
@@ -312,4 +311,18 @@ export default {
 .v-btn > .v-btn__content .v-icon {
     color: rgba(255, 255, 255, 1);
 }
+.card-actions {
+  display: none !important;
+}
+.v-card:hover .card-actions {
+  display: flex !important;
+  flex-direction: column;
+  gap:5px;
+  top:0;
+  right:0;
+  position: absolute;
+}
+.card-actions > .v-btn {
+  background-color:#ffffff;
+}
 </style>