subsea-side-website/src/pages/index.vue

<template>
  <div class="main_container">
    <Header :noFirst="isDetail" />
    <HomeSceen
      :titleCommon="mainInfo.titleCommon"
      :titleColor="mainInfo.titleColor"
    />
    <AboutUs :aboutInfo="mainInfo.aboutUs" :fourCard="mainInfo.fourCard" />
    <Product :headInfo="mainInfo.product" />
    <Contact />
    <Bottom />
  </div>
</template>

<script setup>
import HomeSceen from '@/components/HomeScreen'
import AboutUs from '@/components/AboutUs'
import Product from '@/components/Product'
import Header from '@/components/Header'
import Contact from '@/components/Contact'
import Bottom from '@/components/Bottom'
import { mainInfo } from '@/mock'
import { onMounted, ref } from 'vue'
const isDetail = ref(false)
onMounted(() => {
  window.addEventListener('scroll', () => {
    const scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop
    const height = window.innerHeight

    if (scrollTop < height) {
      isDetail.value = false
    } else {
      isDetail.value = true
    }
  })
})
</script>

<style scoped lang="scss"></style>