ShowEasyFrontEnd/FrontEnd/components/service/content/youMightLikeCard.vue

<template>
  <div
    class="youMightLike tw-border tw-border-solid tw-border-neutrals-200 tw-h-auto tw-rounded-[24px] tw-mt-[20px]"
  >
    <a
      :href="localePath(`/service/${item.service_id}`)"
      class="tw-block tw-w-full xl:tw-h-[216px] xl:tw-overflow-hidden"
      ><img
        :src="item.preview_image"
        class="tw-rounded-t-[24px] tw-w-full tw-h-[50vw] tw-transition tw-duration-200 tw-ease-in-out md:tw-h-[28vw] xl:tw-h-[216px] xl:hover:tw-scale-110"
    /></a>
    <div class="tw-px-[16px] tw-py-[10px] tw-bg-white tw-rounded-[24px]">
      <div class="tw-body-4 tw-text-neutrals-600 tw-mb-[4px]">
        {{ item.regionName }}・{{ item.countryName }}
      </div>
      <a :href="localePath(`/service/${item.service_id}`)">
        <div
          class="t16 tw-text-base-primary tw-mb-[10px] tw-h-[42px] tw-overflow-ellipsis tw-overflow-clip"
        >
          {{ 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]">
            {{ service.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">
            ({{ service.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="t16 tw-flex tw-h-[21px]">
            <!-- <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 }} {{ currency }}
              <span class="tw-text-primary-2">up</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      countrycode: [],
      regionName: [],
    };
  },
  props: {
    service: {
      type: Object,
    },
    item: {
      type: Object,
    },
  },
  computed: {
    currency() {
      return this.$store.getters.getCurrency;
    },
  },
};
</script>
<style lang="scss" scoped>
.youMightLike {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
</style>