git

src/components/GrassGIF.vue

 <template>
-  <div :style="HomeStyle" class="grassBox"></div>
+  <div :style="HomeStyle" class="grassBox">
+    <img :src="grass1" class="flex" />
+    <img :src="grass2" />
+    <img :src="grass3" />
+    <img :src="grass4" />
+  </div>
 </template>
 
 <script>
+import grass1 from '../assets/GrassImage/花丛-1.png'
+import grass2 from '../assets/GrassImage/花丛-2.png'
+import grass3 from '../assets/GrassImage/花丛-3.png'
+import grass4 from '../assets/GrassImage/花丛-4.png'
 export default {
   setup() {
     const HomeStyle = {
       backgroundSize: '100% auto'
     }
     return {
-      HomeStyle
+      HomeStyle,
+      grass1,
+      grass2,
+      grass3,
+      grass4
     }
   }
 }
 .grassBox {
   width: 100%;
   height: 21vh;
+  .flex {
+    transform: rotate(9deg);
+    position: relative;
+    left: 64vw;
+    top: -2vh;
+  }
 }
 </style>

src/pages/homePage.vue

 
 <template>
   <div>
-    <BackPage>
+    <!-- <BackPage>
       <div class="TitleBox">
         <img :src="gameTitle" />
       </div>
         <img :src="gameSatrt" class="bth-image" @click="linkTo" />
         <img :src="gameRule" class="bth-image" @click="goRule" />
       </div>
-    </BackPage>
-    <!-- <GrassGIF /> -->
+    </BackPage>-->
+    <GrassGIF />
   </div>
 </template>
 
   width: 100vw;
 }
 .bth-div {
-  width: 33vw;
   position: absolute;
-  top: 80vh;
-  left: 35vw;
+  width: 100vw;
   display: flex;
+  bottom: 7vh;
   justify-content: center;
   .bth-image {
-    width: 100%;
+    width: 30%;
   }
 }
 </style>