diff --git a/mobile/package.json b/mobile/package.json
index 7a7a4d0..8584a87 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -32,7 +32,8 @@
     "vue": "^3.2.45",
     "vue-3d-loader": "^2.1.5",
     "vue-router": "^4.1.6",
-    "web3": "^1.8.2"
+    "web3": "^1.8.2",
+    "youtube-player": "^5.6.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
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..da0d87c
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.png b/mobile/src/assets/img/mobile-home/banner-slogan.png
new file mode 100644
index 0000000..e35482d
Binary files /dev/null and b/mobile/src/assets/img/mobile-home/banner-slogan.png differ
diff --git a/mobile/src/components/about/LatestNews.vue b/mobile/src/components/about/LatestNews.vue
index fa032f6..58df99a 100644
--- a/mobile/src/components/about/LatestNews.vue
+++ b/mobile/src/components/about/LatestNews.vue
@@ -20,6 +20,7 @@
           clickable: true,
         }"
         :modules="modules"
+        :autoplay="{ delay: 4000, disableOnInteraction: false }"
         :loop="true"
         class="mySwiper"
         ref="myRef"
@@ -40,7 +41,7 @@
 
 <script setup>
 import { ref, computed, reactive, onMounted } from "vue";
-import { Pagination } from "swiper";
+import { Pagination ,Autoplay} from "swiper";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import "swiper/css";
 import "swiper/css/navigation";
@@ -51,7 +52,7 @@ const ratio = ref(0.2); //视差偏移率
 const positionY1 = ref(0); //背景Y轴偏移量
 const box = ref(null);
 const myRef = ref(null);
