pack

src/OverPage.vue

@@ -0,0 +1,117 @@
+<template>
+  <BackPage>
+    <div>
+      <div class="overImage-box">
+        <img :src="overImage" class="overImage-boxBack" />
+      </div>
+      <img v-if="route.query.type =='win'" :src="winTopImage" class="overImage-top-box" />
+      <img v-else :src="loseTopImage" class="overImage-top-box" />
+
+      <div class="IKnow-box">
+        <div class="IKnow-box-top">
+          <img :src="tryAgain" @click="tryAgains" />
+          <img :src="goShare" @click="goShares" />
+        </div>
+        <div class="IKnow-box-bottom">
+          <img :src="goTop" @click="goTops" />
+        </div>
+      </div>
+    </div>
+  </BackPage>
+</template>
+
+<script>
+import { ref, reactive } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import overImage from './assets/TipsImage/3-4.png'
+import winTopImage from './assets/RoundaboutImage/2-11.png'
+import loseTopImage from './assets/RoundaboutImage/2-12.png'
+import tryAgain from './assets/ButtonImage/再玩一次.png'
+import goShare from './assets/ButtonImage/和好友一起玩.png'
+import goTop from './assets/ButtonImage/排行榜.png'
+export default {
+  setup() {
+    const route = useRoute() //拿参
+    const router = useRouter() //跳转
+    const tryAgains = () => {
+      // 字符串路径
+      // router.push('/about')
+      router.back(-1)
+    }
+    const goTops = () => {
+      router.push({
+        path: '/TopRulePage',
+        query: {
+          // type: 'top'
+          type: 'top'
+        }
+      })
+    }
+    const goShares = () => {
+      //     router.push({
+      //   path: '/TopRulePage',
+      //   query: {
+      //     // type: 'top'
+      //     type: 'top'
+      //   }
+      // })
+    }
+    goShare
+
+    return {
+      overImage,
+      winTopImage,
+      loseTopImage,
+      tryAgain,
+      goShare,
+      goTop,
+      route,
+      tryAgains,
+      goTops,
+      goShares
+    }
+  }
+}
+</script>
+
+
+<style lang="less" scoped>
+.overImage-box {
+  width: 100vw;
+  position: absolute;
+  top: 13vh;
+  display: flex;
+  justify-content: center;
+  .overImage-boxBack {
+    width: 93%;
+    height: 100%;
+  }
+}
+.overImage-top-box {
+  position: absolute;
+  width: 67%;
+  top: 9vh;
+  left: 15vw;
+}
+.IKnow-box {
+  position: absolute;
+  bottom: 7vh;
+  &-top {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    > img {
+      width: 30%;
+    }
+  }
+  &-bottom {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    > img {
+      width: 30%;
+    }
+  }
+}
+</style>

src/components/GrassGIF.vue

@@ -0,0 +1,25 @@
+<template>
+  <div :style="HomeStyle" class="grassBox"></div>
+</template>
+
+<script>
+export default {
+  setup() {
+    const HomeStyle = {
+      backgroundImage: 'url(' + require('../assets/GrassImage/花丛.png') + ')',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: '100% auto'
+    }
+    return {
+      HomeStyle
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.grassBox {
+  width: 100%;
+  height: 21vh;
+}
+</style>

src/main.js

@@ -3,7 +3,7 @@ import App from './App.vue'
 
 import router from './router'
 import BackPage from './components/BackPage.vue'
-
+import GrassGIF from './components/GrassGIF.vue'
 // 创建 App实例
 const app = createApp(App)
 
@@ -28,6 +28,7 @@ app.use(router)
 // 将实例挂载到 #app节点上
 app.mount('#app')
 app.component('BackPage', BackPage)
+app.component('GrassGIF', GrassGIF)
 
 // createApp(App).mount('#app')
 

src/pages/homePage.vue

@@ -1,10 +1,7 @@
 
 <template>
   <div>
-    <!-- :style="HomeStyle" -->
     <BackPage>
-      <!-- <img :src="backHome" class="bg-image" /> -->
-
       <div class="TitleBox">
         <img :src="gameTitle" />
       </div>
@@ -13,6 +10,7 @@
         <img :src="gameRule" class="bth-image" @click="goRule" />
       </div>
     </BackPage>
+    <!-- <GrassGIF /> -->
   </div>
 </template>
 
@@ -34,10 +32,10 @@ export default {
 
       // 带有路径的对象
       router.push({
-        path: '/OverPage',
-        query: {
-          type: 'win'
-        }
+        path: '/game'
+        // query: {
+        //   type: 'win'
+        // }
       })
     }
     const goRule = () => {