From cb5b80fc6bfbedcc44963a4bd55a3eab6676a0e7 Mon Sep 17 00:00:00 2001
From: alsaze <veselov@alfabit.com>
Date: Wed, 8 Oct 2025 16:06:53 +0300
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D1=8E=20=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BB=D0=B5=D0=B3=D1=83=20=D1=82=D0=BE=D0=B2=D0=B0=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/scss/main.scss             | 10 ++++--
 components/ProductDescription.vue | 20 ++++++------
 components/ProductImages.vue      |  2 +-
 components/ProductPrice.vue       | 26 ++++++++++++++++
 pages/product/[id].vue            | 52 +++++++++++++++++++++++++++++--
 5 files changed, 94 insertions(+), 16 deletions(-)
 create mode 100644 components/ProductPrice.vue

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 00771a4..2fcee9c 100644
--- a/assets/scss/main.scss
+++ b/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
 }
\ No newline at end of file
diff --git a/components/ProductDescription.vue b/components/ProductDescription.vue
index a5c1218..d14b8f4 100644
--- a/components/ProductDescription.vue
+++ b/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-inline: 30px;
+  padding: 30px 30px 0;
   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>
diff --git a/components/ProductImages.vue b/components/ProductImages.vue
index d01e53c..488f9c5 100644
--- a/components/ProductImages.vue
+++ b/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>
diff --git a/components/ProductPrice.vue b/components/ProductPrice.vue
new file mode 100644
index 0000000..08dcb79
--- /dev/null
+++ b/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>
diff --git a/pages/product/[id].vue b/pages/product/[id].vue
index 6e31747..90058b3 100644
--- a/pages/product/[id].vue
+++ b/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>