init

.env

@@ -1 +1,2 @@
 VITE_BASE_URL=http://localhost:3000
+VITE_YANDEX_MAPS_KEY=13f4c06b-cb7e-4eeb-81f1-af52f12587b2

.env.developer

@@ -1 +1,2 @@
 VITE_BASE_URL=http://localhost:3000
+VITE_YANDEX_MAPS_KEY=13f4c06b-cb7e-4eeb-81f1-af52f12587b2

Dockerfile

@@ -12,6 +12,7 @@ COPY --from=build /app/.output/ ./
 
 ENV PORT=80
 ENV VITE_BASE_URL=https://rental.koptilnya.xyz
+VITE_YANDEX_MAPS_KEY=13f4c06b-cb7e-4eeb-81f1-af52f12587b2
 
 EXPOSE 80
 

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>

composables/useMock.ts

@@ -58,6 +58,38 @@ export const useMock = () => {
         },
       ],
     },
+    {
+      id: 133423414,
+      title: 'Лофт с проектором — Руставели',
+      description: 'Историческая стильная квартира с проектором в спальне, уютным балконом и неоновыми огнями:) Он расположен в 200-летнем здании культурного наследия, которое расположено в исторической части города, рядом с Тбилисской государственной консерваторией (по вечерам вы можете услышать живую музыку, сидя на балконе). В этом районе есть целые театры, музеи, пабы, рестораны и магазины. В нескольких минутах ходьбы от проспекта Руставели и площади Свободы, автобусной остановки/от аэропорта, двух станций метро.',
+      category: 'nedvizhimost',
+      coordinates: [44.770495496222274, 41.716244387476706],
+      address: 'Грузия, Тбилиси улица пушкина дом калатушкина квартира 10',
+      previewImage: {
+        src: '/tbilisi_1.avif',
+      },
+      images: [
+        {
+          src: '/tbilisi_2.avif',
+        },
+        {
+          src: '/tbilisi_3.avif',
+        },
+        {
+          src: '/tbilisi_4.avif',
+        },
+        {
+          src: '/tbilisi_5.avif',
+        },
+        {
+          src: '/tbilisi_6.avif',
+        },
+        {
+          src: '/tbilisi_7.avif',
+        },
+      ],
+    },
+
   ]
 
   const cartById = (id?: string) =>

nuxt.config.ts

@@ -1,5 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 import { createResolver } from '@nuxt/kit'
+import { process } from 'std-env'
 
 const { resolve } = createResolver(import.meta.url)
 
@@ -19,7 +20,11 @@ export default defineNuxtConfig({
         autoImports: true,
       },
     ],
+    'vue-yandex-maps/nuxt',
   ],
