feat: categories页面部分完成

components/business/categories/block.vue

@@ -0,0 +1,52 @@
+<script lang='ts' setup>
+import tempItem from './comp/temp_item.vue'
+import BlockImg from '~/assets/images/block_icon.png'
+
+const list = [
+  {
+    title: 'Trendy & Market-Ready Designs',
+    desc:
+      'Selected products that taps into current consumer trends, ensuring businesses always offer fresh, in-demand products.',
+    img: BlockImg,
+  },
+  {
+    title: 'Unique & Engaging Aesthetics',
+    desc:
+      'Products featuring unique, engaging aesthetics that enhance shelf appeal and create memorable shopping experiences.',
+    img: BlockImg,
+  },
+  {
+    title: 'Quality & Supply Chain Reliability',
+    desc:
+      'Premium products supported by a dependable supply network, ensuring both product integrity and reliable inventory flow.',
+    img: BlockImg,
+  },
+]
+</script>
+
+<template>
+  <div class="bg-#F9FAFB py-120px">
+    <div class="w-1200-auto text-center">
+      <h2 class="text-36px fw-800 text-#333 !mb-80px">
+        EJET Spark Selects Products <span class="custom-title-bg">With</span>
+      </h2>
+      <div class="flex gap-40px">
+        <div v-for="(item, index) in list" :key="index">
+          <temp-item :item />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+.custom-title-bg {
+  position: relative;
+  display: inline-block;
+  background: url(~/assets/images/title_bg03.png);
+  background-repeat: no-repeat;
+  background-position: center 100%;
+  background-size: 100% auto;
+  padding-bottom: 8px;
+}
+</style>

components/business/categories/comp/temp1.vue

@@ -0,0 +1,31 @@
+<script lang='ts' setup>
+defineProps({
+  item: Object as any,
+})
+</script>
+
+<template>
+  <div>
+    <div class="pos-relative">
+      <nuxt-link :to="{ name: 'categories-slug', params: { slug: item?.slug } }">
+        <div class="px-30px py-10px bg-#F3F4FB shadow-item b-rd-6px">
+          <img :src="item.img" alt="" srcset="" class="w-100% h-240px  object-cover">
+        </div>
+        <h3
+          class="!mb-15px !mt-30px fw-800 text-24px text-#333 line-clamp-2"
+        >
+          {{ item.title }}
+        </h3>
+        <div class="text-16px text-#999 lh-22px line-clamp-2">
+          {{ item.subTitle }}
+        </div>
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+.shadow-item{
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
+}
+</style>

components/business/categories/comp/temp2.vue

@@ -0,0 +1,31 @@
+<script lang='ts' setup>
+defineProps({
+  item: Object as any,
+})
+</script>
+
+<template>
+  <div>
+    <div class="pos-relative">
+      <nuxt-link :to="{ name: 'categories-slug', params: { slug: item?.slug } }">
+        <div class="p-50px bg-#F3F4FB shadow-item b-rd-6px">
+          <img :src="item.img" alt="" srcset="" class="w-300 h-300px  object-cover">
+        </div>
+        <h3
+          class="!mb-15px !mt-30px fw-800 text-24px text-#333 line-clamp-2"
+        >
+          {{ item.title }}
+        </h3>
+        <div class="text-16px text-#999 lh-22px line-clamp-2">
+          {{ item.subTitle }}
+        </div>
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+.shadow-item{
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
+}
+</style>

components/business/categories/comp/temp_item.vue

@@ -0,0 +1,25 @@
+<script lang='ts' setup>
+defineProps({
+  item: Object as any,
+})
+</script>
+
+<template>
+  <div class="py-40px px-30px bg-#fff text-center b-rd-12px item">
+    <div class="w-80px flex items-center b-rd-50% bg-#f5f0ff mb-30px justify-center h-80px mx-auto">
+      <img :src="item.img" alt="" class="w-32px h-32px">
+    </div>
+    <h3 class="!mb-10px fw-800 text-24px text-#333 line-clamp-2 lh-40px">
+      {{ item.title }}
+    </h3>
+    <div class="text-16px text-#999 lh-22px line-clamp-2">
+      {{ item.desc }}
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+    .item {
+        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+    }
+</style>

components/business/categories/list.vue

