feat: 启动页界面及功能实现

src/App.vue

@@ -10,7 +10,7 @@ import { onMounted, provide } from 'vue';
 provide('scene', 'center');
 
 function setRem(html) {
-  html.style.fontSize = `${html.clientWidth / 1920}px`;
+  html.style.fontSize = `${html.clientWidth / 1280}px`;
 }
 
 onMounted(() => {
@@ -34,14 +34,12 @@ body,
   height: 100%;
 }
 
-* {
+body {
-  user-select: none;
+  background-color: #000;
 }
 
-html {
+* {
-  /*background-size: cover;*/
+  user-select: none;
-  /*background: url('@/assets/bg.png') no-repeat fixed center center;*/
-  /*overflow: hidden;*/
 }
 
 .clear:after {

src/views/Index.vue

@@ -1,8 +1,61 @@
 <template>
-  入口页
+  <div class="container">
-  <button @click="$router.push({ name: 'Train' })">进入游戏</button>
+    <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></script>
+<script setup>
+// 退出
+function handleQuit() {
+  window.postMessage('quit', '*');
+}
+</script>
 
-<style scoped></style>
+<style scoped>
+.container {
+  width: 1280rem;
+  height: 720rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  background: url(../assets/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('../assets/page1/in.png');
+  margin-bottom: 20rem;
+}
+.btn-in:hover {
+  background-image: url('../assets/page1/in-hover.png');
+}
+.btn-in:active {
+  background-image: url('../assets/page1/in-active.png');
+}
+.btn-out {
+  background-image: url('../assets/page1/out.png');
+}
+.btn-out:hover {
+  background-image: url('../assets/page1/out-hover.png');
+}
+.btn-out:active {
+  background-image: url('../assets/page1/out-active.png');
+}
+</style>