modified: main_dc/BB/bbvue/src/views/Gallery.vue
change gallary and add photos from magnitogorsk
This commit is contained in:
@@ -7,11 +7,11 @@
|
|||||||
<p class="hero-subtitle">Запечатленные моменты тренировок, соревнований и дружеских встреч</p>
|
<p class="hero-subtitle">Запечатленные моменты тренировок, соревнований и дружеских встреч</p>
|
||||||
<div class="hero-stats">
|
<div class="hero-stats">
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="stat-number">24+</div>
|
<div class="stat-number">32+</div>
|
||||||
<div class="stat-label">Фотографий</div>
|
<div class="stat-label">Фотографий</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="stat-number">12+</div>
|
<div class="stat-number">15+</div>
|
||||||
<div class="stat-label">Мероприятий</div>
|
<div class="stat-label">Мероприятий</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
@@ -80,7 +80,6 @@
|
|||||||
<!-- Сетка фотографий -->
|
<!-- Сетка фотографий -->
|
||||||
<div class="gallery-grid">
|
<div class="gallery-grid">
|
||||||
<div v-for="(image, index) in filteredImages" :key="index" class="gallery-item" @click="openLightbox(index)">
|
<div v-for="(image, index) in filteredImages" :key="index" class="gallery-item" @click="openLightbox(index)">
|
||||||
<div>{{ getImageUrl(image.src) }}</div>
|
|
||||||
<img :src="getImageUrl(image.src)" :alt="image.alt" class="gallery-image" loading="lazy">
|
<img :src="getImageUrl(image.src)" :alt="image.alt" class="gallery-image" loading="lazy">
|
||||||
<div class="gallery-overlay">
|
<div class="gallery-overlay">
|
||||||
<div class="overlay-content">
|
<div class="overlay-content">
|
||||||
@@ -179,6 +178,13 @@ export default {
|
|||||||
description: 'Командное фото после успешного забега',
|
description: 'Командное фото после успешного забега',
|
||||||
date: 'Январь 2025'
|
date: 'Январь 2025'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
src: 'ivents/magnitogorsk_2025/bb1.jpg',
|
||||||
|
alt: 'Беговой клуб Бегущий Башкир в Магнитогорске 2025',
|
||||||
|
title: 'Магнитогорск 2025',
|
||||||
|
description: 'Участие в забеге в Магнитогорске',
|
||||||
|
date: 'Январь 2025'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
src: 'slider/slider1.jpg',
|
src: 'slider/slider1.jpg',
|
||||||
alt: 'Беговой клуб, общее фото',
|
alt: 'Беговой клуб, общее фото',
|
||||||
@@ -199,43 +205,48 @@ export default {
|
|||||||
title: 'Групповая тренировка',
|
title: 'Групповая тренировка',
|
||||||
description: 'Поддержка и мотивация в команде',
|
description: 'Поддержка и мотивация в команде',
|
||||||
date: 'Ноябрь 2024'
|
date: 'Ноябрь 2024'
|
||||||
},
|
|
||||||
{
|
|
||||||
src: 'slider/slider5.jpg',
|
|
||||||
alt: 'Беговой клуб, общее фото',
|
|
||||||
title: 'Соревнования',
|
|
||||||
description: 'Участие в городских забегах',
|
|
||||||
date: 'Ноябрь 2024'
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
allImages: [
|
allImages: [
|
||||||
// Первые 6 - это слайды, остальные - дополнительные фото
|
// Первые 6 - это слайды
|
||||||
{ src: 'slider/slider1.jpg', alt: 'Тренировка в парке', date: 'Декабрь 2024', category: 'training' },
|
{ src: 'ivents/magnitogorsk_2025/bb1.jpg', alt: 'Беговой клуб Бегущий Башкир в Магнитогорске 2025', date: 'Январь 2025', category: 'events', title: 'Магнитогорск 2025', description: 'Участие в забеге в Магнитогорске' },
|
||||||
{ src: 'slider/slider2.jpg', alt: 'Техника бега', date: 'Декабрь 2024', category: 'training' },
|
{ src: 'slider/slider24.jpg', alt: 'Беговой клуб Бегущий Башкир, РосХим Стерлитамак Забег 2025', date: 'Январь 2025', category: 'events', title: 'РосХим Стерлитамак 2025', description: 'Наши участники на крупном забеге' },
|
||||||
{ src: 'slider/slider4.jpg', alt: 'Групповая тренировка', date: 'Ноябрь 2024', category: 'training' },
|
{ src: 'slider/slider23.png', alt: 'Беговой клуб, общее фото УММ 2025', date: 'Январь 2025', category: 'events', title: 'Уфимский марафон 2025', description: 'Командное фото после успешного забега' },
|
||||||
{ src: 'slider/slider5.jpg', alt: 'Соревнования', date: 'Ноябрь 2024', category: 'events' },
|
{ src: 'slider/slider1.jpg', alt: 'Тренировка в парке', date: 'Декабрь 2024', category: 'training', title: 'Тренировка в парке', description: 'Регулярные занятия на свежем воздухе' },
|
||||||
{ src: 'slider/slider6.jpg', alt: 'Награждение', date: 'Ноябрь 2024', category: 'events' },
|
{ src: 'slider/slider2.jpg', alt: 'Техника бега', date: 'Декабрь 2024', category: 'training', title: 'Техника бега', description: 'Работа над правильной техникой' },
|
||||||
{ src: 'slider/slider7.jpg', alt: 'Командный дух', date: 'Октябрь 2024', category: 'community' },
|
{ src: 'slider/slider4.jpg', alt: 'Групповая тренировка', date: 'Ноябрь 2024', category: 'training', title: 'Групповая тренировка', description: 'Поддержка и мотивация в команде' },
|
||||||
{ src: 'slider/workout1.jpg', alt: 'Тренировка на набережной', date: 'Октябрь 2025', category: 'training' },
|
|
||||||
{ src: 'slider/workout2.jpg', alt: 'Тренировка на набережной', date: 'Октябрь 2025', category: 'training' },
|
// Остальные фото из папки magnitogorsk_2025
|
||||||
{ src: 'slider/workout3.jpg', alt: 'Тренировка на набережной', date: 'Октябрь 2025', category: 'training' },
|
{ src: 'ivents/magnitogorsk_2025/bb2.jpg', alt: 'Беговой клуб на забеге в Магнитогорске 2025', date: 'Январь 2025', category: 'events', title: 'Магнитогорск 2025', description: 'На старте забега' },
|
||||||
{ src: 'slider/slider8.jpg', alt: 'Вечерняя пробежка', date: 'Октябрь 2024', category: 'training' },
|
{ src: 'ivents/magnitogorsk_2025/bb3.jpg', alt: 'Участники бегового клуба в Магнитогорске', date: 'Январь 2025', category: 'events', title: 'Магнитогорск 2025', description: 'Подготовка к старту' },
|
||||||
{ src: 'slider/slider9.jpg', alt: 'Растяжка после бега', date: 'Октябрь 2024', category: 'training' },
|
{ src: 'ivents/magnitogorsk_2025/bb4.jpg', alt: 'Беговой клуб Магнитогорск 2025 забег', date: 'Январь 2025', category: 'events', title: 'Магнитогорск 2025', description: 'Во время забега' },
|
||||||
{ src: 'slider/slider10.jpg', alt: 'Общение после тренировки', date: 'Сентябрь 2024', category: 'community' },
|
{ src: 'ivents/magnitogorsk_2025/bb5.jpg', alt: 'Участники забега Магнитогорск 2025', date: 'Январь 2025', category: 'events', title: 'Магнитогорск 2025', description: 'Финишная прямая' },
|
||||||
{ src: 'slider/slider11.jpg', alt: 'Индивидуальные занятия', date: 'Сентябрь 2024', category: 'training' },
|
{ src: 'ivents/magnitogorsk_2025/bb6.jpg', alt: 'Бегущий Башкир в Магнитогорске 2025', date: 'Январь 2025', category: 'events', title: 'Магнитогорск 2025', description: 'Командный дух' },
|
||||||
{ src: 'slider/slider12.jpg', alt: 'Подготовка к старту', date: 'Сентябрь 2024', category: 'events' },
|
{ src: 'ivents/magnitogorsk_2025/bb7.jpg', alt: 'Забег в Магнитогорске 2025', date: 'Январь 2025', category: 'events', title: 'Магнитогорск 2025', description: 'Поздравления после финиша' },
|
||||||
{ src: 'slider/slider13.jpg', alt: 'Победа!', date: 'Август 2024', category: 'events' },
|
{ src: 'ivents/magnitogorsk_2025/bb8.jpg', alt: 'Беговой клуб на награждении Магнитогорск 2025', date: 'Январь 2025', category: 'events', title: 'Магнитогорск 2025', description: 'Церемония награждения' },
|
||||||
{ src: 'slider/slider14.jpg', alt: 'Трейл раннинг', date: 'Август 2024', category: 'training' },
|
|
||||||
{ src: 'slider/slider15.jpg', alt: 'Горные маршруты', date: 'Июль 2024', category: 'training' },
|
// Остальные существующие фото
|
||||||
{ src: 'slider/slider16.jpg', alt: 'Летние тренировки', date: 'Июль 2024', category: 'training' },
|
{ src: 'slider/slider5.jpg', alt: 'Соревнования', date: 'Ноябрь 2024', category: 'events', title: 'Соревнования', description: 'Участие в городских забегах' },
|
||||||
{ src: 'slider/slider17.jpg', alt: 'Восстановление', date: 'Июнь 2024', category: 'training' },
|
{ src: 'slider/slider6.jpg', alt: 'Награждение', date: 'Ноябрь 2024', category: 'events', title: 'Награждение', description: 'Церемония награждения победителей' },
|
||||||
{ src: 'slider/slider18.jpg', alt: 'Мастер-класс', date: 'Июнь 2024', category: 'events' },
|
{ src: 'slider/slider7.jpg', alt: 'Командный дух', date: 'Октябрь 2024', category: 'community', title: 'Командный дух', description: 'Поддержка и дружеская атмосфера' },
|
||||||
{ src: 'slider/slider19.jpg', alt: 'Новички клуба', date: 'Май 2024', category: 'community' },
|
{ src: 'slider/workout1.jpg', alt: 'Тренировка на набережной', date: 'Октябрь 2025', category: 'training', title: 'Тренировка на набережной', description: 'Занятия на свежем воздухе' },
|
||||||
{ src: 'slider/slider20.jpg', alt: 'Весенний забег', date: 'Май 2024', category: 'events' },
|
{ src: 'slider/workout2.jpg', alt: 'Тренировка на набережной', date: 'Октябрь 2025', category: 'training', title: 'Тренировка на набережной', description: 'Работа над выносливостью' },
|
||||||
{ src: 'slider/slider21.jpg', alt: 'Работа в группе', date: 'Апрель 2024', category: 'training' },
|
{ src: 'slider/workout3.jpg', alt: 'Тренировка на набережной', date: 'Октябрь 2025', category: 'training', title: 'Тренировка на набережной', description: 'Групповое занятие' },
|
||||||
{ src: 'slider/slider22.jpg', alt: 'Совместный отдых', date: 'Апрель 2024', category: 'community' },
|
{ src: 'slider/slider8.jpg', alt: 'Вечерняя пробежка', date: 'Октябрь 2024', category: 'training', title: 'Вечерняя пробежка', description: 'Тренировка в вечернее время' },
|
||||||
{ src: 'slider/slider23.png', alt: 'Уфимский марафон', date: 'Март 2024', category: 'events' },
|
{ src: 'slider/slider9.jpg', alt: 'Растяжка после бега', date: 'Октябрь 2024', category: 'training', title: 'Растяжка после бега', description: 'Восстановительные упражнения' },
|
||||||
{ src: 'slider/slider24.jpg', alt: 'РосХим Стерлитамак', date: 'Январь 2025', category: 'events' }
|
{ src: 'slider/slider10.jpg', alt: 'Общение после тренировки', date: 'Сентябрь 2024', category: 'community', title: 'Общение после тренировки', description: 'Дружеские встречи участников' },
|
||||||
|
{ src: 'slider/slider11.jpg', alt: 'Индивидуальные занятия', date: 'Сентябрь 2024', category: 'training', title: 'Индивидуальные занятия', description: 'Персональные тренировки с тренером' },
|
||||||
|
{ src: 'slider/slider12.jpg', alt: 'Подготовка к старту', date: 'Сентябрь 2024', category: 'events', title: 'Подготовка к старту', description: 'Настрой перед соревнованиями' },
|
||||||
|
{ src: 'slider/slider13.jpg', alt: 'Победа!', date: 'Август 2024', category: 'events', title: 'Победа!', description: 'Достижения наших участников' },
|
||||||
|
{ src: 'slider/slider14.jpg', alt: 'Трейл раннинг', date: 'Август 2024', category: 'training', title: 'Трейл раннинг', description: 'Тренировки по пересеченной местности' },
|
||||||
|
{ src: 'slider/slider15.jpg', alt: 'Горные маршруты', date: 'Июль 2024', category: 'training', title: 'Горные маршруты', description: 'Занятия в горной местности' },
|
||||||
|
{ src: 'slider/slider16.jpg', alt: 'Летние тренировки', date: 'Июль 2024', category: 'training', title: 'Летние тренировки', description: 'Тренировки в летний период' },
|
||||||
|
{ src: 'slider/slider17.jpg', alt: 'Восстановление', date: 'Июнь 2024', category: 'training', title: 'Восстановление', description: 'Процесс восстановления после нагрузок' },
|
||||||
|
{ src: 'slider/slider18.jpg', alt: 'Мастер-класс', date: 'Июнь 2024', category: 'events', title: 'Мастер-класс', description: 'Специальные обучающие занятия' },
|
||||||
|
{ src: 'slider/slider19.jpg', alt: 'Новички клуба', date: 'Май 2024', category: 'community', title: 'Новички клуба', description: 'Приветствие новых участников' },
|
||||||
|
{ src: 'slider/slider20.jpg', alt: 'Весенний забег', date: 'Май 2024', category: 'events', title: 'Весенний забег', description: 'Сезонные соревнования' },
|
||||||
|
{ src: 'slider/slider21.jpg', alt: 'Работа в группе', date: 'Апрель 2024', category: 'training', title: 'Работа в группе', description: 'Совместные тренировки' },
|
||||||
|
{ src: 'slider/slider22.jpg', alt: 'Совместный отдых', date: 'Апрель 2024', category: 'community', title: 'Совместный отдых', description: 'Встречи и общение участников' }
|
||||||
],
|
],
|
||||||
filters: [
|
filters: [
|
||||||
{ value: 'all', label: 'Все фото' },
|
{ value: 'all', label: 'Все фото' },
|
||||||
@@ -243,7 +254,10 @@ export default {
|
|||||||
{ value: 'events', label: 'Соревнования' },
|
{ value: 'events', label: 'Соревнования' },
|
||||||
{ value: 'community', label: 'Мероприятия' }
|
{ value: 'community', label: 'Мероприятия' }
|
||||||
],
|
],
|
||||||
slideInterval: null
|
slideInterval: null,
|
||||||
|
hasInteracted: false,
|
||||||
|
isContentVisible: false,
|
||||||
|
autoShowTimeout: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -274,10 +288,7 @@ export default {
|
|||||||
this.$emit('show-header')
|
this.$emit('show-header')
|
||||||
},
|
},
|
||||||
getImageUrl(path) {
|
getImageUrl(path) {
|
||||||
// В продакшене замените на правильный путь
|
|
||||||
const baseUrl = import.meta.env.BASE_URL
|
const baseUrl = import.meta.env.BASE_URL
|
||||||
// Путь от корня public/
|
|
||||||
console.log(`${baseUrl}images/${path}`)
|
|
||||||
return `${baseUrl}images/${path}`
|
return `${baseUrl}images/${path}`
|
||||||
},
|
},
|
||||||
nextSlide() {
|
nextSlide() {
|
||||||
|
|||||||
Reference in New Issue
Block a user