ShowEasyFrontEnd/FrontEnd/components/user/userMightLikeCard.vue

<template>
  <div>
    <div class="tw-bg-white tw-w-[340px] tw-rounded-[25px] tw-relative">
      <img class="tw-absolute tw-right-5 tw-top-5" src="~/assets/svg/heart-outline.svg" alt="">
      <div class="tw-mb-[10px]">
        <img class="tw-w-full tw-rounded-t-[25px] tw-h-[196px]" src="~/assets/img/serviceExample.png" alt="">
      </div>
      <div class="tw-px-4 tw-pb-[9px]">
        <div class="tw-body-4 tw-text-neutrals-300 tw-flex tw-align-middle tw-mb-1">
          {{ service.country }} * {{ service.city }}
        </div>
        <div class="tw-body-4 tw-text-neutrals-600 tw-font-medium tw-mb-[6px]">
          {{ service.title }}
        </div>
        <div class="tw-body-3 tw-text-right tw-text-neutrals-300 tw-line-through">
          ${{ formatTotal(service.total) }}
        </div>
        <div class="tw-flex tw-justify-between">
          <div>
            <span class="tw-body-4 tw-text-primary-1">{{ service.rating }}</span>
            <img class="tw-mr-[6px]" src="~/assets/svg/reviewStar.svg" alt="">
            <span>{{ `(${service.reviews} ` }}reviews)</span>
          </div>
          <div class="tw-body-3 tw-text-primary-1">
            ${{ formatTotal(service.total) }}&nbsp;NTD
          </div>
        </div>
      </div>
    </div>    
  </div>
</template>
<script>
  export default {
    props: {
      service: {
        type:Object
      }
    },
    computed: {
      formatTotal() {
        return function(total) {
          return total.toLocaleString('en-US')
        }
      }
    }
  };
</script>
<style lang="scss" scoped></style>