init

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>