feat: 首页UI完成

components/AppHeader.vue

@@ -1,28 +1,29 @@
 <!-- @format -->
 
 <script lang="ts" setup>
-import { useUserStore } from "@/stores/modules/user"
-import { useCommonStore } from "@/stores/modules/common"
+import { useUserStore } from '@/stores/modules/user'
+import { useCommonStore } from '@/stores/modules/common'
+
+// const userStore = useUserStore()
+// const { isLogin } = storeToRefs(userStore)
 
 const commonStore = useCommonStore()
-const { customNavigateColor } = storeToRefs(commonStore)
-const userStore = useUserStore()
-const { isLogin } = storeToRefs(userStore)
+const { navigateBgColor, navigateTextColor } = storeToRefs(commonStore)
 
 // 使用 useI18n 钩子
-const { t } = useI18n()
+// const { t } = useI18n()
 </script>
 
 <template>
   <div
-    class="pos-fixed left-50% translate-x--50% w-full py-20px custom-bg z-101"
+    class="pos-fixed left-50% translate-x--50% w-full py-20px custom-bg z-101" :class="[navigateBgColor, navigateTextColor]"
   >
     <div class="flex justify-between items-center h-32px lh-32px w-1200-auto">
       <div class="flex items-center">
         <NuxtLink to="/">
           <svgo-spark-logo
             class="!w-132px !h-32px"
-            :class="customNavigateColor"
+            :class="navigateTextColor"
           />
         </NuxtLink>
       </div>