+  yandexMaps: {
+    apikey: process.env.VITE_YANDEX_MAPS_KEY,
+  },
   css: ['~/assets/css/main.css', '~/assets/scss/main.scss'],
   build: {
     transpile: ['gsap'],

package.json

@@ -31,7 +31,8 @@
     "swiper": "^12.0.2",
     "typescript": "^5.6.3",
     "vue": "^3.5.17",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "vue-yandex-maps": "^2.2.3"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.13.2",

pages/nedvizhimost.vue

@@ -87,7 +87,7 @@ const services = [
 ]
 
 const { cartByCategory } = useMock()
-const previewItems = computed(() => cartByCategory('transport'))
+const previewItems = computed(() => cartByCategory('nedvizhimost'))
 </script>
 
 <style lang="scss">

pages/post/[id].vue

@@ -28,6 +28,8 @@
             <p>{{ cart?.description }}</p>
           </div>
 
+          <MapView v-if="cart?.coordinates" :marker="marker" />
+
           <Contacts />
         </div>
       </template>
@@ -42,9 +44,13 @@
       <Gallery :preview-image="cart?.previewImage" :images="cart?.images" />
 
       <div>
-        Описание
+        Описание:
         <p>{{ cart?.description }}</p>
       </div>
+
+      <MapView v-if="cart?.coordinates" :marker="marker" />
+
+      <Contacts />
     </div>
   </UContainer>
 </template>
@@ -66,6 +72,10 @@ const route = useRoute()
 
 const { cartById } = useMock()
 const cart = cartById(route.params.id)
+const marker = computed(() => ({
+  coordinates: cart?.coordinates ?? [0, 0],
+  subtitle: cart?.address,
+}))
 
 const { lengthY } = useSwipe(
   target,

yarn.lock

@@ -3141,6 +3141,53 @@
   resolved "https://registry.yarnpkg.com/@webcontainer/env/-/env-1.1.1.tgz#23021b2bb24befeeef53dba8996d1886b7016515"
   integrity sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==
 
+"@yandex/ymaps3-context-menu@>=0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@yandex/ymaps3-context-menu/-/ymaps3-context-menu-0.0.2.tgz#c5b33f042713100b48337796b96192f9631318ad"
+  integrity sha512-i0/ALd6pzVssvzczgcRJH5SzL3dnehHRwFAwrRdVj/xdb5c5C6VTolr+HhBBh0BCbS+p+fOEVoAEIAibynyYfQ==
+
+"@yandex/ymaps3-default-ui-theme@>=0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@yandex/ymaps3-default-ui-theme/-/ymaps3-default-ui-theme-0.0.21.tgz#b4a0f14bba5d68a885e1cd4416711bb7f3e86250"
+  integrity sha512-1pgxMSFmawbhsaAk5EyVQkN9MVnNNJ2KmnT3eO212Sf+AaIvhyp3VeHF68kgZAtBMUkMd/1l0J5OxymNGic0+g==
+
+"@yandex/ymaps3-drawer-control@>=0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@yandex/ymaps3-drawer-control/-/ymaps3-drawer-control-0.0.2.tgz#ff8998fe1e6b91fb031f3feff1081e49b3b240f7"
+  integrity sha512-gy4MqNljXQdsqPznBb+Jk//4wTI1LdlamJE3MG9m3tHnVOM/9kH2xUQc+wsrIG1hPUqj10VrTw81A/oGA8Rjbw==
+
+"@yandex/ymaps3-minimap@>=0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@yandex/ymaps3-minimap/-/ymaps3-minimap-0.0.4.tgz#8adb990572bab8d14f853e741495858877837f95"
+  integrity sha512-Mw8WKNxVJZHPy9ZZPvU/3HscHXEfJKkcoRJSAAFysDfihpcdPRR8mc/zflFjQmg9VaaLLD9aSR7yT5O+EVpwZA==
+
+"@yandex/ymaps3-resizer@>=0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@yandex/ymaps3-resizer/-/ymaps3-resizer-0.0.2.tgz#66dfe02555664b9995fddafe385890b77c2986ac"
+  integrity sha512-1D/b8+GqrZOOXjuPYnffNBdpAtrUyfJPhPY6AaaJKdaF87Rx1JJKYARktblEIPjYjie9ksj3gnVKVh9OLPVLsQ==
+
+"@yandex/ymaps3-signpost@>=0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@yandex/ymaps3-signpost/-/ymaps3-signpost-0.0.2.tgz#191c66c1f794d51d5a150f31b3422b0bf12e25b4"
+  integrity sha512-p7UYkzrcfKloAPqcvK+rd2WHr1kW5ENLlwTtmY7B+bcjye32HALCmBn53VLnuUAl9xW6s6M1RGdJ8gdmubR5aQ==
+
+"@yandex/ymaps3-spinner@>=0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@yandex/ymaps3-spinner/-/ymaps3-spinner-0.0.2.tgz#6ef85d717d3b9c44c939c6dfcd0c0587fdb89820"
+  integrity sha512-nDze/MfYAn7JIbBOzYNBhrEhgF1RHnymJGT7W+y+uVKCTmaUaGXOMeZF2Z8+GuR3BvszZ73fWFE3IfGySOSw+g==
+  dependencies:
+    spin.js "^4.1.2"
+
+"@yandex/ymaps3-types@>=1.0.18043255":
+  version "1.0.18176872"
+  resolved "https://registry.yarnpkg.com/@yandex/ymaps3-types/-/ymaps3-types-1.0.18176872.tgz#9c14e7f28c10350b877f6c054aa8b273b974b5dd"
+  integrity sha512-AcV3VyTDmSpCKUB2oxNY6woxMeHQB4mblSAACcpHq5cUYCch3lmqALwjEwazvyKlh5fP7J1bxhF89a9r/Yu6aw==
+
+"@yandex/ymaps3-world-utils@>=0.0.18043255":
+  version "0.0.18176872"
+  resolved "https://registry.yarnpkg.com/@yandex/ymaps3-world-utils/-/ymaps3-world-utils-0.0.18176872.tgz#7be9a6a583eff18874a63a79229d8cc0c086f00c"
+  integrity sha512-zTdBbCM8m7AQsSeD4V7T5R+Jj5BckMdkhTi9egRbAH/MFyqe21Gdrc6iiB6j6bHBB2XhlDdlXOvYdJh/m4lo5w==
+
 abbrev@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-4.0.0.tgz#ec933f0e27b6cd60e89b5c6b2a304af42209bb05"
@@ -8572,6 +8619,11 @@ speakingurl@^14.0.1:
   resolved "https://registry.yarnpkg.com/speakingurl/-/speakingurl-14.0.1.tgz#f37ec8ddc4ab98e9600c1c9ec324a8c48d772a53"
   integrity sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==
 
+spin.js@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/spin.js/-/spin.js-4.1.2.tgz#866180f0489ce90432201363e71c314f0db28824"
+  integrity sha512-ua/yEpxEwyEUWs57tMQYdik/KJ12sQRyMXjSlK/Ai927aEUDVY3FXUi4ml4VvlLCTQNIjC6tHyjSLBrJzFAqMA==
+
 srvx@^0.9.4:
   version "0.9.6"
   resolved "https://registry.yarnpkg.com/srvx/-/srvx-0.9.6.tgz#befd88d7560b502603ad64468104d2bb6d2596b9"
@@ -9524,6 +9576,21 @@ vue-router@^4.5.1, vue-router@^4.6.3:
   dependencies:
     "@vue/devtools-api" "^6.6.4"
 
+vue-yandex-maps@^2.2.3:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/vue-yandex-maps/-/vue-yandex-maps-2.2.5.tgz#059814fbfae4f06d319f035f533adbb74657394e"
+  integrity sha512-8LGRWzFMVPV3zz1LHRyZ47EO4e0M2fuR8kUIAh64Lu90YmeOt7/nxp4raNqM4UfM8RU0eeHbiRmnzRxGCzZy0A==
+  dependencies:
+    "@yandex/ymaps3-context-menu" ">=0.0.2"
+    "@yandex/ymaps3-default-ui-theme" ">=0.0.21"
+    "@yandex/ymaps3-drawer-control" ">=0.0.2"
+    "@yandex/ymaps3-minimap" ">=0.0.4"
+    "@yandex/ymaps3-resizer" ">=0.0.2"
+    "@yandex/ymaps3-signpost" ">=0.0.2"
+    "@yandex/ymaps3-spinner" ">=0.0.2"
+    "@yandex/ymaps3-types" ">=1.0.18043255"
+    "@yandex/ymaps3-world-utils" ">=0.0.18043255"
+
 vue@^3.4.5, vue@^3.5.13, vue@^3.5.14, vue@^3.5.17, vue@^3.5.23:
   version "3.5.25"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.25.tgz#b68b5092b617c57a0a36e8e640fd2c09aa2a374d"