| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- ModalWindow(
- :isVisible="isVisible"
- @update:isVisible="$emit('update:isVisible', $event)"
- :title="event.title"
- :contentClass="'max-w-4xl'"
- :showFooter="false"
- )
- template(#body)
- div(class="event-detail")
- div(class="grid grid-cols-1 lg:grid-cols-2 gap-8")
- div(class="event-visual")
- img(:src="event.image" :alt="event.title" class="w-full rounded-xl shadow-lg")
- div(class="event-stats grid grid-cols-3 gap-4 mt-4 text-center")
- div(class="stat p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
- div(class="stat-value text-xl font-bold text-accent") {{ event.availableTickets }}
- div(class="stat-label text-sm text-gray-600 dark:text-gray-400") Осталось билетов
- div(class="stat p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
- div(class="stat-value text-xl font-bold text-gray-800 dark:text-white") {{ event.duration }}
- div(class="stat-label text-sm text-gray-600 dark:text-gray-400") Продолжительность
- div(class="stat p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
- div(class="stat-value text-xl font-bold text-gray-800 dark:text-white") {{ event.ageRestriction }}
- div(class="stat-label text-sm text-gray-600 dark:text-gray-400") Возраст
-
- div(class="event-info")
- div(class="info-grid space-y-6")
- div(class="info-item flex items-start")
- div(class="icon mr-4 mt-1")
- svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
- path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z")
- div(class="content")
- div(class="label font-semibold text-gray-700 dark:text-gray-300") Дата и время
- div(class="value text-lg text-gray-800 dark:text-white") {{ formatDateTime(event.date, event.time) }}
-
- div(class="info-item flex items-start")
- div(class="icon mr-4 mt-1")
- svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
- path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z")
- div(class="content")
- div(class="label font-semibold text-gray-700 dark:text-gray-300") Место проведения
- div(class="value text-lg text-gray-800 dark:text-white") {{ event.venue }}
- div(class="text-sm text-gray-600 dark:text-gray-400") Концертный зал "Кохи Борбад"
-
- div(class="info-item flex items-start")
- div(class="icon mr-4 mt-1")
- svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
- path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10")
- div(class="content")
- div(class="label font-semibold text-gray-700 dark:text-gray-300") Категория
- div(class="value")
- span(
- :class="getCategoryBadgeClass(event.category)"
- class="inline-block px-3 py-1 text-sm font-medium rounded-full"
- ) {{ getCategoryLabel(event.category) }}
-
- div(class="info-item flex items-start")
- div(class="icon mr-4 mt-1")
- svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
- path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1")
- div(class="content")
- div(class="label font-semibold text-gray-700 dark:text-gray-300") Цена
- div(class="value text-3xl font-bold text-accent") {{ event.price }}
- span(class="text-lg font-normal text-gray-600 dark:text-gray-400") сомони
-
- div(class="info-item")
- div(class="label font-semibold text-gray-700 dark:text-gray-300 mb-2") Описание мероприятия
- div(class="value text-gray-600 dark:text-gray-400 leading-relaxed") {{ event.description }}
-
- div(class="action-buttons mt-8 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 flex-1"
- )
- 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="addToCalendar"
- class="border border-gray-300 text-gray-700 px-6 py-4 rounded-lg font-medium hover:bg-gray-50 transition-colors flex items-center justify-center flex-1 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
- )
- 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z")
- span В календарь
- template(#footer)
- div(class="flex justify-between items-center w-full")
- div(class="social-share flex space-x-2")
- button(
- @click="shareOnFacebook"
- class="p-3 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 transition-colors dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800"
- aria-label="Поделиться в Facebook"
- )
- svg(class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24")
- path(d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z")
- button(
- @click="shareOnTwitter"
- class="p-3 rounded-full bg-blue-400 text-white hover:bg-blue-500 transition-colors"
- aria-label="Поделиться в Twitter"
- )
- svg(class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24")
- path(d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z")
- div(class="close-section")
- button(
- @click="$emit('update:isVisible', false)"
- class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
- ) Закрыть
|
