diff --git a/src/components/chain/contract/Staking.js b/src/components/chain/contract/Staking.js
index 964e229..864f522 100644
--- a/src/components/chain/contract/Staking.js
+++ b/src/components/chain/contract/Staking.js
@@ -16,6 +16,7 @@ export class Staking {
   }
 
   async execMethod({provider, address, method, params}) {
+    console.log(provider, address, method, params)
     this.bc.checkAndChangeChain(chainId, provider);
     const contract = new Contract(address, routerAbi, provider.getSigner());
     const tx = await contract[method](...params);
diff --git a/src/components/home/HeroCard.vue b/src/components/home/HeroCard.vue
index a5c5854..ab2c953 100644
--- a/src/components/home/HeroCard.vue
+++ b/src/components/home/HeroCard.vue
@@ -37,9 +37,8 @@
       <!-- :spaceBetween="-45" -->
 
       <Swiper
-        :slidesPerView="5"
+        :slidesPerView="2"
         :modules="modules"
-        :loop="true"
         @slideChange="onSlideChange"
         :autoplay="{ delay: 3200, disableOnInteraction: false }"
         :navigation="navigation"
diff --git a/src/components/staking/cecDialog.vue b/src/components/staking/cecDialog.vue
index 8fd46bc..195d3e6 100644
--- a/src/components/staking/cecDialog.vue
+++ b/src/components/staking/cecDialog.vue
@@ -7,60 +7,182 @@
       :footer="null"
       :getContainer="() => $refs.cecModal"
       :maskClosable="false"
-      destroyOnClose>
+      destroyOnClose
+    >
       <div class="top-close" @click="handleCancel">
         <img src="@/assets/img/marketplace/Close_counter.png" alt />
       </div>
-      </a-modal>
+      <div class="cec-dialog-content">
+        <div class="content-title">
+          <h1>{{ props.dialogText.title }}</h1>
+          <p>{{ props.dialogText.tips }}</p>
+        </div>
+        <div class="content-amount">
+          <li>
+            <div class="left">
+              <span>{{ props.dialogText.typeLabel }}</span>
+              <p>
+                <input type="text" placeholder="0">
+              </p>
+            </div>
+            <div class="left">
+              <span>MAX: 1114</span>
+              <p>{{ props.dialogText.typeName }}</p>
+            </div>
+          </li>
+          <li v-if="props.dialogText.conversion">
+            <div class="left">
+              <span>{{ props.dialogText.conversion }}</span>
+              <p>{{ props.dialogText.typeName }}</p>
+            </div>
+            <div class="left">
+              <span>&nbsp;</span>
+              <p>{{ props.dialogText.conversionName }}</p>
+            </div>
+          </li>
+        </div>
+        <div class="content-btn" @click="eventBtn">
+          Approve
+        </div>
+      </div>
+    </a-modal>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue"
+import {ref} from "vue";
 
 const props = defineProps({
   cecDialogVisible: {
     type: Boolean,
     required: true,
   },
+  dialogText: {
+    type: Object,
+    required: true,
+  },
   buyDataArr: {
     type: Array,
     required: true,
   },
 });
 
-const emit = defineEmits(["handleClose"]);
-const handleOk = (e) => {
+const emit = defineEmits(["handleClose", "eventBtn"]);
+const handleCancel = (e) => {
   emit("handleClose");
 };
 
+const eventBtn = () => {
+  emit("eventBtn");
+}
 </script>
 
 <style lang="scss" scoped>
+:deep(.cecDialog) {
+  width: 800px !important;
+  // height: 468px;
+  .ant-modal-content {
+    height: 100%;
+    padding: 0px;
+    background: #1a1821;
+    border: 1px solid #b966ff;
+    box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
+    border-radius: 100px;
+  }
+}
 .cec-dialog {
-  :deep(.cecDialog) {
-    .ant-modal-content {
-      padding: 0px;
-      background: #1a1821;
-      border: 1px solid #b966ff;
-      box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
-      border-radius: 100px;
-      .buy-dialog {
-        .top-close {
-          position: absolute;
-          top: -23px;
-          right: -23px;
-          width: 106px;
-          height: 106px;
-          cursor: pointer;
-          img {
-            width: 100%;
-            height: 100%;
+  .top-close {
+    position: absolute;
+    top: -23px;
+    right: -23px;
+    width: 106px;
+    height: 106px;
+    cursor: pointer;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .cec-dialog-content {
+    color: #fff;
+    margin-top: 40px;
+    .content-title {
+      width: 700px;
+      margin: 0 auto;
+      padding: 0 40px;
+      border-bottom: 1px solid #3d4057;
+      h1 {
+        font-family: "Anton";
+        font-weight: 400;
+        font-size: 48px;
+      }
+      p {
+
+      }
+    }
+    .content-amount {
+      width: 700px;
+      margin: 0 auto;
+      margin-top: 20px;
+      padding: 0 40px;
+      li {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        >div {
+          span {
+            display: inline-block;
+            margin-bottom: 20px;
+            color: #b966ff;
+            font-size: 16px;
+          }
+          p {
+            font-size: 28px;
+            font-family: 'Poppins';
+            input {
+              border: 0;
+              background: #2d2738;
+              padding-left: 20px;
+              box-sizing: border-box;
+              border-radius: 20px;
+            }
+            input::input-placeholder {
+              color: #fff;
+            }
+            input::-webkit-input-placeholder {
+              //兼容WebKit browsers（Chrome的内核）
+              color: #fff;
+            }
+            input::-moz-placeholder {
+              //Mozilla Firefox 4 to 18
+              color: #fff;
+            }
+            input::-moz-placeholder {
+              //Mozilla Firefox 19+
+              color: #fff;
+            }
+            input::-ms-input-placeholder {
+              //Internet Explorer 10+
+              color: #fff;
+            }
           }
         }
-        .buy-dialog-content {}
       }
     }
+    .content-btn {
+      width: 300px;
+      height: 60px;
+      line-height: 60px;
+      margin: 0 auto;
+      text-align: center;
+      color: #000;
+      font-family: "Poppins";
+      background: #fec25d;
+      cursor: pointer;
+      border-radius: 20px;
+      margin-top: 120px;
+      margin-bottom: 40px;
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/staking/conversion.vue b/src/components/staking/conversion.vue
index 4146d51..f243cd4 100644
--- a/src/components/staking/conversion.vue
+++ b/src/components/staking/conversion.vue
@@ -45,7 +45,7 @@
         <div class="amount">101.75</div>
         <div class="btns">
           <div class="btn">
-            <span @click="cecDialogVisible = true">Staking</span>
+            <span @click="stakingModal">Staking</span>
           </div>
           <div class="btn">
             <span @click="cecDialogVisible = true">Disarm</span>
@@ -56,7 +56,8 @@
         </div>
       </div>
     </div>
-    <stakingDialog :cecDialogVisible="cecDialogVisible" @handleClose="handleClose" />
+    <stakingDialog :cecDialogVisible="cecDialogVisible" :dialogText="dialogUnstakeText" @handleClose="handleClose" @eventBtn="unStaked" />
+    <stakingDialog :cecDialogVisible="cecDialogVisible" :dialogText="dialogUnstakeText" @handleClose="handleClose" @eventBtn="disarmCli" />
   </div>
 </template>
 
@@ -68,6 +69,26 @@ const cecDialogVisible = ref(false)
 const handleClose = () => {
   cecDialogVisible.value = false
 }
+
+const dialogUnstakeText = ref({
+  title: "Unstake CEC",
+  typeLabel: "Unstake",
+  tips: "1111",
+  typeName: "es CEC",
+  conversion: "Reveres conversion esCEC",
+  conversionName: "CEC"
+})
+const stakingModal = () => {
+  cecDialogVisible.value = true
+}
+
+const unStaked = () => {
+  console.log("unStaked")
+}
+const disarmCli = () => {
+  alert('---')
+}
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/staking/header.vue b/src/components/staking/header.vue
index b3b9e04..7017816 100644
--- a/src/components/staking/header.vue
+++ b/src/components/staking/header.vue
@@ -13,8 +13,8 @@
               </div>
             </div>
             <div class="right">
-              <div>CEC</div>
-              <p>{{ cecInfoData.cecBalance }}</p>
+              <div>CEC </div>
+              <p>{{cecInfoData.cecBalance != 0 ? priceCalculated(cecInfoData.cecBalance,18) : 0 }}</p>
             </div>
           </li>
           <li>
@@ -99,7 +99,7 @@
         </div>
       </div>
       <div class="staking-header-right">
-        <div class="logo">
+        <div class="logo" @click="vipDialogVisible = true">
           <div>
             <img src="@/assets/img/staking/VIP5.png" alt="">
           </div>
@@ -110,16 +110,21 @@
         <div class="amount">2150/5000</div>
       </div>
     </div>
+    <VipDialog :vipDialogVisible="vipDialogVisible" @handleClose="vipHandleClose" @vipDialogCli="vipHandleClose" />
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from "vue"
+import VipDialog from "@/components/staking/vipDialog.vue";
+import { priceCalculated } from "@/configs/priceCalculate"
 import {walletStore} from "@/store/wallet";
 import { BlockChain } from "@/components/chain/BlockChain"
 
 const localWalletStore = walletStore()
 
+
+const vipDialogVisible = ref(false)
 const cecInfoData = ref({
   cecBalance: 0,
   CecStaked: 0,
@@ -170,12 +175,12 @@ const getCecData = async () => {
   // esCecCollection: 0,
     let address = localWalletStore.address
     let timer = setInterval( async () => {
-    cecInfoData.value.cecBalance = parseInt(await bc.erc20.balanceOf(address))
-    cecInfoData.value.CecStaked = parseInt(await bc.staking.queryCECStaked())
-    cecInfoData.value.esCecStaked = parseInt(await bc.staking.queryEsCECStaked())
+    cecInfoData.value.cecBalance = parseInt(await bc.erc20.balanceOf(address)).toString()
+    cecInfoData.value.esCecBalance = parseInt(await bc.erc20.esCecBalanceOf(address)).toString()
+    cecInfoData.value.CecStaked = parseInt(await bc.staking.queryCECStaked(address)).toString()
+    cecInfoData.value.esCecStaked = parseInt(await bc.staking.queryEsCECStaked(address)).toString()
       // let ClaimableByCEC = await bc.staking.queryCumulativeByCEC()
       // let ClaimableByEsCEC = await bc.staking.queryClaimableByEsCEC()
-      console.log( cecInfoData.value.cecBalance,cecInfoData.value.CecStaked)
           clearInterval(timer);
       }, 2000);
     // let cec = await bc.staking.queryCECStaked() 
@@ -186,6 +191,10 @@ const getCecData = async () => {
   
 }
 
+const vipHandleClose = () => {
+  vipDialogVisible.value = false
+}
+
 
 onMounted(() => {
   getCecData()
diff --git a/src/components/staking/index.vue b/src/components/staking/index.vue
index e6b03d0..e4c3d98 100644
--- a/src/components/staking/index.vue
+++ b/src/components/staking/index.vue
@@ -130,11 +130,36 @@
         </div>
       </div>
     </div>
+    <stakingDialog :cecDialogVisible="cecDialogVisible" :dialogText="dialogUnstakeText" @handleClose="handleClose" @eventBtn="unCecStaked" />
+
   </div>
 </template>
 
 <script setup>
 import {ref} from "vue";
+import stakingDialog from "./cecDialog.vue"
+import { BlockChain } from "@/components/chain/BlockChain"
+const bc = new BlockChain();
+const cecDialogVisible = ref(false)
+const handleClose = () => {
+  cecDialogVisible.value = false
+}
+
+const dialogUnstakeText = ref({
+  title: "Unstake CEC",
+  typeLabel: "Unstake",
+  // tips: "1111",
+  typeName: "es CEC",
+  // conversion: "Reveres conversion esCEC",
+  // conversionName: "CEC"
+})
+
+const unCecStaked = async () => {
+  console.log((1*1e18).toString())
+  let res = await bc.staking.stakeCec((1*1e18).toString())
+  console.log(res)
+}
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/staking/vipDialog.vue b/src/components/staking/vipDialog.vue
index 5484fc4..9e850ff 100644
--- a/src/components/staking/vipDialog.vue
+++ b/src/components/staking/vipDialog.vue
@@ -20,8 +20,19 @@
             </div>
             <div class="vip-info">
               <h1>VIP 5</h1>
-              <p>VIP status is normal</p>
-              <p><span>VIP points rules</span></p>
+              <p class="vip-status">VIP status is normal</p>
+              <div class="vip-rules">
+                <span>VIP points rules</span>
+                <div class="vip-rules-box">
+                  <div class="vip-rules-box-tit">
+                    VIP growth value description
+                  </div>
+                  <p>1. The growth value is not accumulated. According to the CEC being pledged, 1 CEC pledged = 1 point of VIP growth value.</p>
+                  <p>2. When the number of CEC currently pledged by the user is less than the growth value, it will enter the recession mechanism.</p>
+                  <p>3. Decline mechanism: VIP growth value decreases over time until it equals the number of CEC currently pledged by the user.
+                      wait. When the number of CEC pledged by the user is greater than or equal to the growth value, the decline mechanism will be exited.</p>
+                </div>
+              </div>
             </div>
           </div>
           <div class="vip-top-right" @click="toStake">
@@ -33,23 +44,26 @@
           <span>2501/3000</span>
         </div>
         <div class="vip-swiper">
+          <!--   :autoplay="{ delay: 3200, disableOnInteraction: true }"
+              :navigation="navigation" -->
           <Swiper
+            :modules="modules" 
             :slidesPerView="2"
-            :modules="modules"
             :loop="true"
-            @slideChange="onSlideChange"
-            :autoplay="{ delay: 3200, disableOnInteraction: false }"
+            :initialSlide="vipGrade"
+            :centeredSlides="false"
             :navigation="navigation"
+            @slideChange="onSlideChange"
             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" /> -->
+                :class="vipGrade == index ? 'vip-card' : ''"
+              >
+              <div class="vip-tit">{{ slide.title }}</div>
+              <p v-html="slide.text1"></p>
+              <p v-html="slide.text2"></p>
+              <p v-html="slide.text3"></p>
               </div>
             </SwiperSlide>
           </Swiper>
@@ -86,26 +100,37 @@ const props = defineProps({
   },
 });
 
+const vipGrade = ref(0);
 const vipList = ref([
   {
-    title: "VIP4 Privileges",
-    text: "1. Have all VIP4 privileges"
+    title: "VIP1 Privileges",
+    text1: "1.Have all VIP4 privileges ",
+    text2: "2. <span>9.2%</span> off in game mall ",
+    text3: "3. Gold inc <span>5%</span>",
+  },
+  {
+    title: "VIP2 Privileges",
+    text1: "1.Have all VIP4 privileges ",
+    text2: "2. <span>9.2%</span> off in game mall ",
+    text3: "3. Gold inc <span>5%</span>",
+  },
+  {
+    title: "VIP3 Privileges",
+    text1: "1.Have all VIP4 privileges ",
+    text2: "2. <span>9.2%</span> off in game mall ",
+    text3: "3. Gold inc <span>5%</span>",
   },
   {
     title: "VIP4 Privileges",
-    text: "1. Have all VIP4 privileges"
+    text1: "1.Have all VIP4 privileges ",
+    text2: "2. <span>9.2%</span> off in game mall ",
+    text3: "3. Gold inc <span>5%</span>",
   },
   {
-    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: "VIP5 Privileges",
+    text1: "1.Have all VIP4 privileges ",
+    text2: "2. <span>9.2%</span> off in game mall ",
+    text3: "3. Gold inc <span>5%</span>",
   }
 ])
 
@@ -118,10 +143,9 @@ const toStake = () => {
   emit("vipDialogCli");
 }
 
-const selectHeroIdenx = ref(0);
 const onSlideChange = (swiper) => {
-  // console.log("Slide changed to index:", swiper.realIndex);headeyop
-  selectHeroIdenx.value = swiper.realIndex;
+  console.log("Slide changed to index:", swiper.realIndex);
+  // swiper.realIndex = vipGrade.value
 };
 
 </script>
@@ -184,13 +208,16 @@ const onSlideChange = (swiper) => {
             line-height: 42px;
             margin-bottom: 12px;
           }
-          p {
+          .vip-status {
             height: 18px;
             font-family: 'Poppins';
             font-weight: 400;
             font-size: 22px;
             color: #9950FD;
             margin-bottom: 12px;
+          }
+          .vip-rules {
+            position: relative;
             span {
               font-family: 'Poppins';
               font-weight: 400;
@@ -199,8 +226,39 @@ const onSlideChange = (swiper) => {
               text-decoration-line: underline;
               cursor: pointer;
             }
-            &:last-child {
-              margin-bottom: 0;
+            .vip-rules-box {
+              display: none;
+              position: absolute;
+              top: -85px;
+              right: -745px;
+              width: 825px;
+              padding: 30px 40px;
+              height: 346px;
+              background: #1A1821;
+              box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+              border-radius: 20px;
+              border: 1px solid #B966FF;
+              z-index: 9;
+              .vip-rules-box-tit {
+                font-family: 'Poppins-Regular';
+                font-weight: 400;
+                font-size: 20px;
+                border-bottom: 1px solid #ACA3C6;
+                padding-bottom: 5px;
+              }
+              p {
+                margin-top: 10px;
+                line-height: 1.8;
+                font-family: 'Poppins-Regular';
+                font-weight: 400;
+                font-size: 16px;
+                color: #B29DD1;
+              }
+            }
+            &:hover {
+              .vip-rules-box {
+                display: block;
+              }
             }
           }
         }
@@ -248,26 +306,95 @@ const onSlideChange = (swiper) => {
     }
     .vip-swiper {
       width: 1068px;
-      height: 80px;
+      height: 367px;
       margin: 0 auto;
       color: #fff;
+      position: relative;
+      overflow: hidden;
       .mySwiper {
+          width: 983px !important;
+        overflow: hidden;
         .swiper-wrapper {
-          width: 983px;
           .swiper-slide {
-            width: 473px;
+            width: 474px !important;
             height: 367px;
-            margin-left: 20px;
-            background: #24212E;
-            border-radius: 20px;
-            border: 1px solid #BB7FFF;
-            div {
+            margin-right: 20px;
+            position: relative;
+            overflow: hidden;
+            >div {
               width: 100%;
+              height: 100%;
+              background: #1a1821;
+              border: 1px solid #2A2736;
+              border-radius: 20px;
+              .vip-tit {
+                height: 53px;
+                line-height: 53px;
+                padding-left: 39px;
+                margin-bottom: 20px;
+                border-radius: 20px 20px 0px 0px;
+                background: #2A2736;
+                font-family: 'Poppins';
+                font-weight: bold;
+                font-size: 24px;
+                color: #B29DD1;
+              }
+              p {
+                padding-left: 39px;
+                font-weight: 400;
+                font-size: 18px;
+                font-family: 'Poppins-Regular';
+                color: #7A6F9D;
+                :deep span {
+                  color: #BB7FFF;
+                }
+              }
+            }
+            .vip-card {
+              background: #24212E;
+              border: 2px solid #BB7FFF;
+              .vip-tit {
+                background: #BB7FFF;
+                color: #1A1821;
+              }
+              p {
+                color: #fff;
+                :deep span {
+                  color: #BB7FFF;
+                }
+              }
             }
           }
         }
+        
       }
     }
+    .swiper-button-prev {
+      width: 23px;
+      height: 48px;
+      position: absolute;
+      left: -0px;
+    }
+    .swiper-button-prev::after {
+      content: "";
+      background: url("@/assets/img/staking/VIP_arrow.png") no-repeat;
+      background-size: 100% 100%;
+      width: 23px;
+      height: 43px;
+    }
+    .swiper-button-next {
+      width: 23px;
+      transform: rotateY(180deg);
+      position: absolute;
+      right: -0px;
+    }
+    .swiper-button-next::after {
+      content: "";
+      background: url("@/assets/img/staking/VIP_arrow.png") no-repeat;
+      background-size: 100% 100%;
+      width: 23px;
+      height: 43px;
+    }
   }
 }
 </style>
\ No newline at end of file