修改userServiceItem : 將nuxt-link移到上層div裡，並新增hover效果，讓user知道可以點擊。

FrontEnd/components/home/headerInlineSearch.vue

@@ -375,7 +375,7 @@ export default {
       str = this.inputs;
       this.$emit('keyword-search', str, true)
       this.$router.push(this.localePath(`/${this.type}?q=${this.inputs}`));
-      this.inputs = '';
+      // this.inputs = '';
     },
   },
   computed: {

FrontEnd/components/user/userServiceItem.vue

@@ -2,13 +2,14 @@
   <div
     class="booking-info-item tw-p-[20px] tw-mb-[20px] tw-bg-white tw-rounded-[20px] xl:tw-p-[20px]"
   >
+  <nuxt-link :to="localePath('/user/booking/' + info.BookingNo)">
     <div
       class="tw-grid tw-grid-cols-[16%_82%] lg:tw-grid-cols-[13%_84%] tw-gap-x-2 lg:tw-gap-x-5"
     >
       <div>
-        <nuxt-link :to="localePath('/user/booking/' + info.BookingNo)"
-          ><img class="tw-w-[100px] tw-h-[75px] tw-rounded-[10px ]" :src="info.OnSiteService.Logo"
-        /></nuxt-link>
+          <img class="tw-w-[100px] tw-h-[75px] tw-rounded-[10px ]" :src="info.OnSiteService.Logo"/>
+        <!-- <nuxt-link :to="localePath('/user/booking/' + info.BookingNo)"> -->
+        <!-- </nuxt-link> -->
       </div>
       <div class="element content-text">
         <div class="tw-text-[18px] tw-font-medium tw-mb-[17px]">
@@ -53,9 +54,9 @@
           <span class="tw-text-[16px] tw-text-primary-1">
             ${{ formatTotal(info.TotalPrice) }}&nbsp;{{ info.Currency.CurrencyName }}
           </span>
-          <div class="tw-mt-[10px] tw-flex md:tw-mt-0">
+          <div class="btn tw-mt-[10px] tw-flex md:tw-mt-0">
             <button
-              @click="$emit('contact-us')"
+              @click.prevent="$emit('contact-us')"
               class="tw-transition tw-justify-center tw-items-center tw-btn-md tw-text-primary-1 tw-border tw-border-solid tw-border-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-xl hover:tw-bg-primary-3 tw-hidden md:tw-flex tw-w-fit tw-h-fit tw-mr-[10px]"
             >
               {{ $t("Contact Us") }}
@@ -66,7 +67,7 @@
                 mypaymentStatusMap(info.PaymentStatus) ===
                   'Unpaid'
               "
-              @click="$emit('upload-remittance-slip', info.BookingID)"
+              @click.prevent="$emit('upload-remittance-slip', info.BookingID)"
               class="tw-transition tw-justify-center tw-items-center tw-btn-md tw-text-white tw-bg-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-xl tw-w-fit tw-h-fit"
             >
               {{ $t("Upload Remittance Slip") }}
@@ -88,6 +89,7 @@
         </div>
       </div>
     </div>
+    </nuxt-link>
   </div>
 </template>
 <script>
@@ -162,4 +164,11 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .booking-info-item {
+    &:hover {
+      box-shadow: 10px 10px 10px rgba(155, 155, 155, 0.25);
+    }
+  }
+
+</style>