feat: 首页数据对接完成

api/model/blogs.ts

@@ -1,6 +1,6 @@
 import { useMyRequest } from '~/composables/useFetchRequest'
 
-enum Api {
+export enum Api {
   VideoOrBlogsList = '/client/content/list',
   VideoOrBlogsDetail = '/client/content/detail',
   BlogCategoryList = '/client/content/category/content',

api/model/url.ts

@@ -0,0 +1,5 @@
+export enum Api {
+  CategoryList = '/client-s003/category/catalogue',
+  CatalogueList = '/client-s003/s003ProductCatalogue/list',
+  BlogsList = '/client-s003/s003OperatorContent/list',
+}

components/business/home/banner.vue

@@ -5,6 +5,7 @@ import { onMounted, ref } from 'vue'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Autoplay, Navigation, Pagination } from 'swiper/modules'
 import { ConstKeys } from '~/enums/const-enums'
+import { Api } from '@/api/model/url'
 import { useUserStore } from '@/stores/modules/user'
 import 'swiper/css'
 import 'swiper/css/navigation'
@@ -16,11 +17,12 @@ const modules = [Navigation, Pagination, Autoplay]
 const categoryList = ref<any>([])
 const swiperVertical = ref<any>(null)
 
+const requestUrl = `${ConstKeys.DOMAINDEV}${Api.CategoryList}`
 const { data, pending, error, refresh } = await useAsyncData(
-  'brand-detail',
-  () => $fetch(`${ConstKeys.DOMAINPRO}/client/brand/list/default`, { params: { pageNo: 1, pageSize: 8 } }),
+  'category-catalogue',
+  () => $fetch(`${requestUrl}`, { params: { all: true } }),
 )
-categoryList.value = data.value?.result.records
+categoryList.value = data.value?.result || []
 
 function onVerticalSwiper(swiper: any) {
   swiperVertical.value = swiper

components/business/home/solutions.vue

@@ -1,10 +1,21 @@
 <!-- @format -->
 
 <script lang="ts" setup>
-import solutionIcon01 from '~/assets/images/solutions_icon01.png'
-import solutionIcon02 from '~/assets/images/solutions_icon02.png'
-import solutionIcon03 from '~/assets/images/solutions_icon03.png'
-import solutionIcon04 from '~/assets/images/solutions_icon04.png'
+import solutionEcommerce from '~/assets/images/solutions_ecommerce.png'
+import solutionBrands from '~/assets/images/solutions_brand.png'
+import solutionRetailers from '~/assets/images/solutions_retailers.png'
+import solutionEcommerce01 from '~/assets/images/solutions_ecommerce01.png'
+import solutionEcommerce02 from '~/assets/images/solutions_ecommerce02.png'
+import solutionEcommerce03 from '~/assets/images/solutions_ecommerce03.png'
+import solutionEcommerce04 from '~/assets/images/solutions_ecommerce04.png'
+import solutionBrand01 from '~/assets/images/solutions_brand01.png'
+import solutionBrand02 from '~/assets/images/solutions_brand02.png'
+import solutionBrand03 from '~/assets/images/solutions_brand03.png'
+import solutionBrand04 from '~/assets/images/solutions_brand04.png'
+import solutionRetailers01 from '~/assets/images/solutions_retailers01.png'
+import solutionRetailers02 from '~/assets/images/solutions_retailers02.png'
+import solutionRetailers03 from '~/assets/images/solutions_retailers03.png'
+import solutionRetailers04 from '~/assets/images/solutions_retailers04.png'
 
 const solution = ref('ecommerce')
 const list = ref([
@@ -12,61 +23,64 @@ const list = ref([
     key: 'ecommerce',
     title: 'Ecommerce',
     description: 'Scale Smarter with Viral-Ready Products for Online Growth',
+    masterImg: solutionEcommerce,
     list: [
       {
         title: 'Real-Time Trend Curation',
-        img: solutionIcon01,
+        img: solutionEcommerce01,
         subTitle:
-      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
+          'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
       },
       {
-        img: solutionIcon02,
-        title: 'Real-Time Trend Curation',
+        img: solutionEcommerce02,
+        title: 'Low MOQ Limits',
         subTitle:
-      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
+          'With zero MOQ, you can test products risk-free and scale only what sells. Perfect for agile sellers and fast-moving trends!',
       },
       {
-        img: solutionIcon03,
-        title: 'Real-Time Trend Curation',
+        img: solutionEcommerce03,
+        title: 'Flexible Fulfillment Options',
         subTitle:
-      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
+          'Whether you need dropshipping, bulk shipping, or FBA Prep, we adapt to your business with reliable logistics solutions.',
       },
       {
-        img: solutionIcon04,
-        title: 'Real-Time Trend Curation',
+        img: solutionEcommerce04,
+        title: 'Winning Product Portfolios',
         subTitle:
-      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
+          'Our pre-built product bundles and curated collections combine complementary bestsellers to boost average order value.',
       },
     ],
   },
   {
     key: 'brands',
     title: 'Brands & Distributors',
-    description: 'Power Your Product Line with Trend Intelligence & Agile Supply',
+    description:
+      'Power Your Product Line with Trend Intelligence & Agile Supply',
+    masterImg: solutionBrands,
     list: [
       {
         title: 'OEM/ODM Trend Support',
-        img: solutionIcon01,
+        img: solutionBrand01,
         subTitle:
-      'We provide trend-based design, packaging, and product development to help brands create unique, market-driven products.',
+          'We provide trend-based design, packaging, and product development to help brands create unique, market-driven products.',
       },
       {
-        img: solutionIcon02,
+        img: solutionBrand02,
         title: 'Co-Branded Development',
         subTitle:
-      'Quick-turn co-branded collections to help brands launch exclusive, limited-edition products and increase market impact.',
+          'Quick-turn co-branded collections to help brands launch exclusive, limited-edition products and increase market impact.',
       },
       {
-        img: solutionIcon03,
+        img: solutionBrand03,
         title: 'Flexible Logistic Solution',
         subTitle:
-      'Whether it’s bulk shipments, mixed containers, our flexible logistics solutions adapt to your business model and market goals.',
+          'Whether it’s bulk shipments, mixed containers, our flexible logistics solutions adapt to your business model and market goals.',
       },
       {
-        img: solutionIcon04,
+        img: solutionBrand04,
         title: 'Exclusive Channel Protection',
         subTitle:
-      'We protect your brand with exclusive regional rights, limited distribution agreements, and secure your market position.',
+          'We protect your brand with exclusive regional rights, limited distribution agreements, and secure your market position.',
       },
     ],
   },
@@ -74,30 +88,31 @@ const list = ref([
     key: 'retailers',
     title: 'Retailers & Chain Stores',
     description: 'Upgrade Your Shelves with Trendy, High-Margin Products',
+    masterImg: solutionRetailers,
     list: [
       {
         title: 'Ready-to-Display Portfolios',
-        img: solutionIcon01,
+        img: solutionRetailers01,
         subTitle:
-      'Curated product bundles that align with current trends, ready for effortless shelf display and enhanced retail appeal.',
+          'Curated product bundles that align with current trends, ready for effortless shelf display and enhanced retail appeal.',
       },
       {
-        img: solutionIcon02,
+        img: solutionRetailers02,
         title: 'Trend-Aligned Launch Plan',
         subTitle:
-      'Tailored product launch plans based on market cycles to create a differentiated product portfolio that engages customers.',
+          'Tailored product launch plans based on market cycles to create a differentiated product portfolio that engages customers.',
       },
       {
-        img: solutionIcon03,
+        img: solutionRetailers03,
         title: 'Store Display Solution',
         subTitle:
-      'Strategic display guides that show what to place where — helping your team position products by zone and boost visual appeal.',
+          'Strategic display guides that show what to place where — helping your team position products by zone and boost visual appeal.',
       },
       {
-        img: solutionIcon04,
+        img: solutionRetailers04,
         title: 'Go-to Market Support',
         subTitle:
-      'Customizable marketing assets to support both online and offline promotions — helping you boost visibility and drive sales.',
+          'Customizable marketing assets to support both online and offline promotions — helping you boost visibility and drive sales.',
       },
     ],
   },
@@ -137,7 +152,7 @@ const solutionList = computed(() => {
       <div class="flex gap-120px text-left">
         <div class="b-rd-10px w-360px overflow-hidden">
           <img
-            src="~/assets/images/solutions_img01.png"
+            :src="list.find((item) => item.key === solution)?.masterImg"
             class="w-100% h-258px"
             alt=""
           >
@@ -145,10 +160,10 @@ const solutionList = computed(() => {
             class="py-20px px-30px b-rd-tl-10px b-rd-tr-10px mt--60px bg-#fff pos-relative z-100"
           >
             <h3 class="text-24px fw-bold text-#333">
-              {{ list.find(item => item.key === solution)?.title }}
+              {{ list.find((item) => item.key === solution)?.title }}
             </h3>
             <div class="my-22px lh-24px text-#666">
-              {{ list.find(item => item.key === solution)?.description }}
+              {{ list.find((item) => item.key === solution)?.description }}
             </div>
             <el-button class="!bg-#fff !b-rd-6px !h-40px">
               <nuxt-link to="/solutions">
@@ -161,7 +176,9 @@ const solutionList = computed(() => {
           <div class="grid grid-cols-2 gap-col-80px gap-row-50px">
             <div v-for="(item, index) in solutionList" :key="index">
               <img :src="item.img" class="w-50px h-50px" alt="" srcset="">
-              <h4 class="!mt-20px !mb-10px text-#333 text-18px fw-800 custom-title-font">
+              <h4
+                class="!mt-20px !mb-10px text-#333 text-18px fw-800 custom-title-font"
+              >
                 {{ item.title }}
               </h4>
               <div class="text-#666 lh-24px">
@@ -175,6 +192,4 @@ const solutionList = computed(() => {
   </div>
 </template>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>

components/common/block/blog.vue

@@ -1,25 +1,20 @@
 <script lang='ts' setup>
-import {
-  getBlogsListApi,
-} from '~/api/model/blogs'
+import { ConstKeys } from '~/enums/const-enums'
+import { Api } from '@/api/model/url'
 
 const list = ref<any>([])
-async function getVideoOrBlogsList(pageNo = 1, pageSize = 3) {
-  const params = {
-    pageNo,
-    pageSize,
-    categoryId: '',
-    orderBy: 'createTime',
-    orderType: 'desc',
-  }
-  const res: any = await getBlogsListApi(params)
-  list.value = res.records
-}
-getVideoOrBlogsList()
+const requestUrl = `${ConstKeys.DOMAINDEV}${Api.BlogsList}`
+const params = { pageNo: 1, pageSize: 3, orderBy: 'createTime', orderType: 'desc' }
+const { data, pending, error, refresh } = await useAsyncData(
+  'blog-list',
+  () => $fetch(requestUrl, { params }),
+)
+list.value = data.value?.result?.records || []
 </script>
 
 <template>
   <div
+    v-if="list.length"
     class="bg-#fff py-120px data-section"
     data-section-color="#ffffff"
   >
@@ -41,5 +36,5 @@ getVideoOrBlogsList()
 </template>
 
 <style lang='less' scoped>
- 
+
 </style>

components/common/block/catalogs.vue

@@ -6,11 +6,11 @@ import { Navigation, Pagination } from 'swiper/modules'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import { ConstKeys } from '~/enums/const-enums'
+import { Api } from '@/api/model/url'
 
 const modules = [Navigation, Pagination]
 const categoryList = ref<any>([])
 const swiperVertical = ref<any>(null)
-const router = useRouter()
 
 const solution = ref('category')
 const list = ref([
@@ -23,12 +23,13 @@ const list = ref([
     title: 'By Trend',
   },
 ])
-
+const requestUrl = `${ConstKeys.DOMAINDEV}${Api.CatalogueList}`
+const params = { pageNo: 1, pageSize: 9, state: true, trend: 0, order: 'desc' }
 const { data, pending, error, refresh } = await useAsyncData(
-  'brand-detail',
-  () => $fetch(`${ConstKeys.DOMAINPRO}/client/brand/list/default`, { params: { pageNo: 1, pageSize: 8 } }),
+  'catalogue-list',
+  () => $fetch(requestUrl, { params }),
 )
-categoryList.value = data.value?.result.records
+categoryList.value = data.value?.result?.records || []
 
 function onVerticalSwiper(swiper: any) {
   swiperVertical.value = swiper
@@ -41,11 +42,14 @@ function onClickRight() {
   // swiperVertical.value.slideTo(4)
   swiperVertical.value.slideNext()
 }
-function onViewAll() {
-  if (solution.value === 'category')
-    router.push({ path: '/categories' })
+function switchCatalogs(item: any) {
+  solution.value = item.key
+  if (item.key === 'category')
+    params.trend = 0
   else
-    router.push({ path: '/trends' })
+    params.trend = 1
+
+  refresh()
 }
 </script>
 
@@ -68,14 +72,16 @@ function onViewAll() {
               ? '!bg-#fff !text-#000 b-#fff'
               : 'bg-#0F0820 text-#fff b-#fff'
           "
-          @click="solution = item.key"
+          @click="switchCatalogs(item)"
         >
           <div>{{ item.title }}</div>
         </div>
       </div>
       <div class="w-1200-auto pos-relative">
-        <div class="flex items-center justify-end text-#fff text-14px fw-bold mb-20px cursor-pointer" @click="onViewAll()">
-          View All
+        <div class="flex items-center justify-end text-#fff text-14px fw-bold mb-20px cursor-pointer">
+          <nuxt-link class="text-#fff hover:text-#D7C4FF" :to="solution === 'category' ? '/categories' : '/trends'">
+            View All
+          </nuxt-link>
           <svgo-arrow-line-r class="w-16px h-16px ml-10px" />
         </div>
         <div
@@ -110,7 +116,6 @@ function onViewAll() {
           :navigation="false"
           :pagination="true"
           class="pos-relative"
-          @set-translate="setTranslate"
           @swiper="onVerticalSwiper"
         >
           <SwiperSlide v-for="(item, index) in categoryList" :key="index">

components/common/block/faq.vue

@@ -25,7 +25,9 @@ const activeName = ref()
         <div
           class="py-14px text-14px w-128px text-center text-#fff b-rd-200px bg-#0F0820 hover:bg-#9B6CFF hover:text-#fff cursor-pointer"
         >
-          Learn More
+          <nuxt-link to="/faq">
+            Learn More
+          </nuxt-link>
         </div>
       </div>
       <div class="custom-collapse w-680px pos-relative">

components/common/blog/item.vue

@@ -10,7 +10,7 @@ defineProps({
   <div class="pos-relative">
     <nuxt-link :to="{ name: 'blog-slug', params: { slug: item?.slug } }">
       <img :src="item.thumbnailUrl" alt="" srcset="" class="w-375px h-240px b-rd-10px object-cover">
-      <div class="pos-absolute top-10px b-rd-400px left-10px text-center w-138px py-10px bg-#f0f1f3 text-#9B6CFF text-14px b-1px b-solid b-#e7e7e7">
+      <div v-if="item.category_dictText" class="pos-absolute top-10px b-rd-400px left-10px text-center w-138px py-10px bg-#f0f1f3 text-#9B6CFF text-14px b-1px b-solid b-#e7e7e7">
         {{ item.category_dictText }}
       </div>
       <h3

components/common/catalogs/item.vue

@@ -1,10 +1,6 @@
 <script lang='ts' setup>
 defineProps({
   item: Object as any,
-  isFavorite: {
-    type: Boolean,
-    default: false,
-  },
 })
 </script>
 
@@ -13,18 +9,24 @@ defineProps({
     <svgo-star class="pos-absolute top-20px right-20px w-20px h-20px" />
     <div class="p-20px pb-30px">
       <h2 class="!mb-15px w-250px text-24px fw-800 text-#333 line-clamp-2 custom-title-font">
-        {{ item.brandName }}
+        {{ item.title }}
       </h2>
       <div class="text-#666 lh-24px line-clamp-2">
-        {{ item.brandName }}
+        {{ item.subhead }}
       </div>
     </div>
     <img
-      :src="item.thumbnail || item.masterImage"
-      alt=""
+      :src="item.coverImg"
+      :alt="item.coverAlt"
       srcset=""
       class="w-100% b-rd-tl-10px  b-rd-tr-10px object-cover"
     >
+    <div class="pos-absolute bottom-20px left-20px cursor-pointer text-#fff bg-#fff/50 b-1px  b-transparent b-solid h-40px pr-8px pl-30px hover:b-1px hover:b-#fff hover:b-solid backdrop-blur-20px text-14px fw-bold  b-rd-400px flex items-center justify-center">
+      <div>Download</div>
+      <div class="p-5px b-rd-50% bg-#fff ml-20px">
+        <svgo-download class="w-14px h-14px text-#333333" />
+      </div>
+    </div>
   </div>
 </template>
 

components/common/category/item.vue

@@ -1,10 +1,6 @@
 <script lang='ts' setup>
 defineProps({
   item: Object as any,
-  isFavorite: {
-    type: Boolean,
-    default: false,
-  },
 })
 </script>
 
@@ -12,10 +8,10 @@ defineProps({
   <div>
     <div class="custom-main mx-auto  overflow-hidden pos-relative">
       <h2 class="!mb-20px text-30px fw-800 text-#333 line-clamp-1">
-        {{ item.brandName }}
+        {{ item.contentTitle }}
       </h2>
       <img
-        :src="item.thumbnail || item.masterImage"
+        :src="item.bannerImg"
         alt=""
         srcset=""
         class="w-260px h-260px object-cover"

components/common/footer/guide.vue

@@ -6,19 +6,21 @@
   <div>
     <div class="h-300px bg-#fff pos-relative">
       <div class="w-1200-auto pos-absolute left-50% translate-x--50% top-50% h-300px pl-40px pr-80px bg-#D7C4FF b-rd-10px flex items-center justify-between">
-        <div class="w-540px">
+        <div class="w-580px">
           <img src="@/assets/images/footer_contact_icon01.png" class="w-50px h-50px mb-10px" alt="">
           <h2 class="text-36px fw-bold lh-60px custom-title-font">
             Ready to Start with EJET Spark?
           </h2>
-          <div class="text-24px mt-10px custom-title-font">
+          <div class="text-24px mt-10px fw-500 custom-title-font">
             Contact us to get exclusive catalogs!
           </div>
           <div
-            class="py-8px mt-30px text-14px fw-500 w-128px text-center text-#fff b-rd-200px flex justify-center items-center bg-#0F0820 hover:bg-#9B6CFF hover:text-#fff cursor-pointer"
+            class="py-8px mt-30px text-14px fw-500 w-128px text-center text-#fff b-rd-200px  bg-#0F0820 hover:bg-#9B6CFF hover:text-#fff cursor-pointer"
           >
-            Contact Us
-            <img src="@/assets/images/footer_contact_icon02.png" class="w-24px h-24px ml-6px" alt="">
+            <nuxt-link to="/contact" class="flex justify-center items-center">
+              Contact Us
+              <img src="@/assets/images/footer_contact_icon02.png" class="w-24px h-24px ml-6px" alt="">
+            </nuxt-link>
           </div>
         </div>
         <img src="@/assets/images/footer_contact_bg.png" class="w-420px h-100%" alt="">

components/common/navigation/icon-group.vue

@@ -9,14 +9,14 @@ defineProps({
 
 <template>
   <div class="">
-    <svgo-trend v-if="icon === 'trend'" class="!w-20px !h-20px" />
-    <svgo-tech v-if="icon === 'tech'" class="!w-20px !h-20px" />
-    <svgo-lifeStyle v-if="icon === 'lifeStyle'" class="!w-20px !h-20px" />
-    <svgo-stationery v-if="icon === 'stationery'" class="!w-20px !h-20px" />
-    <svgo-fashion v-if="icon === 'fashion'" class="!w-20px !h-20px" />
-    <svgo-gifts v-if="icon === 'gifts'" class="!w-20px !h-20px" />
-    <svgo-creative v-if="icon === 'creative'" class="!w-20px !h-20px" />
-    <svgo-beauty v-if="icon === 'beauty'" class="!w-20px !h-20px" />
+    <svgo-trend v-if="icon === '0'" class="!w-20px !h-20px" />
+    <svgo-tech v-if="icon === '1'" class="!w-20px !h-20px" />
+    <svgo-lifeStyle v-if="icon === '2'" class="!w-20px !h-20px" />
+    <svgo-stationery v-if="icon === '3'" class="!w-20px !h-20px" />
+    <svgo-fashion v-if="icon === '4'" class="!w-20px !h-20px" />
+    <svgo-gifts v-if="icon === '5'" class="!w-20px !h-20px" />
+    <svgo-creative v-if="icon === '6'" class="!w-20px !h-20px" />
+    <svgo-beauty v-if="icon === '7'" class="!w-20px !h-20px" />
   </div>
 </template>
 

components/common/navigation/index.vue

@@ -4,6 +4,8 @@
 import { ArrowDown } from '@element-plus/icons-vue'
 import IconGroup from './icon-group.vue'
 import { useCommonStore } from '@/stores/modules/common'
+import { ConstKeys } from '~/enums/const-enums'
+import { Api } from '@/api/model/url'
 
 const router = useRouter()
 const commonStore = useCommonStore()
@@ -12,61 +14,21 @@ const { navigateTextColor, navigateBgColor } = storeToRefs(commonStore)
 const catalogsVisible = ref<boolean>(false)
 const resourceVisible = ref<boolean>(false)
 const aboutVisible = ref<boolean>(false)
+const list = ref<any>([])
+const TrendList = ref<any>([])
 
-const list = ref<any>([
-  {
-    key: 'trend',
-    name: 'Trend Toys',
-  },
-  {
-    key: 'tech',
-    name: 'Tech Gadgets',
-  },
-  {
-    key: 'lifeStyle',
-    name: 'Lifestyle & Wellness',
-  },
-  {
-    key: 'stationery',
-    name: 'Stationery & Office',
-  },
-  {
-    key: 'fashion',
-    name: 'Fashion Accessories',
-  },
-  {
-    key: 'gifts',
-    name: 'Gifts & Seasonal',
-  },
-  {
-    key: 'creative',
-    name: 'Creative Home Products',
-  },
-  {
-    key: 'beauty',
-    name: 'Beauty & Persoanl Care',
-  },
-])
-const TrendList = [
-  {
-    image: 'https://picsum.photos/220/136',
-    name: 'Trend Toys',
-    slug: 'trend-toys',
-    id: 'trend-toys',
-  },
-  {
-    image: 'https://picsum.photos/220/136',
-    name: 'Trend Toys',
-    slug: 'trend-toys',
-    id: 'trend-toys',
-  },
-  {
-    image: 'https://picsum.photos/220/136',
-    name: 'Trend Toys',
-    slug: 'trend-toys',
-    id: 'trend-toys',
-  },
-]
+const requestUrl = `${ConstKeys.DOMAINDEV}${Api.CategoryList}`
+const { data: res } = await useAsyncData(
+  'category-catalogue',
+  () => $fetch(`${requestUrl}`, { params: { all: true } }),
+)
+const params = { pageNo: 1, pageSize: 3, state: true, trend: 0, order: 'desc' }
+const { data: res2 } = await useAsyncData(
+  'catalogue-list',
+  () => $fetch(`${ConstKeys.DOMAINDEV}${Api.CatalogueList}`, { params }),
+)
+list.value = res.value?.result || []
+TrendList.value = res2.value?.result?.records || []
 
 function toCategories() {
   router.push('/categories')
@@ -105,24 +67,24 @@ function toCategories() {
         </el-icon>
       </span>
       <template #dropdown>
-        <div class="w-1200px p-30px flex items-center justify-center">
-          <div class="pr-10px  b-r-1px b-r-solid b-r-#E0E4EA">
+        <div class="w-1200px p-30px flex  justify-center">
+          <div class="pr-10px">
             <div class="mb-20px text-16px fw-800 text-#333">
               By Category
             </div>
             <div class="grid grid-cols-2 grid-gap-x-15px grid-gap-y-10px">
               <div v-for="(item, index) in list" :key="item.id" class="a-link-out hover:text-#9B6CFF hover:bg-#F3F4FB py-8px pl-10px b-rd-6px flex items-center cursor-pointer text-#999">
-                <IconGroup :icon="item.key" />
+                <IconGroup :icon="`${index}`" />
                 <NuxtLink
-                  :to="`/categories/${item.id}`"
+                  :to="`/categories/${item.slug}`"
                   class="text-#333 ml-10px text-14px"
                 >
-                  {{ item.name }}
+                  {{ item.title }}
                 </NuxtLink>
               </div>
             </div>
           </div>
-          <div class="pl-30px">
+          <div v-if="TrendList.length" class="pl-30px b-l-1px b-l-solid b-l-#E0E4EA">
             <div class="mb-20px text-16px fw-800 text-#333">
               By Category
             </div>
@@ -136,12 +98,12 @@ function toCategories() {
                   :to="`/categories/${item.slug}`"
                 >
                   <img
-                    :src="item.image"
-                    alt=""
+                    :src="item.coverImg"
+                    :alt="item.coverAlt"
                     class="w-220px h-136px mb-10px b-rd-4px"
                   >
                   <div class="text-14px fw-800 custom-title-font text-#333 line-clamp-1">
-                    {{ item.name }}
+                    {{ item.title }}
                   </div>
                 </NuxtLink>
               </div>
@@ -250,8 +212,6 @@ function toCategories() {
   inset: unset!important;
   left:  calc(50vw - 600px) !important;
   top:58px!important;
-  // transition: all 0.3s ease-in-out;
-  // transform: translateX(-50%);
    backdrop-filter: blur(5px)!important;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1)!important;
   .el-popper__arrow {

enums/const-enums.ts

@@ -2,6 +2,7 @@
 export enum ConstKeys {
   PROJECTNAME = ' - v3-template',
   DOMAINPRO = 'https://www.ejetselection.com',
+  DOMAINDEV = 'http://47.99.151.233:9000/jeecgboot',
 }
 
 export enum Condition {