You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
4.0 KiB
98 lines
4.0 KiB
<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>
|