modified: src/views/Gallery.vue

set base url

begushiybashkir/bbvue/src/views/Gallery.vue

@@ -28,18 +28,9 @@
         <h2 class="section-title">Лучшие моменты</h2>
         <div class="slider-container">
           <div class="slider" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
-            <div 
+            <div v-for="(slide, index) in slides" :key="index" class="slide"
-              v-for="(slide, index) in slides" 
+              :class="{ 'active': currentSlide === index }">
-              :key="index"
+              <img :src="getImageUrl(slide.src)" :alt="slide.alt" class="slide-image" @load="imageLoaded(index)">
-              class="slide"
-              :class="{ 'active': currentSlide === index }"
-            >
-              <img 
-                :src="getImageUrl(slide.src)" 
-                :alt="slide.alt"
-                class="slide-image"
-                @load="imageLoaded(index)"
-              >
               <div class="slide-overlay">
                 <div class="slide-content">
                   <h3>{{ slide.title }}</h3>
@@ -60,13 +51,9 @@
 
           <!-- Индикаторы -->
           <div class="slider-indicators">
-            <button 
+            <button v-for="(slide, index) in slides" :key="index"
-              v-for="(slide, index) in slides" 
+              :class="['indicator', { 'active': currentSlide === index }]" @click="goToSlide(index)"
-              :key="index"
+              :aria-label="`Перейти к фото ${index + 1}`"></button>
-              :class="['indicator', { 'active': currentSlide === index }]"
-              @click="goToSlide(index)"
-              :aria-label="`Перейти к фото ${index + 1}`"
-            ></button>
           </div>
 
           <!-- Счетчик -->
@@ -81,34 +68,20 @@
     <section class="gallery-section">
       <div class="container">
         <h2 class="section-title">Все фотографии</h2>
-        
+
         <!-- Фильтры -->
         <div class="gallery-filters">
-          <button 
+          <button v-for="filter in filters" :key="filter.value"
-            v-for="filter in filters" 
+            :class="['filter-btn', { 'active': activeFilter === filter.value }]" @click="setFilter(filter.value)">
-            :key="filter.value"
-            :class="['filter-btn', { 'active': activeFilter === filter.value }]"
-            @click="setFilter(filter.value)"
-          >
             {{ filter.label }}
           </button>
         </div>
 
         <!-- Сетка фотографий -->
         <div class="gallery-grid">
-          <div 
+          <div v-for="(image, index) in filteredImages" :key="index" class="gallery-item" @click="openLightbox(index)">
-            v-for="(image, index) in filteredImages" 
-            :key="index"
-            class="gallery-item"
-            @click="openLightbox(index)"
-          >
             <div>{{ getImageUrl(image.src) }}</div>
-            <img 
+            <img :src="getImageUrl(image.src)" :alt="image.alt" class="gallery-image" loading="lazy">
-              :src="getImageUrl(image.src)" 
-              :alt="image.alt"
-              class="gallery-image"
-              loading="lazy"
-            >
             <div class="gallery-overlay">
               <div class="overlay-content">
                 <span class="image-date">{{ image.date }}</span>
@@ -138,13 +111,9 @@
         <button class="lightbox-nav prev" @click="prevLightbox" aria-label="Предыдущее фото">
           ‹
         </button>
-        
+
         <div class="lightbox-image-container">
-          <img 
+          <img :src="getImageUrl(currentLightboxImage.src)" :alt="currentLightboxImage.alt" class="lightbox-image">
-            :src="getImageUrl(currentLightboxImage.src)" 
-            :alt="currentLightboxImage.alt"
-            class="lightbox-image"
-          >
           <div class="lightbox-info">
             <h3>{{ currentLightboxImage.title }}</h3>
             <p>{{ currentLightboxImage.description }}</p>
@@ -280,11 +249,11 @@ export default {
   computed: {
     filteredImages() {
       let filtered = this.allImages
-      
+
       if (this.activeFilter !== 'all') {
         filtered = filtered.filter(image => image.category === this.activeFilter)
       }
-      
+
       return filtered.slice(0, this.visibleImages)
     },
     currentLightboxImage() {
@@ -294,7 +263,8 @@ export default {
   methods: {
     getImageUrl(path) {
       // В продакшене замените на правильный путь
-      return `../src/assets/images/${path}`
+      const baseUrl = import.meta.env.BASE_URL
+      return baseUrl + `src/assets/images/${path}`
     },
     nextSlide() {
       this.currentSlide = (this.currentSlide + 1) % this.slides.length
@@ -343,8 +313,8 @@ export default {
     },
     handleKeydown(event) {
       if (!this.lightboxActive) return
-      
+
-      switch(event.key) {
+      switch (event.key) {
         case 'Escape':
           this.closeLightbox()
           break
@@ -894,46 +864,46 @@ export default {
   .hero-title {
     font-size: 2.2rem;
   }
-  
+
   .hero-stats {
     gap: 2rem;
   }
-  
+
   .stat-number {
     font-size: 2rem;
   }
-  
+
   .slider {
     height: 300px;
   }
-  
+
   .slider-nav {
     width: 40px;
     height: 40px;
     font-size: 1.2rem;
   }
-  
+
   .gallery-grid {
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 1rem;
   }
-  
+
   .cta-buttons {
     flex-direction: column;
     align-items: center;
   }
-  
+
   .btn {
     width: 100%;
     max-width: 300px;
   }
-  
+
   .lightbox-nav {
     width: 50px;
     height: 50px;
     font-size: 1.5rem;
   }
-  
+
   .lightbox-content {
     padding: 1rem;
   }
@@ -943,29 +913,29 @@ export default {
   .hero-section {
     padding: 60px 0 40px;
   }
-  
+
   .hero-title {
     font-size: 1.8rem;
   }
-  
+
   .section-title {
     font-size: 2rem;
   }
-  
+
   .gallery-grid {
     grid-template-columns: 1fr;
   }
-  
+
   .gallery-filters {
     flex-direction: column;
     align-items: center;
   }
-  
+
   .filter-btn {
     width: 100%;
     max-width: 200px;
   }
-  
+
   .cta-features {
     flex-direction: column;
     gap: 1rem;
@@ -978,6 +948,7 @@ export default {
     opacity: 0;
     transform: translateY(20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);