diff --git a/mobile/dist.rar b/mobile/dist.rar
new file mode 100644
index 0000000..d54195b
Binary files /dev/null and b/mobile/dist.rar differ
diff --git a/mobile/src/App.vue b/mobile/src/App.vue
index a83de0d..e0c159a 100644
--- a/mobile/src/App.vue
+++ b/mobile/src/App.vue
@@ -1,21 +1,29 @@
 <template>
   <div>
-    <Layout>
-      <RouterView></RouterView>
-    </Layout>
+    <LogoAnimation v-if="!appLoaded"></LogoAnimation>
+    <div v-else>
+      <Layout>
+        <RouterView></RouterView>
+      </Layout>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, provide } from "vue";
-
+import { ref, provide, onMounted } from "vue";
+import LogoAnimation from "@/components/global/LogoAnimation.vue";
 import Layout from "@/components/layout/index.vue";
 import { useRouter, useRoute } from "vue-router";
 const router = useRouter();
 const routes = router.getRoutes();
-
+const appLoaded = ref(false);
 console.log(routes, "routes");
-
+onMounted(() => {
+  // 模拟应用程序加载时间
+  setTimeout(() => {
+    appLoaded.value = true;
+  }, 1000);
+});
 const navShow = ref(false);
 provide("navShow", navShow);
 
