subsea-side-website/src/components/HomeScreen.vue

<template>
  <div class="home_screen_container">
    <Header />
    <h1 class="main_title">
      做铁路相关的设备<span class="sign">研发和制造</span>
    </h1>
    <div class="to_bottom" @click="toNextPage()">
      <img :src="Arrow" alt="arrow" class="arrow" />
    </div>
  </div>
</template>

<script setup>
import Header from '@/components/Header'
import Arrow from '@/static/img/jiantou.png'
const toNextPage = () => {
  document.getElementById('about_us').scrollIntoView({
    behavior: 'smooth',
  })
}
</script>

<style lang="scss" scoped>
.home_screen_container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url(../static/img/1.png) no-repeat;
  background-size: 100% 100%;
  .main_title {
    font-size: 76px;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    color: #f1f1f1;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    .sign {
      color: RGBA(249, 89, 38, 1);
    }
  }
  .to_bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    cursor: pointer;
    border: 2px solid #ffffff;
    border-radius: 50%;
    position: absolute;
    bottom: 53px;
    left: 50%;
    transform: translateX(-50%);
    .arrow {
      width: 17px;
      height: 10px;
    }
  }
}
</style>