ShowEasyFrontEnd/FrontEnd/components/home/TrendingServiceCard.vue

<template>
  <div
    class="youMightLike tw-border tw-border-solid tw-border-neutrals-200 tw-h-auto tw-overflow-hidden tw-rounded-[24px] tw-mt-[20px]"
  >
    <a
      :href="localePath(`/service/${item.id}`)"
      class="tw-block tw-w-full xl:tw-overflow-hidden"
    >
      <lazyImg
        :src="item.preview_image"
        :customClass="'tw-h-[40vw] md:tw-h-[25vw] xl:tw-h-[10vw] swiper-lazy tw-rounded-t-[24px] tw-w-full tw-h-auto tw-transition tw-duration-200 tw-ease-in-out  xl:hover:tw-scale-110'"
      >
      </lazyImg>
    </a>
    <div class="tw-px-[16px] tw-py-[10px]">
      <div class="t14 tw-text-neutrals-600 tw-mb-[4px] tw-flex">
        <div v-if="item.region">{{ regionNameList[item.region] }}</div>
        <div v-if="item.region">・</div>
        <div v-if="item.country">{{ countryNameList[item.country] }}</div>
      </div>
      <a :href="localePath(`/service/${item.id}`)">
        <div
          class="t14 tw-text-base-primary tw-mb-[10px] tw-h-[36px] tw-line-clamp-2 tw-text-ellipsis tw-overflow-hidden"
        >
          {{ item.name }}
        </div>
      </a>
      <div class="tw-min-h-[50px] tw-relative">
        <div
          class="t12 tw-text-neutrals-800 tw-bg-[#f6f6f6] tw-rounded-[10px] tw-inline-block tw-px-[10px] tw-py-[5px] tw-mb-[10px] tw-h-[26px]">
          {{ item.subcategory }}
        </div> 
        <div class="tw-flex tw-items-center tw-mb-[8px] tw-h-[18px]">
          <div class="tw-body-4 tw-text-primary-1 tw-mr-[4px]">
            {{ item.rating }}
          </div>
          <img
            src="~/assets/svg/star.svg"
            class="tw-h-[12px] tw-w-[12px] tw-mr-[7px]"
          />
          <div class="tw-body-4 tw-text-neutrals-600">
            ({{ item.reviews }} reviews)
          </div>
        </div>

        <div
          class="tw-flex tw-flex-col tw-items-end tw-absolute tw-bottom-0 tw-right-0"
        >
          <!-- <div
            class="t12 tw-bg-primary-1 tw-text-neutrals-100 tw-inline-block tw-rounded-[8px] tw-mb-[8px] tw-px-[10px] tw-py-[4px] tw-h-[24px]">
            {{ service.discount }}% OFF
          </div> -->
          <div class="t14 tw-flex tw-h-[21px] md:t16">
            <!-- <div
              class="tw-text-neutrals-400 tw-inline-block tw-line-through tw-mr-[8px]"
            >
              ${{ service.total }}
            </div> -->
            <div class="tw-text-primary-1">
              ${{ item.price + " " + item.payment_currency }}
              <span class="tw-text-primary-2">up</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import lazyImg from "@/components/img/img.vue";
export default {
  props: {
    service: {
      type: Object,
    },
    item: {
      type: Object,
    },
    countryNameList: {
      type: Array,
      default: () => []
    },
    cityNameList: {
      type: Array,
      default: () => []
    },
    regionNameList: {
      type: Array,
      default: () => []
    },
  },
  components: {
    lazyImg,
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.youMightLike {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
</style>