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.
153 lines
4.7 KiB
153 lines
4.7 KiB
<template>
|
|
<div
|
|
class="card tw-bg-white tw-rounded-[25px] md:tw-rounded-[30px] tw-border tw-border-solid tw-border-neutrals-200 tw-relative tw-shadow-[0px_1px_1px_0px_rgba(0,0,0,0.03)] tw-shadow-neutral-200"
|
|
>
|
|
<div class="tw-absolute like tw-w-[20px] tw-h-[18px]">
|
|
<!-- <like
|
|
:like="service.liked"
|
|
:serviceId="service.id"
|
|
:isForUserprofile="service.isUserProfile"
|
|
@remove-relation="$emit('remove-relation')"
|
|
></like> -->
|
|
</div>
|
|
<div
|
|
class="tw-grid tw-grid-cols-1 md:tw-grid-cols-[35%_65%] xl:tw-grid-cols-[264px_auto]"
|
|
>
|
|
<a
|
|
:href="localePath(`/service/${service.id}`)"
|
|
target="_blank"
|
|
class="tw-w-full tw-h-auto tw-overflow-hidden tw-mb-[10px] tw-rounded-t-[25px] md:tw-mb-0 md:tw-rounded-bl-[25px] md:tw-rounded-tr-none md:tw-h-[25vw] xl:tw-h-[198px]"
|
|
>
|
|
<img
|
|
:src="service.preview_image"
|
|
class="tw-w-full tw-h-[64vw] tw-transition tw-duration-200 tw-ease-in-out md:tw-h-[25vw] xl:tw-w-[264px] xl:tw-h-[198px] xl:hover:tw-scale-110"
|
|
/>
|
|
</a>
|
|
<div class="tw-px-4 tw-pb-[9px] md:tw-px-5 md:tw-py-[10px]">
|
|
<div
|
|
class="tw-body-4 tw-text-[#757575] tw-flex tw-items-center tw-mb-1 md:tw-pt-[10px] md:tw-pb-[5px]"
|
|
>
|
|
<nuxt-link
|
|
:to="localePath(`/service?country=${service.country}`)"
|
|
class="tw-text-neutrals-600"
|
|
>
|
|
<span>{{ service.countryName }}</span>
|
|
</nuxt-link>
|
|
<div
|
|
v-if="service.city"
|
|
class="circle-decoration-location tw-bg-[#757575] tw-h-1 tw-w-1 tw-mx-[6px]"
|
|
></div>
|
|
<nuxt-link
|
|
:to="localePath(`/service?city=${service.city}`)"
|
|
class="tw-text-neutrals-600"
|
|
>
|
|
<span>{{ service.cityName }}</span>
|
|
</nuxt-link>
|
|
</div>
|
|
<a :href="localePath(`/service/${service.id}`)" target="_blank">
|
|
<h2
|
|
class="tw-body-4 md:tw-body-3 lg:tw-body-2 tw-text-black tw-font-bold tw-mb-[10px] md:tw-mt-[7px]"
|
|
>
|
|
{{ service.name }}
|
|
</h2>
|
|
</a>
|
|
<div
|
|
v-if="service.category"
|
|
class="tw-mb-[10px] tw-bg-neutrals-100 tw-rounded-[10px] tw-w-fit tw-px-[10px] tw-py-1 tw-text-hint tw-body-4 tw-font-normal"
|
|
>
|
|
{{ service.categoryName }}
|
|
</div>
|
|
<div class="tw-flex tw-justify-start tw-items-center tw-mb-[10px]">
|
|
<span v-if="service.rating" class="tw-body-3 tw-text-primary-1">{{
|
|
service.rating || 0
|
|
}}</span>
|
|
<img
|
|
v-if="service.rating"
|
|
class="tw-mr-[6px]"
|
|
src="~/assets/svg/reviewStar.svg"
|
|
alt=""
|
|
/>
|
|
<span v-if="service.reviews" class="tw-text-[#757575]">{{
|
|
`(${service.reviews || 0}reviews)`
|
|
}}</span>
|
|
</div>
|
|
<div class="tw-flex tw-justify-end">
|
|
<div
|
|
:class="[
|
|
'tw-mb-[8px]',
|
|
'tw-text-right',
|
|
'tw-bg-primary-1',
|
|
'tw-text-white',
|
|
'tw-text-size-[12px]',
|
|
'tw-w-fit',
|
|
'tw-rounded-[10px]',
|
|
'tw-py-[4px]',
|
|
'tw-px-[10px]',
|
|
'tw-text-right',
|
|
]"
|
|
>
|
|
10% OFF
|
|
</div>
|
|
</div>
|
|
<div class="tw-flex tw-justify-end md:tw-py-2">
|
|
<div
|
|
class="tw-body-3 tw-text-right tw-text-base-hint tw-line-through md:tw-body-2"
|
|
>
|
|
${{ formatTotal(40500) }}
|
|
</div>
|
|
<div
|
|
class="tw-body-3 tw-font-bold tw-text-primary-1 tw-ml-[8px] md:tw-body-2"
|
|
>
|
|
${{ formatTotal(service.price) }} {{
|
|
service.payment_currency === "TWD" ? $t("TWD") : $t("USD")
|
|
}}
|
|
<span
|
|
class="tw-body-3 tw-text-primary-2 tw-font-bold md:tw-body-2"
|
|
>{{ $t("up") }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import like from "@/components/newComponent/like/like.vue";
|
|
export default {
|
|
props: {
|
|
service: {
|
|
type: Object,
|
|
},
|
|
},
|
|
components: {
|
|
like,
|
|
},
|
|
computed: {
|
|
formatTotal() {
|
|
return function (total) {
|
|
if (typeof total === "String") {
|
|
const totalNumber = parseInt(total);
|
|
return totalNumber.toLocaleString("en-US");
|
|
} else {
|
|
return total.toLocaleString("en-US");
|
|
}
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.card {
|
|
-webkit-mask-image: -webkit-radial-gradient(white, black);
|
|
}
|
|
|
|
.like {
|
|
left: 25px;
|
|
top: 25px;
|
|
|
|
@media screen and (min-width: 768px) {
|
|
left: initial;
|
|
right: 25px;
|
|
}
|
|
}
|
|
</style>
|