| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- section(class="min-h-screen bg-gray-50 dark:bg-gray-900 py-8")
- div(class="container mx-auto px-4")
- div(v-if="loading" class="text-center")
- div(class="animate-spin rounded-full h-12 w-12 border-b-2 border-accent mx-auto")
- p(class="text-gray-600 dark:text-gray-400 mt-4") Загрузка мероприятия...
-
- div(v-else-if="event" class="max-w-4xl mx-auto")
- div(class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden")
- div(class="relative")
- img(:src="event.image" :alt="event.title" class="w-full h-64 md:h-80 object-cover")
- div(class="absolute top-4 right-4")
- span(
- :class="getCategoryBadgeClass(event.category)"
- class="px-3 py-1 rounded-full text-xs font-bold text-white"
- ) {{ getCategoryLabel(event.category) }}
-
- div(class="p-8")
- div(class="flex flex-col md:flex-row md:justify-between md:items-start mb-6")
- div(class="mb-4 md:mb-0")
- h1(class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-2") {{ event.title }}
- p(class="text-xl text-accent font-semibold") {{ event.price }} сомони
-
- div(class="text-right")
- p(class="text-lg font-semibold text-gray-800 dark:text-white") {{ formatDateTime(event.date, event.time) }}
- p(class="text-gray-600 dark:text-gray-400") {{ event.venue }}
-
- div(class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8")
- div(class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
- div(class="text-2xl font-bold text-accent mb-1") {{ event.availableTickets }}
- div(class="text-sm text-gray-600 dark:text-gray-400") Осталось билетов
-
- div(class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
- div(class="text-xl font-bold text-gray-800 dark:text-white mb-1") {{ event.duration }}
- div(class="text-sm text-gray-600 dark:text-gray-400") Продолжительность
-
- div(class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
- div(class="text-xl font-bold text-gray-800 dark:text-white mb-1") {{ event.ageRestriction }}
- div(class="text-sm text-gray-600 dark:text-gray-400") Возраст
-
- div(class="prose prose-lg dark:prose-invert max-w-none mb-8")
- p(class="text-gray-700 dark:text-gray-300 leading-relaxed") {{ event.description }}
-
- div(class="flex flex-col sm:flex-row gap-4")
- button(
- @click="bookTickets"
- class="bg-accent text-white px-8 py-4 rounded-lg font-medium hover:bg-yellow-600 transition-colors flex items-center justify-center"
- )
- svg(class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24")
- path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z")
- span Купить билеты
-
- button(
- @click="$router.back()"
- class="border border-gray-300 text-gray-700 px-6 py-4 rounded-lg font-medium hover:bg-gray-50 transition-colors dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
- ) Назад к мероприятиям
-
- div(v-else class="text-center")
- div(class="empty-icon mx-auto mb-4")
- svg(class="w-24 h-24 text-gray-400 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24")
- path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z")
- h3(class="text-xl font-bold text-gray-600 dark:text-gray-400 mb-2") Мероприятие не найдено
- p(class="text-gray-500 dark:text-gray-500 mb-6") Запрошенное мероприятие не существует или было удалено
- app-link(
- to="/events"
- class="bg-accent text-white px-6 py-2 rounded-lg hover:bg-yellow-600 transition-colors inline-block"
- ) Вернуться к мероприятиям
|
