ShowEasyFrontEnd/FrontEnd/components/service/RelatedServicesCard.vue

<template>
  <div
    class="RelatedServices tw-bg-neutrals-0 tw-rounded-[16px] tw-px-[10px] tw-pt-[12px] tw-pb-[22px] md:tw-pb-[12px] md:tw-px-[20px]">
    <div
      class="tw-grid tw-grid-cols-[80px_auto] tw-gap-[10px] tw-items-start md:tw-grid-cols-[148px_auto] md:tw-gap-[20px]">
      <nuxt-link :to="localePath('/service/'+relatedservice.id)" target="_blank">
        <img :src="relatedservice.preview_image"
          class="tw-rounded-[10px] tw-h-[60px] tw-w-full md:tw-mr-[20px] md:tw-h-[111px]" alt="" /></nuxt-link>

      <div class="md:tw-my-[4px] xl:tw-grid xl:tw-grid-cols-[444px_150px]">
        <div>
          <div class="tw-body-5 tw-text-neutrals-600 tw-font-normal tw-mb-[6px] md:tw-body-4">
            {{ relatedservice.category }}
          </div>
          <div class="tw-body-5 tw-text-base-primary tw-font-normal tw-mb-[6px] tw-h-[36px] md:t16 md:tw-h-[42px]">
            {{ relatedservice.name }}
          </div>
          <!-- <div
            class="tw-hidden xl:tw-block xl:tw-body-5 xl:tw-text-base-primary xl:tw-h-[32px] xl:tw-overflow-ellipsis xl:tw-overflow-hidden"
          >
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia
            officiis dolorem error ex dignissimos minima iure a distinctio culpa
            fugiat, ipsam inventore illo. Aut optio numquam fugiat ipsam
            reprehenderit vero.
          </div> -->
        </div>
        <div class="md:tw-grid md:tw-grid-cols-[auto_auto] md:tw-items-center xl:tw-grid-cols-1">
          <div
            class="md:tw-grid md:tw-grid-cols-[21px_auto] md:tw-items-center md:tw-gap-[12px] xl:tw-flex xl:tw-flex-col xl:tw-items-start xl:tw-mb-[10px]">
            <like class="tw-hidden md:tw-block md:tw-mr-[12px] md:tw-w-full xl:tw-w-[21px]"></like>
            <div class="tw-body-5 tw-text-base-primary tw-font-medium tw-mb-[10px] md:tw-text-[16px] md:tw-mb-0">
              ${{ relatedservice.price }} {{ relatedservice.payment_currency }} up
            </div>
          </div>

          <div
            class="tw-grid tw-grid-cols-[24px_auto] tw-gap-[10px] tw-items-center md:tw-flex md:tw-justify-end md:tw-items-center md:tw-grid-cols-none  xl:tw-justify-start">
            <like class="md:tw-hidden"></like>
            <nuxt-link :to="localePath('/service/'+relatedservice.id)"  target="_blank">
              <button
                class="tw-bg-primary-1 tw-w-full tw-text-white tw-body-4 tw-rounded-[12px] tw-py-[9px] tw-whitespace-nowrap md:tw-w-fit md:tw-px-[16px] md:tw-text-[16px] md:tw-justify-end">
                {{$t('More details')}}
              </button>
            </nuxt-link>
          </div>
        </div>

        <!-- <div
          class="tw-grid tw-grid-cols-[auto_24px_auto] tw-items-center md:tw-grid-col-[24px_348px_auto] xl:tw-mt-[-53px]"
        >
          <div
            class="md:tw-flex md:tw-flex-row-reverse md:tw-items-center md:tw-justify-end xl:tw-flex-col-reverse xl:tw-items-start"
          >
            <div
              class="tw-body-5 tw-text-base-primary tw-font-medium tw-mb-[10px] tw-col-span-2 md:t16 md:tw-mb-0 xl:tw-mt-[8px]"
            >
              ${{ relatedservice.price }} USD up
            </div>

            <like
              class="tw-mr-[12px] tw-mt-[3px] md:tw-w-[21px] tw-inline-block"
            ></like>
          </div>

          <button
            class="tw-bg-primary-1 tw-text-white tw-body-4 tw-rounded-[12px] tw-px-[60px] tw-py-[9px] tw-ml-[35px] tw-mt-[35px] tw-whitespace-nowrap tw-absolute hover:tw-bg-primary-light md:t16 md:tw-px-[16px] md:tw-mt-0 md:tw-ml-[400px] xl:tw-ml-0 xl:tw-mt-[117px]"
          >
            Book Now
          </button>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import like from "@/components/newComponent/like/like.vue";
export default {
  data() {
    return {
      categoryname: "",
    };
  },
  components: {
    like,
  },
  props: {
    relatedservice: {
      type: Object,
    },
    getservicecategory: {
      type: Array,
    },
  },
};
</script>
<style lang="scss" scoped>

</style>