init

pages/nedvizhimost.vue

@@ -27,7 +27,7 @@
     <UContainer class="flex flex-col gap-32 mt-32">
       <MainServices :services="services" />
 
-      <MainCarusel />
+      <MainCarusel :preview-items="previewItems" />
 
       <Contacts />
     </UContainer>
@@ -85,6 +85,41 @@ const services = [
     ],
   },
 ]
+
+const previewItems = [
+  {
+    id: 13242314,
+    img: 'https://picsum.photos/468/468?random=1',
+  },
+  {
+    id: 123321,
+    img: 'https://picsum.photos/468/468?random=2',
+  },
+  {
+    id: 7654567,
+    img: 'https://picsum.photos/468/468?random=3',
+  },
+  {
+    id: 3203030,
+    img: 'https://picsum.photos/468/468?random=4',
+  },
+  {
+    id: 1818822,
+    img: 'https://picsum.photos/468/468?random=5',
+  },
+  {
+    id: 12355432,
+    img: 'https://picsum.photos/468/468?random=6',
+  },
+  {
+    id: 3495823,
+    img: 'https://picsum.photos/468/468?random=7',
+  },
+  {
+    id: 1123,
+    img: 'https://picsum.photos/468/468?random=8',
+  },
+]
 </script>
 
 <style lang="scss">

pages/post/Gallery.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="gallery">
+    <div class="gallery__main">
+      <img :src="previewImage?.src" :alt="previewImage?.src">
+    </div>
+
+    <div class="gallery__side">
+      <div
+        v-for="img in smallImages"
+        :key="img?.src"
+        class="gallery__small"
+      >
+        <img :src="img?.src" :alt="img?.src">
+      </div>
+
+      <UButton size="xl" class="gallery__button">
+        ⋮⋮ Показать все фото
+      </UButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ previewImage: { src }, images: { src }[] }>()
+
+const smallImages = computed(() => props?.images?.slice(1, 5))
+</script>
+
+<style lang="scss">
+.gallery {
+  position: relative;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 12px;
+
+  &__main img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: ease-in 0.1s;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+  &__side {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(300px, 500px));
+    gap: 12px;
+  }
+
+  &__small img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: ease-in 0.1s;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+  &__button {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+    cursor: pointer;
+  }
+}
+</style>

pages/post/[id].vue

@@ -0,0 +1,32 @@
+<template>
+  <UContainer>
+    <div class="post-page">
+      <h1>{{ cart?.title }}</h1>
+
+      <Gallery :preview-image="cart?.previewImage" :images="cart?.images" />
+
+      <div>
+        Описание
+        <p>{{ cart?.description }}</p>
+      </div>
+    </div>
+  </UContainer>
+</template>
+
+<script setup lang="ts">
+import Gallery from '~/pages/post/Gallery.vue'
+
+const route = useRoute()
+
+const { cartById } = useMock()
+const cart = cartById(route.params.id)
+</script>
+
+<style lang="scss">
+.post-page {
+  margin-top: calc(64px + 26px);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>

pages/transport.vue

@@ -27,7 +27,7 @@
     <UContainer class="flex flex-col gap-32 mt-32">
       <MainServices :services="services" />
 
-      <MainCarusel />
+      <MainCarusel :preview-items="previewItems" />
 
       <Contacts />
     </UContainer>
@@ -81,6 +81,9 @@ const services = [
     ],
   },
 ]
+
+const { cartByCategory } = useMock()
+const previewItems = computed(() => cartByCategory('transport'))
 </script>
 
 <style lang="scss">