update

src/components/GameDemo.vue

@@ -18,12 +18,18 @@ const cancelBtn = () => {
   <ModalTransition class="popup" :show="show" name="opacity">
     <div class="home-bg">
       <div class="popup-bg">
+        <div class="scene-item item-1">
+          <img src="../assets/images/new/demo-img.png" alt="home">
+        </div>
         <div class="scene-item item-2">
           <img src="../assets/images/new/start-1.webp" @click="cancelBtn" alt="立即挑战">
         </div>
         <div class="scene-item item-3">
           <img src="../assets/images/new/close-btn.webp" @click="cancelBtn" alt="关闭">
         </div>
+        <div class="scene-item item-4">
+          <img src="../assets/images/new/shou.png" alt="shou">
+        </div>
       </div>
     </div>
   </ModalTransition>
@@ -45,8 +51,9 @@ const cancelBtn = () => {
 .popup-bg {
   width: 100vw;
   height: 204vw;
-  background-image: url('../assets/images/new/demo-popup.webp');
+  background-image: url('../assets/images/new/demo-bg.png');
-  background-size: 100%;
+  background-size: 100% auto;
+  background-position: 0 0;
   background-repeat: no-repeat;
   display: flex;
   flex-direction: column;
@@ -77,8 +84,8 @@ const cancelBtn = () => {
   position: relative;
 }
 .item-1 {
-  top: 114vw;
+  top: 40vw;
-  width: 20vw;
+  width: 70vw;
 }
 .item-2 {
   top: 134vw;
@@ -88,6 +95,34 @@ const cancelBtn = () => {
   top: 152vw;
   width: 12vw;
 }
+.item-4 {
+  width: 30vw;
+  top: 57vw;
+  left: 46vw;
+}
+/* 手指点击动效：轻微下压 + 缩放 */
+@keyframes finger-tap {
+  0% {
+    transform: translateY(0) scale(1);
+  }
+  30% {
+    /* 手指按下：往下移动一点点，略微变小 */
+    transform: translateY(2.4vw) scale(0.96);
+  }
+  60% {
+    /* 回弹到原位 */
+    transform: translateY(0) scale(1.02);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* 给这只手指绑定动画 */
+.scene-item.item-4 img {
+  animation: finger-tap 1s ease-in-out infinite;
+  transform-origin: center bottom; /* 以底部为轴，看起来更像手指按压 */
+}
 .scene-item img {
   width: 100%;
   height: 100%;

src/components/GameSwiper.vue

@@ -221,14 +221,14 @@ const handleConfirmClick = async () => {
 }
 
 const handleSlideClick = (slide) => {
-  
+  globalToastEvent.emit(ToastType.SHOW_GAMEDEMO)
-  if (!hasVisitedBefore) {
+  // if (!hasVisitedBefore) {
-    localStorage.setItem('hasVisitedGameSwiper', true);
+  //   localStorage.setItem('hasVisitedGameSwiper', true);
-    globalToastEvent.emit(ToastType.SHOW_GAMEDEMO)
+  //   globalToastEvent.emit(ToastType.SHOW_GAMEDEMO)
-    globalToastEvent.emit(ToastType.SHOW_GAMEPAGE, slide)
+  //   globalToastEvent.emit(ToastType.SHOW_GAMEPAGE, slide)
-  } else {
+  // } else {
-    globalToastEvent.emit(ToastType.SHOW_GAMEPAGE, slide)
+  //   globalToastEvent.emit(ToastType.SHOW_GAMEPAGE, slide)
-  }
+  // }
 }
 
 // 自动播放

src/components/HomePage.vue

@@ -464,12 +464,16 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
 
       <!-- 透明洞的覆盖块：50x100px，背景色 #7b3d0d -->
       <div class="transparent-hole-cover"></div>
+      <div class="transparent-hole-cover-left"></div>
 
       <div class="scene-item item-1" @click="handleLottery">
         <img src="../assets/images/new/lottery.webp" alt="抽奖">
       </div>
       <div class="scene-item item-2" @click="navigateGamePage">
         <img src="../assets/images/new/start-btn.webp" alt="开始探索">
+        <div class="join-main">
+          <p class="join-value">{{ globalStore.game_chances }}</p>
+        </div>
       </div>
       <div class="scene-item item-3" @click="navigateTodoList">
         <img src="../assets/images/new/task.webp" alt="任务">
@@ -636,7 +640,15 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
   right: 8vw;
   z-index: -2;
 }
-
+.transparent-hole-cover-left {
+  position: fixed;
+  width: 30vw;
+  height: 80vw;
+  background-color: #7b3d0d;
+  top: 62vw;
+  left: 8vw;
+  z-index: -2;
+}
 .scene-item {
   position: fixed;
   cursor: pointer;
@@ -658,14 +670,14 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
 
 /* 马的位置 */
 .item-ma1 {
-  width: 14vw;
+  width: 13vw;
-  top: 43vw;
+  top: 43.2vw;
-  left: 6.2vw;
+  left: 7.2vw;
 }
 .item-ma2 {
   width: 14vw;
-  top: 43vw;
+  top: 43.2vw;
-  right: 7.1vw;
+  right: 7.8vw;
 }
 .item-ma3 {
   width: 21vw;
@@ -817,7 +829,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
 
 .item-1 {
   width: 21vw;
-  bottom: 20vw;
+  bottom: 15vw;
   left: 0;
   animation-delay: 0s;
 }
@@ -840,36 +852,41 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
 
 .item-2 {
   width: 48vw;
-  bottom: 18vw;
+  bottom: 13vw;
   animation-delay: 0s;
 }
 
 .join-main {
+  width: 10vw;
+  height: 10vw;
+  background-image: url('../assets/images/new/cishu.png');
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  background-position: 0 0;
   position: absolute;
-  top: 3.4vw;
+  top: -0.6vw;
-  right: -3.5vw;
+  right: -0.5vw;
-  width: 13vw;
+  text-align: center;
+  padding-top: 1.6vw;
 }
 
 .join-main .join-value {
   margin: 0;
   color: white;
-  text-shadow: -1px -1px 0 #ff0000, 1px -1px 0 #ff0000, -1px 1px 0 #ff0000, 1px 1px 0 #ff0000, 0 0 2px #ff0000;
+  font-size: 4vw;
-  font-size: 5.4vw;
-  font-weight: 900;
 }
 
 .item-3 {
   width: 21vw;
-  bottom: 20vw;
+  bottom: 15vw;
   right: 0;
   animation-delay: 0s;
 }
 
 .item-4 {
-  width: 11vw;
+  width: 15vw;
-  top: 8vw;
+  top: 6vw;
-  right: 4vw;
+  right: 3vw;
   animation-delay: 0s;
 }
 
@@ -882,14 +899,14 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
 
 .item-6 {
   width: 14.5vw;
-  top: 8%;
+  top: 22vw;
   right: 0;
   animation-delay: 0s;
 }
 
 .item-7 {
   width: 14.5vw;
-  top: 12%;
+  top: 30vw;
   right: 0;
   animation-delay: 0s;
 }

src/components/Rule.vue

@@ -39,7 +39,6 @@ const emit = defineEmits(['close'])
   width: 83.981481vw;
   height: 150vw;
   overflow: auto;
-  padding-right: 4vw;
   padding-bottom: 56vw;
 }
 .rule-content img {