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.
90 lines
2.8 KiB
90 lines
2.8 KiB
<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>
|