init

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>