fashion-ssr-vue3/pages/index.vue

<!-- @format -->

<script setup lang="ts">
import { debounce } from 'lodash-es'
import { useCommonStore } from '@/stores/modules/common'

const commonStore = useCommonStore()
onMounted(() => {
  const sections = document.querySelectorAll('.data-section')
  const appScroller = document.getElementById('app-scroller')
  if (!appScroller)
    return
  const handleScroll = debounce(() => {
    const scrollPosition = appScroller.scrollTop + 72
    sections.forEach((section) => {
      const sectionTop = section.offsetTop
      const sectionHeight = section.offsetHeight

      if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
        const newColor = section.dataset.sectionColor
        commonStore.setNavigateBgColor(newColor)
      }
    })
  }, 50)
  appScroller.addEventListener('scroll', handleScroll)

  onUnmounted(() => {
    appScroller.removeEventListener('scroll', handleScroll)
  })
})
</script>

<template>
  <div>
    <business-home-banner />
    <business-home-solutions />
    <common-block-catalogs />
    <common-block-partner />
    <common-block-exhibited />
    <common-block-blog />
    <common-block-faq />
    <AppFooter />
  </div>
</template>

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