product-card

app.vue

@@ -5,3 +5,7 @@
     </NuxtLayout>
   </UApp>
 </template>
+
+<style lang="scss">
+@use '@/assets/scss/main' as *;
+</style>

assets/scss/main.scss

@@ -28,3 +28,33 @@ h3 {
 button {
   cursor: pointer;
 }
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.5);
+  border-radius: 4px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(128, 128, 128, 0.7);
+  background-clip: padding-box;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
+}
+
+body {
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}

components/ProductDescription.vue

@@ -4,17 +4,7 @@
 
     <h2>{{ currentVariant?.price }}  <Icon name="ph:currency-rub" /></h2>
 
-    <div class="product-description__variations">
+    <ProductVariations />
-      <div
-        v-for="variation in productsVariationsData"
-        :key="variation?.id"
-        @click="() => currentVariantId = variation?.id"
-      >
-        <div class="product-description__variation">
-          <img width="80" :src="variation?.image?.src" :alt="variation?.image?.src">
-        </div>
-      </div>
-    </div>
 
     <div>
       {{ `Цвет: ${t(`colors.${currentColor}`)}` }}
@@ -46,21 +36,21 @@
 </template>
 
 <script setup lang="ts">
-import type { AccordionItem } from '@nuxt/ui'
+import ProductVariations from '~/components/ProductVariations.vue'
 import { useCurrentProduct, useProduct } from '~/composables'
 
 const { t } = useI18n()
 
-const { productsData, productsVariationsData, sizes } = useProduct()
+const { productsData, sizes } = useProduct()
-const { currentVariant, currentVariantId, currentColor, currentMaterial } = useCurrentProduct()
+const { currentVariant, currentColor, currentMaterial } = useCurrentProduct()
 
 const currentSize = ref(0)
 
-const items = ref<AccordionItem[]>([
+const items = computed(() => [
   {
     label: 'Описание товара',
     icon: 'i-heroicons-document-text',
-    content: productsData?.value?.description,
+    content: productsData?.value?.description?.replace(/<\/?p>/g, ''),
   },
   {
     label: 'Состав и параметры',
@@ -85,26 +75,25 @@ const items = ref<AccordionItem[]>([
 ])
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .product-description {
-  padding-top: 50px;
+  width: 100%;
+  max-width: 335px;
 
+  @media (min-width: 768px) {
+    position: sticky;
+    align-self: self-start;
+    top: 40px;
+    overflow-y: auto;
+    max-height: calc(100vh - 80px);
+  }
+
+  padding-top: 30px;
+  padding-inline: 30px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 
-  width: 400px;
-  padding-inline: 30px;
-
-  &__variations {
-    padding: 10px;
-    border-radius: 10px;
-    background: white;
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-  }
-
   &__sizes {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -115,12 +104,6 @@ const items = ref<AccordionItem[]>([
     width: 65px;
   }
 
-  &__variation {
-    img {
-      border-radius: 10px;
-    }
-  }
-
   h2 {
     display: flex;
     flex-direction: row;

components/ProductVariations.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="product-variations">
+    <div
+      v-for="variation in productsVariationsData"
+      :key="variation?.id"
+      @click="() => currentVariantId = variation?.id"
+    >
+      <div class="product-variations__variation">
+        <img width="80" :src="variation?.image?.src" :alt="variation?.image?.src">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCurrentProduct, useProduct } from '~/composables'
+
+const { productsVariationsData } = useProduct()
+const { currentVariantId } = useCurrentProduct()
+</script>
+
+<style lang="scss">
+.product-variations {
+  padding: 10px;
+  border-radius: 10px;
+  background: white;
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+
+  &__variation {
+    img {
+      border-radius: 10px;
+    }
+  }
+}
+</style>

pages/index.vue

@@ -13,5 +13,10 @@
   width: 100%;
   display: flex;
   flex-direction: row;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: center;
+  }
 }
 </style>