app.vue

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

assets/scss/main.scss

@@ -28,33 +28,3 @@ 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,7 +4,17 @@
 
     <h2>{{ currentVariant?.price }}  <Icon name="ph:currency-rub" /></h2>
 
-    <ProductVariations />
+    <div class="product-description__variations">
+      <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}`)}` }}
@@ -36,21 +46,21 @@
 </template>
 
 <script setup lang="ts">
-import ProductVariations from '~/components/ProductVariations.vue'
+import type { AccordionItem } from '@nuxt/ui'
 import { useCurrentProduct, useProduct } from '~/composables'
 
 const { t } = useI18n()
 
-const { productsData, sizes } = useProduct()
-const { currentVariant, currentColor, currentMaterial } = useCurrentProduct()
+const { productsData, productsVariationsData, sizes } = useProduct()
+const { currentVariant, currentVariantId, currentColor, currentMaterial } = useCurrentProduct()
 
 const currentSize = ref(0)
 
-const items = computed(() => [
+const items = ref<AccordionItem[]>([
   {
     label: 'Описание товара',
     icon: 'i-heroicons-document-text',
-    content: productsData?.value?.description?.replace(/<\/?p>/g, ''),
+    content: productsData?.value?.description,
   },
   {
     label: 'Состав и параметры',
@@ -75,25 +85,26 @@ const items = computed(() => [
 ])
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .product-description {
-  width: 100%;
-  max-width: 335px;
+  padding-top: 50px;
 
-  @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);
@@ -104,6 +115,12 @@ const items = computed(() => [
     width: 65px;
   }
 
+  &__variation {
+    img {
+      border-radius: 10px;
+    }
+  }
+
   h2 {
     display: flex;
     flex-direction: row;

components/ProductVariations.vue

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