ZDKKC/zdkkc2/src/views/Home/homePage.vue

<script setup lang='ts'>
const router = useRouter();
</script>

<template>
  <div class='home'>
    <!-- <img class="logo-icon" src="@/assets/images/logo.png" alt=""> -->
    <div class="logo-icon">
      <div class="title">中山大学科考船</div>
      <div class="disc">虚拟漫游</div>
    </div>
    <div class="logo-welcome" @click="() => { router.push('/detail') }">开始探索</div>
  </div>
</template>

<style lang='less' scoped>
.home {
  width: 100vw;
  height: 100vh;
  background: url(@/assets/images/bg.png);
  background-size: 100% 100%;

  .logo-icon {
    width: 23%;
    // height: 12vh;
    position: absolute;
    right: 16%;
    top: 10%;
    background: url(/src/assets/images/logoBg.png);
    background-size: 100% 100%;
    padding: 20px 40px;
    color: #1286AB;
    font-family: 'PangMenZhengDao-Regular';
    box-sizing: border-box;
    text-shadow: 0px 4px 8px #FFFFFF, 0px 4px 3px #FFFFFF;
    letter-spacing: 5px;

    .title {
      font-size: 4em;
      white-space: nowrap;

      @media screen and (max-width: 2300px) {
        font-size: 3.5em;
      }

      @media screen and (max-width: 2000px) {
        font-size: 2.8em;
      }
    }

    .disc {
      font-size: 2.5em;
    }
  }

  .logo-boat {
    width: 85%;
    height: 90%;
    position: absolute;
    right: 8%;
    top: 4%;
  }

  .logo-welcome {
    width: 40vw;
    height: 15vh;
    position: absolute;
    left: 50%;
    bottom: 0vh;
    transform: translateX(-50%);
    cursor: pointer;
    background: url(@/assets/images/begin-bg.png);
    background-size: 100% 100%;
    color: #FFFFFF;
    letter-spacing: 3px;
    text-shadow: 0px 4px 10px #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    padding-bottom: 15px;
    cursor: pointer;
    opacity: 0.7;
  }
}
</style>