@@ -0,0 +1,122 @@
+<!-- @format -->
+
+<script lang="ts" setup>
+import templateTwo from './comp/temp2.vue'
+import templateOne from './comp/temp1.vue'
+
+const list_column_one = [
+  {
+    title: 'Real-Time Trend Curation',
+    subTitle:
+      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
+    img: 'https://picsum.photos/300/300',
+    type: 'A',
+    slug: 'test',
+  },
+  {
+    title: 'Real-Time Trend Curation',
+    subTitle:
+      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
+    img: 'https://picsum.photos/300/300',
+    slug: 'test2',
+    type: 'B',
+  },
+  {
+    title: 'Real-Time Trend Curation',
+    subTitle:
+      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
+    img: 'https://picsum.photos/300/300',
+    slug: 'test3',
+    type: 'A',
+  },
+]
+const list_column_two = [
+  {
+    title: 'Real-Time Trend Curation',
+    subTitle:
+      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
+    img: 'https://picsum.photos/300/300',
+    type: 'B',
+    slug: 'test',
+  },
+  {
+    title: 'Real-Time Trend Curation',
+    subTitle:
+      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
+    img: 'https://picsum.photos/300/300',
+    slug: 'test2',
+    type: 'B',
+  },
+]
+const list_column_three = [
+  {
+    title: 'Real-Time Trend Curation',
+    subTitle:
+      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
+    img: 'https://picsum.photos/300/300',
+    type: 'A',
+    slug: 'test',
+  },
+  {
+    title: 'Real-Time Trend Curation',
+    subTitle:
+      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
+    img: 'https://picsum.photos/300/300',
+    slug: 'test2',
+    type: 'B',
+  },
+  {
+    title: 'Real-Time Trend Curation',
+    subTitle:
+      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
+    img: 'https://picsum.photos/300/300',
+    slug: 'test3',
+    type: 'A',
+  },
+]
+</script>
+
+<template>
+  <div class="bg-#fff py-120px">
+    <div class="w-1200-auto text-center">
+      <h2 class="text-36px fw-800 text-#333 !mb-20px">
+        Access Category-Driven <span class="custom-title-bg">Solutions</span>
+      </h2>
+      <div class="text-#999 text-22px mb-80px">
+        For viral-ready, trend-optimized products - Ready to download！
+      </div>
+      <div class="flex gap-40px text-left">
+        <div class="flex flex-col gap-40px flex-1">
+          <div v-for="(item, index) in list_column_one" :key="index">
+            <template-one v-if="item.type === 'A'" :item />
+            <template-two v-if="item.type === 'B'" :item />
+          </div>
+        </div>
+        <div class="flex flex-col gap-40px flex-1">
+          <div v-for="(item, index) in list_column_two" :key="index">
+            <template-one v-if="item.type === 'A'" :item />
+            <template-two v-if="item.type === 'B'" :item />
+          </div>
+        </div>
+        <div class="flex flex-col gap-40px flex-1">
+          <div v-for="(item, index) in list_column_three" :key="index">
+            <template-one v-if="item.type === 'A'" :item />
+            <template-two v-if="item.type === 'B'" :item />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.custom-title-bg {
+  position: relative;
+  display: inline-block;
+  background: url(~/assets/images/title_bg.png);
+  background-repeat: no-repeat;
+  background-position: center 100%;
+  background-size: 100% auto;
+  padding-bottom: 8px;
+}
+</style>

components/common/block/blog.vue

@@ -20,7 +20,7 @@ getVideoOrBlogsList()
 
 <template>
   <div
-    class="bg-#fff pt-160px pb-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

@@ -4,12 +4,17 @@
 import { ArrowDown } from '@element-plus/icons-vue'
 import { useCommonStore } from '@/stores/modules/common'
 
+const router = useRouter()
 const commonStore = useCommonStore()
 const { navigateTextColor } = storeToRefs(commonStore)
 
 const catalogsVisible = ref<boolean>(false)
 const resourceVisible = ref<boolean>(false)
 const aboutVisible = ref<boolean>(false)
+
+function toCategories() {
+  router.push('/categories')
+}
 </script>
 
 <template>
@@ -28,6 +33,7 @@ const aboutVisible = ref<boolean>(false)
       <span
         class="el-dropdown-link text-16px flex items-center"
         :class="[{ '!text-#9B6CFF': catalogsVisible }, navigateTextColor]"
+        @click.stop="toCategories"
       >
         Catalogs
         <el-icon

layouts/default.vue

@@ -1,6 +1,24 @@
 <!-- @format -->
 
-<script setup></script>
+<script setup>
+import { useCommonStore } from '@/stores/modules/common'
+
+const commonStore = useCommonStore()
+
+const router = useRouter()
+
+watch(
+  () => router.currentRoute.value.path,
+  (v) => {
+    if (v === '/')
+      commonStore.setNavigateBgColor('#0F0820')
+    else commonStore.setNavigateBgColor('#FFFFFF')
+  },
+  {
+    immediate: true,
+  },
+)
+</script>
 
 <template>
   <div class="common-layout">

pages/categories/index.vue

@@ -2,10 +2,29 @@
 </script>
 
 <template>
-  <div>
-    solutions
+  <div class="bg-#0F0820">
+    <div class="header w-1200-auto text-center pt-224px pb-150px">
+      <h1 class="text-58px fw-800 text-#fff ls-2">
+        Discover, Download,
+      </h1>
+      <h1 class="text-58px fw-800 text-#9B6CFF ls-2 !mt-10px">
+        Delight!
+      </h1>
+      <el-button class="mt-30px !bg-#fff !text-#9B6CFF !b-0px" round>
+        View Catalogs
+      </el-button>
+    </div>
+    <business-categories-list />
+    <business-categories-block />
+    <common-block-blog />
+    <common-block-faq />
+    <AppFooter />
   </div>
 </template>
 
 <style lang='less' scoped>
+.header{
+  background: url('https://picsum.photos/600/600') no-repeat center center;
+  background-position-x: right;
+}
 </style>

pages/index.vue

@@ -22,18 +22,18 @@ onMounted(() => {
     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)
-      }
+      // 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. 创建观察器实例

stores/modules/common.ts

@@ -24,6 +24,7 @@ export const useCommonStore = defineStore(
         navigateBgColor.value = `bg-${color}`
       }
       else if (color === '#FFFFFF') {
+        console.log('newColor-----color---2', color)
         navigateTextColor.value = 'text-#0F0820'
         navigateBgColor.value = `bg-${color}`
       }