feat: trends页面完成

components/business/home/banner.vue

@@ -1,13 +1,14 @@
 <!-- @format -->
 
 <script lang="ts" setup>
+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 { useUserStore } from '@/stores/modules/user'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/autoplay'
-import { getHomeBrandListApi } from '~/api/model/brand'
 
 const userStore = useUserStore()
 const { isLogin } = storeToRefs(userStore)
@@ -15,20 +16,11 @@ const modules = [Navigation, Pagination, Autoplay]
 const categoryList = ref<any>([])
 const swiperVertical = ref<any>(null)
 
-getHomeBrandList()
-async function getHomeBrandList() {
-  try {
-    const params = {
-      pageNo: 1,
-      pageSize: 8,
-    }
-    const data: any = await getHomeBrandListApi(params)
-    categoryList.value = data.records
-  }
-  catch (error) {
-    console.log('error', error)
-  }
-}
+const { data, pending, error, refresh } = await useAsyncData(
+  'brand-detail',
+  () => $fetch(`${ConstKeys.DOMAINPRO}/client/brand/list/default`, { params: { pageNo: 1, pageSize: 8 } }),
+)
+categoryList.value = data.value?.result.records
 
 function onVerticalSwiper(swiper: any) {
   swiperVertical.value = swiper
@@ -46,6 +38,12 @@ function scrollToCatalogs() {
   if (catalogs)
     catalogs.scrollIntoView({ behavior: 'smooth', block: 'start' })
 }
+onUnmounted(() => {
+  if (swiperVertical.value) {
+    swiperVertical.value.destroy()
+    swiperVertical.value = null
+  }
+})
 </script>
 
 <template>
@@ -74,11 +72,12 @@ function scrollToCatalogs() {
           </div>
         </div>
 
-        <el-button class="my-80px !b-#fff !text-#fff !bg-#878490" round @click="scrollToCatalogs">
+        <el-button class="my-80px !text-#fff !bg-#878490 !w-160px !h-40px !b-#fff !b-rd-400px" round @click="scrollToCatalogs">
           View Catalogs
         </el-button>
       </div>
       <div
+        v-if="categoryList.length"
         class="pos-absolute bottom--100px left-50% translate-x--50% w-1100px mx-auto"
       >
         <div
@@ -104,7 +103,6 @@ function scrollToCatalogs() {
           >
         </div>
         <Swiper
-          v-if="categoryList.length"
           :slides-per-view="3"
           :space-between="30"
           :modules="modules"

components/business/trends/comp/item.vue

@@ -0,0 +1,37 @@
+<script lang='ts' setup>
+defineProps({
+  item: Object as any,
+})
+</script>
+
+<template>
+  <div>
+    <div class="pos-relative bg-#fff shadow-item flex b-rd-20px overflow-hidden p-40px items-center">
+      <img :src="item.img" alt="" srcset="" class="w-500px h-380px b-rd-10px object-cover mr-50px">
+      <div class="flex-1 text-left">
+        <h3
+          class="!mb-20px fw-800 text-24px text-#333 line-clamp-2"
+        >
+          {{ item.title }}
+        </h3>
+        <div class="text-16px text-#999 lh-24px mb-60px">
+          {{ item.subTitle }}
+        </div>
+        <div class="flex items-center">
+          <el-button class="!bg-#9B6CFF w-140px text-14px !text-#fff !b-#9B6CFF !h-48px py-18px">
+            Learn More
+          </el-button>
+          <el-button class="!bg-#fff w-150px text-14px !text-#9B6CFF !b-#9B6CFF !h-48px px-24px">
+            Download Catalog
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+.shadow-item{
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
+}
+</style>

components/business/trends/comp/item2.vue

@@ -0,0 +1,37 @@
+<script lang='ts' setup>
+defineProps({
+  item: Object as any,
+})
+</script>
+
+<template>
+  <div>
+    <div class="pos-relative bg-#fff shadow-item flex b-rd-20px overflow-hidden p-40px items-center">
+      <div class="flex-1 text-left">
+        <h3
+          class="!mb-20px fw-800 text-24px text-#333 line-clamp-2"
+        >
+          {{ item.title }}
+        </h3>
+        <div class="text-16px text-#999 lh-24px mb-60px">
+          {{ item.subTitle }}
+        </div>
+        <div class="flex items-center">
+          <el-button class="!bg-#9B6CFF w-140px text-14px !text-#fff !b-#9B6CFF !h-48px py-18px">
+            Learn More
+          </el-button>
+          <el-button class="!bg-#fff w-150px text-14px !text-#9B6CFF !b-#9B6CFF !h-48px px-24px">
+            Download Catalog
+          </el-button>
+        </div>
+      </div>
+      <img :src="item.img" alt="" srcset="" class="w-500px h-380px b-rd-10px object-cover ml-50px">
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+.shadow-item{
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
+}
+</style>

components/business/trends/index.vue

@@ -0,0 +1,67 @@
+<!-- @format -->
+
+<script lang="ts" setup>
+import { ConstKeys } from '~/enums/const-enums'
+
+const list = ref([
+  {
+    title: 'Real-Time Trend Curation',
+    subTitle:
+      'EJET Spark catalog description, spark the trend, ignate sales. EJET Spark cat description, spark the trend, ignate sales. EJET Spark catalog description, spark the trend, ignate sales. ',
+    img: 'https://picsum.photos/300/300',
+    slug: 'test',
+  },
+  {
+    title: 'Real-Time Trend Curation',
+    subTitle:
+      'EJET Spark catalog description, spark the trend, ignate sales. EJET Spark cat description, spark the trend, ignate sales. EJET Spark catalog description, spark the trend, ignate sales. ',
+    img: 'https://picsum.photos/300/300',
+    slug: 'test2',
+  },
+  {
+    title: 'Real-Time Trend Curation',
+    subTitle:
+      'EJET Spark catalog description, spark the trend, ignate sales. EJET Spark cat description, spark the trend, ignate sales. EJET Spark catalog description, spark the trend, ignate sales. ',
+    img: 'https://picsum.photos/300/300',
+    slug: 'test3',
+  },
+])
+
+// const { data, pending, error, refresh } = await useAsyncData(
+//   'brand-detail',
+//   () => $fetch(`${ConstKeys.DOMAINPRO}/client/brand/list/default`, { params: { pageNo: 1, pageSize: 8 } }),
+// )
+// list.value = data.value?.result.records
+</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">
+        Download with The Latest <span class="custom-title-bg">Trends</span>
+      </h2>
+      <div class="text-#999 w-850px text-22px mb-80px mx-auto lh-34px">
+        Spot emerging hits, viral styles, and seasonal must-haves. Curated with
+        real-time market insights to help you stock ahead of the trend curve.
+      </div>
+      <div class="flex flex-col gap-40px">
+        <div v-for="(item, index) in list" :key="index">
+          <business-trends-comp-item v-if="index % 2 === 0" :item="item" />
+          <business-trends-comp-item2 v-else :item="item" />
+        </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/catalogs.vue

@@ -5,7 +5,7 @@ import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Navigation, Pagination } from 'swiper/modules'
 import 'swiper/css'
 import 'swiper/css/navigation'
-import { getHomeBrandListApi } from '~/api/model/brand'
+import { ConstKeys } from '~/enums/const-enums'
 
 const modules = [Navigation, Pagination]
 const categoryList = ref<any>([])
@@ -23,20 +23,11 @@ const list = ref([
   },
 ])
 
-getHomeBrandList()
-async function getHomeBrandList() {
-  try {
-    const params = {
-      pageNo: 1,
-      pageSize: 8,
-    }
-    const data: any = await getHomeBrandListApi(params)
-    categoryList.value = data.records
-  }
-  catch (error) {
-    console.log('error', error)
-  }
-}
+const { data, pending, error, refresh } = await useAsyncData(
+  'brand-detail',
+  () => $fetch(`${ConstKeys.DOMAINPRO}/client/brand/list/default`, { params: { pageNo: 1, pageNo: 1 } }),
+)
+categoryList.value = data.value?.result.records
 
 function onVerticalSwiper(swiper: any) {
   swiperVertical.value = swiper

pages/categories/index.vue

@@ -11,7 +11,7 @@
         <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>
+        <el-button class="mt-30px !bg-#fff !text-#9B6CFF !w-160px !h-40px !b-0px !b-rd-200px" round>
           View Catalogs
         </el-button>
       </div>

pages/index.vue

@@ -23,6 +23,10 @@ onMounted(() => {
     })
   }, 50)
   appScroller.addEventListener('scroll', handleScroll)
+
+  onUnmounted(() => {
+    appScroller.removeEventListener('scroll', handleScroll)
+  })
 })
 </script>
 

pages/trends.vue

@@ -2,10 +2,30 @@
 </script>
 
 <template>
-  <div>
-    solutions
+  <div class="bg-#0F0820">
+    <div class="header w-1200-auto flex items-center  h-600px  bg-no-repeat bg-center" style="background-image: url('https://picsum.photos/600/600')">
+      <div>
+        <h1 class="text-58px fw-800 text-#fff ls-2">
+          Stay Ahead with
+        </h1>
+        <h1 class="text-58px fw-800 text-#fff ls-2 !mt-10px">
+          Trendy Products!
+        </h1>
+        <el-button class="mt-65px !bg-#878490 !text-#fff !bg-#878490 !w-160px !h-40px !b-#fff !b-rd-200px" round>
+          Contact US
+        </el-button>
+      </div>
+    </div>
+    <business-trends />
+    <business-categories-block />
+    <common-block-blog />
+    <common-block-faq />
+    <AppFooter />
   </div>
 </template>
 
 <style lang='less' scoped>
+.header{
+  background-position-x: right;
+}
 </style>