update

src/components/HomePage.vue

@@ -458,6 +458,9 @@ const handleAddress = (id) => {
     <div class="home-wrapper">
       <div class="fallback-background"></div>
 
+      <!-- 透明洞的覆盖块：50x100px，背景色 #7b3d0d -->
+      <div class="transparent-hole-cover"></div>
+
       <div class="scene-item item-1" @click="handleLottery">
         <img src="../assets/images/new/lottery.webp" alt="抽奖">
       </div>
@@ -579,6 +582,7 @@ const handleAddress = (id) => {
 }
 
 .home-wrapper {
+  position: relative;
   width: 100vw;
   height: 200vw;
   display: flex;
@@ -614,11 +618,19 @@ const handleAddress = (id) => {
   width: 100%;
   height: 100%;
   background-image: url('../assets/images/new/home-bg.webp');
-  background-size: cover;
+  background-size: 100% auto;
   background-repeat: no-repeat;
-  background-position: center;
+  background-position: 0 0;
   z-index: -1;
-  /* 置于视频下方 */
+}
+.transparent-hole-cover {
+  position: fixed;
+  width: 30vw;
+  height: 80vw;
+  background-color: #7b3d0d;
+  top: 100vw;
+  right: 8vw;
+  z-index: -2;
 }
 
 .scene-item {
@@ -643,23 +655,24 @@ const handleAddress = (id) => {
 /* 马的位置 */
 .item-ma1 {
   width: 14vw;
-  top: 47vw;
-  left: 4.4vw;
+  top: 43vw;
+  left: 6.2vw;
 }
 .item-ma2 {
   width: 14vw;
-  top: 47vw;
-  right: 4.4vw;
+  top: 43vw;
+  right: 7.1vw;
 }
 .item-ma3 {
   width: 21vw;
-  top: 162vw;
-  left: 3vw;
+  top: 147vw;
+  left: 7vw;
 }
 .item-ma4 {
   width: 25vw;
-  top: 128vw;
-  right: 6.6vw;
+  top: 121vw;
+  right: 2.6vw;
+  z-index: -2;
 }
 
 .item-jiu1 {
@@ -733,13 +746,13 @@ const handleAddress = (id) => {
 
 /* 每匹马用同一个 keyframes，但频率和起始时间不同，让节奏更自然 */
 .scene-item.item-ma1 img {
-  animation: horse-gallop 1.0s infinite ease-in-out;
+  animation: horse-gallop 1.8s infinite ease-in-out;
   animation-delay: 0s;
   transform-origin: center bottom;
 }
 
 .scene-item.item-ma2 img {
-  animation: horse-gallop 1.25s infinite ease-in-out;
+  animation: horse-gallop 2.1s infinite ease-in-out;
   /* 负 delay：进场时就已经错位，不会同时起跳 */
   animation-delay: -0.3s;
   transform-origin: center bottom;
@@ -751,7 +764,7 @@ const handleAddress = (id) => {
   transform-origin: center bottom;
 }
 
-.scene-item.item-ma4 img {
+.scene-item.item-ma4 {
   animation: horse-gallop 1.65s infinite ease-in-out;
   animation-delay: -0.9s;
   transform-origin: center bottom;
@@ -772,12 +785,12 @@ const handleAddress = (id) => {
   animation-delay: -0.9s;
   transform-origin: center bottom;
 }
-.scene-item.item-jiu1 img {
+.scene-item.item-jiu1 {
   animation: horse-gallop 2.4s infinite ease-in-out;
   animation-delay: -0.9s;
   transform-origin: center bottom;
 }
-.scene-item.item-jiu2 img {
+.scene-item.item-jiu2 {
   animation: horse-gallop 2.2s infinite ease-in-out;
   animation-delay: -0.9s;
   transform-origin: center bottom;
@@ -800,7 +813,7 @@ const handleAddress = (id) => {
 
 .item-1 {
   width: 21vw;
-  bottom: 7vw;
+  bottom: 20vw;
   left: 0;
   animation-delay: 0s;
 }
@@ -823,7 +836,7 @@ const handleAddress = (id) => {
 
 .item-2 {
   width: 48vw;
-  bottom: 5vw;
+  bottom: 18vw;
   animation-delay: 0s;
 }
 
@@ -844,7 +857,7 @@ const handleAddress = (id) => {
 
 .item-3 {
   width: 21vw;
-  bottom: 7vw;
+  bottom: 20vw;
   right: 0;
   animation-delay: 0s;
 }
@@ -879,17 +892,11 @@ const handleAddress = (id) => {
 
 .item-8 {
   width: 27vw;
-  bottom: 27vw;
+  bottom: 43vw;
   right: 1vw;
   animation-delay: 0s;
 }
 
-.item-ma1 {
-  width: 14vw;
-  top: 47vw;
-  left: 4.4vw;
-}
-
 @keyframes loginloading {
   0% {
     transform: rotate(0deg);