diff --git a/src/components/staking/vipDialog.vue b/src/components/staking/vipDialog.vue
index 1d050cb..5484fc4 100644
--- a/src/components/staking/vipDialog.vue
+++ b/src/components/staking/vipDialog.vue
@@ -34,27 +34,27 @@
         </div>
         <div class="vip-swiper">
           <Swiper
-        :slidesPerView="5"
-        :modules="modules"
-        :loop="true"
-        @slideChange="onSlideChange"
-        :autoplay="{ delay: 3200, disableOnInteraction: false }"
-        :navigation="navigation"
-        class="mySwiper"
-        :centeredSlides="true"
-      >
-        <SwiperSlide v-for="(slide, index) in heroSlides" :key="slide.label">
-          <!-- 插入每个slide的内容 -->
-          <div
-            
-          >{{index}}
-            <!-- <img v-if="selectHeroIdenx != index" :src="slide.imgUrl" alt="Character Image" />
-            <img v-else :src="slide.imgUrlActive" alt="Character Image" /> -->
-          </div>
-        </SwiperSlide>
-      </Swiper>
-      <div class="swiper-button-next"></div>
-      <div class="swiper-button-prev"></div>
+            :slidesPerView="2"
+            :modules="modules"
+            :loop="true"
+            @slideChange="onSlideChange"
+            :autoplay="{ delay: 3200, disableOnInteraction: false }"
+            :navigation="navigation"
+            class="mySwiper"
+            :centeredSlides="true"
+          >
+            <SwiperSlide v-for="(slide, index) in vipList" :key="index">
+              <!-- 插入每个slide的内容 -->
+              <div
+                
+              >{{index}}
+                <!-- <img v-if="selectHeroIdenx != index" :src="slide.imgUrl" alt="Character Image" />
+                <img v-else :src="slide.imgUrlActive" alt="Character Image" /> -->
+              </div>
+            </SwiperSlide>
+          </Swiper>
+          <div class="swiper-button-next"></div>
+          <div class="swiper-button-prev"></div>
         </div>
       </div>
     </a-modal>
@@ -65,6 +65,15 @@
 import {ref} from "vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { Pagination, Navigation, Autoplay } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+
+const modules = [Pagination, Navigation, Autoplay];
+const navigation = ref({
+  nextEl: ".swiper-button-next",
+  prevEl: ".swiper-button-prev",
+});
 
 const props = defineProps({
   vipDialogVisible: {
@@ -77,6 +86,29 @@ const props = defineProps({
   },
 });
 
+const vipList = ref([
+  {
+    title: "VIP4 Privileges",
+    text: "1. Have all VIP4 privileges"
+  },
+  {
+    title: "VIP4 Privileges",
+    text: "1. Have all VIP4 privileges"
+  },
+  {
+    title: "VIP4 Privileges",
+    text: "1. Have all VIP4 privileges"
+  },
+  {
+    title: "VIP4 Privileges",
+    text: "1. Have all VIP4 privileges"
+  },
+  {
+    title: "VIP4 Privileges",
+    text: "1. Have all VIP4 privileges"
+  }
+])
+
 const emit = defineEmits(["handleClose", "vipDialogCli"]);
 const handleCancel = (e) => {
   emit("handleClose");
@@ -86,6 +118,12 @@ const toStake = () => {
   emit("vipDialogCli");
 }
 
+const selectHeroIdenx = ref(0);
+const onSlideChange = (swiper) => {
+  // console.log("Slide changed to index:", swiper.realIndex);headeyop
+  selectHeroIdenx.value = swiper.realIndex;
+};
+
 </script>
 
 <style lang="scss" scoped>
@@ -212,6 +250,23 @@ const toStake = () => {
       width: 1068px;
       height: 80px;
       margin: 0 auto;
+      color: #fff;
+      .mySwiper {
+        .swiper-wrapper {
+          width: 983px;
+          .swiper-slide {
+            width: 473px;
+            height: 367px;
+            margin-left: 20px;
+            background: #24212E;
+            border-radius: 20px;
+            border: 1px solid #BB7FFF;
+            div {
+              width: 100%;
+            }
+          }
+        }
+      }
     }
   }
 }