@@ -41,7 +42,6 @@ const { t } = useI18n()
 
 <style lang="less" scoped>
 .custom-bg {
-  background: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   transition: all 0.3s;

components/business/home/banner.vue

@@ -49,7 +49,10 @@ function scrollToCatalogs() {
 </script>
 
 <template>
-  <div class="bg-#0F0820">
+  <div
+    class="bg-#0F0820" data-section
+    data-section-color="#0F0820"
+  >
     <div class="w-1200-auto pos-relative h-800px">
       <div class="text-center pos-absolute top-200px left-50% translate-x--50%">
         <div class="pos-relative">

components/business/home/solutions.vue

@@ -108,7 +108,10 @@ const solutionList = computed(() => {
 </script>
 
 <template>
-  <div class="bg-#F3F4FB pt-250px pb-120px">
+  <div
+    class="bg-#F3F4FB pt-250px pb-120px" data-section
+    data-section-color="#F3F4FB"
+  >
     <div class="w-1200-auto text-center">
       <h2 class="text-36px fw-800 text-#333 !mb-20px">
         Creative, Trend-Driven <span class="custom-title-bg">Solutions</span>

components/common/block/blog.vue

@@ -19,7 +19,10 @@ getVideoOrBlogsList()
 </script>
 
 <template>
-  <div class="bg-#fff pt-160px pb-120px">
+  <div
+    class="bg-#fff pt-160px pb-120px" data-section
+    data-section-color="#ffffff"
+  >
     <div class="w-1200-auto text-center">
       <h2 class="!text-36px !fw-800 text-#333 !mb-44px">
         EJET Spark <span class="custom-title-bg">Blog</span>

components/common/block/catalogs.vue

@@ -74,7 +74,10 @@ function setTranslate(swiper: any, _translate: any) {
 </script>
 
 <template>
-  <div id="catalogs" class="bg-#0F0820 pt-100px pb-160px">
+  <div
+    id="catalogs" class="bg-#0F0820 pt-100px pb-160px" data-section
+    data-section-color="#0F0820"
+  >
     <div class="w-1200-auto text-left pos-relative">
       <h2 class="text-36px fw-800 text-#fff !mb-40px">
         Download EJET Spark  <span class="custom-title-bg">Catalogs</span>

components/common/block/exhibited.vue

@@ -29,7 +29,10 @@ const list = [
 </script>
 
 <template>
-  <div class="bg-#0F0820 pt-110px pb-120px">
+  <div
+    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">
       <div v-for="item, index in list" :key="index">
         <img

components/common/block/faq.vue

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

components/common/block/partner.vue

@@ -8,7 +8,10 @@ const colorMode = useColorMode()
 </script>
 
 <template>
-  <div class="bg-#fff py-120px">
+  <div
+    class="bg-#fff py-120px" data-section
+    data-section-color="#ffffff"
+  >
     <div class="w-1200-auto text-center">
       <h2 class="text-36px fw-800 text-#333 !mb-86px">
         Our Bussiness <span class="custom-title-bg">Partners</span>

components/common/navigation/index.vue

@@ -1,16 +1,15 @@
 <!-- @format -->
 
 <script lang="ts" setup>
-import { ArrowDown } from "@element-plus/icons-vue"
-import { useCommonStore } from "@/stores/modules/common"
+import { ArrowDown } from '@element-plus/icons-vue'
+import { useCommonStore } from '@/stores/modules/common'
 
 const commonStore = useCommonStore()
-const { customNavigateColor } = storeToRefs(commonStore)
+const { navigateTextColor } = storeToRefs(commonStore)
 
 const catalogsVisible = ref<boolean>(false)
 const resourceVisible = ref<boolean>(false)
 const aboutVisible = ref<boolean>(false)
-// const customNavigateColor = ref<string>("text-#fff")
 </script>
 
 <template>
@@ -18,7 +17,7 @@ const aboutVisible = ref<boolean>(false)
     <NuxtLink
       to="/solutions"
       class="hover:text-#9B6CFF cursor-pointer"
-      :class="customNavigateColor"
+      :class="navigateTextColor"
     >
       Solutions
     </NuxtLink>
@@ -28,7 +27,7 @@ const aboutVisible = ref<boolean>(false)
     >
       <span
         class="el-dropdown-link text-16px flex items-center"
-        :class="[{ '!text-#9B6CFF': catalogsVisible }, customNavigateColor]"
+        :class="[{ '!text-#9B6CFF': catalogsVisible }, navigateTextColor]"
       >
         Catalogs
         <el-icon
@@ -45,7 +44,7 @@ const aboutVisible = ref<boolean>(false)
     >
       <span
         class="el-dropdown-link text-16px flex items-center"
-        :class="[{ '!text-#9B6CFF': resourceVisible }, customNavigateColor]"
+        :class="[{ '!text-#9B6CFF': resourceVisible }, navigateTextColor]"
       >
         Resources
         <el-icon
@@ -58,10 +57,14 @@ const aboutVisible = ref<boolean>(false)
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item>
-            <NuxtLink to="/blog"> Blog </NuxtLink>
+            <NuxtLink to="/blog">
+              Blog
+            </NuxtLink>
           </el-dropdown-item>
           <el-dropdown-item>
-            <NuxtLink to="/faq"> FAQ </NuxtLink>
+            <NuxtLink to="/faq">
+              FAQ
+            </NuxtLink>
           </el-dropdown-item>
         </el-dropdown-menu>
       </template>
@@ -72,7 +75,7 @@ const aboutVisible = ref<boolean>(false)
     >
       <span
         class="el-dropdown-link text-16px flex items-center"
-        :class="[{ '!text-#9B6CFF': aboutVisible }, customNavigateColor]"
+        :class="[{ '!text-#9B6CFF': aboutVisible }, navigateTextColor]"
       >
         About
         <el-icon
@@ -85,10 +88,14 @@ const aboutVisible = ref<boolean>(false)
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item>
-            <NuxtLink to="/about-us"> About Us </NuxtLink>
+            <NuxtLink to="/about-us">
+              About Us
+            </NuxtLink>
           </el-dropdown-item>
           <el-dropdown-item>
-            <NuxtLink to="/contact"> Contact Us </NuxtLink>
+            <NuxtLink to="/contact">
+              Contact Us
+            </NuxtLink>
           </el-dropdown-item>
         </el-dropdown-menu>
       </template>

pages/index.vue

@@ -1,6 +1,58 @@
 <!-- @format -->
 
 <script setup lang="ts">
+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)
+      }
+    })
+  }
+  // 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>
 
 <template>
@@ -16,6 +68,4 @@
   </div>
 </template>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>

stores/modules/common.ts

@@ -2,30 +2,37 @@
 
 import { defineStore } from 'pinia'
 import { useUserStore } from './user'
-import { getCartBrandQuantityApi } from '~/api/model/cart'
-import { getNoticeRemindApi } from '~/api/model/common'
 
 export const useCommonStore = defineStore(
   'commonStore',
   () => {
-    const customNavigateColor = ref<string>('text-#fff')
+    const navigateTextColor = ref('text-#fff')
+    const navigateBgColor = ref('bg-#0F0820')
     // const userStore = useUserStore()
 
-    // const getNoticeRemind = async () => {
-    //   try {
-    //     if (!userStore.isLogin) return
-    //     const res: any = await getNoticeRemindApi({
-    //       pageNo: 1,
-    //       pageSize: 10,
-    //     })
-    //     noticeRemind.value = res.records.length > 0
-    //   } catch (error) {
-    //     console.log(error)
-    //   }
-    // }
+    const setNavigateBgColor = (color: string) => {
+      if (!color)
+        return
+      color = color.toUpperCase()
+      console.log('newColor-----color', color)
+      if (color === '#0F0820') {
+        navigateTextColor.value = 'text-#fff'
+        navigateBgColor.value = `bg-${color}`
+      }
+      else if (color === '#F3F4FB') {
+        navigateTextColor.value = 'text-#0F0820'
+        navigateBgColor.value = `bg-${color}`
+      }
+      else if (color === '#FFFFFF') {
+        navigateTextColor.value = 'text-#0F0820'
+        navigateBgColor.value = `bg-${color}`
+      }
+    }
 
     return {
-      customNavigateColor,
+      navigateTextColor,
+      navigateBgColor,
+      setNavigateBgColor,
     }
   },
   {