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.
106 lines
3.2 KiB
106 lines
3.2 KiB
<template>
|
|
<div
|
|
class="youMightLike tw-border tw-border-solid tw-border-neutrals-200 tw-h-auto tw-overflow-hidden tw-rounded-[24px] tw-mt-[20px]"
|
|
>
|
|
<a
|
|
:href="localePath(`/service/${item.id}`)"
|
|
class="tw-block tw-w-full xl:tw-overflow-hidden"
|
|
>
|
|
<lazyImg
|
|
:src="item.preview_image"
|
|
:customClass="'tw-h-[40vw] md:tw-h-[25vw] xl:tw-h-[10vw] swiper-lazy tw-rounded-t-[24px] tw-w-full tw-h-auto tw-transition tw-duration-200 tw-ease-in-out xl:hover:tw-scale-110'"
|
|
>
|
|
</lazyImg>
|
|
</a>
|
|
<div class="tw-px-[16px] tw-py-[10px]">
|
|
<div class="t14 tw-text-neutrals-600 tw-mb-[4px] tw-flex">
|
|
<div v-if="item.region">{{ regionNameList[item.region] }}</div>
|
|
<div v-if="item.region">・</div>
|
|
<div v-if="item.country">{{ countryNameList[item.country] }}</div>
|
|
</div>
|
|
<a :href="localePath(`/service/${item.id}`)">
|
|
<div
|
|
class="t14 tw-text-base-primary tw-mb-[10px] tw-h-[36px] tw-line-clamp-2 tw-text-ellipsis tw-overflow-hidden"
|
|
>
|
|
{{ 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]">
|
|
{{ item.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">
|
|
({{ item.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="t14 tw-flex tw-h-[21px] md:t16">
|
|
<!-- <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 + " " + item.payment_currency }}
|
|
<span class="tw-text-primary-2">up</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import lazyImg from "@/components/img/img.vue";
|
|
export default {
|
|
props: {
|
|
service: {
|
|
type: Object,
|
|
},
|
|
item: {
|
|
type: Object,
|
|
},
|
|
countryNameList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
cityNameList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
regionNameList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
},
|
|
components: {
|
|
lazyImg,
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
mounted() {},
|
|
methods: {},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.youMightLike {
|
|
-webkit-mask-image: -webkit-radial-gradient(white, black);
|
|
}
|
|
</style>
|