valitovgaziz
2941b14b38
- Moved contents of main_dc/yalarba/easySite/easySite/ up to easySite/ - Updated docker-compose.yml build context path - Deleted empty nested easySite/ directory
70 lines
1.7 KiB
Vue
70 lines
1.7 KiB
Vue
<template>
|
|
<div class="tour-card card">
|
|
<div class="relative">
|
|
<img
|
|
:src="tour.image"
|
|
:alt="tour.title"
|
|
class="tour-card__image"
|
|
>
|
|
<div class="tour-card__badge">
|
|
<span class="badge badge-primary">{{ tour.badge }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<h3 class="font-semibold text-lg mb-2">{{ tour.title }}</h3>
|
|
<p class="text-gray-600 mb-3">{{ tour.location }}</p>
|
|
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="rating-stars">
|
|
<span
|
|
v-for="star in 5"
|
|
:key="star"
|
|
class="rating-star"
|
|
:class="{ empty: star > Math.round(tour.rating) }"
|
|
>
|
|
★
|
|
</span>
|
|
<span class="rating-value">{{ tour.rating }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<span class="tour-card__price">{{ formatPrice(tour.discountPrice || tour.price) }}</span>
|
|
<span
|
|
v-if="tour.discountPrice"
|
|
class="tour-card__discount ml-2"
|
|
>
|
|
{{ formatPrice(tour.price) }}
|
|
</span>
|
|
</div>
|
|
<button class="btn btn-primary btn-sm">Подробнее</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Tour {
|
|
id: number
|
|
title: string
|
|
location: string
|
|
price: number
|
|
discountPrice: number | null
|
|
rating: number
|
|
image: string
|
|
badge: string
|
|
}
|
|
|
|
defineProps<{
|
|
tour: Tour
|
|
}>()
|
|
|
|
const formatPrice = (price: number) => {
|
|
return new Intl.NumberFormat('ru-RU', {
|
|
style: 'currency',
|
|
currency: 'RUB'
|
|
}).format(price)
|
|
}
|
|
</script> |