создаю телегу товаров

assets/scss/main.scss

@@ -58,7 +58,7 @@ body {
 //swiper
 .swiper {
   width: 100%;
-  height: 100%;
+  height: calc(100vh - 54px);
 }
 
 .swiper-slide {
@@ -75,6 +75,12 @@ body {
 .swiper-slide img {
   display: block;
   width: 100%;
-  height: 100%;
+  height: calc(100vh - 54px);
   object-fit: cover;
+}
+
+.swiper-pagination {
+  position: absolute;
+  bottom: 200px !important;
+  --swiper-pagination-bullet-size: 4px
 }

components/ProductDescription.vue

@@ -2,7 +2,7 @@
   <div class="product-description">
     <h1>{{ productsData?.name }}</h1>
 
-    <h2>{{ currentVariant?.options[0]?.price }}  <Icon name="ph:currency-rub" /></h2>
+    <ProductPrice :price="currentVariant?.options[0]?.price" />
 
     <ProductVariations v-if="colors?.length > 1" />
 
@@ -47,6 +47,7 @@
 </template>
 
 <script setup lang="ts">
+import ProductPrice from '~/components/ProductPrice.vue'
 import ProductVariations from '~/components/ProductVariations.vue'
 import { useCurrentProduct, useProduct } from '~/composables'
 
@@ -92,11 +93,12 @@ function addToCartBtn() {
 </script>
 
 <style lang="scss">
+@use '~/assets/scss/utils' as *;
+
 .product-description {
   width: 100%;
   max-width: 335px;
-  padding-top: 30px;
+  padding: 30px 30px 0;
-  padding-inline: 30px;
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -109,6 +111,10 @@ function addToCartBtn() {
     max-height: calc(100vh - 80px);
   }
 
+  @include mobile {
+    padding: 0 10px;
+  }
+
   &__sizes {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -118,13 +124,5 @@ function addToCartBtn() {
   &__size {
     width: 65px;
   }
-
-  h2 {
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-    align-items: center;
-    text-align: center;
-  }
 }
 </style>

components/ProductImages.vue

@@ -17,7 +17,7 @@
   >
     <SwiperSlide
       v-for="image in currentVariantImages?.slice(0, 5)"
-      :key="image?.id"
+      :key="image?.src"
     >
       <img width="100%" :src="image?.src" :alt="image?.src">
     </SwiperSlide>

components/ProductPrice.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="product-price">
+    <h2>{{ price }}  <Icon name="ph:currency-rub" /></h2>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  price: {
+    type: [String, Number],
+    required: true,
+  },
+})
+</script>
+
+<style lang="scss">
+.product-price {
+  h2 {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    align-items: center;
+    text-align: center;
+  }
+}
+</style>

pages/product/[id].vue

@@ -8,6 +8,30 @@
     >
       <ProductImages />
 
+      <div class="product-info">
+        <div class="product-info__title">
+          <ProductPrice :price="currentVariant?.options[0]?.price" />
+
+          <div>
+            фотомодель
+          </div>
+        </div>
+
+        <h1>
+          {{ productsData?.name }}
+        </h1>
+
+        <div class="mt20">
+          <UButton
+            icon="lucide:shopping-cart"
+            class="justify-content-center w-100 d-flex"
+            label="Добавить"
+            size="xl"
+            @click="open = !open"
+          />
+        </div>
+      </div>
+
       <template #body>
         <ProductDescription />
       </template>
@@ -22,7 +46,10 @@
 import type { UseSwipeDirection } from '@vueuse/core'
 import { useMediaQuery, useSwipe } from '@vueuse/core'
 import { computed, shallowRef } from 'vue'
+import ProductPrice from '~/components/ProductPrice.vue'
+import { useCurrentProduct, useProduct } from '~/composables'
 
+const { productsData } = useProduct()
 const isMobile = useMediaQuery('(max-width: 1280px)')
 const open = ref(false)
 const target = shallowRef<HTMLElement | null>(null)
@@ -35,25 +62,28 @@ const { isSwiping, lengthY } = useSwipe(
     passive: false,
     onSwipe(e: TouchEvent) {
       if (targetHeight.value) {
-        if (lengthY.value > 200) {
+        if (lengthY.value > 100) {
           open.value = true
         }
       }
     },
     onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
       console.log('lengthY.value', lengthY.value)
-      if (lengthY.value > 200 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.5) {
+      if (lengthY.value > 100 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.5) {
         open.value = true
       }
     },
   },
 )
+
+const { currentVariant } = useCurrentProduct()
 </script>
 
 <style scoped lang="scss">
 @use '~/assets/scss/utils' as *;
 
 .product {
+  position: relative;
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -63,4 +93,22 @@ const { isSwiping, lengthY } = useSwipe(
     align-items: center;
   }
 }
+
+.product-info {
+  padding-inline: 15px;
+  position: absolute;
+  bottom: 40px;
+  z-index: 10;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+
+  &__title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
 </style>