feat: update styles

spa/src/views/Product.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="pb-10">
     <div>
-      <swiper-container
-          pagination="true"
-      >
+      <swiper-container ref="swiperEl" init="false">
         <swiper-slide
           v-for="(image, index) in product.images"
           lazy="true"
@@ -205,6 +203,8 @@ function onPopState() {
   }
 }
 
+const swiperEl = ref(null);
+
 onUnmounted(() => {
   window.removeEventListener('popstate', onPopState);
 });
@@ -215,8 +215,7 @@ onMounted(async () => {
 
   window.addEventListener('popstate', onPopState);
 
-  const swiperEl = document.querySelector('swiper-container');
-  swiperEl.addEventListener('swiperslidermove', (event) => {
+  swiperEl.value.addEventListener('swiperslidermove', (event) => {
     if (!canVibrate) return;
     window.Telegram.WebApp.HapticFeedback.impactOccurred('soft');
     canVibrate = false;
@@ -224,5 +223,20 @@ onMounted(async () => {
       canVibrate = true;
     }, 50);
   });
+
+  Object.assign(swiperEl.value, {
+    injectStyles: [`
+    .swiper-pagination {
+      position: relative;
+      padding-top: 15px;
+    }
+      `],
+    pagination: {
+      dynamicBullets: true,
+      clickable: true,
+    },
+  });
+
+  swiperEl.value.initialize();
 });
 </script>