-const modules = [Pagination];
+const modules = [Pagination,Autoplay];
 const imageList = reactive([
   {
     imgSrc: new URL(
@@ -92,13 +93,13 @@ const handSlideNext = () => {
   myRef.value?.$el.swiper.slideNext();
 };
 onMounted(() => {
-  window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
+  document.body.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
   let bgTest = document.getElementById("bgTest");
   Y1.value = bgTest.offsetTop * ratio.value;
 });
 function handleScroll() {
   const scrollTop =
-    window.pageYOffset ||
+  document.body.pageYOffset ||
     document.documentElement.scrollTop ||
     document.body.scrollTop;
   positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
@@ -120,8 +121,8 @@ function handleScroll() {
   }
   .news-title {
     position: absolute;
-    left: 190px;
-    top: -80px;
+    left: 30%;
+    top: -1600px;
     font-size: 100px;
     font-family: "Big John";
     font-weight: 400;
diff --git a/mobile/src/components/about/Roadmap.vue b/mobile/src/components/about/Roadmap.vue
index 2de308e..7c02cd1 100644
--- a/mobile/src/components/about/Roadmap.vue
+++ b/mobile/src/components/about/Roadmap.vue
@@ -130,14 +130,14 @@ const HistoryList = reactive([
   },
 ]);
 onMounted(() => {
-  window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
+  document.body.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
   let bgTest = document.getElementById("bgTest");
   Y1.value = bgTest.offsetTop * ratio.value;
 });
 
 function handleScroll() {
   const scrollTop =
-    window.pageYOffset ||
+    document.body.pageYOffset ||
     document.documentElement.scrollTop ||
     document.body.scrollTop;
   positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
@@ -189,13 +189,13 @@ function handleScroll() {
   }
   .roadmap-title {
     position: absolute;
-    left: 0%;
-    top: -400px;
-    font-size: 210px;
+    left: 10%;
+    top: -1000px;
+    font-size: 100px;
     font-family: "Big John";
     font-weight: 400;
     color: #173637;
-    opacity: 0.3;
+    // opacity: 0.3;
     z-index: -1;
   }
   .content {
diff --git a/mobile/src/components/about/VisionMission.vue b/mobile/src/components/about/VisionMission.vue
index 71da00f..6c2e311 100644
--- a/mobile/src/components/about/VisionMission.vue
+++ b/mobile/src/components/about/VisionMission.vue
@@ -89,14 +89,14 @@ const cardText = [
   },
 ];
 onMounted(() => {
-  window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
+  document.body.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
   let bgTest = document.getElementById("bgTest");
   Y1.value = bgTest.offsetTop * ratio.value;
 });
 
 function handleScroll() {
   const scrollTop =
-    window.pageYOffset ||
+  document.body.pageYOffset ||
     document.documentElement.scrollTop ||
     document.body.scrollTop;
   positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
diff --git a/mobile/src/components/global/YouTubeVideo.vue b/mobile/src/components/global/YouTubeVideo.vue
new file mode 100644
index 0000000..27db5f5
--- /dev/null
+++ b/mobile/src/components/global/YouTubeVideo.vue
@@ -0,0 +1,101 @@
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+import YouTubePlayer from "youtube-player";
+
+const props = defineProps({
+  id: { type: String, default: "" },
+  src: { type: String, required: true },
+  width: { type: Number, default: 0 },
+  height: { type: Number, default: 0 }
+});
+
+const emit = defineEmits(["ended", "play", "pause"]);
+
+onMounted(() => {
+  initPlayer();
+  loadPlayer();
+});
+
+onBeforeUnmount(() => {
+  player && player.destroy();
+});
+
+const getVideoId = () => {
+  try {
+    const url = new URL(props.src);
+    console.log(url,'urlurlurl');
+    return url.searchParams.get("v") || "";
+  } catch (error) {
+    return "";
+  }
+};
+
+let player = null;
+const initPlayer = () => {
+  try {
+    player = YouTubePlayer(`youtube-${props.id}`, {
+      host: "https://www.youtube.com",
+      width: props.width,
+      height: props.height,
+      videoId: getVideoId(),
+      playsinline: 1,
+      rel: 0
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+const loadPlayer = () => {
+  try {
+    player.loadVideoById(getVideoId());
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+const play = () => player && player.playVideo();
+const pause = () => player && player.pauseVideo();
+
+// -1（未开始）0（已结束）1（正在播放）2（已暂停）3（正在缓冲）5（视频已插入）
+let stateChangeListener;
+const addStateChange = () => {
+  stateChangeListener = player?.on("stateChange", (event) => {
+    if (event.data === 0) emit("ended");
+    if (event.data === 1) emit("play");
+    if (event.data === 2) emit("pause");
+  });
+};
+const removeStateChange = () => {
+  if (stateChangeListener && player) player.off(stateChangeListener);
+};
+
+watch(
+  () => props.src,
+  () => loadPlayer()
+);
+
+defineExpose({ play, pause });
+</script>
+
+<template>
+  <div class="youtube-video">
+    <div :id="'youtube-' + id"></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.youtube-video {
+  // width: 100%;
+  video{
+    object-fit: cover !important; 
+  }
+ 
+  // overflow: hidden;
+}
+::selection {
+    color: #fff;
+    background: transparent !important;
+}
+</style>
+
diff --git a/mobile/src/components/home/Banner.vue b/mobile/src/components/home/Banner.vue
index dff21fe..f9c156f 100644
--- a/mobile/src/components/home/Banner.vue
+++ b/mobile/src/components/home/Banner.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="banner">
     <div class="content">
-      <div class="title">rtyrtyr</div>
+      <div class="title"><img src="../../assets/img/mobile-home/banner-slogan.png" alt=""></div>
       <div class="download-btns">
         <div class="andriod">
           <img src="../../assets/img/mobile-home/andriod.png" alt="" />
@@ -15,7 +15,7 @@
       </div>
     </div>
     <div class="banner-bg">
-      <img src="@/assets/img/home/banner-bg.png" 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="" />
@@ -28,7 +28,7 @@
 <style lang="scss" scoped>
 .banner {
   width: 100%;
-  height: 100vh;
+  height: 1243px;
   position: relative;
   .banner-bg {
     position: absolute;
@@ -60,6 +60,14 @@
     padding-top: 120px;
     position: relative;
     height: 100%;
+    .title{
+      width:725px ;
+      margin: 0 auto;
+      margin-top: 333px;
+     img{
+      width:725px ;  
+     }
+    }
     .download-btns {
       position: absolute;
       bottom: 150px;
diff --git a/mobile/src/components/home/DameplaySwiperCard.vue b/mobile/src/components/home/DameplaySwiperCard.vue
index eb34b5b..65c967e 100644
--- a/mobile/src/components/home/DameplaySwiperCard.vue
+++ b/mobile/src/components/home/DameplaySwiperCard.vue
@@ -6,6 +6,7 @@
         :grabCursor="false"
         :centeredSlides="true"
         slidesPerView="2"
+        :autoplay="{ delay: 4000, disableOnInteraction: false }"
         :coverflowEffect="{
           rotate: 0,
           stretch: 15,
@@ -39,6 +40,7 @@ import { ref, computed, reactive } from "vue";
 import {
   EffectCoverflow,
   Thumbs,
+  Autoplay,
   FreeMode,
   Navigation,
   Pagination,
@@ -61,7 +63,7 @@ const imageList = reactive([
   { imgSrc: require("@/assets/img/home/game-swiper-card/04.png") },
   { imgSrc: require("@/assets/img/home/game-swiper-card/05.png") },
 ]);
-const modules = [EffectCoverflow, Pagination];
+const modules = [EffectCoverflow, Pagination,Autoplay];
 
 const handSlidePrev = () => {
   myRef.value?.$el.swiper.slidePrev();
diff --git a/mobile/src/components/home/GameGallerp.vue b/mobile/src/components/home/GameGallerp.vue
index 143c39b..dcf5d16 100644
--- a/mobile/src/components/home/GameGallerp.vue
+++ b/mobile/src/components/home/GameGallerp.vue
@@ -35,20 +35,26 @@
             :loop="true"
             :slides-per-view="1"
             :space-between="15"
+            :autoplay="{ delay: 3000, disableOnInteraction: false }"
             :pagination="{
               clickable: true,
             }"
-            :autoplay="{ delay: 10000, disableOnInteraction: false }"
           >
             <swiper-slide v-for="(item, index) in imageList" :key="index">
               <div class="gallery-banner-img">
-                <img :src="item.imgSrc" alt="" />
+                <YoutubeVideo
+                  :id="item.id"
+                  :src="item.videoSrc"
+                  :width="720"
+                  :height="435"
+                >
+                </YoutubeVideo>
               </div>
             </swiper-slide>
           </swiper>
         </div>
         <div class="btn">
-          <div class="go-to-btn"></div>
+          <!-- <div class="go-to-btn"></div> -->
         </div>
       </div>
     </div>
@@ -74,7 +80,10 @@
         <DameplaySwiperCard></DameplaySwiperCard>
       </div>
       <div class="gameplay-bottom-viodboder">
-        <img src="@/assets/img/mobile-home/game-feature-bottom-boder.png" alt="" />
+        <img
+          src="@/assets/img/mobile-home/game-feature-bottom-boder.png"
+          alt=""
+        />
       </div>
     </div>
     <div>
@@ -95,7 +104,7 @@
 import { ref, computed, reactive, onMounted } from "vue";
 import DameplaySwiperCard from "./DameplaySwiperCard.vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
-// import VideoModal from "./VideoModal.vue";
+import YoutubeVideo from "../global/YouTubeVideo.vue";
 
 // 引入swiper样式（按需导入）
 import "swiper/css";
@@ -108,28 +117,28 @@ import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper";
 const modules = [Autoplay, Pagination, Navigation, Scrollbar];
 const imageList = reactive([
   {
-    imgSrc: require("@/assets/img/home/game/001.png"),
-    videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
+    videoSrc: "https://www.youtube.com/watch?v=_SZ5pVCxmro",
+    id: "_SZ5pVCxmro",
   },
   {
-    imgSrc: require("@/assets/img/home/game/002.png"),
-    videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
+    videoSrc: "https://www.youtube.com/watch?v=b-Dt2UvK4c4",
+    id: "b-Dt2UvK4c4",
   },
   {
-    imgSrc: require("@/assets/img/home/game/003.png"),
-    videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
+    videoSrc: "https://www.youtube.com/watch?v=t8SZPxlqzMI",
+    id: "t8SZPxlqzMI",
   },
   {
-    imgSrc: require("@/assets/img/home/game/004.png"),
-    videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
+    videoSrc: "https://www.youtube.com/watch?v=_trHtuEsmDY",
+    id: "_trHtuEsmDY",
   },
   {
-    imgSrc: require("@/assets/img/home/game/005.png"),
-    videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
+    videoSrc: "https://www.youtube.com/watch?v=ru1TNcZoS98",
+    id: "ru1TNcZoS98",
   },
   {
-    imgSrc: require("@/assets/img/home/game/006.png"),
-    videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
+    videoSrc: "https://www.youtube.com/watch?v=0hSr0KJtgmI",
+    id: "0hSr0KJtgmI",
   },
 ]);
 const Y1 = ref(0);
@@ -371,6 +380,7 @@ const handleClick = (item) => {
       border-radius: 15px;
       width: 100%;
       height: 435px;
+      background-color: #010001;
       // flex: 0 0 33.33333333%;
       justify-content: center;
       overflow: hidden;
diff --git a/mobile/src/components/home/Gameplay.vue b/mobile/src/components/home/Gameplay.vue
index 2194659..a60326a 100644
--- a/mobile/src/components/home/Gameplay.vue
+++ b/mobile/src/components/home/Gameplay.vue
@@ -29,16 +29,23 @@
         </div>
         <div class="pve-content">
           <div class="slogan">
-            <span class="title"> The PVE rewards include in-game ... </span
+            <span class="title">
+              Each battle contains 40 players by matching </span
             ><br />
-            . Bounty quest: Finish the corresponding task to earn the rewards<br />
-            . 3 different types of dungeons, Signal, Multi, and Guild
+            <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>
           </div>
         </div>
         <div class="gameplay-left">
           <div class="pve-img">
-            <img v-if="isPveTab" src="@/assets/img/home/pve-img.png" alt="" />
-            <img v-else src="@/assets/img/home/pve-img.png" alt="" />
+            <img src="@/assets/img/home/pve-img.png" alt="" />
           </div>
         </div>
       </div>
@@ -47,7 +54,7 @@
 </template>
 
 <script setup>
-import Modal from '../layout/Modal.vue'
+import Modal from "../layout/Modal.vue";
 import { ref, onMounted } from "vue";
 const isPveTab = ref(false);
 const handTabActive = (isTab) => {
@@ -62,7 +69,7 @@ const handTabActive = (isTab) => {
   flex-direction: column;
   position: relative;
   padding-top: 100px;
-  background: linear-gradient(180deg, #27757D, #289299, #34ADB4);
+  background: linear-gradient(180deg, #27757d, #289299, #34adb4);
   .gameplay-bg {
     position: absolute;
     left: 0;
@@ -140,11 +147,11 @@ const handTabActive = (isTab) => {
     .pve-left:hover:after {
       opacity: 1;
       clip-path: polygon(
-        calc(50% + 0px) calc(50% + 150px),
-        calc(50% + 150px) calc(50% + 0px),
-        calc(50% + 0px) calc(50% - 150px),
-        calc(50% - 150px) calc(50% - 0px)
-      );
+      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.25s ease-in;
       transform: scaleX(1, 1);
     }
@@ -179,11 +186,11 @@ const handTabActive = (isTab) => {
     }
     .pve-left-active:hover::after {
       clip-path: polygon(
-        calc(50% + 0px) calc(50% + 150px),
-        calc(50% + 150px) calc(50% + 0px),
-        calc(50% + 0px) calc(50% - 150px),
-        calc(50% - 150px) calc(50% - 0px)
-      );
+      calc(50% + 0px) calc(50% + 250px),
+      calc(50% + 250px) calc(50% + 0px),
+      calc(50% + 0px) calc(50% - 250px),
+      calc(50% - 250px) calc(50% - 0px)
+    );
       opacity: 1;
       transform: scaleX(1, 1);
       transition: all 0.25s ease-in;
@@ -302,10 +309,10 @@ const handTabActive = (isTab) => {
   .pve-right:hover:after {
     opacity: 1;
     clip-path: polygon(
-      calc(50% + 0px) calc(50% + 150px),
-      calc(50% + 150px) calc(50% + 0px),
-      calc(50% + 0px) calc(50% - 150px),
-      calc(50% - 150px) calc(50% - 0px)
+      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);
@@ -347,10 +354,10 @@ const handTabActive = (isTab) => {
   .pve-right-active:hover:after {
     opacity: 1;
     clip-path: polygon(
-      calc(50% + 0px) calc(50% + 150px),
-      calc(50% + 150px) calc(50% + 0px),
-      calc(50% + 0px) calc(50% - 150px),
-      calc(50% - 150px) calc(50% - 0px)
+      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);
@@ -374,6 +381,7 @@ const handTabActive = (isTab) => {
       .slogan {
         width: 694px;
         // height: 164px;
+
         margin: 0 auto;
         margin-bottom: 121px;
         margin-top: 38px;
diff --git a/mobile/src/components/home/HeroSweiper.vue b/mobile/src/components/home/HeroSweiper.vue
index 0e27b22..73b7f63 100644
--- a/mobile/src/components/home/HeroSweiper.vue
+++ b/mobile/src/components/home/HeroSweiper.vue
@@ -6,6 +6,7 @@
       <swiper
         :modules="modules"
         class="mySwiper"
+        :autoplay="{ delay: 4000, disableOnInteraction: false }"
         @swiper="setHeroSwiper"
         :navigation="{
           nextEl: '.swiper-btn1-next',
@@ -42,8 +43,8 @@ import { ref, onMounted } from "vue";
 import { HeroList } from "@/configs/information";
 import "swiper/css";
 import "swiper/css/navigation";
-import { Navigation } from "swiper";
-const modules = ref([Navigation]);
+import { Navigation, Autoplay} from "swiper";
+const modules = ref([Navigation,Autoplay]);
 const heroAnimationActive = ref(false);
 const swiperIndex = ref(null);
 const activeIndex = ref(0);
diff --git a/mobile/src/components/home/WeaponSwiper.vue b/mobile/src/components/home/WeaponSwiper.vue
index bdddcaf..67135fb 100644
--- a/mobile/src/components/home/WeaponSwiper.vue
+++ b/mobile/src/components/home/WeaponSwiper.vue
@@ -8,6 +8,7 @@
       <swiper
         :modules="modules"
         class="mySwiper"
+        :autoplay="{ delay: 4000, disableOnInteraction: false }"
         :navigation="{
           nextEl: '.swiper-btn2-next',
           prevEl: '.swiper-btn2-prev',
@@ -51,8 +52,8 @@ import { ref, computed, reactive, onMounted } from "vue";
 import "swiper/css";
 import "swiper/css/navigation";
 // import required modules
-import { Navigation } from "swiper";
-const modules = ref([Navigation]);
+import { Navigation,Autoplay } from "swiper";
+const modules = ref([Navigation,Autoplay]);
 const weaponAnimationActive = ref(false);
 const weaponList = reactive([
   {
diff --git a/mobile/src/components/layout/FooterBar.vue b/mobile/src/components/layout/FooterBar.vue
index 7f5a38b..302f1f8 100644
--- a/mobile/src/components/layout/FooterBar.vue
+++ b/mobile/src/components/layout/FooterBar.vue
@@ -74,20 +74,36 @@
 </template>
 
 <script setup>
-let timer = null;
+import { ref ,onMounted,onUnmounted} from "vue";
+const scrollTop = ref(0)
+const btnFlag = ref(false)
+
 function backTop() {
-  timer = setInterval(() => {
-    const backTop =
-      window.pageYOffset ||
-      document.documentElement.scrollTop ||
-      document.body.scrollTop;
-    const speedTop = backTop / 10;
-    document.documentElement.scrollTop = backTop - speedTop;
-    if (backTop === 0) {
-      clearInterval(timer);
+  let timer = setInterval(() => {
+    let ispeed = Math.floor(-scrollTop.value / 5)
+    document.documentElement.scrollTop = document.body.scrollTop = scrollTop.value + ispeed
+    if (scrollTop.value === 0) {
+      clearInterval(timer)
     }
-  }, 10);
+  }, 16)
 }
+
+function scrollToTop() {
+  scrollTop.value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+  if (scrollTop.value > 60) {
+    btnFlag.value = true
+  } else {
+    btnFlag.value = false
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', scrollToTop)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', scrollToTop)
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/mobile/src/components/layout/NavBar.vue b/mobile/src/components/layout/NavBar.vue
index 9097de4..4584406 100644
--- a/mobile/src/components/layout/NavBar.vue
+++ b/mobile/src/components/layout/NavBar.vue
@@ -4,9 +4,10 @@
       <img src="../../assets/img/home/nav-logo.png" alt="" />
     </div>
     <div class="nav-right">
-      <div class="avatar-icon">
+      <div class="avatar-icon" v-if="!chain.logined" @click="login">
         <img src="../../assets/img/mobile-home/avatar-icon.png" alt="" />
       </div>
+      <div v-else class="logout" @click="logout">logout</div>
       <div
         :class="navShow == true ? 'nav-btn-active' : 'nav-btn'"
         @click="switchNav"
@@ -42,16 +43,21 @@
       </div>
     </a-drawer>
   </div>
+  <ChainModel></ChainModel>
 </template>
 
 <script setup>
 import { ref, provide } from "vue";
-import { computed, reactive, onMounted, nextTick ,watchEffect} from "vue";
+import { computed, reactive, onMounted, nextTick, watchEffect } from "vue";
 import { useRouter, useRoute } from "vue-router";
+import ChainModel from "../../components/global/ChainModel.vue";
+import { useChainStore } from "@/store/chain";
+import { useAppStore } from "@/store/app";
 const router = useRouter();
 const route = useRoute();
 const navShow = ref(false);
 const activeIndex = ref(0);
+const chain = useChainStore();
 onMounted(async () => {
   navShow.value = true;
   await nextTick();
@@ -89,11 +95,25 @@ const navList = reactive([
     ],
   },
 ]);
+async function login(event) {
+  if (!chain.logined) {
+    // 没有登录情况下执行登录
+    await chain.chainManager.login();
+    console.log("logined:", chain.chainManager.isLogined);
+    chain.logined = chain.chainManager.isLogined;
+  }
+}
+const logout = async () => {
+  await chain.chainManager.logout();
+  console.log("logined:", chain.chainManager.isLogined);
+  chain.logined = chain.chainManager.isLogined;
+};
 function onLinkTo(item, index) {
   activeIndex.value = index;
   router.push(item.path);
   navShow.value = false;
 }
+
 watchEffect(() => {
   const index = navList.findIndex((navItem) => navItem.path === route.path);
   activeIndex.value = index !== -1 ? index : 0;
@@ -193,4 +213,16 @@ watchEffect(() => {
   text-align: center;
   justify-content: center;
 }
+.logout {
+  // width: 36px;
+  // height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 28px;
+  font-family: "Big John";
+  font-weight: 400;
+  // position: relative;
+  color: #d74458;
+}
 </style>
diff --git a/mobile/src/router/index.js b/mobile/src/router/index.js
index 0037855..45a8a46 100644
--- a/mobile/src/router/index.js
+++ b/mobile/src/router/index.js
@@ -9,7 +9,7 @@ const routes = [
     component: Home,
     meta: {
       showInMenu: true,
-    }
+    },
   },
   {
     path: "/about",
@@ -17,7 +17,7 @@ const routes = [
     component: About,
     meta: {
       showInMenu: true,
-    }
+    },
   },
   {
     path: "/gellery",
@@ -26,7 +26,7 @@ const routes = [
       import(/* webpackChunkName "gellery" */ "././../views/GalleryView.vue"),
     meta: {
       showInMenu: true,
-    }
+    },
   },
   {
     path: "/marketpalce",
@@ -37,7 +37,7 @@ const routes = [
       ),
     meta: {
       showInMenu: true,
-    }
+    },
   },
   {
     path: "/contact",
@@ -46,13 +46,25 @@ const routes = [
       import(/* webpackChunkName "contact" */ "././../views/ContactUsView.vue"),
     meta: {
       showInMenu: true,
-    }
+    },
   },
 ];
 
 const router = createRouter({
   history: createWebHistory(),
-  routes,
+  routes
+});
+router.afterEach((to, from) => {
+  let bodySrcollTop = document.body.scrollTop;
+  if (bodySrcollTop !== 0) {
+    document.body.scrollTop = 0;
+    return;
+  }
+  let docSrcollTop = document.documentElement.scrollTop;
+  if (docSrcollTop !== 0) {
+    document.documentElement.scrollTop = 0;
+  }
 });
 
+
 export default router;
diff --git a/mobile/src/store/user.js b/mobile/src/store/user.js
index a32cd98..0494513 100644
--- a/mobile/src/store/user.js
+++ b/mobile/src/store/user.js
@@ -19,7 +19,12 @@ export const useUserStore = defineStore('user', () => {
   ];
 
   const token = ref(getToken());
-
+  // const accountId = ref(getAccountId());
+ // AppModule.updateAccount(accountId.value);
+  if(token.value){
+  
+   AppModule.updateStep(1); 
+  }
   async function Login({bcInstance, account, chainId, nonce}) {
     nonce += ''
     const tips = 'This signature is only used for verify your account'
diff --git a/mobile/yarn.lock b/mobile/yarn.lock
index 09ac427..7adb8bd 100644
--- a/mobile/yarn.lock
+++ b/mobile/yarn.lock
@@ -2015,7 +2015,7 @@ debug@^3.1.0, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.1.0, debug@^4.1.1, debug@^4.3.3:
+debug@^4.1.0, debug@^4.1.1, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -3636,6 +3636,11 @@ levelup@^1.2.1:
     semver "~5.4.1"
     xtend "~4.0.0"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/locate-path/-/locate-path-3.0.0.tgz"
@@ -4932,6 +4937,11 @@ simple-get@^2.7.0:
     once "^1.3.1"
     simple-concat "^1.0.0"
 
+sister@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.npmmirror.com/sister/-/sister-3.0.2.tgz#bb3e39f07b1f75bbe1945f29a27ff1e5a2f26be4"
+  integrity sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.npmmirror.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz"
@@ -6036,3 +6046,12 @@ yauzl@^2.10.0:
   dependencies:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
+
+youtube-player@^5.6.0:
+  version "5.6.0"
+  resolved "https://registry.npmmirror.com/youtube-player/-/youtube-player-5.6.0.tgz#71699ca093d8ae65e87091898cf812b354e261ea"
+  integrity sha512-x95fBbxV7eZ1ZsFtMLMcSGX0Jb/GPPj69RsooyEDVa9bzvvNZ4d5VjnBVBYoY85008VefkLvtaV+b+l38R/LMQ==
+  dependencies:
+    debug "^4.3.4"
+    load-script "^1.0.0"
+    sister "^3.0.0"