update

src/components/PriceSection.vue

@@ -1,54 +1,23 @@
 <template>
   <slide-template title="price__title">
-    <div ref="container" class="w100 flex no-wrap">
-      <q-resize-observer @resize="updateWidth" />
-        <div class="w100 flex justify-center" v-if="containerWidth > 800">
-          <q-card
-            v-for="(item, idx) in tariff" 
-            :key="idx"
-            class="q-pa-md q-ma-sm flex items-center column"
-            style="width: 20%"
-            >
-            <price-section-item
-              :name="item.name"
-              :chats-qty="item.chatsQty"
-              :price="item.price"
-            />
-          </q-card>
-        </div>
-
-        <q-carousel
-          v-else
-          v-model="slide"
-          transition-prev="scale"
-          transition-next="scale"
-          swipeable
-          animated
-          navigation
-          padding
-          height="225px"
-          control-color="primary"
-          class="w100"
-          >
-          <q-carousel-slide
-            v-for="(item, idx) in tariff" 
-            :key="idx"
-            :name="item.name"
-            class="flex justify-center q-pt-lmdq-pa-none q-ma-none"
-            >
-            <price-section-item
-              :name="item.name"
-              :chats-qty="item.chatsQty"
-              :price="item.price"
-            />
-          </q-carousel-slide>
-        </q-carousel>
-    </div>
-
     <div class="q-ma-md" align="center" style="max-width: 60%;">
       {{ $t('price__tariff_description') }}
     </div>
 
+    <div
+      class="fit row"
+      >
+      <div class="col-md-3 col-sm-6 col-xs-12 q-pa-lg"
+        v-for="(item, idx) in tariff"
+        :key="idx"
+        >
+        <price-section-item
+          :name="item.name"
+          :chats-qty="item.chatsQty"
+          :price="item.price"
+        />
+      </div>
+    </div>
     <q-card 
       flat
       class="bg-grey-3"
@@ -76,7 +45,6 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
   import SlideTemplate from 'components/SlideTemplate.vue'
   import PriceSectionItem from 'components/PriceSectionItem.vue'
   import telegramStar from 'components/TelegramStar.vue'
@@ -87,17 +55,6 @@
     { id: 3, name: 'PRO', price: 5000, chatsQty: 40 },
     { id: 4, name: 'VIP', price: 12000, chatsQty: null }
   ]
-
-  const containerWidth = ref(0)
-  const cardWidth=ref(175)
-
-  const updateWidth = ({ width }) => {
-    containerWidth.value = width
-    cardWidth.value = width < 1200 ? 250 : 175
-  }
-
-  const slide = ref(tariff[0].name)
-
   
 </script>