start-page/src/views/Index.vue

<template>
  <div class="container">
    <iFrame :src="`${base}start-page.html`" class="bg-iframe" border="none"></iFrame>
    <div class="btn-container">
      <div class="btn btn-in" @click="$router.push({ name: 'Train' })" @mouseover="hover" @mouseout="hoverEnd"></div>
      <div class="btn btn-out" @click="handleQuit" @mouseover="hover" @mouseout="hoverEnd"></div>
    </div>
  </div>
</template>

<script setup>
const base = import.meta.env.BASE_URL;
function hover() {
  const audioActive = document.getElementById('audio-active');
  audioActive.play();
}

function hoverEnd() {
  const audioActive = document.getElementById('audio-active');
  audioActive.pause();
}

// 退出
function handleQuit() {
  const audioActive = document.getElementById('audio-active');
  audioActive.play();
  window.postMessage('quit', '*');
}
</script>

<style scoped>
.bg-iframe {
  width: 1280rem;
  height: 720rem;
}
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  overflow: hidden;
}
.btn-container {
  position: absolute;
  left: 50%;
  width: 348rem;
  top: 420rem;
  transform: translate3d(-50%, 0, 0);
}
.btn {
  width: 348rem;
  height: 113rem;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.btn-in {
  background-image: url('/page1/in.png');
  margin-bottom: 20rem;
}
.btn-in:hover {
  background-image: url('/page1/in-hover.png');
}
.btn-in:active {
  background-image: url('/page1/in-active.png');
}
.btn-out {
  background-image: url('/page1/out.png');
}
.btn-out:hover {
  background-image: url('/page1/out-hover.png');
}
.btn-out:active {
  background-image: url('/page1/out-active.png');
}
</style>