roundabout/src/OverPage.vue

<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>