sti

src/components/OverPage.vue

@@ -1,11 +1,20 @@
 <template>
   <BackPage>
     <div>
-      <div class="ruleImage-box">
-        <img :src="ruleImage" />
+      <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">
-        <img :src="IKnow" @click="goBack" />
+        <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>
@@ -13,23 +22,96 @@
 
 <script>
 import { ref, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import ruleImage from '../assets/TipsImage/3-3.png'
-import IKnow from '../assets/ButtonImage/我知道了.png'
+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 router = useRouter()
-
-    const linkBack = () => {
+    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 {
-      linkBack
+      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/TopRulePage.vue

@@ -23,7 +23,7 @@
         </div>
       </div>
       <div class="IKnow-box">
-        <img :src="GoHome" @click="goBack" />
+        <img :src="GoHome" @click="gohomePage" />
       </div>
     </div>
   </BackPage>
@@ -44,9 +44,14 @@ export default {
 
     const goBack = () => {
       // 字符串路径
-      // router.push('/about')
       router.go(-1)
     }
+
+    const gohomePage = () => {
+      // 字符串路径
+      router.push('/')
+    }
+
     onMounted(() => {
       if (route.query.type == 'top') {
       }
@@ -70,6 +75,7 @@ export default {
     ]
     return {
       goBack,
+      gohomePage,
       ruleImage,
       IKnow,
       TopImage,

src/components/homePage.vue

@@ -27,9 +27,6 @@ import gameRule from '../assets/ButtonImage/游戏规则.png'
 // import BackPage from './componentsPages/BackPage.vue'
 
 export default {
-  components: {
-    // 2.第二步：父组件中注册子组件
-  },
   setup() {
     const router = useRouter()
     const HomeStyle = {
@@ -47,7 +44,7 @@ export default {
       router.push({
         path: '/OverPage',
         query: {
-          type: 'top'
+          type: 'win'
         }
       })
     }
@@ -79,12 +76,40 @@ export default {
 </script>
 
 <style lang="less" scoped>
+// @keyframes scaleDraw {
+//   0% {
+//     transform: scale(0.2);
+//   }
+//   50% {
+//     transform: scale(1.1);
+//   }
+//   100% {
+//     transform: scale(1);
+//   }
+// }
+@keyframes scaleDraw {
+  0% {
+    transform: scale(0.9);
+  }
+  25% {
+    transform: scale(1.1);
+  }
+  45% {
+    transform: scale(0.9);
+  }
+
+  75% {
+    transform: scale(1);
+  }
+}
+
 .TitleBox {
   width: 99%;
   position: absolute;
   top: 15vh;
   display: flex;
   justify-content: center;
+  animation: scaleDraw 1.4s ease-out 1;
 
   > img {
     width: 85%;