init

components/Gallery.vue

@@ -1,10 +1,12 @@
 <template>
+  <!--  Mobile -->
   <div v-if="isMobile" class="gallery-mobile">
     <Swiper
       :pagination="true"
       :loop="true"
       :modules="modules"
       class="mySwiper gallery-mobile__swiper"
+      @double-click="openAllImages = true"
     >
       <SwiperSlide
         v-for="image in smallImages"
@@ -15,9 +17,14 @@
     </Swiper>
   </div>
 
+  <!--  Desktop -->
   <div v-else class="gallery-desktop">
     <div class="gallery-desktop__main">
-      <img :src="previewImage?.src" :alt="previewImage?.src">
+      <img
+        :src="previewImage?.src"
+        :alt="previewImage?.src"
+        @click="openAllImages = true"
+      >
     </div>
 
     <div class="gallery-desktop__side">
@@ -25,15 +32,34 @@
         v-for="img in smallImages"
         :key="img?.src"
         class="gallery-desktop__small"
+        @click="openAllImages = true"
       >
         <img :src="img?.src" :alt="img?.src">
       </div>
 
-      <UButton size="xl" class="gallery-desktop__button">
+      <UButton
+        size="xl"
+        class="gallery-desktop__button"
+        @click="openAllImages = true"
+      >
         ⋮⋮ Показать все фото
       </UButton>
     </div>
   </div>
+
+  <!--  Mobile Desktop -->
+  <UModal v-model:open="openAllImages" fullscreen title="Просмотр всей галереи">
+    <template #body>
+      <div class="gallery-modal">
+        <div
+          v-for="img in images"
+          :key="img?.src"
+        >
+          <img class="w-full object-cover" :src="img?.src" :alt="img?.src">
+        </div>
+      </div>
+    </template>
+  </UModal>
 </template>
 
 <script setup lang="ts">
@@ -49,6 +75,7 @@ const props = defineProps<{
 }>()
 
 const modules = [Pagination]
+const openAllImages = ref(false)
 
 const isMobile = useMediaQuery('(max-width: 1024px)')
 const smallImages = computed(() => props?.images?.slice(1, 5))
@@ -101,4 +128,14 @@ const smallImages = computed(() => props?.images?.slice(1, 5))
     cursor: pointer;
   }
 }
+
+.gallery-modal {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+
+  @include mobile {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+}
 </style>

components/MapView.vue

@@ -0,0 +1,91 @@
+<template>
+  <h2>Где вы будете жить</h2>
+  <p>{{ marker.subtitle }}</p>
+
+  <YandexMap
+    :settings="{ location }"
+    style="height: 600px; min-height: 300px"
+    class="map-view"
+  >
+    <YandexMapDefaultSchemeLayer />
+    <YandexMapDefaultFeaturesLayer />
+
+    <YandexMapMarker :settings="marker">
+      <div class="marker">
+        <Icon name="i-lucide-home" class="marker__icon" />
+      </div>
+    </YandexMapMarker>
+  </YandexMap>
+</template>
+
+<script setup lang="ts">
+import type { YandexMapDefaultMarkerSettings } from 'vue-yandex-maps'
+import {
+  YandexMap,
+  YandexMapDefaultFeaturesLayer,
+  YandexMapDefaultSchemeLayer,
+  YandexMapMarker,
+} from 'vue-yandex-maps'
+
+const props = defineProps<{ marker: YandexMapDefaultMarkerSettings }>()
+
+const location = computed(() => ({
+  center: props.marker.coordinates ?? [37.9, 55.9],
+  zoom: 15,
+  duration: 2500,
+}))
+</script>
+
+<style lang="scss" scoped>
+.map-view {
+  border-radius: 24px;
+  overflow: hidden;
+}
+
+.marker {
+  position: relative;
+  background-color: #0f172b;
+  border: 1px solid #0f172b;
+  border-radius: 12px;
+  padding: 6px;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  transition:
+    transform 0.2s ease,
+    background-color 0.3s ease;
+
+  &:hover {
+    transform: scale(1.1);
+    background-color: #1e293b;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid #0f172b;
+    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.15));
+  }
+
+  &__icon {
+    color: white;
+    width: 20px;
+    height: 20px;
+  }
+
+  &:hover &__icon {
+    color: var(--ui-primary);
+    transform: scale(1.1);
+  }
+}
+</style>