feiYi/src/views/HomeView.vue

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();

function goMenu() {
  router.push({
    name: 'Menu',
  });
}
</script>

<template>
  <main class="main-bg main-bg1 d-flex flex-col align-center justify-center">
    <div class="d-flex flex-col align-center" @click="goMenu">
      <img class="w-15 mt-3 mb-3" src="@/assets/images/Index/StartBanner.png"></img>
      <div class="d-flex flex-row w-70">
        <img class="w-100 logo" src="@/assets/images/Index/StartTitle.png"></img>
        <img class="ml-3" src="@/assets/images/ImgPrintWithText.png"></img>
      </div>
      <div class="size-s color-second mt-3 mb-4">Huli Cultural Heritage Protection Center</div>
      <div class="d-flex flex-col gap-base text-align-center size-s">
        <div>因手艺而经典，因守艺而传承</div>
        <div>非遗匠艺，是时代文明记忆，也是城市情感记忆</div>
        <div>触碰历史的温度，感受匠心的力量</div>
        <div>一场非遗匠艺手作之旅即将优雅启程</div>
      </div>
      <div class="d-flex flex-row align-center justify-center mt-5 mb-5">
        <button>开始探索</button>
      </div>
      <div class="mb-5"></div>
      <div class="mb-5"></div>
      <div class="mb-5"></div>
    </div>
  </main>
</template>

<style lang="scss" scoped>
.logo {
  object-fit: contain;
}
</style>