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.
48 lines
1.5 KiB
48 lines
1.5 KiB
<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) }} USD
|
|
</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>
|