update

src/components/GameDemo.vue

@@ -19,7 +19,7 @@ const cancelBtn = () => {
     <div class="home-bg">
       <div class="popup-bg">
         <div class="scene-item item-1">
-          <img src="../assets/images/new/demo-img.png" alt="home">
+          <img src="../assets/images/new/demo-img.webp" alt="home">
         </div>
         <div class="scene-item item-2">
           <img src="../assets/images/new/start-1.webp" @click="cancelBtn" alt="立即挑战">
@@ -28,7 +28,7 @@ const cancelBtn = () => {
           <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">
+          <img src="../assets/images/new/shou.webp" alt="shou">
         </div>
       </div>
     </div>
@@ -51,7 +51,7 @@ const cancelBtn = () => {
 .popup-bg {
   width: 100vw;
   height: 204vw;
-  background-image: url('../assets/images/new/demo-bg.png');
+  background-image: url('../assets/images/new/demo-bg.webp');
   background-size: 100% auto;
   background-position: 0 0;
   background-repeat: no-repeat;

src/components/HomePage.vue

@@ -494,14 +494,6 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
         <img src="../assets/images/new/award.webp" alt="奖励">
       </div>
 
-      <div class="scene-item item-ma1">
-        <img src="../assets/images/new/ma1.webp" alt="马1">
-      </div>
-
-      <div class="scene-item item-ma2">
-        <img src="../assets/images/new/ma2.webp" alt="马2">
-      </div>
-
       <div class="scene-item item-ma3">
         <img src="../assets/images/new/ma3.webp" alt="马3">
       </div>
@@ -538,10 +530,6 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
         <img src="../assets/images/new/hulu.webp" alt="葫芦">
       </div>
 
-      <div class="scene-item item-taozi">
-        <img src="../assets/images/new/taozi.webp" alt="桃子">
-      </div>
-
       <div class="scene-item item-8" @click="popupMore">
         <img src="../assets/images/new/learn-more.webp" alt="更多金喜">
       </div>
@@ -650,7 +638,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
   z-index: -2;
 }
 .scene-item {
-  position: fixed;
+  position: absolute;
   cursor: pointer;
   transition: all 0.4s ease;
   overflow: hidden;
@@ -693,42 +681,42 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
 
 .item-jiu1 {
   width: 49vw;
-  top: 63vw;
+  top: 58vw;
   left: 0;
 }
 .item-jiu2 {
   width: 49vw;
-  top: 63vw;
+  top: 58vw;
   right: 0;
 }
 
 .item-xique1 {
   width: 31vw;
-  top: 78vw;
+  top: 73vw;
   left: 39vw;
 }
 
 .item-xique2 {
   width: 37vw;
-  top: 77vw;
+  top: 72vw;
   right: 28vw;
 }
 
 .item-sidai {
   width: 31vw;
-  top: 79vw;
+  top: 74vw;
   left: 39vw;
 }
 
 .item-lihe {
-  width: 42vw;
-  top: 85vw;
+  width: 30vw;
+  top: 80vw;
   left: 7vw;
 }
 
 .item-hulu {
-  width: 30vw;
-  top: 99vw;
+  width: 27vw;
+  top: 92vw;
   left: 21vw;
 }
 
@@ -761,7 +749,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
 }
 
 /* 每匹马用同一个 keyframes，但频率和起始时间不同，让节奏更自然 */
-.scene-item.item-ma1 img {
+/* .scene-item.item-ma1 img {
   animation: horse-gallop 1.8s infinite ease-in-out;
   animation-delay: 0s;
   transform-origin: center bottom;
@@ -769,10 +757,9 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
 
 .scene-item.item-ma2 img {
   animation: horse-gallop 2.1s infinite ease-in-out;
-  /* 负 delay：进场时就已经错位，不会同时起跳 */
   animation-delay: -0.3s;
   transform-origin: center bottom;
-}
+} */
 
 .scene-item.item-ma3 img {
   animation: horse-gallop 1.4s infinite ease-in-out;
@@ -829,7 +816,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
 
 .item-1 {
   width: 21vw;
-  bottom: 15vw;
+  bottom: 10vw;
   left: 0;
   animation-delay: 0s;
 }
@@ -852,14 +839,14 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
 
 .item-2 {
   width: 48vw;
-  bottom: 13vw;
+  bottom: 8vw;
   animation-delay: 0s;
 }
 
 .join-main {
   width: 10vw;
   height: 10vw;
-  background-image: url('../assets/images/new/cishu.png');
+  background-image: url('../assets/images/new/cishu.webp');
   background-size: 100% auto;
   background-repeat: no-repeat;
   background-position: 0 0;
@@ -878,7 +865,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
 
 .item-3 {
   width: 21vw;
-  bottom: 15vw;
+  bottom: 10vw;
   right: 0;
   animation-delay: 0s;
 }
@@ -913,7 +900,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
 
 .item-8 {
   width: 27vw;
-  bottom: 43vw;
+  bottom: 23vw;
   right: 1vw;
   animation-delay: 0s;
 }