start-page/src/views/Index.vue

<template>
  <div class="container">
    <div class="btn-container">
      <div class="btn btn-in" @click="$router.push({ name: 'Train' })"></div>
      <div class="btn btn-out" @click="handleQuit"></div>
    </div>
  </div>
</template>

<script setup>
// 退出
function handleQuit() {
  window.postMessage('quit', '*');
}
</script>

<style scoped>
.container {
  width: 1280rem;
  height: 720rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: url(/page1/bg.jpg) no-repeat center center;
  background-size: 1280rem 720rem;
}
.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>