diff --git a/mobile/src/assets/img/about/Introduction-bg.png b/mobile/src/assets/img/about/Introduction-bg.png
index be1b7f1..a77ff29 100644
Binary files a/mobile/src/assets/img/about/Introduction-bg.png and b/mobile/src/assets/img/about/Introduction-bg.png differ
diff --git a/mobile/src/assets/img/about/Introduction-boder.png b/mobile/src/assets/img/about/Introduction-boder.png
index 94c4b49..17921f4 100644
Binary files a/mobile/src/assets/img/about/Introduction-boder.png and b/mobile/src/assets/img/about/Introduction-boder.png differ
diff --git a/mobile/src/assets/img/about/Introduction-bottom-boder.png b/mobile/src/assets/img/about/Introduction-bottom-boder.png
index 944f55e..49e3518 100644
Binary files a/mobile/src/assets/img/about/Introduction-bottom-boder.png and b/mobile/src/assets/img/about/Introduction-bottom-boder.png differ
diff --git a/mobile/src/assets/img/about/Introduction网格 (1).png b/mobile/src/assets/img/about/Introduction网格 (1).png
deleted file mode 100644
index be1b7f1..0000000
Binary files a/mobile/src/assets/img/about/Introduction网格 (1).png and /dev/null differ
diff --git a/mobile/src/assets/img/about/Whitepaper装饰.png b/mobile/src/assets/img/about/Whitepaper装饰.png
deleted file mode 100644
index e699895..0000000
Binary files a/mobile/src/assets/img/about/Whitepaper装饰.png and /dev/null differ
diff --git a/mobile/src/assets/img/about/bullet-active.png b/mobile/src/assets/img/about/bullet-active.png
new file mode 100644
index 0000000..c33e3fd
Binary files /dev/null and b/mobile/src/assets/img/about/bullet-active.png differ
diff --git a/mobile/src/assets/img/about/bullet.png b/mobile/src/assets/img/about/bullet.png
new file mode 100644
index 0000000..b345936
Binary files /dev/null and b/mobile/src/assets/img/about/bullet.png differ
diff --git a/mobile/src/assets/img/about/history-bottom-boder.png b/mobile/src/assets/img/about/history-bottom-boder.png
index 31eb759..8363708 100644
Binary files a/mobile/src/assets/img/about/history-bottom-boder.png and b/mobile/src/assets/img/about/history-bottom-boder.png differ
diff --git a/mobile/src/assets/img/about/item-card.png b/mobile/src/assets/img/about/item-card.png
new file mode 100644
index 0000000..ee3e5c1
Binary files /dev/null and b/mobile/src/assets/img/about/item-card.png differ
diff --git a/mobile/src/assets/img/about/latest-news-bg.png b/mobile/src/assets/img/about/latest-news-bg.png
new file mode 100644
index 0000000..3138b63
Binary files /dev/null and b/mobile/src/assets/img/about/latest-news-bg.png differ
diff --git a/mobile/src/assets/img/about/moster.png b/mobile/src/assets/img/about/moster.png
new file mode 100644
index 0000000..f453a88
Binary files /dev/null and b/mobile/src/assets/img/about/moster.png differ
diff --git a/mobile/src/assets/img/about/roadmap-bg.png b/mobile/src/assets/img/about/roadmap-bg.png
index a8c0e0d..49d0705 100644
Binary files a/mobile/src/assets/img/about/roadmap-bg.png and b/mobile/src/assets/img/about/roadmap-bg.png differ
diff --git a/mobile/src/assets/img/about/roadmap-time-bg.png b/mobile/src/assets/img/about/roadmap-time-bg.png
index d48b541..ee3e5c1 100644
Binary files a/mobile/src/assets/img/about/roadmap-time-bg.png and b/mobile/src/assets/img/about/roadmap-time-bg.png differ
diff --git a/mobile/src/assets/img/about/team-bg.png b/mobile/src/assets/img/about/team-bg.png
new file mode 100644
index 0000000..77bd548
Binary files /dev/null and b/mobile/src/assets/img/about/team-bg.png differ
diff --git a/mobile/src/assets/img/about/team-boder.png b/mobile/src/assets/img/about/team-boder.png
index 3041882..33e2645 100644
Binary files a/mobile/src/assets/img/about/team-boder.png and b/mobile/src/assets/img/about/team-boder.png differ
diff --git a/mobile/src/assets/img/about/top箭头.png b/mobile/src/assets/img/about/top箭头.png
deleted file mode 100644
index 77040a2..0000000
Binary files a/mobile/src/assets/img/about/top箭头.png and /dev/null differ
diff --git a/mobile/src/assets/img/about/vision-btoom-boder.png b/mobile/src/assets/img/about/vision-btoom-boder.png
index b3f3f77..4ec9315 100644
Binary files a/mobile/src/assets/img/about/vision-btoom-boder.png and b/mobile/src/assets/img/about/vision-btoom-boder.png differ
diff --git a/mobile/src/assets/img/about/whitepaper-bg.png b/mobile/src/assets/img/about/whitepaper-bg.png
index 9bdebb2..62b1c98 100644
Binary files a/mobile/src/assets/img/about/whitepaper-bg.png and b/mobile/src/assets/img/about/whitepaper-bg.png differ
diff --git a/mobile/src/assets/img/about/whitepaper-bottom-boder.png b/mobile/src/assets/img/about/whitepaper-bottom-boder.png
index 944f55e..0129d4c 100644
Binary files a/mobile/src/assets/img/about/whitepaper-bottom-boder.png and b/mobile/src/assets/img/about/whitepaper-bottom-boder.png differ
diff --git a/mobile/src/assets/img/about/新闻图.png b/mobile/src/assets/img/about/新闻图.png
deleted file mode 100644
index 126a2c4..0000000
Binary files a/mobile/src/assets/img/about/新闻图.png and /dev/null differ
diff --git a/mobile/src/assets/img/about/新闻轮播图交互按钮.png b/mobile/src/assets/img/about/新闻轮播图交互按钮.png
deleted file mode 100644
index af02229..0000000
Binary files a/mobile/src/assets/img/about/新闻轮播图交互按钮.png and /dev/null differ
diff --git a/mobile/src/assets/img/about/新闻轮播图默认按钮.png b/mobile/src/assets/img/about/新闻轮播图默认按钮.png
deleted file mode 100644
index f2cc26b..0000000
Binary files a/mobile/src/assets/img/about/新闻轮播图默认按钮.png and /dev/null differ
diff --git a/mobile/src/assets/img/game/banner-bottom-boder.png b/mobile/src/assets/img/game/banner-bottom-boder.png
new file mode 100644
index 0000000..12828bd
Binary files /dev/null and b/mobile/src/assets/img/game/banner-bottom-boder.png differ
diff --git a/mobile/src/assets/img/game/banner.png b/mobile/src/assets/img/game/banner.png
new file mode 100644
index 0000000..05b07f8
Binary files /dev/null and b/mobile/src/assets/img/game/banner.png differ
diff --git a/mobile/src/assets/img/game/card-left.png b/mobile/src/assets/img/game/card-left.png
new file mode 100644
index 0000000..7e2e706
Binary files /dev/null and b/mobile/src/assets/img/game/card-left.png differ
diff --git a/mobile/src/assets/img/game/card-right.png b/mobile/src/assets/img/game/card-right.png
new file mode 100644
index 0000000..55dc49a
Binary files /dev/null and b/mobile/src/assets/img/game/card-right.png differ
diff --git a/mobile/src/assets/img/game/content-bg.png b/mobile/src/assets/img/game/content-bg.png
new file mode 100644
index 0000000..f221b05
Binary files /dev/null and b/mobile/src/assets/img/game/content-bg.png differ
diff --git a/mobile/src/assets/img/game/login-btn-active.png b/mobile/src/assets/img/game/login-btn-active.png
new file mode 100644
index 0000000..90e8dbb
Binary files /dev/null and b/mobile/src/assets/img/game/login-btn-active.png differ
diff --git a/mobile/src/assets/img/game/login-btn.png b/mobile/src/assets/img/game/login-btn.png
new file mode 100644
index 0000000..76f0b0b
Binary files /dev/null and b/mobile/src/assets/img/game/login-btn.png differ
diff --git a/mobile/src/assets/img/game/rules.png b/mobile/src/assets/img/game/rules.png
new file mode 100644
index 0000000..14c870b
Binary files /dev/null and b/mobile/src/assets/img/game/rules.png differ
diff --git a/mobile/src/assets/img/game/限时冲级移动端(切图)-0408_slices/FAQ装饰.png b/mobile/src/assets/img/game/限时冲级移动端(切图)-0408_slices/FAQ装饰.png
new file mode 100644
index 0000000..14c870b
Binary files /dev/null and b/mobile/src/assets/img/game/限时冲级移动端(切图)-0408_slices/FAQ装饰.png differ
diff --git a/mobile/src/assets/img/game/限时冲级移动端(切图)-0408_slices/规则装饰.png b/mobile/src/assets/img/game/限时冲级移动端(切图)-0408_slices/规则装饰.png
new file mode 100644
index 0000000..14c870b
Binary files /dev/null and b/mobile/src/assets/img/game/限时冲级移动端(切图)-0408_slices/规则装饰.png differ
diff --git a/mobile/src/assets/img/home/andriod.png b/mobile/src/assets/img/home/andriod.png
deleted file mode 100644
index c376d34..0000000
Binary files a/mobile/src/assets/img/home/andriod.png and /dev/null differ
diff --git a/mobile/src/assets/img/home/apple.png b/mobile/src/assets/img/home/apple.png
deleted file mode 100644
index 742c91c..0000000
Binary files a/mobile/src/assets/img/home/apple.png and /dev/null differ
diff --git a/mobile/src/assets/img/home/game/001.png b/mobile/src/assets/img/home/game/001.png
deleted file mode 100644
index b6e4efe..0000000
Binary files a/mobile/src/assets/img/home/game/001.png and /dev/null differ
diff --git a/mobile/src/assets/img/home/game/002.png b/mobile/src/assets/img/home/game/002.png
deleted file mode 100644
index 02b9a73..0000000
Binary files a/mobile/src/assets/img/home/game/002.png and /dev/null differ
diff --git a/mobile/src/assets/img/home/game/003.png b/mobile/src/assets/img/home/game/003.png
deleted file mode 100644
index ac7bcca..0000000
Binary files a/mobile/src/assets/img/home/game/003.png and /dev/null differ
diff --git a/mobile/src/assets/img/home/game/004.png b/mobile/src/assets/img/home/game/004.png
deleted file mode 100644
index 3ab50dd..0000000
Binary files a/mobile/src/assets/img/home/game/004.png and /dev/null differ
diff --git a/mobile/src/assets/img/home/game/005.png b/mobile/src/assets/img/home/game/005.png
deleted file mode 100644
index 8a76bc6..0000000
Binary files a/mobile/src/assets/img/home/game/005.png and /dev/null differ
diff --git a/mobile/src/assets/img/home/game/006.png b/mobile/src/assets/img/home/game/006.png
deleted file mode 100644
index 1cbe454..0000000
Binary files a/mobile/src/assets/img/home/game/006.png and /dev/null differ
diff --git a/mobile/src/assets/img/home/go-to-btn-active.png b/mobile/src/assets/img/home/go-to-btn-active.png
deleted file mode 100644
index c4f0050..0000000
Binary files a/mobile/src/assets/img/home/go-to-btn-active.png and /dev/null differ
diff --git a/mobile/src/assets/img/home/go-to-btn.png b/mobile/src/assets/img/home/go-to-btn.png
deleted file mode 100644
index a73b6fd..0000000
Binary files a/mobile/src/assets/img/home/go-to-btn.png and /dev/null differ
diff --git a/mobile/src/assets/img/home/google.png b/mobile/src/assets/img/home/google.png
deleted file mode 100644
index ec6b8da..0000000
Binary files a/mobile/src/assets/img/home/google.png and /dev/null differ
diff --git a/mobile/src/assets/img/home/nav-boder.png b/mobile/src/assets/img/home/nav-boder.png
deleted file mode 100644
index e533dcc..0000000
Binary files a/mobile/src/assets/img/home/nav-boder.png and /dev/null differ
diff --git a/mobile/src/assets/img/home/nav-logo.png b/mobile/src/assets/img/home/nav-logo.png
index c167686..287e447 100644
Binary files a/mobile/src/assets/img/home/nav-logo.png and b/mobile/src/assets/img/home/nav-logo.png differ
diff --git a/mobile/src/assets/img/home/poster.png b/mobile/src/assets/img/home/poster.png
index fb237a7..4e56351 100644
Binary files a/mobile/src/assets/img/home/poster.png and b/mobile/src/assets/img/home/poster.png differ
diff --git a/mobile/src/assets/img/home/pve-btn-active.png b/mobile/src/assets/img/home/pve-btn-active.png
index 2ca17b9..520d589 100644
Binary files a/mobile/src/assets/img/home/pve-btn-active.png and b/mobile/src/assets/img/home/pve-btn-active.png differ
diff --git a/mobile/src/assets/img/home/pve-btn.png b/mobile/src/assets/img/home/pve-btn.png
index 89de6f3..7fab6fa 100644
Binary files a/mobile/src/assets/img/home/pve-btn.png and b/mobile/src/assets/img/home/pve-btn.png differ
diff --git a/mobile/src/assets/img/home/pve-img.png b/mobile/src/assets/img/home/pve-img.png
index fcc547b..b1fd0fe 100644
Binary files a/mobile/src/assets/img/home/pve-img.png and b/mobile/src/assets/img/home/pve-img.png differ
diff --git a/mobile/src/assets/img/home/pvp-btn-active.png b/mobile/src/assets/img/home/pvp-btn-active.png
index a0b038c..29d500b 100644
Binary files a/mobile/src/assets/img/home/pvp-btn-active.png and b/mobile/src/assets/img/home/pvp-btn-active.png differ
diff --git a/mobile/src/assets/img/home/pvp-btn.png b/mobile/src/assets/img/home/pvp-btn.png
new file mode 100644
index 0000000..96510c6
Binary files /dev/null and b/mobile/src/assets/img/home/pvp-btn.png differ
diff --git a/mobile/src/assets/img/mobile-home/GAMEPLAY图.png b/mobile/src/assets/img/mobile-home/GAMEPLAY图.png
new file mode 100644
index 0000000..b1fd0fe
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/GAMEPLAY图.png differ
diff --git a/mobile/src/assets/img/mobile-home/andriod.png b/mobile/src/assets/img/mobile-home/andriod.png
index ec0a8f2..352e22e 100644
Binary files a/mobile/src/assets/img/mobile-home/andriod.png and b/mobile/src/assets/img/mobile-home/andriod.png differ
diff --git a/mobile/src/assets/img/mobile-home/avatar-icon.png b/mobile/src/assets/img/mobile-home/avatar-icon.png
index 10baa1e..73c8cde 100644
Binary files a/mobile/src/assets/img/mobile-home/avatar-icon.png and b/mobile/src/assets/img/mobile-home/avatar-icon.png differ
diff --git a/mobile/src/assets/img/mobile-home/banner-bg.jpg b/mobile/src/assets/img/mobile-home/banner-bg.jpg
deleted file mode 100644
index 0153818..0000000
Binary files a/mobile/src/assets/img/mobile-home/banner-bg.jpg and /dev/null differ
diff --git a/mobile/src/assets/img/mobile-home/banner-bg.png b/mobile/src/assets/img/mobile-home/banner-bg.png
new file mode 100644
index 0000000..bb373a3
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/banner-bg.png differ
diff --git a/mobile/src/assets/img/mobile-home/banner-slogan.gif b/mobile/src/assets/img/mobile-home/banner-slogan.gif
index e9a8286..9a0b24b 100644
Binary files a/mobile/src/assets/img/mobile-home/banner-slogan.gif and b/mobile/src/assets/img/mobile-home/banner-slogan.gif differ
diff --git a/mobile/src/assets/img/mobile-home/came-feature.png b/mobile/src/assets/img/mobile-home/came-feature.png
index d7d2c61..39cd683 100644
Binary files a/mobile/src/assets/img/mobile-home/came-feature.png and b/mobile/src/assets/img/mobile-home/came-feature.png differ
diff --git a/mobile/src/assets/img/mobile-home/came-video-bottom-boder.png b/mobile/src/assets/img/mobile-home/came-video-bottom-boder.png
index 84ba0b1..1f37fe7 100644
Binary files a/mobile/src/assets/img/mobile-home/came-video-bottom-boder.png and b/mobile/src/assets/img/mobile-home/came-video-bottom-boder.png differ
diff --git a/mobile/src/assets/img/mobile-home/chip-bg.png b/mobile/src/assets/img/mobile-home/chip-bg.png
index d338dd4..48c8ab8 100644
Binary files a/mobile/src/assets/img/mobile-home/chip-bg.png and b/mobile/src/assets/img/mobile-home/chip-bg.png differ
diff --git a/mobile/src/assets/img/mobile-home/chip/chip-bottom-boder.png b/mobile/src/assets/img/mobile-home/chip/chip-bottom-boder.png
new file mode 100644
index 0000000..67018e4
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/chip/chip-bottom-boder.png differ
diff --git a/mobile/src/assets/img/mobile-home/chip/chip-page.png b/mobile/src/assets/img/mobile-home/chip/chip-page.png
new file mode 100644
index 0000000..09d3f92
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/chip/chip-page.png differ
diff --git a/mobile/src/assets/img/mobile-home/chip/chip-title-boder.png b/mobile/src/assets/img/mobile-home/chip/chip-title-boder.png
index edd5b80..19d534d 100644
Binary files a/mobile/src/assets/img/mobile-home/chip/chip-title-boder.png and b/mobile/src/assets/img/mobile-home/chip/chip-title-boder.png differ
diff --git a/mobile/src/assets/img/mobile-home/footer/AT.png b/mobile/src/assets/img/mobile-home/footer/AT.png
index 33abf53..dab93e1 100644
Binary files a/mobile/src/assets/img/mobile-home/footer/AT.png and b/mobile/src/assets/img/mobile-home/footer/AT.png differ
diff --git a/mobile/src/assets/img/mobile-home/footer/GSR.png b/mobile/src/assets/img/mobile-home/footer/GSR.png
index cba5e32..83375d4 100644
Binary files a/mobile/src/assets/img/mobile-home/footer/GSR.png and b/mobile/src/assets/img/mobile-home/footer/GSR.png differ
diff --git a/mobile/src/assets/img/mobile-home/footer/YOUBI.png b/mobile/src/assets/img/mobile-home/footer/YOUBI.png
index ba4dd58..5fcefea 100644
Binary files a/mobile/src/assets/img/mobile-home/footer/YOUBI.png and b/mobile/src/assets/img/mobile-home/footer/YOUBI.png differ
diff --git a/mobile/src/assets/img/mobile-home/footer/betterversedao.png b/mobile/src/assets/img/mobile-home/footer/betterversedao.png
index d358e5b..fe3f154 100644
Binary files a/mobile/src/assets/img/mobile-home/footer/betterversedao.png and b/mobile/src/assets/img/mobile-home/footer/betterversedao.png differ
diff --git a/mobile/src/assets/img/mobile-home/footer/discord-active.png b/mobile/src/assets/img/mobile-home/footer/discord-active.png
new file mode 100644
index 0000000..ea0bb19
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/footer/discord-active.png differ
diff --git a/mobile/src/assets/img/mobile-home/footer/discord.png b/mobile/src/assets/img/mobile-home/footer/discord.png
new file mode 100644
index 0000000..f8d0d7f
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/footer/discord.png differ
diff --git a/mobile/src/assets/img/mobile-home/footer/hashkey.png b/mobile/src/assets/img/mobile-home/footer/hashkey.png
index ee797fc..28b7024 100644
Binary files a/mobile/src/assets/img/mobile-home/footer/hashkey.png and b/mobile/src/assets/img/mobile-home/footer/hashkey.png differ
diff --git a/mobile/src/assets/img/mobile-home/footer/initiate-catital.png b/mobile/src/assets/img/mobile-home/footer/initiate-catital.png
index efa66c9..a4631ae 100644
Binary files a/mobile/src/assets/img/mobile-home/footer/initiate-catital.png and b/mobile/src/assets/img/mobile-home/footer/initiate-catital.png differ
diff --git a/mobile/src/assets/img/mobile-home/footer/kernel.png b/mobile/src/assets/img/mobile-home/footer/kernel.png
index 8e2da32..a5353e7 100644
Binary files a/mobile/src/assets/img/mobile-home/footer/kernel.png and b/mobile/src/assets/img/mobile-home/footer/kernel.png differ
diff --git a/mobile/src/assets/img/mobile-home/footer/kucoin.png b/mobile/src/assets/img/mobile-home/footer/kucoin.png
index 2f39dd2..eb43190 100644
Binary files a/mobile/src/assets/img/mobile-home/footer/kucoin.png and b/mobile/src/assets/img/mobile-home/footer/kucoin.png differ
diff --git a/mobile/src/assets/img/mobile-home/footer/snz.png b/mobile/src/assets/img/mobile-home/footer/snz.png
index 5042869..a104739 100644
Binary files a/mobile/src/assets/img/mobile-home/footer/snz.png and b/mobile/src/assets/img/mobile-home/footer/snz.png differ
diff --git a/mobile/src/assets/img/mobile-home/footer/telegram-active.png b/mobile/src/assets/img/mobile-home/footer/telegram-active.png
new file mode 100644
index 0000000..75e1155
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/footer/telegram-active.png differ
diff --git a/mobile/src/assets/img/mobile-home/footer/telegram.png b/mobile/src/assets/img/mobile-home/footer/telegram.png
new file mode 100644
index 0000000..84649df
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/footer/telegram.png differ
diff --git a/mobile/src/assets/img/mobile-home/footer/tewiter-active.png b/mobile/src/assets/img/mobile-home/footer/tewiter-active.png
new file mode 100644
index 0000000..8f0d915
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/footer/tewiter-active.png differ
diff --git a/mobile/src/assets/img/mobile-home/footer/tewiter.png b/mobile/src/assets/img/mobile-home/footer/tewiter.png
new file mode 100644
index 0000000..f4709e3
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/footer/tewiter.png differ
diff --git a/mobile/src/assets/img/mobile-home/game-feature.png b/mobile/src/assets/img/mobile-home/game-feature.png
index 2bd661e..d655d5a 100644
Binary files a/mobile/src/assets/img/mobile-home/game-feature.png and b/mobile/src/assets/img/mobile-home/game-feature.png differ
diff --git a/mobile/src/assets/img/mobile-home/game-swiper-card/01.png b/mobile/src/assets/img/mobile-home/game-swiper-card/01.png
index 47ae972..ecc254c 100644
Binary files a/mobile/src/assets/img/mobile-home/game-swiper-card/01.png and b/mobile/src/assets/img/mobile-home/game-swiper-card/01.png differ
diff --git a/mobile/src/assets/img/mobile-home/game-swiper-card/02.png b/mobile/src/assets/img/mobile-home/game-swiper-card/02.png
index 98aabf5..1639083 100644
Binary files a/mobile/src/assets/img/mobile-home/game-swiper-card/02.png and b/mobile/src/assets/img/mobile-home/game-swiper-card/02.png differ
diff --git a/mobile/src/assets/img/mobile-home/game-swiper-card/03.png b/mobile/src/assets/img/mobile-home/game-swiper-card/03.png
index 2845704..7b833b4 100644
Binary files a/mobile/src/assets/img/mobile-home/game-swiper-card/03.png and b/mobile/src/assets/img/mobile-home/game-swiper-card/03.png differ
diff --git a/mobile/src/assets/img/mobile-home/game-swiper-card/04.png b/mobile/src/assets/img/mobile-home/game-swiper-card/04.png
index 186a199..e1524b3 100644
Binary files a/mobile/src/assets/img/mobile-home/game-swiper-card/04.png and b/mobile/src/assets/img/mobile-home/game-swiper-card/04.png differ
diff --git a/mobile/src/assets/img/mobile-home/game-swiper-card/05.png b/mobile/src/assets/img/mobile-home/game-swiper-card/05.png
index 7332d29..2e9f890 100644
Binary files a/mobile/src/assets/img/mobile-home/game-swiper-card/05.png and b/mobile/src/assets/img/mobile-home/game-swiper-card/05.png differ
diff --git a/mobile/src/assets/img/mobile-home/game-swiper-card/bullet-active.png b/mobile/src/assets/img/mobile-home/game-swiper-card/bullet-active.png
index 55ca4f9..dffad0f 100644
Binary files a/mobile/src/assets/img/mobile-home/game-swiper-card/bullet-active.png and b/mobile/src/assets/img/mobile-home/game-swiper-card/bullet-active.png differ
diff --git a/mobile/src/assets/img/mobile-home/game-swiper-card/bullet.png b/mobile/src/assets/img/mobile-home/game-swiper-card/bullet.png
index 88ac7ae..3389434 100644
Binary files a/mobile/src/assets/img/mobile-home/game-swiper-card/bullet.png and b/mobile/src/assets/img/mobile-home/game-swiper-card/bullet.png differ
diff --git a/mobile/src/assets/img/mobile-home/game-video.png b/mobile/src/assets/img/mobile-home/game-video.png
index 6959d8e..0b363e4 100644
Binary files a/mobile/src/assets/img/mobile-home/game-video.png and b/mobile/src/assets/img/mobile-home/game-video.png differ
diff --git a/mobile/src/assets/img/mobile-home/game/last-img.png b/mobile/src/assets/img/mobile-home/game/last-img.png
new file mode 100644
index 0000000..5084f57
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/game/last-img.png differ
diff --git a/mobile/src/assets/img/mobile-home/gameplay-bg.png b/mobile/src/assets/img/mobile-home/gameplay-bg.png
index de0810c..dd85806 100644
Binary files a/mobile/src/assets/img/mobile-home/gameplay-bg.png and b/mobile/src/assets/img/mobile-home/gameplay-bg.png differ
diff --git a/mobile/src/assets/img/mobile-home/gameplay-bottom-boder.png b/mobile/src/assets/img/mobile-home/gameplay-bottom-boder.png
new file mode 100644
index 0000000..6587756
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/gameplay-bottom-boder.png differ
diff --git a/mobile/src/assets/img/mobile-home/gameplay.png b/mobile/src/assets/img/mobile-home/gameplay.png
index f3e14e3..18f9814 100644
Binary files a/mobile/src/assets/img/mobile-home/gameplay.png and b/mobile/src/assets/img/mobile-home/gameplay.png differ
diff --git a/mobile/src/assets/img/mobile-home/google.png b/mobile/src/assets/img/mobile-home/google.png
index 70ae209..f3089d1 100644
Binary files a/mobile/src/assets/img/mobile-home/google.png and b/mobile/src/assets/img/mobile-home/google.png differ
diff --git a/mobile/src/assets/img/mobile-home/hero-bg.png b/mobile/src/assets/img/mobile-home/hero-bg.png
index 45d8d22..b4ef0ea 100644
Binary files a/mobile/src/assets/img/mobile-home/hero-bg.png and b/mobile/src/assets/img/mobile-home/hero-bg.png differ
diff --git a/mobile/src/assets/img/mobile-home/hero/001.png b/mobile/src/assets/img/mobile-home/hero/001.png
index 33ee0c8..24bee38 100644
Binary files a/mobile/src/assets/img/mobile-home/hero/001.png and b/mobile/src/assets/img/mobile-home/hero/001.png differ
diff --git a/mobile/src/assets/img/mobile-home/hero/002.png b/mobile/src/assets/img/mobile-home/hero/002.png
index 9e20666..0e93613 100644
Binary files a/mobile/src/assets/img/mobile-home/hero/002.png and b/mobile/src/assets/img/mobile-home/hero/002.png differ
diff --git a/mobile/src/assets/img/mobile-home/hero/003.png b/mobile/src/assets/img/mobile-home/hero/003.png
index b23f8ae..1469e88 100644
Binary files a/mobile/src/assets/img/mobile-home/hero/003.png and b/mobile/src/assets/img/mobile-home/hero/003.png differ
diff --git a/mobile/src/assets/img/mobile-home/hero/004.png b/mobile/src/assets/img/mobile-home/hero/004.png
index a54728f..9e6af65 100644
Binary files a/mobile/src/assets/img/mobile-home/hero/004.png and b/mobile/src/assets/img/mobile-home/hero/004.png differ
diff --git a/mobile/src/assets/img/mobile-home/hero/005.png b/mobile/src/assets/img/mobile-home/hero/005.png
index 9de3e05..ec87401 100644
Binary files a/mobile/src/assets/img/mobile-home/hero/005.png and b/mobile/src/assets/img/mobile-home/hero/005.png differ
diff --git a/mobile/src/assets/img/mobile-home/hero/006.png b/mobile/src/assets/img/mobile-home/hero/006.png
index 9d285e2..ff008be 100644
Binary files a/mobile/src/assets/img/mobile-home/hero/006.png and b/mobile/src/assets/img/mobile-home/hero/006.png differ
diff --git a/mobile/src/assets/img/mobile-home/hero/007.png b/mobile/src/assets/img/mobile-home/hero/007.png
index 421906e..5815dd3 100644
Binary files a/mobile/src/assets/img/mobile-home/hero/007.png and b/mobile/src/assets/img/mobile-home/hero/007.png differ
diff --git a/mobile/src/assets/img/mobile-home/hero/008.png b/mobile/src/assets/img/mobile-home/hero/008.png
index 7671962..81b7a08 100644
Binary files a/mobile/src/assets/img/mobile-home/hero/008.png and b/mobile/src/assets/img/mobile-home/hero/008.png differ
diff --git a/mobile/src/assets/img/mobile-home/hero/009.png b/mobile/src/assets/img/mobile-home/hero/009.png
index f8a8a62..db7a203 100644
Binary files a/mobile/src/assets/img/mobile-home/hero/009.png and b/mobile/src/assets/img/mobile-home/hero/009.png differ
diff --git a/mobile/src/assets/img/mobile-home/hero/010.png b/mobile/src/assets/img/mobile-home/hero/010.png
index d58e2fe..995d644 100644
Binary files a/mobile/src/assets/img/mobile-home/hero/010.png and b/mobile/src/assets/img/mobile-home/hero/010.png differ
diff --git a/mobile/src/assets/img/mobile-home/hero/hero-bg-active.png b/mobile/src/assets/img/mobile-home/hero/hero-bg-active.png
index 498bffc..7d33efa 100644
Binary files a/mobile/src/assets/img/mobile-home/hero/hero-bg-active.png and b/mobile/src/assets/img/mobile-home/hero/hero-bg-active.png differ
diff --git a/mobile/src/assets/img/mobile-home/hero/hero-bg.png b/mobile/src/assets/img/mobile-home/hero/hero-bg.png
index 8c4f2a0..7d33efa 100644
Binary files a/mobile/src/assets/img/mobile-home/hero/hero-bg.png and b/mobile/src/assets/img/mobile-home/hero/hero-bg.png differ
diff --git a/mobile/src/assets/img/mobile-home/hero/hero-introduce-bg.png b/mobile/src/assets/img/mobile-home/hero/hero-introduce-bg.png
index bbd4e6f..daa6e41 100644
Binary files a/mobile/src/assets/img/mobile-home/hero/hero-introduce-bg.png and b/mobile/src/assets/img/mobile-home/hero/hero-introduce-bg.png differ
diff --git a/mobile/src/assets/img/mobile-home/hero/hero-title-boder.png b/mobile/src/assets/img/mobile-home/hero/hero-title-boder.png
index 22f621a..d6dffb8 100644
Binary files a/mobile/src/assets/img/mobile-home/hero/hero-title-boder.png and b/mobile/src/assets/img/mobile-home/hero/hero-title-boder.png differ
diff --git a/mobile/src/assets/img/mobile-home/home-banner-bottom-boder.png b/mobile/src/assets/img/mobile-home/home-banner-bottom-boder.png
index b221cc3..5140406 100644
Binary files a/mobile/src/assets/img/mobile-home/home-banner-bottom-boder.png and b/mobile/src/assets/img/mobile-home/home-banner-bottom-boder.png differ
diff --git a/mobile/src/assets/img/mobile-home/logo.png b/mobile/src/assets/img/mobile-home/logo.png
index dd5e5d5..33a18d3 100644
Binary files a/mobile/src/assets/img/mobile-home/logo.png and b/mobile/src/assets/img/mobile-home/logo.png differ
diff --git a/mobile/src/assets/img/mobile-home/nav-boder.png b/mobile/src/assets/img/mobile-home/nav-boder.png
deleted file mode 100644
index ad53900..0000000
Binary files a/mobile/src/assets/img/mobile-home/nav-boder.png and /dev/null differ
diff --git a/mobile/src/assets/img/mobile-home/nav-btn-bg-active.png b/mobile/src/assets/img/mobile-home/nav-btn-bg-active.png
new file mode 100644
index 0000000..fa16358
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/nav-btn-bg-active.png differ
diff --git a/mobile/src/assets/img/mobile-home/nav-btn-bg.png b/mobile/src/assets/img/mobile-home/nav-btn-bg.png
new file mode 100644
index 0000000..3398e92
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/nav-btn-bg.png differ
diff --git a/mobile/src/assets/img/mobile-home/next.png b/mobile/src/assets/img/mobile-home/next.png
index 24eaf0e..f247b23 100644
Binary files a/mobile/src/assets/img/mobile-home/next.png and b/mobile/src/assets/img/mobile-home/next.png differ
diff --git a/mobile/src/assets/img/mobile-home/prev.png b/mobile/src/assets/img/mobile-home/prev.png
index f2ae56f..262c4b5 100644
Binary files a/mobile/src/assets/img/mobile-home/prev.png and b/mobile/src/assets/img/mobile-home/prev.png differ
diff --git a/mobile/src/assets/img/mobile-home/pve-btn.png b/mobile/src/assets/img/mobile-home/pve-btn.png
deleted file mode 100644
index ef36951..0000000
Binary files a/mobile/src/assets/img/mobile-home/pve-btn.png and /dev/null differ
diff --git a/mobile/src/assets/img/mobile-home/top-icon.png b/mobile/src/assets/img/mobile-home/top-icon.png
index 9c01cac..c0ba261 100644
Binary files a/mobile/src/assets/img/mobile-home/top-icon.png and b/mobile/src/assets/img/mobile-home/top-icon.png differ
diff --git a/mobile/src/assets/img/mobile-home/weapon-bg.png b/mobile/src/assets/img/mobile-home/weapon-bg.png
index 9d88758..6b42885 100644
Binary files a/mobile/src/assets/img/mobile-home/weapon-bg.png and b/mobile/src/assets/img/mobile-home/weapon-bg.png differ
diff --git a/mobile/src/assets/img/mobile-home/weapon/Bazooka.png b/mobile/src/assets/img/mobile-home/weapon/Bazooka.png
index 28672d4..67bda3d 100644
Binary files a/mobile/src/assets/img/mobile-home/weapon/Bazooka.png and b/mobile/src/assets/img/mobile-home/weapon/Bazooka.png differ
diff --git a/mobile/src/assets/img/mobile-home/weapon/Flame.png b/mobile/src/assets/img/mobile-home/weapon/Flame.png
index caac11a..5b6f06f 100644
Binary files a/mobile/src/assets/img/mobile-home/weapon/Flame.png and b/mobile/src/assets/img/mobile-home/weapon/Flame.png differ
diff --git a/mobile/src/assets/img/mobile-home/weapon/Freeze.png b/mobile/src/assets/img/mobile-home/weapon/Freeze.png
index fc30a40..eba2f39 100644
Binary files a/mobile/src/assets/img/mobile-home/weapon/Freeze.png and b/mobile/src/assets/img/mobile-home/weapon/Freeze.png differ
diff --git a/mobile/src/assets/img/mobile-home/weapon/Laser.png b/mobile/src/assets/img/mobile-home/weapon/Laser.png
index d8dfde1..cfd1ca1 100644
Binary files a/mobile/src/assets/img/mobile-home/weapon/Laser.png and b/mobile/src/assets/img/mobile-home/weapon/Laser.png differ
diff --git a/mobile/src/assets/img/mobile-home/weapon/Shotgun.png b/mobile/src/assets/img/mobile-home/weapon/Shotgun.png
index b48d637..bf4402f 100644
Binary files a/mobile/src/assets/img/mobile-home/weapon/Shotgun.png and b/mobile/src/assets/img/mobile-home/weapon/Shotgun.png differ
diff --git a/mobile/src/assets/img/mobile-home/weapon/Sniper.png b/mobile/src/assets/img/mobile-home/weapon/Sniper.png
index ad0b6f0..7b731a7 100644
Binary files a/mobile/src/assets/img/mobile-home/weapon/Sniper.png and b/mobile/src/assets/img/mobile-home/weapon/Sniper.png differ
diff --git a/mobile/src/assets/img/mobile-home/weapon/Submachine.png b/mobile/src/assets/img/mobile-home/weapon/Submachine.png
index e712b42..2a8ac4c 100644
Binary files a/mobile/src/assets/img/mobile-home/weapon/Submachine.png and b/mobile/src/assets/img/mobile-home/weapon/Submachine.png differ
diff --git a/mobile/src/assets/img/mobile-home/weapon/weapon-title-boder.png b/mobile/src/assets/img/mobile-home/weapon/weapon-title-boder.png
index e5b0055..87a4138 100644
Binary files a/mobile/src/assets/img/mobile-home/weapon/weapon-title-boder.png and b/mobile/src/assets/img/mobile-home/weapon/weapon-title-boder.png differ
diff --git a/mobile/src/assets/img/mobile-home/what-bg.png b/mobile/src/assets/img/mobile-home/what-bg.png
index d54867c..1351d7f 100644
Binary files a/mobile/src/assets/img/mobile-home/what-bg.png and b/mobile/src/assets/img/mobile-home/what-bg.png differ
diff --git a/mobile/src/assets/img/mobile-home/what-title-boder.png b/mobile/src/assets/img/mobile-home/what-title-boder.png
index 9caf18a..14c870b 100644
Binary files a/mobile/src/assets/img/mobile-home/what-title-boder.png and b/mobile/src/assets/img/mobile-home/what-title-boder.png differ
diff --git a/mobile/src/assets/img/mobile-home/what-title.png b/mobile/src/assets/img/mobile-home/what-title.png
index 75a06a5..6be97b9 100644
Binary files a/mobile/src/assets/img/mobile-home/what-title.png and b/mobile/src/assets/img/mobile-home/what-title.png differ
diff --git a/mobile/src/assets/img/mobile-home/新建文件夹 (2)/交互 (5).png b/mobile/src/assets/img/mobile-home/新建文件夹 (2)/交互 (5).png
new file mode 100644
index 0000000..dffad0f
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/新建文件夹 (2)/交互 (5).png differ
diff --git a/mobile/src/assets/img/mobile-home/新建文件夹 (2)/游戏特色装饰.png b/mobile/src/assets/img/mobile-home/新建文件夹 (2)/游戏特色装饰.png
new file mode 100644
index 0000000..39cd683
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/新建文件夹 (2)/游戏特色装饰.png differ
diff --git a/mobile/src/assets/img/mobile-home/新建文件夹 (2)/矩形 1520 拷贝 5.png b/mobile/src/assets/img/mobile-home/新建文件夹 (2)/矩形 1520 拷贝 5.png
new file mode 100644
index 0000000..3389434
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/新建文件夹 (2)/矩形 1520 拷贝 5.png differ
diff --git a/mobile/src/assets/text/Poppins-SemiBold.ttf b/mobile/src/assets/text/Poppins-SemiBold.ttf
new file mode 100644
index 0000000..3bbad2a
Binary files /dev/null and b/mobile/src/assets/text/Poppins-SemiBold.ttf differ
diff --git a/mobile/src/assets/text/text.css b/mobile/src/assets/text/text.css
index e93fc48..4153cf7 100644
--- a/mobile/src/assets/text/text.css
+++ b/mobile/src/assets/text/text.css
@@ -10,3 +10,9 @@
     font-weight: normal;
     font-style: normal;
 }
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 600;
+    src: url('./Poppins-SemiBold.ttf') format('truetype');
+  }
\ No newline at end of file
diff --git a/mobile/src/components/about/IntroductionBanner.vue b/mobile/src/components/about/IntroductionBanner.vue
index 6adde3d..fbf7c92 100644
--- a/mobile/src/components/about/IntroductionBanner.vue
+++ b/mobile/src/components/about/IntroductionBanner.vue
@@ -8,15 +8,15 @@
         </div>
         <div class="slogan">
           <div class="cebg-stands">
