update

dfdsf

src/components/PriceSection.vue

@@ -3,8 +3,24 @@
     title="price__title"
     subtitle="price__subtitle"
     >
+    <q-tabs
+      v-model="tab"
+      dense
+      class="text-grey"
+      active-color="primary"
+      indicator-color="primary"
+      align="justify"
+      narrow-indicator
+      >
+      <q-tab
+        v-for="tab in tabs"
+        :key="tab.name"
+        :name="tab.name"
+        :label="$t(tab.label)"
+      />
+    </q-tabs>
     <div
-      class="fit row"
+      class="fit row q-pb-lg"
       >
       <div class="col-md-3 col-sm-6 col-xs-12 q-pa-lg"
         v-for="(item, idx) in tariff"
@@ -13,15 +29,34 @@
         <price-section-item
           :name="item.name"
           :chats-qty="item.chatsQty"
-          :price="item.price"
+          :price="tab === 'legal' ? item.price_rub : item.price"
+          :price_unit="tab === 'legal' ? 'rub' : 'stars'"
         />
       </div>
     </div>
     <q-card 
       flat
-      class="bg-grey-3 rounded-card"
+      class="bg-white rounded-card"
       >
-      <q-item>
+      <q-item v-if="tab === 'legal'">
+        <q-item-section avatar>
+          <span class="text-h4 text-grey q-px-sm">
+            ₽
+          </span>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label class="text-grey">
+            {{ $t('price__rub_pay') }}
+          </q-item-label>
+          <q-item-label class="text-h6">
+             {{ $t('price__rub_resident') }}
+          </q-item-label>
+          <q-item-label class="text-grey">
+            {{ $t('price__rub_closing_documents') }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item v-if="tab === 'individual'">
         <q-item-section avatar>
           <telegram-star color="gold" size="48px"/>
         </q-item-section>
@@ -38,20 +73,26 @@
         </q-item-section>
       </q-item>
     </q-card>
-
   </slide-template> 
 </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'
 
+  const tabs = [
+    { name: 'legal', label: 'price__legal'},
+    { name: 'individual', label: 'price__individual'}
+  ]
+  const tab = ref(tabs[0].name)
+  
   const tariff = [
-    { id: 1, name: 'TEST', price: null, chatsQty: 5 },
-    { id: 2, name: 'START', price: 1000, chatsQty: 15 },
-    { id: 3, name: 'PRO', price: 5000, chatsQty: 40 },
-    { id: 4, name: 'VIP', price: 12000, chatsQty: null }
+    { id: 1, name: 'TEST', price: null, price_rub: null, chatsQty: 5 },
+    { id: 2, name: 'START', price: 1000, price_rub: 2000, chatsQty: 15 },
+    { id: 3, name: 'PRO', price: 5000, price_rub: 10000, chatsQty: 40 },
+    { id: 4, name: 'VIP', price: 12000, price_rub: 24000, chatsQty: null }
   ]
   
 </script>