roundabout/src/components/homePage.vue

<template>
  <div>
    <!-- :style="HomeStyle" -->
    <BackPage>
      <!-- <img :src="backHome" class="bg-image" /> -->

      <div class="TitleBox">
        <img :src="gameTitle" />
      </div>
      <div class="bth-div">
        <!-- <img src="../assets/index/开始游戏.png" class="bth-image" /> -->
        <img :src="gameSatrt" class="bth-image" @click="linkTo" />
        <img :src="gameRule" class="bth-image" @click="goRule" />
      </div>
    </BackPage>
  </div>
</template>

<script >
import { useRouter } from 'vue-router'
import backHome from '../assets/BackImage/backHome.jpg'
import gameTitle from '../assets/BackImage/首页大标.png'

import gameSatrt from '../assets/ButtonImage/开始游戏.png'
import gameRule from '../assets/ButtonImage/游戏规则.png'
// import BackPage from './componentsPages/BackPage.vue'

export default {
  setup() {
    const router = useRouter()
    const HomeStyle = {
      backgroundImage:
        'url(' + require('../assets/BackImage/backHome.jpg') + ')',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '100% auto'
    }

    const linkTo = () => {
      // 字符串路径
      // router.push('/about')

      // 带有路径的对象
      router.push({
        path: '/OverPage',
        query: {
          type: 'win'
        }
      })
    }
    const goRule = () => {
      // 字符串路径
      // router.push('/about')

      // 带有路径的对象
      router.push({
        path: '/TopRulePage',
        query: {
          // type: 'top'
          type: 'rule'
        }
      })
    }

    return {
      HomeStyle,
      linkTo,
      backHome,
      gameSatrt,
      gameRule,
      gameTitle,
      goRule
    }
  }
}
</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%;
    height: 100%;
  }
}

.bg-image {
  // width: 100%;
  width: 100vw;
}
.bth-div {
  width: 33vw;
  position: absolute;
  top: 80vh;
  left: 35vw;
  display: flex;
  justify-content: center;
  .bth-image {
    width: 100%;
  }
}
</style>