-            CEBG stands for Crypto Elite's: BATTLEGROUNDS,the first
-            blockchain-based game consisting of Moba,and Battleroyal. It's
+            CEBG stands for Crypto Elite's: BATTLEGROUNDS, the first
+            blockchain-based game consisting of Moba, and Battle royal. It's
             funded by more than 7 institutional investors.
           </div>
-          <div class="cebg-batlegrounds">
-            CEBG stands for Crypto Elite's: BATLEGROUNDS,the first
-            blockchain-based game consisting of Moba,and Battleroyal. It's
+          <!-- <div class="cebg-batlegrounds">
+            CEBG stands for Crypto Elite's: BATTLEGROUNDS, the first
+            blockchain-based game consisting of Moba, and Battle royal. It's
             funded by more than 7 institutional investors.
-          </div>
+          </div> -->
         </div>
       </div>
       <div class="content-right">
@@ -39,30 +39,32 @@
 <style lang="scss" scoped>
 .container {
   padding-top: 120px;
-  background: linear-gradient(180deg, #286397, #17385F);
-  padding-bottom: 317px;
+  // background: linear-gradient(180deg, #286397, #17385F);
+  padding-bottom: 207px;
   position: relative;
   .banner-boder {
     width: 100%;
+    height: 94px;
     position: absolute;
     left: 0;
     bottom: -1px;
-    img{
+    img {
       width: 100%;
     }
   }
   .introduction-bg {
     position: absolute;
     left: 0;
-    top: 120px;
+    top: 0px;
     bottom: 0;
     right: 0;
     width: 100%;
     height: 100%;
-    // z-index: -10;
+    z-index: -1;
     img {
       width: 100%;
       height: 100%;
+      object-fit: cover;
     }
   }
   .content {
@@ -71,37 +73,37 @@
     // display: flex;
     // justify-content: space-between;
     .title {
-      padding-top: 133px;
+      padding-top: 131px;
       // font-size: 48px;
       text-align: center;
-      padding-left: 40px;
       font-size: 60px;
       font-family: "Big John";
       font-weight: 400;
+      font-style: italic;
       color: #ffffff;
     }
     .title-boder {
-      width: 707px;
-      height: 71px;
+      width: 617px;
+      height: 10px;
       margin: 0 auto;
       //height: 58px;
-      padding-top: 45px;
-      padding-bottom: 87px;
+      padding-top: 86px;
+      padding-bottom: 88px;
     }
     .slogan {
-      width: 712px;
+      width: 708px;
       margin: 0 auto;
       padding-top: 40px;
       // margin-left: 40px;
-      font-size: 26px;
-      font-family: Arial;
-      font-weight: bold;
-      color: #ffffff;
+      font-size: 24px;
+      font-family: "Poppins";
+      font-weight: 500;
+      color: #fff6de;
       line-height: 42px;
       display: flex;
       flex-direction: column;
       .cebg-batlegrounds {
-        padding-top: 30px;
+        padding-top: 65px;
       }
     }
     .moster {
diff --git a/mobile/src/components/about/LatestNews.vue b/mobile/src/components/about/LatestNews.vue
index d0a5fb6..e31928d 100644
--- a/mobile/src/components/about/LatestNews.vue
+++ b/mobile/src/components/about/LatestNews.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="latest-news">
     <div class="latest-news-bg">
-      <!-- <img src="@/assets/img/about/latest-news-bg.png" alt="" /> -->
+      <img src="@/assets/img/about/latest-news-bg.png" alt="" />
     </div>
     <div class="title">LATEST NEWS</div>
     <div
@@ -41,7 +41,7 @@
 
 <script setup>
 import { ref, computed, reactive, onMounted } from "vue";
-import { Pagination ,Autoplay} from "swiper";
+import { Pagination, Autoplay } from "swiper";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import "swiper/css";
 import "swiper/css/navigation";
@@ -52,37 +52,27 @@ const ratio = ref(0.2); //视差偏移率
 const positionY1 = ref(0); //背景Y轴偏移量
 const box = ref(null);
 const myRef = ref(null);
-const modules = [Pagination,Autoplay];
+const modules = [Pagination, Autoplay];
 const imageList = reactive([
   {
-    imgSrc: new URL(
-      "@/assets/img/mobile-home/game-swiper-card/01.png",
-      import.meta.url
-    ).href,
+    imgSrc: new URL("@/assets/img/mobile-home/game/last-img.png", import.meta.url)
+      .href,
   },
   {
-    imgSrc: new URL(
-      "@/assets/img/mobile-home/game-swiper-card/02.png",
-      import.meta.url
-    ).href,
+    imgSrc: new URL("@/assets/img/mobile-home/game/last-img.png", import.meta.url)
+      .href,
   },
   {
-    imgSrc: new URL(
-      "@/assets/img/mobile-home/game-swiper-card/03.png",
-      import.meta.url
-    ).href,
+    imgSrc: new URL("@/assets/img/mobile-home/game/last-img.png", import.meta.url)
+      .href,
   },
   {
-    imgSrc: new URL(
-      "@/assets/img/mobile-home/game-swiper-card/04.png",
-      import.meta.url
-    ).href,
+    imgSrc: new URL("@/assets/img/mobile-home/game/last-img.png", import.meta.url)
+      .href,
   },
   {
-    imgSrc: new URL(
-      "@/assets/img/mobile-home/game-swiper-card/05.png",
-      import.meta.url
-    ).href,
+    imgSrc: new URL("@/assets/img/mobile-home/game/last-img.png", import.meta.url)
+      .href,
   },
 ]);
 
@@ -99,7 +89,7 @@ onMounted(() => {
 });
 function handleScroll() {
   const scrollTop =
-  document.body.pageYOffset ||
+    document.body.pageYOffset ||
     document.documentElement.scrollTop ||
     document.body.scrollTop;
   positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
@@ -111,22 +101,25 @@ function handleScroll() {
   position: relative;
   //   height: 800px;
   .title {
+    padding-top: 80px;
+    padding-bottom: 89px;
     // position: absolute;
     text-align: center;
     font-size: 60px;
     font-family: "Big John";
     font-weight: 400;
+    font-style: italic;
     color: #000000;
     line-height: 50px;
   }
   .news-title {
     position: absolute;
     left: 30%;
-    top: -1600px;
+    top: -1140px;
     font-size: 100px;
     font-family: "Big John";
     font-weight: 400;
-    color: #e6e6e6;
+    color: #d0d0d0;
     opacity: 1;
     z-index: -1;
   }
@@ -151,38 +144,38 @@ function handleScroll() {
   width: 650px;
   margin: 0 auto;
   padding-top: 136px;
-  padding-bottom: 300px;
+  padding-bottom: 138px;
   .swiper-slide {
     width: 650px;
-    height: 470px;
+    height: 560px;
     img {
       display: block;
       width: 100%;
-      height: 370px;
+      height: 490px;
     }
   }
 }
 
 :deep(.swiper-pagination .swiper-pagination-bullet) {
-    width: 30px;
-    height: 30px;
-    /*图片路径*/
-    background: url("@/assets/img/mobile-home/game-swiper-card/bullet.png") no-repeat
-      left center;
-      background-size: contain;
-  }
-  /*显示当前活动块的图片*/
-  :deep(.swiper-pagination .swiper-pagination-bullet-active) {
-    width: 32px;
-    height: 32px;
-    /*图片路径*/
-    background: url("@/assets/img/mobile-home/game-swiper-card/bullet-active.png")
-      no-repeat right center;
-      background-size: contain;
-  }
-  :deep(.swiper-pagination-bullet) {
-    opacity: 1;
-  }
+  width: 30px;
+  height: 30px;
+  /*图片路径*/
+  background: url("@/assets/img/about/bullet.png")
+    no-repeat left center;
+  background-size: contain;
+}
+/*显示当前活动块的图片*/
+:deep(.swiper-pagination .swiper-pagination-bullet-active) {
+  width: 32px;
+  height: 32px;
+  /*图片路径*/
+  background: url("@/assets/img/about/bullet-active.png")
+    no-repeat right center;
+  background-size: contain;
+}
+:deep(.swiper-pagination-bullet) {
+  opacity: 1;
+}
 :deep(.swiper-slide-next) {
   // margin-top: 150px;
   position: relative;
diff --git a/mobile/src/components/about/Roadmap.vue b/mobile/src/components/about/Roadmap.vue
index c56dce1..35220c6 100644
--- a/mobile/src/components/about/Roadmap.vue
+++ b/mobile/src/components/about/Roadmap.vue
@@ -6,14 +6,14 @@
     <div class="history-bottom-boder">
       <img src="@/assets/img/about/history-bottom-boder.png" alt="" />
     </div>
-    <div
+    <!-- <div
       class="roadmap-title"
       ref="mTab"
       id="bgTest"
       :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
     >
       The Team
-    </div>
+    </div> -->
 
     <div class="content">
       <div class="title">Roadmap</div>
@@ -76,7 +76,7 @@ const HistoryList = reactive([
   {
     title: "Seed Round",
     time: "2021.11",
-    content: ["PVE Model", "2D TPS Version Dev"],
+    content: ["PVE Mode", "2D TPS Version Dev"],
   },
   {
     title: "NFT IGO",
@@ -103,7 +103,7 @@ const HistoryList = reactive([
     time: "2023.4",
     content: [
       "Completing 3D Upgrade",
-      "10K+ Participation in Test II",
+      "10K+ Participations in Test II",
       "NFT New Collection Mint",
       "In-Game Marketplace",
     ],
@@ -112,7 +112,7 @@ const HistoryList = reactive([
     title: "Official Launch",
     time: "2023.06+",
     content: [
-      "Million Player in 3 month",
+      "Millions of players in 3 months",
       "Off-line E-sport Event",
       "KOL Engine completed",
       "City Warfare testing",
@@ -122,7 +122,7 @@ const HistoryList = reactive([
     title: "Million-Player Game",
     time: "2023.9",
     content: [
-      "Million Player",
+      "Millions of Player",
       "Off-line E-sport Event",
       "KOL Engine completed",
       "City Warfare testing",
@@ -240,22 +240,27 @@ function handleScroll() {
           color: #ffffff;
         }
         .time-content-content {
-          width: 630px;
+          width: 436px;
           margin: 0 auto;
-          height: 410px;
+          height: 536px;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           background: url("@/assets/img/about/roadmap-time-bg.png") no-repeat;
-          background-size: contain;
+          background-size: 100% 100%;
           font-size: 30px;
-          text-align: left;
+          // text-align: ;
           font-family: Arial;
           font-weight: 400;
           color: #ffffff;
           line-height: 36px;
           .text {
+            padding-left: 20px;
+            font-size: 26px;
+            font-family: "Poppins";
+            font-weight: 500;
+            color: #bebebe;
             // margin-left: 145px;
             position: relative;
             margin-bottom: 17px;
@@ -263,11 +268,11 @@ function handleScroll() {
           .text::after {
             content: " ";
             position: absolute;
-            left: -20px;
+            left: 0px;
             top: 10px;
             width: 10px;
             height: 10px;
-            background: #ffffff;
+            background: #bebebe;
             border-radius: 50%;
           }
         }
diff --git a/mobile/src/components/about/Taem.vue b/mobile/src/components/about/Taem.vue
new file mode 100644
index 0000000..6e56e7b
--- /dev/null
+++ b/mobile/src/components/about/Taem.vue
@@ -0,0 +1,300 @@
+<template>
+  <div class="roadmap">
+    <!-- <div class="roadmap-bg">
+      <img src="@/assets/img/about/roadmap-bg.png" alt="" />
+    </div>
+    <div class="history-bottom-boder">
+      <img src="@/assets/img/about/history-bottom-boder.png" alt="" />
+    </div> -->
+    <!-- <div
+      class="roadmap-title"
+      ref="mTab"
+      id="bgTest"
+      :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
+    >
+      The Team
+    </div> -->
+
+    <div class="content">
+      <div class="title">TEAM</div>
+      <div class="title-boder">
+        <img src="@/assets/img/mobile-home/gameplay.png" alt="" />
+      </div>
+      <div class="roadmap-home">
+        <swiper
+          :modules="modules"
+          :loop="true"
+          :slides-per-view="1"
+          :autoplay="{ delay: 4000, disableOnInteraction: false }"
+          :pagination="{ clickable: true }"
+        >
+          <!-- loop可循环轮播，autoplay可自动播放 -->
+          <swiper-slide v-for="(item, index) in HistoryList" :key="index">
+            <div class="time-content">
+              <div class="title-and-time">
+                <div class="time-content-title">{{ item.title }}</div>
+                <div class="time-content-time">{{ item.time }}</div>
+              </div>
+              <div class="title-boder-time">
+                <img src="../../assets/img/about/roadmap-time-top.png" alt="" />
+              </div>
+              <div class="time-content-content">
+                <div class="text" v-html="item.content"></div>
+              </div>
+            </div>
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive, onMounted } from "vue";
+// 引入swiper组件
+import { Swiper, SwiperSlide } from "swiper/vue";
+// 引入swiper样式（按需导入）
+import "swiper/css";
+// import "swiper/css/pagination"; // 轮播图底面的小圆点
+
+// 引入swiper核心和所需模块
+import { Autoplay, Pagination } from "swiper";
+const modules = [Autoplay];
+const Y1 = ref(0);
+const ratio = ref(0.2); //视差偏移率
+
+const positionY1 = ref(0); //背景Y轴偏移量
+
+const HistoryList = reactive([
+  {
+    title: "FOUNDER",
+    time: "MICHEAL YUE",
+    content:
+      "Co-Founder of Giant Interactive(NASDAQ:GA)<br />Ops Manager in ShandaGroup",
+  },
+  {
+    title: "GAMING ECONOMIST",
+    time: "YODA",
+    content:
+      "Core data officer of Foxconn GroupGaming data expert in Giant Interactive",
+  },
+  {
+    title: "PRODUCER",
+    time: "SUPER G",
+    content: "Worked in Shanda Group with 4 million-player games",
+  },
+  {
+    title: "CTO",
+    time: "XIN",
+    content:
+      "In charge of Legend, Legends of the world, The Romance of Legends, etc",
+  },
+]);
+onMounted(() => {
+  document.body.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
+  let bgTest = document.getElementById("bgTest");
+  Y1.value = bgTest.offsetTop * ratio.value;
+});
+
+function handleScroll() {
+  const scrollTop =
+    document.body.pageYOffset ||
+    document.documentElement.scrollTop ||
+    document.body.scrollTop;
+  positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
+}
+</script>
+
+<style lang="scss" scoped>
+.roadmap {
+  position: relative;
+  // background: #1e393d;
+//   padding-bottom: 256px;
+  .roadmap-bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -10;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .blue-monster {
+    position: absolute;
+    left: -370px;
+    bottom: 108px;
+    width: 820px;
+    height: 667px;
+    img {
+      width: 820px;
+      height: 667px;
+    }
+  }
+  .history-bottom-boder {
+    position: absolute;
+    left: 0;
+    bottom: -1px;
+    right: 0;
+    width: 100%;
+    height: 116px;
+    z-index: -10;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .roadmap-title {
+    position: absolute;
+    left: 10%;
+    top: -1000px;
+    font-size: 100px;
+    font-family: "Big John";
+    font-weight: 400;
+    color: #173637;
+    // opacity: 0.3;
+    z-index: -1;
+  }
+  .content {
+    padding-bottom: 176px;
+    .title {
+      padding-top: 85px;
+      font-size: 60px;
+      margin-left: 49px;
+      font-family: "Big John";
+      font-weight: 400;
+      font-style: italic;
+      color: #1a1919;
+      margin-bottom: 35px;
+    }
+    .title-boder {
+      width: 405px;
+      //   margin: 0 auto;
+      padding-left: 50px;
+    //   height: 8px;
+      padding-bottom: 64px;
+    }
+    .title-boder-time {
+      width: 701px;
+      // height: 76px;
+      padding-bottom: 64px;
+    }
+    .roadmap-home {
+      width: 710px;
+      margin: 0 auto;
+      .swiper-slide {
+        // background-color: #bfc;
+        // height: 200px;
+      }
+
+      .time-content {
+        .title-and-time {
+          margin-bottom: 36px;
+        }
+        .time-content-title {
+          text-align: center;
+          font-size: 40px;
+          font-family: 'Big John';
+          font-weight: 400;
+          color: #000000;
+          line-height: 60px;
+        }
+        .time-content-time {
+            text-align: center;
+            font-size: 40px;
+          font-family: 'Big John';
+          font-weight: 400;
+          color: #000000;
+          line-height: 60px;
+        }
+        .time-content-content {
+          width: 336px;
+          margin: 0 auto;
+          height: 436px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          background: url("@/assets/img/about/roadmap-time-bg.png") no-repeat;
+          background-size: 100% 100%;
+          font-size: 24px;
+          font-family: "Poppins";
+          font-weight: 500;
+          color: #ffffff;
+          line-height: 62px;
+          .text {
+            width: 90%;
+            text-align: center;
+            //  margin-left: 45px;
+            position: relative;
+            margin-bottom: 17px;
+          }
+          //   .text::after {
+          //     content: " ";
+          //     position: absolute;
+          //     left: -20px;
+          //     top: 10px;
+          //     width: 10px;
+          //     height: 10px;
+          //     background: #ffffff;
+          //     border-radius: 50%;
+          //   }
+        }
+      }
+    }
+    .history {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .history-content {
+      flex: 1;
+      .title {
+        text-align: center;
+        font-size: 26px;
+        font-family: "Big John";
+        font-weight: 400;
+        color: #ffffff;
+      }
+      .time {
+        text-align: center;
+        font-size: 26px;
+        font-family: "Big John";
+        font-weight: 400;
+        color: #ffffff;
+      }
+      // display: flex;
+    }
+    .history-card {
+      display: flex;
+      justify-content: space-between;
+      padding-top: 50px;
+      padding-bottom: 443px;
+      .card-item {
+        width: 210px;
+        height: 290px;
+        background: #1e293b;
+        border-radius: 12px;
+        background: url("../../assets/img/about/history-bg.png") no-repeat;
+        background-size: contain;
+        font-size: 16px;
+        font-family: Arial;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 22px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .item {
+          padding-left: 10px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/mobile/src/components/about/VisionMission.vue b/mobile/src/components/about/VisionMission.vue
index 8881f15..e33de0a 100644
--- a/mobile/src/components/about/VisionMission.vue
+++ b/mobile/src/components/about/VisionMission.vue
@@ -1,25 +1,28 @@
 <template>
-  <div class="container">
-    <div
+  <div class="containers">
+    <!-- <div
       class="vision-title"
       ref="mTab"
       id="bgTest"
       :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
     >
       Vision
-    </div>
+    </div> -->
     <div class="content">
       <div class="content-top">
         <div class="content-right">
           <div class="title">Vision & Mission</div>
           <div class="title-boder">
-            <img src="@/assets/img/about/vision-title-boder.png" alt="" />
+            <img src="@/assets/img/mobile-home/gameplay.png" alt="" />
           </div>
           <div class="slogan">
             <div class="cebg-stands">
               Our goal is to produce a game that is very enjoyable to play and
-              has excellent economy design that allows players to feel the joy
-              of playing while being able to earntokens.
+              has an excellent economic design that allows players to feel the
+              joy of playing while being able to earn tokens. At the same time,
+              a community co-creation and sharing mechanism is used to disrupt
+              the existing content and value-sharing model so that creativity
+              and value can flourish in the community.
             </div>
             <!-- <div class="cebg-batlegrounds">
               At the same time, a community co-creation and sharing mechanism is
@@ -36,24 +39,25 @@
       </div>
       <div class="content-bottom">
         <div class="team-boder">
-          <img src="@/assets/img/about/team-boder.png" alt="" />
-          <div class="team-title">TEAM</div>
+          <!-- <img src="@/assets/img/about/team-boder.png" alt="" />
+          <div class="team-title">TEAM</div> -->
         </div>
-        <div class="card-list">
+        <!-- <div class="card-list">
           <div class="card-item" v-for="team in cardText">
             <div class="child">
               <img src="@/assets/img/about/card-bg.png" alt="" />
             </div>
             <Grid9Panel class="grid" :teamItem="team"></Grid9Panel>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
     <div class="banner-boder">
       <img src="@/assets/img/about/vision-btoom-boder.png" alt="" />
     </div>
+    <Roadmap></Roadmap>
     <div class="vidion-bg">
-      <!-- <img src="@/assets/img/about/team-bg.png" alt="" /> -->
+      <img src="@/assets/img/about/team-bg.png" alt="" />
     </div>
   </div>
 </template>
@@ -61,6 +65,7 @@
 <script setup>
 import { ref, computed, reactive, onMounted } from "vue";
 import Grid9Panel from "./Grid9Panel.vue";
+import Roadmap from "@/components/about/Taem.vue";
 const Y1 = ref(0);
 const ratio = ref(0.2); //视差偏移率
 const positionY1 = ref(0); //背景Y轴偏移量
@@ -104,10 +109,10 @@ function handleScroll() {
 </script>
 
 <style lang="scss" scoped>
-.container {
+.containers {
   //   padding-top: 62px;
   //  background-color: RGBA(40, 98, 150, 1);
-  padding-bottom: 116px;
+  // padding-bottom: 116px;
   position: relative;
   .banner-boder {
     position: absolute;
@@ -138,6 +143,10 @@ function handleScroll() {
     width: 100%;
     height: 100%;
     z-index: -3;
+    img {
+      width: 100%;
+      height: 100%;
+    }
   }
   .content {
     // width: 1440px;
@@ -153,14 +162,15 @@ function handleScroll() {
         font-size: 60px;
         font-family: "Big John";
         font-weight: 400;
+        font-style: italic;
         color: #000000;
       }
       .title-boder {
-        padding-top: 35px;
-        width: 707px;
+        padding-top: 81px;
+        width: 662px;
         margin: 0 auto;
-        height: 71px;
-        margin-bottom: 30px;
+        height: 8px;
+        margin-bottom: 81px;
         img {
           width: 100%;
         }
@@ -168,12 +178,12 @@ function handleScroll() {
       .slogan {
         width: 712px;
         margin: 0 auto;
-        padding-top: 87px;
+        // padding-top: 87px;
         // margin-left: 49px;
-        font-size: 26px;
-        font-family: Arial;
-        font-weight: bold;
-        color: #000000;
+        font-size: 24px;
+        font-family: "Poppins";
+        font-weight: 500;
+        color: #5d5d5d;
         line-height: 42px;
         flex-direction: column;
         .cebg-batlegrounds {
@@ -181,15 +191,15 @@ function handleScroll() {
         }
       }
       .mission {
-        margin-top: 44px;
-        margin-left: 22px;
-        width: 638px;
-        height: 539px;
-        // margin-bottom: 67px;
+        margin-top: 78px;
+        margin-left: 8px;
+        width: 651px;
+        height: 589px;
+        margin-bottom: 99px;
 
         img {
-          width: 638px;
-          height: 539px;
+          width: 651px;
+          height: 589px;
           object-fit: cover;
         }
       }
@@ -230,24 +240,23 @@ function handleScroll() {
           overflow: hidden;
           height: 930px;
           margin-bottom: 39px;
-         
+
           .child {
             position: absolute;
             width: 590px;
             height: 590px;
             left: 56px;
             top: 50px;
-            
+
             // background-image: url("@/assets/img/about/card-bg.png") ;
             background-size: cover; /* 或者使用 contain */
 
             transition: transform 0.5s ease-in-out;
             transform: scale(1);
-           
           }
         }
         .card-item:hover .child {
-          transform: scale(1.70);
+          transform: scale(1.7);
           opacity: 0.3;
           top: 160px;
         }
diff --git a/mobile/src/components/about/Whitepaper.vue b/mobile/src/components/about/Whitepaper.vue
index 8678604..cc4ef1d 100644
--- a/mobile/src/components/about/Whitepaper.vue
+++ b/mobile/src/components/about/Whitepaper.vue
@@ -3,34 +3,62 @@
     <div class="whitepaper-bg">
       <img src="@/assets/img/about/whitepaper-bg.png" alt="" />
     </div>
+    <div
+      class="whitepaper-title"
+      ref="mTab"
+      id="bgTest"
+      :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
+    >
+      Whitepaper
+    </div>
     <div class="whitepaper-bottom-boder">
       <img src="@/assets/img/about/whitepaper-bottom-boder.png" alt="" />
     </div>
     <div class="content">
       <div class="title">Whitepaper</div>
       <div class="title-boder">
-        <img src="@/assets/img/about/roadmap-title-boder.png" alt="" />
+        <img src="@/assets/img/mobile-home/gameplay.png" alt="" />
       </div>
-      <div class="slogan">
+      <!-- <div class="slogan">
         CEBG is the first blockchain-based animation game which consists of
         Moba, Battleroyal; funded by more than 7 institutional investors.
-      </div>
+      </div> -->
       <div class="more">
         <a href="#">
           Learn more about our studio mission
           <span class="more-right">>></span></a
         >
       </div>
+      <div class="moster">
+        <img src="@/assets/img/about/moster.png" alt="" />
+      </div>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref, computed, reactive, onMounted } from "vue";
+const Y1 = ref(0);
+const ratio = ref(0.2); //视差偏移率
+const positionY1 = ref(0); //背景Y轴偏移量
+onMounted(() => {
+  document.body.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
+  let bgTest = document.getElementById("bgTest");
+  Y1.value = bgTest.offsetTop * ratio.value;
+});
+function handleScroll() {
+  const scrollTop =
+    document.body.pageYOffset ||
+    document.documentElement.scrollTop ||
+    document.body.scrollTop;
+  positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
+}
+</script>
 
 <style lang="scss" scoped>
 .whitepaper {
   position: relative;
-  padding-top: 75px;
+  padding-top: 100px;
   padding-bottom: 327px;
   .whitepaper-bg {
     position: absolute;
@@ -46,13 +74,25 @@
       height: 100%;
     }
   }
+  .whitepaper-title {
+    position: absolute;
+    left: 0px;
+    top: -540px;
+    font-size: 100px;
+    font-family: "Big John";
+    font-weight: 400;
+    font-style: italic;
+    color: #272727;
+    opacity: 1;
+    z-index: -1;
+  }
   .whitepaper-bottom-boder {
     position: absolute;
     left: 0;
     bottom: -1px;
     right: 0;
     width: 100%;
-    height: 234px;
+    height: 73px;
     z-index: -10;
     img {
       width: 100%;
@@ -63,16 +103,19 @@
     // width: 1440px;
     // margin: 0 auto;
     .title {
-      font-size: 60px;
       text-align: center;
+      font-size: 60px;
       font-family: "Big John";
       font-weight: 400;
+      font-style: italic;
       color: #ffffff;
     }
     .title-boder {
       margin: 0 auto;
-      width: 707px;
-      height: 71px;
+      width: 605px;
+      height: 8px;
+      margin-top: 72px;
+      margin-bottom: 72px;
     }
     .slogan {
       width: 707px;
@@ -88,26 +131,32 @@
       line-height: 42px;
     }
     .more {
-      border: 2px solid #ec2e5b;
+      border: 2px solid #cfa944;
       color: #4bffe5;
-      width: 710px;
+      width: 546px;
       margin: 0 auto;
       text-align: center;
       height: 81px;
       line-height: 81px;
       // margin-left: 64px;
-      font-size: 34px;
+      font-size: 26px;
       font-family: Arial;
       font-weight: bold;
-      color: #4bffe5;
+      color: #fcbe17;
       // line-height: 26px;
       a {
-        color: #4bffe5;
+        color: #fcbe17;
       }
     }
     .more-right {
-      font-size: 34px;
-      color: #ec2e5b;
+      font-size: 26px;
+      color: #fcbe17;
+    }
+    .moster {
+      padding-top: 48px;
+      margin: 0 auto;
+      width: 360px;
+      height: 513px;
     }
   }
 }
diff --git a/mobile/src/components/global/LogoAnimation.vue b/mobile/src/components/global/LogoAnimation.vue
new file mode 100644
index 0000000..367fe97
--- /dev/null
+++ b/mobile/src/components/global/LogoAnimation.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="__logo-container">
+    <img src="../../assets/img/home/nav-logo.png" alt="Company Logo" />
+  </div>
+</template>
+
+<style scoped>
+.__logo-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  animation: logo-animation 1.8s ease-in-out infinite;
+}
+
+@keyframes logo-animation {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>
+
+<script setup></script>
diff --git a/mobile/src/components/home/Banner.vue b/mobile/src/components/home/Banner.vue
index 3db6098..e211706 100644
--- a/mobile/src/components/home/Banner.vue
+++ b/mobile/src/components/home/Banner.vue
@@ -7,21 +7,27 @@
       <div class="download-btns">
         <div class="andriod">
           <a href="https://www.cebg.games/release/cebg.apk">
-             <img src="@/assets/img/mobile-home/andriod.png" alt=""
+            <img src="@/assets/img/mobile-home/andriod.png" alt=""
           /></a>
         </div>
-        <div class="apple">
+        <!-- <div class="apple">
           <img src="@/assets/img/mobile-home/apple.png" alt="" />
-        </div>
+        </div> -->
+        
         <div class="google">
-          <a href="https://play.google.com/store/apps/details?id=io.metamask"
+          <a href="https://play.google.com/store/apps/details?id=com.cege.games.release"
             ><img src="@/assets/img/mobile-home/google.png" alt=""
           /></a>
         </div>
       </div>
     </div>
+    <div class="posters">
+      <div class="poster poster-one"></div>
+      <div class="poster poster-tow"></div>
+      <div class="poster poster-there"></div>
+    </div>
     <div class="banner-bg">
-      <img src="@/assets/img/mobile-home/banner-bg.jpg" alt="" />
+      <img src="@/assets/img/mobile-home/banner-bg.png" alt="" />
     </div>
     <div class="banner-bottom">
       <img src="@/assets/img/mobile-home/home-banner-bottom-boder.png" alt="" />
@@ -70,32 +76,84 @@
     .title {
       width: 725px;
       margin: 0 auto;
-      margin-top: 333px;
+      margin-top: 231px;
       img {
         width: 725px;
       }
     }
     .download-btns {
       position: absolute;
-      bottom: 150px;
+      bottom: 190px;
       left: 50%;
       transform: translate(-50%, -50%);
       display: flex;
-      width: 92%;
+      width: 82%;
       justify-content: space-between;
       .andriod {
-        width: 216px;
-        height: 66px;
+        width: 265px;
+        height: 79px;
       }
       .apple {
         width: 216px;
         height: 66px;
       }
       .google {
-        width: 216px;
-        height: 66px;
+        width: 265px;
+        height: 79px;
       }
     }
   }
 }
+.posters {
+  position: absolute;
+  left: 50%;
+  bottom: 2px;
+  z-index: 9;
+  margin-bottom: 12px;
+  margin-top: 74px;
+  width: 15px;
+  height: 90px;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  .poster {
+    width: 16px;
+    height: 12px;
+    background-image: url("@/assets/img/home/poster.png");
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-color: transparent;
+    background-size: contain;
+    -webkit-animation-name: arrow;
+    animation-name: arrow;
+    margin-bottom: 4px;
+    -webkit-animation-duration: 1.5s;
+    animation-duration: 1.5s;
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+  }
+  .poster-one {
+    top: 0;
+    -webkit-animation-delay: 0s;
+    animation-delay: 0s;
+  }
+  .poster-tow {
+    top: 18px;
+    -webkit-animation-delay: 0.5s;
+    animation-delay: 0.5s;
+  }
+  .poster-there {
+    top: 64px;
+    -webkit-animation-delay: 1s;
+    animation-delay: 1s;
+  }
+  @keyframes arrow {
+    50% {
+      opacity: 0;
+    }
+  }
+}
 </style>
diff --git a/mobile/src/components/home/Chip.vue b/mobile/src/components/home/Chip.vue
index 8472dac..9a868e6 100644
--- a/mobile/src/components/home/Chip.vue
+++ b/mobile/src/components/home/Chip.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="chip">
-    <!-- <div class="chip-bg"><img src="@/assets/img/mobile-home/chip-bg.png" alt="" /></div> -->
+    <div class="chip-bg"><img src="@/assets/img/mobile-home/chip-bg.png" alt="" /></div>
+    <div class="chip-bottom-boder"><img src="@/assets/img/mobile-home/chip/chip-bottom-boder.png" alt="" /></div>
     <div class="chip-title">CHIP</div>
+    <div class="chip-page">
+      <img src="../../assets/img/mobile-home/chip/chip-page.png" alt="" />
+    </div>
     <div class="content">
       <div class="chip-child">
         <div class="chip-item-red">
@@ -77,7 +81,7 @@
 
 <style lang="scss" scoped>
 .chip {
-  background: linear-gradient(180deg, #97e6ed, #9ce5ec, #abf3fa);
+  // background: linear-gradient(180deg, #97e6ed, #9ce5ec, #abf3fa);
   padding-top: 65px;
   padding-bottom: 180px;
   position: relative;
@@ -95,17 +99,27 @@
       height: 100%;
     }
   }
+  .chip-bottom-boder{
+    position: absolute;
+    bottom: 0px;
+  }
   .chip-title {
     font-size: 42px;
     text-align: center;
     font-family: "Big John";
     font-weight: 400;
-    color: #000101;
+    color: #ffba00;
     background: url("@/assets/img/mobile-home/chip/chip-title-boder.png")
       no-repeat;
     background-size: contain;
     background-position: center center;
-    margin-bottom: 107px;
+    margin-bottom: 73px;
+  }
+  .chip-page {
+    width: 370px;
+    margin: 0 auto;
+    height: 70px;
+    margin-bottom: 56px;
   }
   .content {
     display: flex;
diff --git a/mobile/src/components/home/DameplaySwiperCard.vue b/mobile/src/components/home/DameplaySwiperCard.vue
index cd7808a..dc75ca2 100644
--- a/mobile/src/components/home/DameplaySwiperCard.vue
+++ b/mobile/src/components/home/DameplaySwiperCard.vue
@@ -5,12 +5,12 @@
         :effect="'coverflow'"
         :grabCursor="false"
         :centeredSlides="true"
-        slidesPerView="1.2"
+        slidesPerView="1.15"
         :autoplay="{ delay: 4000, disableOnInteraction: false }"
         :coverflowEffect="{
           rotate: 0,
           stretch: 15,
-          depth: 150,
+          depth: 200,
           modifier: 1,
           slideShadows: false,
         }"
@@ -86,7 +86,7 @@ const handSlideNext = () => {
   background-position: center;
   background-size: cover;
   width: 700px;
-  height: 410px;
+  height: 420px;
 }
 
 .swiper-slide img {
@@ -133,7 +133,7 @@ const handSlideNext = () => {
 
 .swiper-content .swiper-slide.swiper-slide-next {
   z-index: 2;
-  // transform: scale(1.2);
+  transform: scale(0.8);
   opacity: 0.3;
 }
 
diff --git a/mobile/src/components/home/GameGallerp.vue b/mobile/src/components/home/GameGallerp.vue
index 0ce3935..cd3546d 100644
--- a/mobile/src/components/home/GameGallerp.vue
+++ b/mobile/src/components/home/GameGallerp.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <div class="gallerp">
-      <div
+      <!-- <div
         class="title"
         ref="mTab"
         id="bgTest"
         :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
       >
         GAME VIDEO
-      </div>
+      </div> -->
       <div class="gallerp-bg">
         <img src="@/assets/img/mobile-home/game-video.png" alt="" />
       </div>
@@ -21,13 +21,15 @@
       <div class="content">
         <div class="gallery-title">GAME VIDEO</div>
         <div class="gallery-boder">
-          <img src="@/assets/img/mobile-home/came-video.png" alt="" />
+          <img src="@/assets/img/mobile-home/gameplay.png" alt="" />
         </div>
         <div class="slogan">
           <div class="slogan-title">
-            Come to be COMMENDER! Enjoy 3D CEBG and
+            Embark on an epic journey as a commander in the captivating 3D world
+            of CEBG and engage in thrilling battles against other skilled
+            players. Are you ready to rise up and claim victory?
           </div>
-          <div class="slogan-text">fight against other players!</div>
+          <!-- <div class="slogan-text">fight against other players!</div> -->
         </div>
         <div class="gallery-banner">
           <swiper
@@ -59,12 +61,12 @@
       </div>
     </div>
     <div class="gameplay-bottom">
-      <div
+      <!-- <div
         class="gameplay-bottom-title"
         :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
       >
         GAME FEATURE
-      </div>
+      </div> -->
       <div class="gameplay-bottom-bg">
         <img src="@/assets/img/mobile-home/game-feature.png" alt="" />
       </div>
@@ -74,17 +76,18 @@
           <img src="@/assets/img/mobile-home/came-feature.png" alt="" />
         </div>
         <div class="sloagn">
-          Undefinable pattern, incredible gaming experience and<br />
-          excited NFT in CEBG!
+          join the fray and gain epic experience as you battle alongside fellow
+          warriors! Real-Time Battles, In-Game Trading, Unique Environments,
+          Customizable Controls, Competitive Tournaments
         </div>
         <DameplaySwiperCard></DameplaySwiperCard>
       </div>
-      <div class="gameplay-bottom-viodboder">
+      <!-- <div class="gameplay-bottom-viodboder">
         <img
           src="@/assets/img/mobile-home/game-feature-bottom-boder.png"
           alt=""
         />
-      </div>
+      </div> -->
     </div>
     <div></div>
   </div>
@@ -141,7 +144,7 @@ const videoModal = ref(null);
 onMounted(() => {
   document.body.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
   let bgTest = document.getElementById("bgTest");
-  Y1.value = bgTest.offsetTop * ratio.value;
+  // Y1.value = bgTest.offsetTop * ratio.value;
 });
 
 function handleScroll() {
@@ -152,7 +155,6 @@ function handleScroll() {
   positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
 }
 const fullscreen = ref(false);
-
 </script>
 
 <style lang="scss" scoped>
@@ -200,8 +202,8 @@ const fullscreen = ref(false);
   .content {
     // width: 1440px;
     margin: 0 auto;
-    padding-top: 320px;
-    padding-bottom: 310px;
+    padding-top: 42px;
+    padding-bottom: 103px;
     position: relative;
 
     z-index: 3;
@@ -218,7 +220,8 @@ const fullscreen = ref(false);
     .gallery-boder {
       width: 695px;
       margin: 35px auto;
-      margin-bottom: 118px;
+      padding-top: 78px;
+      margin-bottom: 89px;
     }
     .btn {
       padding-top: 30px;
@@ -287,11 +290,11 @@ const fullscreen = ref(false);
       // margin-bottom: 113px;
       // height: 50px;
       .slogan-title {
-        font-size: 22px;
-        font-family: Arial;
-        font-weight: bold;
-        color: #fff;
-        line-height: 32px;
+        font-size: 24px;
+        font-family: "Poppins";
+        font-weight: 500;
+        color: #767676;
+        line-height: 42px;
       }
       .slogan-text {
         font-size: 18px;
@@ -344,7 +347,7 @@ const fullscreen = ref(false);
 .gameplay-bottom {
   // background: linear-gradient(to bottom, #161f27, #334d62, #689fcb);
   position: relative;
-  padding-bottom: 400px;
+  padding-bottom: 100px;
   .gameplay-bottom-bg {
     position: absolute;
     left: 0;
@@ -391,26 +394,31 @@ const fullscreen = ref(false);
 
     .title {
       margin: 0 auto;
-      padding-top: 60px;
+      padding-top: 35px;
       font-size: 66px;
       font-family: "Big John";
+      padding-bottom: 82px;
       font-weight: 400;
+      font-style: italic;
       color: #ffffff;
     }
     .boder {
-      width: 694px;
-      height: 10px;
+      width: 647px;
+      height: 8px;
       margin: 0 auto;
       // margin-top: 46px;
-      margin-bottom: 146px;
+      margin-bottom: 84px;
     }
     .sloagn {
+      width: 698px;
+      margin: 0 auto;
       text-align: center;
-      font-size: 26px;
-      font-family: Arial;
-      font-weight: bold;
-      color: #ffffff;
-      margin-bottom: 130px;
+      font-size: 24px;
+      font-family: 'Poppins';
+      font-weight: 500;
+      color: #fff3d3;
+      line-height: 42px;
+      margin-bottom: 90px;
     }
   }
 }
diff --git a/mobile/src/components/home/Gameplay.vue b/mobile/src/components/home/Gameplay.vue
index 602f6f5..126cc06 100644
--- a/mobile/src/components/home/Gameplay.vue
+++ b/mobile/src/components/home/Gameplay.vue
@@ -3,6 +3,9 @@
     <div class="gameplay-bg">
       <img src="@/assets/img/mobile-home/gameplay-bg.png" alt="" />
     </div>
+    <div class="gameplay-bottom-boder">
+      <img src="@/assets/img/mobile-home/gameplay-bottom-boder.png" alt="" />
+    </div>
     <div class="gameplay-content">
       <div class="gameplay-right">
         <div class="title">GAMEPLAY</div>
@@ -29,18 +32,22 @@
         </div>
         <div class="pve-content">
           <div class="slogan">
-            <span class="title">
-              Each battle contains 40 players by matching </span
+            <span class="pve-content-title">
+              {{
+                isPveTab == true
+                  ? "The PVE rewards include in-game  ..."
+                  : "The PVP rewards include in-game  ..."
+              }} </span
             ><br />
             <span v-if="!isPveTab"
-              >A player should expect to face the majority or entirety of their
-              opponents in the form of computer-controlled opponents.
-            </span>
-            <span v-else
               >Stands for Player versus Player. It’s a game mode that revolves
               around layer-against-player combat - combat between actual human
               players.
             </span>
+            <span v-else
+              >A player should expect to face the majority or entirety of their
+              opponents in the form of computer-controlled opponents.
+            </span>
           </div>
         </div>
         <div class="gameplay-left">
@@ -68,8 +75,12 @@ const handTabActive = (isTab) => {
   display: flex;
   flex-direction: column;
   position: relative;
-  padding-top: 100px;
-  background: linear-gradient(180deg, #27757d, #289299, #34adb4);
+  // padding-top: 100px;
+  // background: linear-gradient(180deg, #27757d, #289299, #34adb4);
+  .gameplay-bottom-boder{
+    position: absolute;
+    bottom: 0px;
+  }
   .gameplay-bg {
     position: absolute;
     left: 0;
@@ -78,7 +89,7 @@ const handTabActive = (isTab) => {
     bottom: 0;
     width: 100%;
     height: 100%;
-    z-index: 0;
+    z-index: -1;
     img {
       max-width: 100%;
       height: 100%;
@@ -86,22 +97,23 @@ const handTabActive = (isTab) => {
     }
   }
   .title {
-    // width: 544px;
     font-size: 66px;
     font-family: "Big John";
     font-weight: 400;
-    text-align: center;
+    font-style: italic;
     color: #010001;
+    text-align: center;
+
     padding-bottom: 35px;
   }
   .gameplay-img {
-    width: 695px;
-    height: 71px;
+    width: 597px;
+    height: 8px;
     margin: 0 auto;
     padding-bottom: 40px;
     img {
-      width: 695px;
-      height: 71px;
+      width: 597px;
+      height: 8px;
     }
   }
   .pve {
@@ -110,8 +122,6 @@ const handTabActive = (isTab) => {
     margin-top: 70px;
     margin-left: 75px;
     // justify-content: flex-end;
-   
-   
   }
 
   .pvp-left {
@@ -122,7 +132,7 @@ const handTabActive = (isTab) => {
     margin-right: 30px;
     color: #263641;
     cursor: pointer;
-    background-image: url("@/assets/img/mobile-home/pve-btn.png");
+    background-image: url("@/assets/img/home/pvp-btn.png");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -133,32 +143,7 @@ const handTabActive = (isTab) => {
   .pvp-left:hover {
     // background-image: none;
   }
-  .pvp-left::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: url("@/assets/img/home/pvp-btn-active.png") no-repeat;
-    background-size: 100% 100%;
-    transform: scaleX(1, 1);
-    opacity: 1;
-    // z-index: -1;
-    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
-    transition: all 0.3s ease-in;
-  }
-  .pvp-left:hover:after {
-    opacity: 1;
-    clip-path: polygon(
-      calc(50% + 0px) calc(50% + 250px),
-      calc(50% + 250px) calc(50% + 0px),
-      calc(50% + 0px) calc(50% - 250px),
-      calc(50% - 250px) calc(50% - 0px)
-    );
-    transition: all 0.3s ease-in;
-    transform: scaleX(1, 1);
-  }
+
   .pvp-left-active {
     // margin-top: 30px;
     width: 274px;
@@ -178,32 +163,32 @@ const handTabActive = (isTab) => {
   .pvp-left-active:hover {
     // background-image: none;
   }
-  .pvp-left-active::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: url("@/assets/img/mobile-home/pve-btn.png") no-repeat;
-    background-size: 100% 100%;
-    transform: scaleX(1, 1);
-    opacity: 1;
-    // z-index: -1;
-    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
-    transition: all 0.3s ease-in;
-  }
-  .pvp-left-active:hover:after {
-    opacity: 1;
-    clip-path: polygon(
-      calc(50% + 0px) calc(50% + 250px),
-      calc(50% + 250px) calc(50% + 0px),
-      calc(50% + 0px) calc(50% - 250px),
-      calc(50% - 250px) calc(50% - 0px)
-    );
-    transition: all 0.3s ease-in;
-    transform: scaleX(1, 1);
-  }
+  // .pvp-left-active::after {
+  //   content: "";
+  //   position: absolute;
+  //   left: 0;
+  //   right: 0;
+  //   top: 0;
+  //   bottom: 0;
+  //   background: url("@/assets/img/home/pvp-btn.png") no-repeat;
+  //   background-size: 100% 100%;
+  //   transform: scaleX(1, 1);
+  //   opacity: 1;
+  //   // z-index: -1;
+  //   clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
+  //   transition: all 0.3s ease-in;
+  // }
+  // .pvp-left-active:hover:after {
+  //   opacity: 1;
+  //   clip-path: polygon(
+  //     calc(50% + 0px) calc(50% + 250px),
+  //     calc(50% + 250px) calc(50% + 0px),
+  //     calc(50% + 0px) calc(50% - 250px),
+  //     calc(50% - 250px) calc(50% - 0px)
+  //   );
+  //   transition: all 0.3s ease-in;
+  //   transform: scaleX(1, 1);
+  // }
   .pve-right {
     // margin-top: 30px;
     width: 274px;
@@ -223,32 +208,32 @@ const handTabActive = (isTab) => {
   .pve-right:hover {
     // background-image: none;
   }
-  .pve-right::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: url("@/assets/img/home/pve-btn-active.png") no-repeat;
-    background-size: 100% 100%;
-    transform: scaleX(1, 1);
-    opacity: 1;
-    // z-index: -1;
-    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
-    transition: all 0.3s ease-in;
-  }
-  .pve-right:hover:after {
-    opacity: 1;
-    clip-path: polygon(
-      calc(50% + 0px) calc(50% + 250px),
-      calc(50% + 250px) calc(50% + 0px),
-      calc(50% + 0px) calc(50% - 250px),
-      calc(50% - 250px) calc(50% - 0px)
-    );
-    transition: all 0.3s ease-in;
-    transform: scaleX(1, 1);
-  }
+  // .pve-right::after {
+  //   content: "";
+  //   position: absolute;
+  //   left: 0;
+  //   right: 0;
+  //   top: 0;
+  //   bottom: 0;
+  //   background: url("@/assets/img/home/pve-btn-active.png") no-repeat;
+  //   background-size: 100% 100%;
+  //   transform: scaleX(1, 1);
+  //   opacity: 1;
+  //   // z-index: -1;
+  //   clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
+  //   transition: all 0.3s ease-in;
+  // }
+  // .pve-right:hover:after {
+  //   opacity: 1;
+  //   clip-path: polygon(
+  //     calc(50% + 0px) calc(50% + 250px),
+  //     calc(50% + 250px) calc(50% + 0px),
+  //     calc(50% + 0px) calc(50% - 250px),
+  //     calc(50% - 250px) calc(50% - 0px)
+  //   );
+  //   transition: all 0.3s ease-in;
+  //   transform: scaleX(1, 1);
+  // }
   .pve-right-active {
     // margin-top: 30px;
     width: 274px;
@@ -268,38 +253,38 @@ const handTabActive = (isTab) => {
   .pve-right-active:hover {
     // background-image: none;
   }
-  .pve-right-active::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: url("@/assets/img/home/pve-btn.png") no-repeat;
-    background-size: 100% 100%;
-    transform: scaleX(1, 1);
-    opacity: 1;
-    // z-index: -1;
-    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
-    transition: all 0.3s ease-in;
-  }
-  .pve-right-active:hover:after {
-    opacity: 1;
-    clip-path: polygon(
-      calc(50% + 0px) calc(50% + 250px),
-      calc(50% + 250px) calc(50% + 0px),
-      calc(50% + 0px) calc(50% - 250px),
-      calc(50% - 250px) calc(50% - 0px)
-    );
-    transition: all 0.3s ease-in;
-    transform: scaleX(1, 1);
-  }
+  // .pve-right-active::after {
+  //   content: "";
+  //   position: absolute;
+  //   left: 0;
+  //   right: 0;
+  //   top: 0;
+  //   bottom: 0;
+  //   background: url("@/assets/img/home/pve-btn.png") no-repeat;
+  //   background-size: 100% 100%;
+  //   transform: scaleX(1, 1);
+  //   opacity: 1;
+  //   // z-index: -1;
+  //   clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
+  //   transition: all 0.3s ease-in;
+  // }
+  // .pve-right-active:hover:after {
+  //   opacity: 1;
+  //   clip-path: polygon(
+  //     calc(50% + 0px) calc(50% + 250px),
+  //     calc(50% + 250px) calc(50% + 0px),
+  //     calc(50% + 0px) calc(50% - 250px),
+  //     calc(50% - 250px) calc(50% - 0px)
+  //   );
+  //   transition: all 0.3s ease-in;
+  //   transform: scaleX(1, 1);
+  // }
   .gameplay-content {
     display: flex;
     // background: #59a2d0;
     width: 710px;
     margin: 0 auto;
-    padding-bottom: 254px;
+    padding-bottom: 214px;
     .gameplay-left {
       .pve-img {
         width: 710px;
@@ -313,21 +298,19 @@ const handTabActive = (isTab) => {
       .slogan {
         width: 694px;
         // height: 164px;
-
         margin: 0 auto;
-        margin-bottom: 121px;
+        margin-bottom: 108px;
         margin-top: 38px;
-        font-size: 26px;
-        font-family: Arial;
-        font-weight: bold;
-        color: #000000;
+        font-size: 24px;
+        font-family: "Poppins";
+        font-weight: 500;
+        color: #767676;
         line-height: 42px;
-        .title {
-          font-size: 26px;
-          font-family: Arial;
-          font-weight: 900;
+        .pve-content-title {
+          font-size: 36px;
+          font-family: "Poppins";
+          font-weight: 800;
           color: #000101;
-          line-height: 32px;
         }
       }
     }
diff --git a/mobile/src/components/home/HeroSweiper.vue b/mobile/src/components/home/HeroSweiper.vue
index 1caa634..c88bc60 100644
--- a/mobile/src/components/home/HeroSweiper.vue
+++ b/mobile/src/components/home/HeroSweiper.vue
@@ -7,8 +7,8 @@
     <div class="hero-content">
       <swiper
         :modules="modules"
-         class="mySwiper"
-         :autoplay="{ delay: 4000, disableOnInteraction: false }"
+        class="mySwiper"
+        :autoplay="{ delay: 4000, disableOnInteraction: false }"
         @swiper="setHeroSwiper"
         :navigation="{
           nextEl: '.swiper-btn1-next',
@@ -18,7 +18,7 @@
         <swiper-slide v-for="(hero, index) in HeroList" :key="index">
           <div class="content" :class="index >= 7 ? 'man-bg' : 'woman-bg'">
             <div class="img">
-              <img  :src="hero.img" alt="" />
+              <img :src="hero.img" alt="" />
             </div>
           </div>
         </swiper-slide>
@@ -46,7 +46,7 @@ import { HeroList } from "@/configs/information";
 import "swiper/css";
 import "swiper/css/navigation";
 import { Navigation, Autoplay } from "swiper";
-const modules = ref([Navigation,Autoplay]);
+const modules = ref([Navigation, Autoplay]);
 const heroAnimationActive = ref(false);
 const swiperIndex = ref(null);
 const activeIndex = ref(0);
@@ -70,7 +70,7 @@ onMounted(() => {
 </script>
 <style lang="scss" scoped>
 .hero {
-  background: linear-gradient(180deg, #34adb4, #41b8bf, #73d4db);
+  // background: linear-gradient(180deg, #34adb4, #41b8bf, #73d4db);
   padding-bottom: 114px;
   position: relative;
   .hero-bg {
@@ -79,7 +79,7 @@ onMounted(() => {
     top: 0;
     bottom: 0;
     right: 0;
-    z-index: 0;
+    z-index: -1;
     width: 100%;
     height: 100%;
     img {
@@ -98,7 +98,7 @@ onMounted(() => {
     text-align: center;
     font-family: "Big John";
     font-weight: 400;
-    color: #000101;
+    color: #ffba00;
     background: url("@/assets/img/mobile-home/hero/hero-title-boder.png")
       no-repeat;
     background-size: contain;
@@ -175,7 +175,7 @@ onMounted(() => {
     color: #ffffff;
     background: url("../../assets/img/mobile-home/hero/hero-introduce-bg.png")
       no-repeat;
-    background-size: contain;
+    background-size: 100% 100%;
   }
 }
 .woman-bg {
@@ -207,9 +207,9 @@ onMounted(() => {
 
 .hero-introduce {
   margin: 0 auto;
-  width: 670px;
-  margin-top: 100px;
-  height: 340px;
+  width: 695px;
+  margin-top: 10px;
+  height: 280px;
   padding-left: 20px;
   padding-right: 20px;
   font-size: 26px;
@@ -220,10 +220,14 @@ onMounted(() => {
   color: #ffffff;
   background: url("../../assets/img/mobile-home/hero/hero-introduce-bg.png")
     no-repeat;
-  background-size: contain;
+  background-size: 100% 100%;
   .introduce-item {
     width: 89%;
     margin: 0 auto;
+    font-size: 24px;
+    font-family: "Poppins";
+    font-weight: 500;
+    color: #1b1b1b;
   }
 }
 .swiper-btns {
diff --git a/mobile/src/components/home/WeaponSwiper.vue b/mobile/src/components/home/WeaponSwiper.vue
index f3fba09..e8b75a1 100644
--- a/mobile/src/components/home/WeaponSwiper.vue
+++ b/mobile/src/components/home/WeaponSwiper.vue
@@ -136,7 +136,7 @@ onMounted(() => {
     z-index: 0;
     img {
       max-width: 100%;
-      height: auto;
+      height:100%;
       object-fit: cover;
     }
   }
@@ -155,7 +155,7 @@ onMounted(() => {
   position: relative;
   z-index: 2;
   font-weight: 400;
-  color: #000101;
+  color: #ffba00;
   background: url("@/assets/img/mobile-home/weapon/weapon-title-boder.png")
     no-repeat;
   background-size: contain;
diff --git a/mobile/src/components/home/WhatCebg.vue b/mobile/src/components/home/WhatCebg.vue
index 2ffac66..a8e97d2 100644
--- a/mobile/src/components/home/WhatCebg.vue
+++ b/mobile/src/components/home/WhatCebg.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="cebg-container">
-    <div
+    <!-- <div
       class="cebg-game"
       id="bgTest"
       :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
     >
       CEBG <br />
       BATTLE
-    </div>
+    </div> -->
     <div class="what-bg">
       <img src="@/assets/img/mobile-home/what-bg.png" alt="" />
     </div>
@@ -19,22 +19,25 @@
         <img src="@/assets/img/mobile-home/what-title-boder.png" alt="" />
       </div>
       <div class="slogan">
-        CEBG stands for Crypto Elite's: BATTLEGROUNDS,the first blockchain-based
-        game consisting of Moba,and Battleroyal. It's funded by more than 7
-        institutional investors.CEBG stands for Crypto Elite's: BATLEGROUNDS,the
-        first blockchain-based game consisting of Moba,and Battleroyal. It's
-        funded by more than 7 institutional investors.
+        <div>
+          CEBG is the highly-anticipated first blockchain-based game to offer a
+          unique combination of MOBA and Battle Royale gameplay.
+        </div>
+        <div>
+          With funding from over 13 institutional investors, and is set to
+          revolutionize the crypto gaming industry.
+        </div>
       </div>
       <div class="monster">
         <img src="@/assets/img/mobile-home/monster.png" alt="" />
       </div>
     </div>
-    <div
+    <!-- <div
       class="gameplay-name"
       :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
     >
       GAMEPLAY
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -46,12 +49,12 @@ const ratio = ref(0.13); //视差偏移率
 const positionY1 = ref(0); //背景Y轴偏移量
 
 onMounted(() => {
-  document.body.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
-  let bgTest = document.getElementById("bgTest");
+  // document.body.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
+  // let bgTest = document.getElementById("bgTest");
   // debugger
-  console.log(bgTest, "positionY1.valuepositionY1.value");
-  Y1.value = bgTest.offsetTop * ratio.value;
-  console.log(bgTest, "positionY1.valuepositionY1.value");
+  // console.log(bgTest, "positionY1.valuepositionY1.value");
+  // Y1.value = bgTest.offsetTop * ratio.value;
+  // console.log(bgTest, "positionY1.valuepositionY1.value");
 });
 
 function handleScroll() {
@@ -66,8 +69,8 @@ function handleScroll() {
 
 <style lang="scss" scoped>
 .cebg-container {
-  padding-top: 120px;
-  background: linear-gradient(180deg, #1a2b33, #1a2c33, #27757d);
+  // padding-top: 120px;
+  // background: linear-gradient(180deg, #1a2b33, #1a2c33, #27757d);
 
   position: relative;
   .what-bg {
@@ -80,9 +83,9 @@ function handleScroll() {
     height: 100%;
     z-index: 0;
     img {
-      max-width: 100%;
-      height: 100%;
-      // object-fit: cover;
+      width: 100%;
+    height: 100%;
+      object-fit: cover;
     }
   }
   .cebg-game {
@@ -109,14 +112,14 @@ function handleScroll() {
   .content {
     position: relative;
     .title {
-      padding-top: 175px;
+      padding-top: 41px;
       width: 665px;
       margin: 0 auto;
       // height: 71px;
     }
     .what-cebg-img {
-      padding-top: 60px;
-      padding-bottom: 50px;
+      padding-top: 50px;
+      padding-bottom: 67px;
       width: 695px;
       margin: 0 auto;
     }
@@ -124,18 +127,18 @@ function handleScroll() {
       width: 706px;
       height: 272px;
       margin: 0 auto;
-      font-size: 26px;
+      font-size: 24px;
       text-align: center;
-      font-family: Arial;
-      font-weight: bold;
-      color: #ffffff;
+      font-family: "Poppins";
+      font-weight: 500;
+      color: #757575;
       line-height: 42px;
     }
     .monster {
-      padding-top: 220px;
-      padding-bottom: 274px;
+      padding-top: 128px;
+      padding-bottom: 127px;
       width: 521px;
-      margin-left: 72px;
+      margin-left: 99px;
       // height: 482px;
     }
   }
diff --git a/mobile/src/components/layout/FooterBar.vue b/mobile/src/components/layout/FooterBar.vue
index dd1643c..4c7adc9 100644
--- a/mobile/src/components/layout/FooterBar.vue
+++ b/mobile/src/components/layout/FooterBar.vue
@@ -2,47 +2,64 @@
   <div>
     <div class="footer">
       <div class="content">
-        <div class="cooperation-logo">
-          <a href="#" class="snz">
-            <img src="@/assets/img/mobile-home/footer/snz.png" alt=""
-          /></a>
-          <a href="#" class="initiate">
-            <img src="@/assets/img/mobile-home/footer/initiate-catital.png" alt=""
-          /></a>
-          <a href="#" class="kernel">
-            <img src="@/assets/img/mobile-home/footer/kernel.png" alt=""
-          /></a>
-          <a href="#" class="betterversedao">
-            <img src="@/assets/img/mobile-home/footer/betterversedao.png" alt=""
-          /></a>
-          <a href="#" class="hashkey">
-            <img src="@/assets/img/mobile-home/footer/hashkey.png" alt=""
-          /></a>
+        <div class="cooperation-logo-content">
+          <div class="cooperation-logo">
+            <a href="#" class="snz">
+              <img src="@/assets/img/mobile-home/footer/snz.png" alt=""
+            /></a>
+            <a href="#" class="initiate">
+              <img
+                src="@/assets/img/mobile-home/footer/initiate-catital.png"
+                alt=""
+            /></a>
+            <a href="#" class="kernel">
+              <img src="@/assets/img/mobile-home/footer/kernel.png" alt=""
+            /></a>
+            <a href="#" class="betterversedao">
+              <img
+                src="@/assets/img/mobile-home/footer/betterversedao.png"
+                alt=""
+            /></a>
+            <a href="#" class="hashkey">
+              <img src="@/assets/img/mobile-home/footer/hashkey.png" alt=""
+            /></a>
+          </div>
+          <div class="cooperation-logo">
+            <a href="#" class="youbiocapital">
+              <img src="@/assets/img/mobile-home/footer/YOUBI.png" alt=""
+            /></a>
+            <a href="#" class="kucoin">
+              <img src="@/assets/img/mobile-home/footer/kucoin.png" alt=""
+            /></a>
+            <a href="#" class="capltal">
+              <img src="@/assets/img/mobile-home/footer/AT.png" alt=""
+            /></a>
+            <a href="#" class="grs">
+              <img src="@/assets/img/mobile-home/footer/GSR.png" alt=""
+            /></a>
+          </div>
         </div>
-        <div class="cooperation-logo">
-          <a href="#" class="youbiocapital">
-            <img src="@/assets/img/mobile-home/footer/YOUBI.png" alt=""
-          /></a>
-          <a href="#" class="kucoin">
-            <img src="@/assets/img/mobile-home/footer/kucoin.png" alt=""
-          /></a>
-          <a href="#" class="capltal">
-            <img src="@/assets/img/mobile-home/footer/AT.png" alt=""
-          /></a>
-          <a href="#" class="grs">
-            <img src="@/assets/img/mobile-home/footer/GSR.png" alt=""
-          /></a>
+        <div class="follow">
+          <a href="https://discord.com/invite/fNSn2NHUvf" class="dosccord">
+            <!-- <img src="@/assets/svg/discord.svg" alt=""
+            /> -->
+          </a>
+          <a href="https://t.me/CEBG_official" class="telegram">
+            <!-- <img src="@/assets/svg/telegram.svg" alt=""
+            /> -->
+          </a>
+          <a href="https://twitter.com/CEBG_GAME" class="twiter">
+            <!-- <img src="@/assets/svg/twitter.svg" alt=""
+            /> -->
+          </a>
         </div>
         <div class="content-img-top">
-          <div class="center">
+          <!-- <div class="center">
             <img src="@/assets/img/mobile-home/footer-title-boder.png" alt="" />
-          </div>
+          </div> -->
         </div>
         <div class="footer-logo">
           <div class="go-start"></div>
-          <div class="go-content">
-            <img src="@/assets/img/mobile-home/logo.png" alt="" />
-          </div>
           <div class="go-top">
             <div class="rise-top" @click="backTop">
               <div class="rise-title">RISE TO THE TOP</div>
@@ -51,22 +68,15 @@
               </div>
             </div>
           </div>
+          <div class="go-content">
+            <img src="@/assets/img/mobile-home/logo.png" alt="" />
+          </div>
         </div>
 
-      
         <div class="footer-bottom">
-          <div class="follow">
-            <a href="https://discord.gg/8dWX6jpcME" class="dosccord">
-              <img src="@/assets/svg/discord.svg" alt=""
-            /></a>
-            <a href="https://t.me/CEBG_official" class="telegram">
-              <img src="@/assets/svg/telegram.svg" alt=""
-            /></a>
-            <a href="https://twitter.com/CEBG_GAME" class="twiter">
-              <img src="@/assets/svg/twitter.svg" alt=""
-            /></a>
+          <div class="mailbox">
+            COPYRIGHT © Candy Bubble Global Limited <br />.ALL RIGHTS RESERVED.
           </div>
-          <div class="mailbox">COPYRIGHT © CEBG.ALL RIGHTS RESERVED.</div>
         </div>
       </div>
     </div>
@@ -74,36 +84,40 @@
 </template>
 
 <script setup>
-import { ref ,onMounted,onUnmounted} from "vue";
-const scrollTop = ref(0)
-const btnFlag = ref(false)
+import { ref, onMounted, onUnmounted } from "vue";
+const scrollTop = ref(0);
+const btnFlag = ref(false);
 
 function backTop() {
   let timer = setInterval(() => {
-    let ispeed = Math.floor(-scrollTop.value / 5)
-    document.documentElement.scrollTop = document.body.scrollTop = scrollTop.value + ispeed
+    let ispeed = Math.floor(-scrollTop.value / 5);
+    document.documentElement.scrollTop = document.body.scrollTop =
+      scrollTop.value + ispeed;
     if (scrollTop.value === 0) {
-      clearInterval(timer)
+      clearInterval(timer);
     }
-  }, 16)
+  }, 16);
 }
 
 function scrollToTop() {
-  scrollTop.value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+  scrollTop.value =
+    window.pageYOffset ||
+    document.documentElement.scrollTop ||
+    document.body.scrollTop;
   if (scrollTop.value > 60) {
-    btnFlag.value = true
+    btnFlag.value = true;
   } else {
-    btnFlag.value = false
+    btnFlag.value = false;
   }
 }
 
 onMounted(() => {
-  window.addEventListener('scroll', scrollToTop)
-})
+  window.addEventListener("scroll", scrollToTop);
+});
 
 onUnmounted(() => {
-  window.removeEventListener('scroll', scrollToTop)
-})
+  window.removeEventListener("scroll", scrollToTop);
+});
 </script>
 
 <style lang="scss" scoped>
@@ -113,12 +127,80 @@ onUnmounted(() => {
   // bottom: 0;
   // left: 0;
   // right: 0;
-  padding-top: 59px;
-  background-color: #f1f1f1;
+
+  background-color: #000000;
   .content {
     // padding-top: 133px;
     max-width: 1440px;
     margin: 0 auto;
+    .cooperation-logo-content {
+      padding-top: 59px;
+      background-color: #1d1d1d;
+    }
+    .follow {
+      display: flex;
+      padding-top: 49px;
+      width: 296px;
+      margin: 0 auto;
+      justify-content: space-between;
+      padding-bottom: 76px;
+      // a {
+      //   margin-right: 29px;
+      // }
+      .twiter {
+        width: 78px;
+        height: 78px;
+        background: url("../../assets/img/mobile-home/footer/tewiter.png")
+          no-repeat;
+        background-size: contain;
+        // img {
+        //   width: 47px;
+        //   height: 34px;
+        // }
+        &:hover {
+          width: 78px;
+          height: 78px;
+          background: url("../../assets/img/mobile-home/footer/tewiter-active.png")
+            no-repeat;
+          background-size: contain;
+        }
+      }
+      // .twiter:hover {
+      //   width: 47px;
+      //   height: 34px;
+      //   background: url("../../assets/svg/google-play-red.svg") no-repeat;
+      //   background-size: contain;
+      // }
+
+      .dosccord {
+        width: 78px;
+        height: 78px;
+        background: url("../../assets/img/mobile-home/footer/discord.png")
+          no-repeat;
+        background-size: contain;
+      }
+      .dosccord:hover {
+        width: 78px;
+        height: 78px;
+        background: url("../../assets/img/mobile-home/footer/discord-active.png")
+          no-repeat;
+        background-size: contain;
+      }
+      .telegram {
+        width: 78px;
+        height: 78px;
+        background: url("../../assets/img/mobile-home/footer/telegram.png")
+          no-repeat;
+        background-size: contain;
+      }
+      .telegram:hover {
+        width: 78px;
+        height: 78px;
+        background: url("../../assets/img/mobile-home/footer/telegram-active.png")
+          no-repeat;
+        background-size: contain;
+      }
+    }
     .cooperation-logo {
       display: flex;
       width: 90%;
@@ -218,7 +300,7 @@ onUnmounted(() => {
     }
     .footer-logo {
       width: 100%;
-      padding-top: 52px;
+      // padding-top: 52px;
       // display: flex;
       // justify-content: stretch;
       .go-start {
@@ -230,17 +312,17 @@ onUnmounted(() => {
         justify-content: center;
         align-items: center;
         img {
-          width: 131px;
+          width: 128px;
           height: 127px;
         }
-        padding-bottom: 89px;
+        padding-bottom: 51px;
       }
       .go-top {
         flex: 1;
         display: flex;
         justify-content: center;
         align-items: center;
-        padding-bottom: 144px;
+        padding-bottom: 93px;
         .rise-top {
           display: flex;
           align-items: center;
@@ -254,7 +336,7 @@ onUnmounted(() => {
             font-size: 28px;
             font-family: Arial;
             font-weight: 900;
-            color: #000000;
+            color: #ffba00;
           }
         }
         img {
@@ -376,35 +458,10 @@ onUnmounted(() => {
       flex-direction: column;
       padding-bottom: 46px;
       .mailbox {
-        font-size: 18px;
-        font-family: Arial;
-        font-weight: bold;
-        color: #797979;
-      }
-      .follow {
-        display: flex;
-        padding-bottom: 120px;
-        a {
-          margin-left: 29px;
-        }
-        .twiter {
-          img {
-            width: 54px;
-            height: 44px;
-          }
-        }
-        .dosccord {
-          img {
-            width: 57px;
-            height: 44px;
-          }
-        }
-        .telegram {
-          img {
-            width: 52px;
-            height: 44px;
-          }
-        }
+        font-size: 20px;
+        font-family: 'Poppins';
+        font-weight: 400;
+        color: #7b7979;
       }
     }
   }
diff --git a/mobile/src/components/layout/NavBar.vue b/mobile/src/components/layout/NavBar.vue
index 8b34ca1..c8e66b4 100644
--- a/mobile/src/components/layout/NavBar.vue
+++ b/mobile/src/components/layout/NavBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="nav">
     <div class="nav-logo">
-      <a href="/"> <img src="../../assets/img/home/nav-logo.png" alt="" /></a>
+      <a href="/home"> <img src="../../assets/img/home/nav-logo.png" alt="" /></a>
     </div>
     <div class="nav-right">
       <div class="avatar-icon" v-if="!chain.logined" @click="login">
@@ -12,7 +12,7 @@
         :class="navShow == true ? 'nav-btn-active' : 'nav-btn'"
         @click="switchNav"
       >
-        <img src="../../assets/img/mobile-home/nav-btn.png" alt="" />
+        <!-- <img src="../../assets/img/mobile-home/nav-btn.png" alt="" /> -->
       </div>
     </div>
     <a-drawer
@@ -73,9 +73,12 @@ provide("navShow", navShow);
 function switchNav(event) {
   navShow.value = !navShow.value;
 }
-const navList = reactive([
-  { id: 0, name: "HOME", path: "/" },
-  { id: 1, name: "ABOUT", path: "/about" },
+const navList = reactive([ 
+   { id: 0, name: "BETA TEST", path: "/" },
+  { id: 1, name: "HOME", path: "/home" },
+  { id: 2, name: "ABOUT", path: "/about" },
+
+
   // {
   //   id: 2,
   //   name: "MARKETPLACE",
@@ -124,7 +127,7 @@ watchEffect(() => {
 .nav {
   width: 100%;
   height: 120px;
-  background: #ffffff;
+  background: #000;
   display: flex;
   position: fixed;
   left: 0;
@@ -164,6 +167,8 @@ watchEffect(() => {
         width: 36px;
         height: 36px;
       }
+      background: url('../../assets/img/mobile-home/nav-btn-bg.png') no-repeat;
+      background-size: contain;
     }
     .nav-btn-active {
       width: 84px;
@@ -178,6 +183,8 @@ watchEffect(() => {
         width: 36px;
         height: 36px;
       }
+      background: url('../../assets/img/mobile-home/nav-btn-bg-active.png') no-repeat;
+      background-size: contain;
     }
   }
 }
@@ -192,19 +199,19 @@ watchEffect(() => {
   font-family: "Big John";
   font-weight: 400;
   position: relative;
-  color: #d74458;
+  color: #FFBA00;
 }
 
-.nav-item-active a::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  height: 50px;
-  background: url("../../assets/img/mobile-home/nav-boder.png") no-repeat;
-  background-size: contain;
-}
+// .nav-item-active a::after {
+//   content: "";
+//   position: absolute;
+//   top: 100%;
+//   left: 0;
+//   width: 100%;
+//   height: 50px;
+//   background: url("../../assets/img/mobile-home/nav-boder.png") no-repeat;
+//   background-size: contain;
+// }
 .NavMenu {
   height: 100%;
   display: flex;
@@ -223,6 +230,6 @@ watchEffect(() => {
   font-family: "Big John";
   font-weight: 400;
   // position: relative;
-  color: #d74458;
+  color: #FFBA00;
 }
 </style>
diff --git a/mobile/src/components/layout/index.vue b/mobile/src/components/layout/index.vue
index 1ccb9ff..6edee44 100644
--- a/mobile/src/components/layout/index.vue
+++ b/mobile/src/components/layout/index.vue
@@ -1,7 +1,7 @@
 
 <template>
   <div class="layout">
-    <NavBarVue />
+    <NavBarVue  v-if="currentRoute.path !== '/'"></NavBarVue>
     <main class="content">
       <slot></slot>
     </main>
@@ -12,6 +12,13 @@
 <script setup>
 import NavBarVue from "./NavBar.vue";
 import Footer from "./FooterBar.vue";
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+const currentRoute = useRoute();
+onMounted(() => {
+  console.log(currentRoute.path,'currentRoute');
+});
 </script>
 
 <style scoped>
diff --git a/mobile/src/router/index.js b/mobile/src/router/index.js
index 905bbc7..a660009 100644
--- a/mobile/src/router/index.js
+++ b/mobile/src/router/index.js
@@ -1,10 +1,18 @@
 import { createRouter, createWebHistory } from "vue-router";
-
+const Beta = () => import('../views/GamePromotionEvent.vue')
 const Home = () => import('../views/HomeView.vue')
 const About = () => import('../views/AboutView.vue')
 const routes = [
   {
     path: "/",
+    name: "beta",
+    component: Beta,
+    meta: {
+      showInMenu: true,
+    },
+  },
+  {
+    path: "/home",
     name: "home",
     component: Home,
     meta: {
diff --git a/mobile/src/views/GamePromotionEvent.vue b/mobile/src/views/GamePromotionEvent.vue
new file mode 100644
index 0000000..4c9a1db
--- /dev/null
+++ b/mobile/src/views/GamePromotionEvent.vue
@@ -0,0 +1,485 @@
+<template>
+  <div class="banner">
+    <!-- <div class="title">
+      <div class="title-top">CEBG Beta Level-up Event</div>
+      <div class="limited">LIMITED-TIME</div>
+      <div class="time">
+        Duration : April 8 <span class="text">th</span> 6:00:00 - May 8
+        <span class="text">th</span> 15:59:59 <span class="text">( UTC )</span>
+      </div>
+    </div> -->
+    <div class="login-btn" @click="handlHome">OFFICIAL SITE</div>
+    <div class="banner-bg">
+      <img src="../assets/img/game/banner.png" alt="" />
+    </div>
+    <div class="banner-bottom-boder">
+      <img src="../assets/img/game/banner-bottom-boder.png" alt="" />
+    </div>
+  </div>
+  <div class="content">
+    <div class="center">
+      <div class="rules-title">Rules:</div>
+      <div class="rules-img">
+        <img src="../assets/img/game/rules.png" alt="" />
+      </div>
+      <div class="rules-slogan">
+        Before the end of the beta test ll, which is May 8th 15:59:59 (UTC), if you
+        reaches the corresponding level,<br />
+        you can receive the following exquisite gifts:
+      </div>
+      <div class="upon-text">
+        <div>
+          1. Upon reaching <span class="text-item">level 9</span> , you can
+          obtain a rare and exquisite limited-edition skin.
+        </div>
+
+        <div>
+          2. Upon reaching <span class="text-item"> level 15</span> , you can
+          get a Explorer badge(NFT). It is free mint.
+        </div>
+      </div>
+      <div class="notes">
+        <div class="notes-title">Notes:</div>
+        <div class="notes-slogan">
+          The skin will be sent to your game account via in-game mail within 2
+          weeks after the official launch of the game. Please claim it in time.
+          <br />
+          The edition skin can be equipped on the hero and is also seen as NFT.
+          After our marketplace is launched, it can be traded on the market.
+          <br />The specific distribution method and time for the Explorer
+          badge(NFT) will be notified separately. Please keep looking forward to
+          the latest news.
+          <br />
+          <span class="guest"
+            >The guest accounts won't receive the above rewards.</span
+          >
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-left">
+          <div class="title">Limited-edition Skin</div>
+          <div class="card-nft"></div>
+          <div class="level">Level <span class="number">9</span> unlocks</div>
+          <div class="some">Available when the game is officially launched</div>
+        </div>
+        <div class="card-right">
+          <div class="title">Explorer Badge</div>
+          <div class="card-nft"></div>
+          <div class="level">Level <span class="number">12</span> unlocks</div>
+          <div class="some">The news will be notified separately</div>
+        </div>
+      </div>
+      <div class="faq">
+        <div class="faq-title">faq</div>
+        <div class="faq-img">
+          <img src="../assets/img/game/rules.png" alt="" />
+        </div>
+        <div class="faq-aq">
+          <div class="faq-item">
+            <div class="q-text">
+              Q: Is the skin obtained in this level-up event limited-time or
+              permanent?
+            </div>
+            <div class="a-text">
+              A: It is permanent and also a limited edition, and will never be
+              sold in-game in the future.
+            </div>
+          </div>
+          <div class="faq-item">
+            <div class="q-text">
+              Q: What conditions are required to own this permanent skin?
+            </div>
+            <div class="a-text">
+              A: You need to participate in the beta test and your character
+              reaches level 9 during the beta test.
+            </div>
+          </div>
+          <div class="faq-item">
+            <div class="q-text">
+              Q: What conditions are required to own this Explorer badge(NFT)?
+            </div>
+            <div class="a-text">
+              A: You need to participate in the beta test and your character
+              reaches level 12 during the beta test.
+            </div>
+          </div>
+          <div class="faq-item">
+            <div class="q-text">
+              Q: Can I obtain both rewards at the same time?
+            </div>
+            <div class="a-text">
+              A: Of course, you can get both rewards as long as your character
+              reaches the corresponding level during the beta testing period.
+            </div>
+          </div>
+          <div class="faq-item">
+            <div class="q-text">
+              Q: How will the rewards be sent to my account?
+            </div>
+            <div class="a-text">
+              A: In order to receive the skin and Explorer badge(NFT), you need
+              to ensure that the email and wallet accounts registered in the
+              officially launched game <br />
+              must be the same as the ones registered during the beta test.
+              Otherwise, the rewards will not be issued.
+              <span class="the-guest"
+                >The guest accounts won't receive the above rewards.
+              </span>
+            </div>
+          </div>
+          <div class="faq-item">
+            <div class="q-text">
+              Q: When will the rewards be sent to my account?
+            </div>
+            <div class="a-text">
+              A: You need to log in to the game and register your character
+              within two weeks after the official release of the game to receive
+              the skin reward. <br />
+              The time for obtaining the Explorer badge(NFT) will be notified
+              separately, please keep looking forward to the latest news.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="content-bg">
+      <img src="../assets/img/game/content-bg.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, toRefs } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+const handlHome = () => {
+  router.push("/home");
+};
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  width: 100%;
+  height: 685px;
+  position: relative;
+  .banner-bottom-boder {
+    position: absolute;
+    bottom: -1px;
+  }
+  .login-btn {
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    width: 285px;
+    height: 125px;
+    line-height: 125px;
+    text-align: center;
+    background: url("../assets/img/game/login-btn.png") no-repeat;
+    background-size: contain;
+    font-size: 24px;
+    font-family: "Big John";
+    font-weight: 500;
+    color: #7a743f;
+    transform: translate(-50%, 0%);
+
+    cursor: pointer;
+    // box-shadow: 0 4px 6px #FFBA00;
+    // transition: all 0.3s;
+  }
+  .login-btn:hover {
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    width: 285px;
+    height: 125px;
+    line-height: 125px;
+    text-align: center;
+    font-size: 24px;
+    font-family: "Big John";
+    font-weight: 500;
+    color: #7a743f;
+    transform: translate(-50%, 0%);
+
+    cursor: pointer;
+    background: url("../assets/img/game/login-btn-active.png") no-repeat;
+    background-size: contain;
+  }
+  .title {
+    padding-top: 18px;
+    width: 787px;
+    text-align: center;
+    margin: 0 auto;
+    .title-top {
+      font-size: 42px;
+      font-family: "Big John";
+      font-weight: 400;
+      color: #efebe9;
+    }
+    .limited {
+      font-size: 24px;
+      font-family: "Poppins";
+      font-weight: 500;
+      color: #efebe9;
+      letter-spacing: 7px;
+    }
+    .time {
+      font-size: 20px;
+      font-family: "Big John";
+      font-weight: 400;
+      color: #ffe100;
+      .text {
+        font-size: 12px;
+        font-family: "Big John";
+        font-weight: 400;
+        color: #ffe100;
+      }
+    }
+  }
+  .banner-bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    z-index: -1;
+    height: 100%;
+    img {
+      width: 100%;
+      height: 100%;
+      // object-fit: cover;
+    }
+  }
+}
+.content {
+  width: 100%;
+  // height: 2151px;
+  // background-color: #000000;
+  position: relative;
+  .center {
+    width: 92%;
+
+    margin: 0 auto;
+    .rules-title {
+      padding-top: 50px;
+      font-size: 60px;
+      font-family: "Big John";
+      font-weight: 400;
+      color: #ffffff;
+    }
+    .rules-img {
+      padding-top: 31px;
+      width: 617px;
+      height: 8px;
+      padding-bottom: 31px;
+    }
+    .rules-slogan {
+      font-size: 26px;
+      font-family: "Poppins";
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 42px;
+    }
+    .upon-text {
+      padding-top: 26px;
+      font-size: 24px;
+      font-family: "Poppins";
+      font-weight: 400;
+      color: #dedede;
+      line-height: 42px;
+      .text-item {
+        font-size: 20px;
+         font-family: "Poppins";
+        font-weight: 800;
+        color: #ffe100;
+      }
+    }
+    .notes {
+      padding-top: 67px;
+      .notes-title {
+        font-size: 22px;
+        font-family: "Poppins";
+        font-weight: 500;
+        color: #cacaca;
+      }
+      .notes-slogan {
+        font-size: 20px;
+        font-family: "Poppins";
+        font-weight: 400;
+        color: #cacaca;
+        line-height: 36px;
+      }
+      .guest {
+        color: #ffffff;
+        text-decoration: underline;
+      }
+    }
+    .card {
+      // width: 100%;
+      // // display: flex;
+      // margin: 0 auto;
+      // flex-direction: column;
+      padding-top: 127px;
+      // justify-content: space-between;
+      .card-left {
+        width: 568px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding-bottom: 92px;
+        // margin-right: 30px;
+        .title {
+          font-size: 40px;
+          font-family: "Big John";
+          font-weight: 400;
+          font-style: italic;
+          color: #ffd933;
+          line-height: 24px;
+
+          // line-height: 24px;
+        }
+        .level {
+          font-size: 40px;
+          font-family: "Big John";
+          font-weight: 400;
+          font-style: italic;
+          color: #ffffff;
+          // margin-left: 49px;
+          // line-height: 24px;
+          .number {
+            font-size: 60px;
+            color: #ddbc2d;
+          }
+        }
+        .some {
+          font-size: 20px;
+          font-family: "Poppins";
+          font-weight: 400;
+          color: #cdcdcd;
+          // margin-left: 79px;
+          // text-align: center;
+          line-height: 24px;
+        }
+        .card-nft {
+          width: 400px;
+          height: 632px;
+          // margin-left: 38px;
+          background: url("../assets/img/game/card-left.png") no-repeat;
+          background-size: 100% 100%;
+        }
+        .card-nft:hover {
+          transform: scale(1.06);
+        }
+      }
+      .card-right {
+        width: 568px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .title {
+          font-size: 40px;
+          font-family: "Big John";
+          font-weight: 400;
+          font-style: italic;
+          color: #ffd933;
+          // line-height: 24px;
+        }
+        .level {
+          font-size: 40px;
+          font-family: "Big John";
+          font-weight: 400;
+          font-style: italic;
+          color: #ffffff;
+
+          .number {
+            font-size: 60px;
+            color: #ddbc2d;
+          }
+          // line-height: 24px;
+        }
+        .some {
+          font-size: 14px;
+          font-family: "Poppins";
+          font-weight: 400;
+          text-align: center;
+          color: #cdcdcd;
+          line-height: 24px;
+        }
+        .card-nft {
+          width: 400px;
+          height: 632px;
+          background: url("../assets/img/game/card-right.png") no-repeat;
+          background-size: 100% 100%;
+        }
+        .card-nft:hover {
+          transform: scale(1.06);
+        }
+      }
+    }
+    .faq {
+      padding-top: 144px;
+      .faq-title {
+        font-size: 60px;
+        font-family: "Big John";
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 24px;
+        padding-bottom: 41px;
+      }
+      .faq-img {
+        padding-top: 20px;
+        padding-bottom: 41px;
+        width: 617px;
+        height: 8px;
+      }
+      .faq-aq {
+        .faq-item {
+          padding-bottom: 29px;
+        }
+        .a-text {
+          font-size: 22px;
+          font-family: "Poppins";
+          font-weight: 400;
+          color: #9f9f9f;
+          line-height: 32px;
+        }
+        .the-guest {
+          text-decoration: underline;
+          color: #ffff;
+        }
+        .q-text {
+          font-size: 22px;
+          font-family: "Poppins";
+          font-weight: 500;
+          color: #d7d7d7;
+          padding-bottom: 17px;
+        }
+      }
+    }
+  }
+  .content-bg {
+    position: absolute;
+    left: 0;
+    top: 0px;
+    bottom: 0px;
+    width: 100%;
+    z-index: -1;
+    height: 100%;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}
+@media screen and (min-width: 1200px) and (max-width: 1439px) {
+  .center {
+    width: 1200px;
+  }
+}
+</style>