feat: 完成首页头部的动态背景色

components/AppHeader.vue

@@ -16,7 +16,10 @@ const { navigateBgColor, navigateTextColor } = storeToRefs(commonStore)
 
 <template>
   <div
-    class="pos-fixed left-50% translate-x--50% w-full py-20px custom-bg z-101" :class="[navigateBgColor, navigateTextColor]"
+    class="pos-fixed left-50% translate-x--50% w-full py-20px custom-bg z-101" :style="{
+      background: navigateBgColor,
+      color: navigateTextColor,
+    }"
   >
     <div class="flex justify-between items-center h-32px lh-32px w-1200-auto">
       <div class="flex items-center">
@@ -44,6 +47,6 @@ const { navigateBgColor, navigateTextColor } = storeToRefs(commonStore)
 .custom-bg {
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
-  transition: all 0.3s;
+  transition: background-color 0.3s ease;
 }
 </style>

components/business/home/banner.vue

@@ -50,7 +50,7 @@ function scrollToCatalogs() {
 
 <template>
   <div
-    class="bg-#0F0820" data-section
+    class="bg-#0F0820 data-section"
     data-section-color="#0F0820"
   >
     <div class="w-1200-auto pos-relative h-800px">

components/business/home/solutions.vue

@@ -109,7 +109,7 @@ const solutionList = computed(() => {
 
 <template>
   <div
-    class="bg-#F3F4FB pt-250px pb-120px" data-section
+    class="bg-#F3F4FB pt-250px pb-120px data-section"
     data-section-color="#F3F4FB"
   >
     <div class="w-1200-auto text-center">

components/common/block/blog.vue

@@ -20,7 +20,7 @@ getVideoOrBlogsList()
 
 <template>
   <div
-    class="bg-#fff py-120px" data-section
+    class="bg-#fff py-120px data-section"
     data-section-color="#ffffff"
   >
     <div class="w-1200-auto text-center">

components/common/block/catalogs.vue

@@ -75,7 +75,7 @@ function setTranslate(swiper: any, _translate: any) {
 
 <template>
   <div
-    id="catalogs" class="bg-#0F0820 pt-100px pb-160px" data-section
+    id="catalogs" class="bg-#0F0820 pt-100px pb-160px  data-section"
     data-section-color="#0F0820"
   >
     <div class="w-1200-auto text-left pos-relative">

components/common/block/exhibited.vue

@@ -30,7 +30,7 @@ const list = [
 
 <template>
   <div
-    class="bg-#0F0820 pt-110px pb-120px" data-section
+    class="bg-#0F0820 pt-110px pb-120px  data-section"
     data-section-color="#0F0820"
   >
     <div class="w-1200-auto text-center flex gap-190px justify-between">

components/common/block/faq.vue

@@ -6,7 +6,7 @@ const activeName = ref()
 
 <template>
   <div
-    class="bg-#F3F4FB py-120px" data-section
+    class="bg-#F3F4FB py-120px data-section"
     data-section-color="#F3F4FB"
   >
     <div class="w-1200-auto flex justify-between">

components/common/block/partner.vue

@@ -9,7 +9,7 @@ const colorMode = useColorMode()
 
 <template>
   <div
-    class="bg-#fff py-120px" data-section
+    class="bg-#fff py-120px data-section"
     data-section-color="#ffffff"
   >
     <div class="w-1200-auto text-center">

components/common/navigation/index.vue

@@ -22,7 +22,9 @@ function toCategories() {
     <NuxtLink
       to="/solutions"
       class="hover:text-#9B6CFF cursor-pointer"
-      :class="navigateTextColor"
+      :style="{
+        color: navigateTextColor,
+      }"
     >
       Solutions
     </NuxtLink>
@@ -32,7 +34,10 @@ function toCategories() {
     >
       <span
         class="el-dropdown-link text-16px flex items-center"
-        :class="[{ '!text-#9B6CFF': catalogsVisible }, navigateTextColor]"
+        :class="[{ '!text-#9B6CFF': catalogsVisible }]"
+        :style="{
+          color: navigateTextColor,
+        }"
         @click.stop="toCategories"
       >
         Catalogs
@@ -50,7 +55,10 @@ function toCategories() {
     >
       <span
         class="el-dropdown-link text-16px flex items-center"
-        :class="[{ '!text-#9B6CFF': resourceVisible }, navigateTextColor]"
+        :class="[{ '!text-#9B6CFF': resourceVisible }]"
+        :style="{
+          color: navigateTextColor,
+        }"
       >
         Resources
         <el-icon
@@ -81,7 +89,10 @@ function toCategories() {
     >
       <span
         class="el-dropdown-link text-16px flex items-center"
-        :class="[{ '!text-#9B6CFF': aboutVisible }, navigateTextColor]"
+        :class="[{ '!text-#9B6CFF': aboutVisible }]"
+        :style="{
+          color: navigateTextColor,
+        }"
       >
         About
         <el-icon

pages/index.vue

@@ -6,51 +6,21 @@ import { useCommonStore } from '@/stores/modules/common'
 const commonStore = useCommonStore()
 
 onMounted(() => {
-  let lastScrollY = window.scrollY
-
-  const sections = document.querySelectorAll('[data-section]')
-  const observerOptions = {
-    root: null, // 相对于视口观察
-    threshold: [0.1, 0.9], // 区域可见时触发
-  }
-  const intersectionCallback = (entries: any) => {
-    const currentScrollY = window.scrollY
-    const isScrollingDown = currentScrollY > lastScrollY
-    console.log('intersectionRatio-----111', currentScrollY, lastScrollY, isScrollingDown)
-    lastScrollY = currentScrollY
-
-    entries.forEach((entry: any) => {
-      const intersectionRatio = entry.intersectionRatio
-
-      // if (isScrollingDown && intersectionRatio >= 0.1) {
-      //   console.log('intersectionRatio-----down')
-      //   // 处理向下滚动时的逻辑
-      //   const newColor = entry.target.dataset.sectionColor
-      //   commonStore.setNavigateBgColor(newColor)
-      // }
-      // if (!isScrollingDown && intersectionRatio >= 0.1) {
-      //   console.log('intersectionRatio-----up', entry.target)
-      //   // 处理向上滚动时的逻辑
-      //   const newColor = entry.target.dataset.sectionColor
-      //   commonStore.setNavigateBgColor(newColor)
-      // }
+  const sections = document.querySelectorAll('.data-section')
+  const appScroller = document.getElementById('app-scroller')
+  if (!appScroller)
+    return
+  appScroller.addEventListener('scroll', () => {
+    const scrollPosition = appScroller.scrollTop
+    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)
+      }
     })
-  }
-  // 4. 创建观察器实例
-  const observer = new IntersectionObserver(intersectionCallback, observerOptions)
-  // 5. 开始观察所有区块
-  sections.forEach(section => observer.observe(section))
-
-  // 设置首屏默认颜色
-  // if (sections.length > 0) {
-  //   const cl = sections[0].dataset.sectionColor
-  //   console.log('sections', sections, cl)
-  //   commonStore.setNavigateBgColor(cl)
-  // }
-
-  // 组件卸载时清理
-  onUnmounted(() => {
-    observer.disconnect()
   })
 })
 </script>

pages/test.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const navRef = ref<HTMLElement | null>(null)
+const currentSection = ref('')
+
+function updateNavBackground(section: Element) {
+  const backgroundColor = window.getComputedStyle(section).backgroundColor
+  if (navRef.value)
+    navRef.value.style.backgroundColor = backgroundColor
+}
+
+onMounted(() => {
+  // Intersection Observer for when sections come into view
+  const observer = new IntersectionObserver(
+    (entries) => {
+      console.log('scrollPosition---------1')
+
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          currentSection.value = entry.target.id
+          updateNavBackground(entry.target)
+        }
+      })
+    },
+    {
+      threshold: 0.5,
+      rootMargin: '-80px 0px 0px 0px', // Adjust based on your nav height
+    },
+  )
+
+  // Observe all sections
+  document.querySelectorAll('.section').forEach((section) => {
+    observer.observe(section)
+  })
+
+  // Scroll event handler for continuous updates
+  // 获取id为app-scroller的元素
+  const appScroller = document.getElementById('app-scroller')
+  appScroller.addEventListener('scroll', () => {
+    console.log('scrollPosition---------2', appScroller?.scrollTop)
+    const sections = document.querySelectorAll('.section')
+    const scrollPosition = window.scrollY + 80 // Add nav height offset
+
+    sections.forEach((section) => {
+      const sectionTop = section.offsetTop
+      const sectionHeight = section.offsetHeight
+
+      if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight)
+        updateNavBackground(section)
+    })
+  })
+})
+</script>
+
+<template>
+  <div class="app">
+    <nav ref="navRef" class="navigation">
+      <div class="nav-content">
+        <h1>Logo</h1>
+        <div class="nav-links">
+          <a href="#section1">Section 1</a>
+          <a href="#section2">Section 2</a>
+          <a href="#section3">Section 3</a>
+          <a href="#section4">Section 4</a>
+        </div>
+      </div>
+    </nav>
+
+    <main>
+      <section id="section1" class="section" style="background-color: #f8f9fa;">
+        <h2>Section 1</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </section>
+
+      <section id="section2" class="section" style="background-color: #e9ecef;">
+        <h2>Section 2</h2>
+        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      </section>
+
+      <section id="section3" class="section" style="background-color: #dee2e6;">
+        <h2>Section 3</h2>
+        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+      </section>
+
+      <section id="section4" class="section" style="background-color: #ced4da;">
+        <h2>Section 4</h2>
+        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </section>
+    </main>
+  </div>
+</template>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+}
+
+.app {
+  min-height: 100vh;
+  width: 100%;
+}
+
+.navigation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  transition: background-color 0.3s ease;
+  z-index: 1000;
+}
+
+.nav-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nav-links {
+  display: flex;
+  gap: 20px;
+}
+
+.nav-links a {
+  color: #333;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+  color: #000;
+}
+
+main {
+  padding-top: 80px;
+  width: 100%;
+}
+
+.section {
+  min-height: 100vh;
+  width: 100%;
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+h1 {
+  margin: 0;
+  font-size: 24px;
+}
+
+h2 {
+  font-size: 32px;
+  margin-bottom: 20px;
+}
+
+p {
+  max-width: 600px;
+  line-height: 1.6;
+  margin: 0;
+}
+</style>

stores/modules/common.ts

@@ -6,8 +6,8 @@ import { useUserStore } from './user'
 export const useCommonStore = defineStore(
   'commonStore',
   () => {
-    const navigateTextColor = ref('text-#fff')
-    const navigateBgColor = ref('bg-#0F0820')
+    const navigateTextColor = ref('#ffffff')
+    const navigateBgColor = ref('#0F0820')
     // const userStore = useUserStore()
 
     const setNavigateBgColor = (color: string) => {
@@ -16,17 +16,17 @@ export const useCommonStore = defineStore(
       color = color.toUpperCase()
       console.log('newColor-----color', color)
       if (color === '#0F0820') {
-        navigateTextColor.value = 'text-#fff'
-        navigateBgColor.value = `bg-${color}`
+        navigateTextColor.value = '#ffffff'
+        navigateBgColor.value = `${color}`
       }
       else if (color === '#F3F4FB') {
-        navigateTextColor.value = 'text-#0F0820'
-        navigateBgColor.value = `bg-${color}`
+        navigateTextColor.value = '#0F0820'
+        navigateBgColor.value = `${color}`
       }
       else if (color === '#FFFFFF') {
         console.log('newColor-----color---2', color)
-        navigateTextColor.value = 'text-#0F0820'
-        navigateBgColor.value = `bg-${color}`
+        navigateTextColor.value = '#0F0820'
+        navigateBgColor.value = `${color}`
       }
     }