feat: 主页上半部分的页面UI完成

components/business/home/banner.vue

@@ -12,7 +12,7 @@ import { getHomeBrandListApi } from '~/api/model/brand'
 const userStore = useUserStore()
 const { isLogin } = storeToRefs(userStore)
 const modules = [Navigation, Pagination]
-const brandList = ref<any>([])
+const categoryList = ref<any>([])
 const swiperVertical = ref<any>(null)
 
 getHomeBrandList()
@@ -23,7 +23,7 @@ async function getHomeBrandList() {
       pageSize: 8,
     }
     const data: any = await getHomeBrandListApi(params)
-    brandList.value = data.records
+    categoryList.value = data.records
   }
   catch (error) {
     console.log('error', error)
@@ -48,12 +48,12 @@ function onClickRight() {
     <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">
-          <div class="text-58px text-#fff fw-800 ls-2">
+          <h1 class="text-58px text-#fff fw-800 ls-2">
             Spark The Trend
-          </div>
-          <div class="text-58px text-#fff fw-800 ls-2">
+          </h1>
+          <h1 class="text-58px text-#fff fw-800 ls-2">
             Ignite Sales
-          </div>
+          </h1>
           <div
             class="pos-absolute top--26px right--60px w-150px py-8px bg-#FFFF66 b-rd-20px transform-rotate-16deg"
           >
@@ -77,9 +77,9 @@ function onClickRight() {
           @click="onClickLeft()"
         >
           <img
-            src="~/assets/images/arrow_left.png"
+            src="~/assets/images/swiper_icon_l.png"
             alt=""
-            class="w-26px h-26px"
+            class="!w-24px !h-24px"
             srcset=""
           >
         </div>
@@ -88,16 +88,16 @@ function onClickRight() {
           @click="onClickRight()"
         >
           <img
-            src="~/assets/images/arrow_right.png"
+            src="~/assets/images/swiper_icon_r.png"
             alt=""
-            class="w-26px h-26px"
+            class="!w-24px !h-24px"
             srcset=""
           >
         </div>
         <Swiper
-          v-if="brandList.length"
+          v-if="categoryList.length"
           :slides-per-view="3"
-          :space-between="40"
+          :space-between="30"
           :modules="modules"
           :centered-slides="true"
           :loop="true"
@@ -106,8 +106,8 @@ function onClickRight() {
           class="pos-relative"
           @swiper="onVerticalSwiper"
         >
-          <SwiperSlide v-for="(item, index) in brandList" :key="index">
-            <common-brand-item :item="item" />
+          <SwiperSlide v-for="(item, index) in categoryList" :key="index">
+            <common-category-item :item="item" />
           </SwiperSlide>
         </Swiper>
       </div>
@@ -119,8 +119,6 @@ function onClickRight() {
 .swiper-slide {
   text-align: center;
   font-size: 18px;
-  background: #fff;
-
   /* Center slide text vertically */
   display: -webkit-box;
   display: -ms-flexbox;

components/business/home/section01.vue

@@ -1,82 +0,0 @@
-<script lang='ts' setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-</script>
-
-<template>
-  <div class="flex items-center justify-between mt-160px">
-    <div class="w-550px mr-20px">
-      <div class="mb-20px text-#666">
-        EJET SELECTION
-      </div>
-      <h2 class="!mb-20px fw-600 text-48px text-#333 custom-title-font">
-        Quality Wholesale, Inspiring Global Retail
-      </h2>
-      <div class="mb-30px text-#999 text-20px lh-36px">
-        EJET Selection is one of the top wholesale marketplaces
-        that connects independent retailers worldwide with premium Chinese manufacturing brands.
-      </div>
-      <div class="mb-40px text-#C58C64 underline cursor-pointer">
-        <NuxtLink to="/about">
-          Learn More
-        </NuxtLink>
-      </div>
-      <div class="flex justify-between">
-        <div class="w-20%">
-          <div class="text-32px text-#5B463E lh-32px fw-500 mb-10px common-bold-font">
-            2K +
-          </div>
-          <div class="text-24px lh-36px text-#666">
-            Selected
-            Brands
-          </div>
-        </div>
-        <div class="custom-center w-40% pos-relative  pl-40px  ">
-          <div class="text-32px text-#5B463E lh-32px fw-500 mb-10px common-bold-font">
-            40k +
-          </div>
-          <div class="text-24px lh-36px text-#666">
-            Independent
-            Retailers
-          </div>
-        </div>
-        <div class="w-28%">
-          <div class="text-32px text-#5B463E lh-32px fw-500 mb-10px common-bold-font">
-            100k +
-          </div>
-          <div class="text-24px lh-36px text-#666">
-            Premium
-            Products
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="pos-relative">
-      <img src="~/assets/images/section_img.png" class="w-750px h-524px" alt="top home decor wholesale marketplace" srcset="">
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-.custom-center{
-    &::before{
-        position: absolute;
-        content: "";
-        bottom: 0%;
-        top: 0%;
-        left: 0;
-        width: 1px;
-        background: #CC9879;
-        border-radius: 2px;
-    }
-    &::after{
-        position: absolute;
-        content: "";
-        bottom: 0%;
-        top: 0%;
-        right:0;
-        width: 1px;
-        background: #CC9879;
-        border-radius: 2px;
-    }
-}
-</style>

components/business/home/section02.vue

@@ -1,54 +0,0 @@
-<script lang='ts' setup>
-import img01 from '@/assets/images/section02_img01.png'
-import img02 from '@/assets/images/section02_img02.png'
-import img03 from '@/assets/images/section02_img03.png'
-import img04 from '@/assets/images/section02_img04.png'
-
-const list = [
-  {
-    img: img01,
-    style: 'width:110px;height: 96px',
-    title: 'Source Manufacturers',
-    subTitle: 'Selected product suppliers with the capability to develop unique products.',
-  },
-  {
-    img: img02,
-    style: 'width: 83px;height: 95px',
-    title: 'Competitive Pricing',
-    subTitle: 'Get the best quality products at the most competitive wholesale prices.',
-  },
-  {
-    img: img03,
-    style: 'width: 78px;height: 100px',
-    title: 'Strict Quality Control',
-    subTitle: 'Strict quality inspection to ensure the products meet our high standards.',
-  },
-  {
-    img: img04,
-    style: 'width:100px;height: 78px',
-    title: 'Dedicated Support',
-    subTitle: 'Smooth wholesale experience with dedicated customer manager service.',
-  },
-]
-</script>
-
-<template>
-  <div class="grid grid-cols-2 gap-40px mt-210px">
-    <div v-for="item, index in list" :key="index" class="px-90px h-270px bg-#F4F5F5 flex items-center">
-      <div class="w-100px h-100px flex justify-center items-center">
-        <img :src="item.img" alt="" :style="item.style" srcset="">
-      </div>
-      <div class="ml-70px flex-1">
-        <h3 class="!mb-20px fw-600 text-26px text-#363C40 custom-title-font">
-          {{ item.title }}
-        </h3>
-        <div class="text-18px text-#999  lh-28px">
-          {{ item.subTitle }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

components/business/home/solutions.vue

@@ -0,0 +1,117 @@
+<!-- @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'
+
+const solution = ref('ecommerce')
+const list = ref([
+  {
+    key: 'ecommerce',
+    title: 'Ecommerce',
+  },
+  {
+    key: 'brands',
+    title: 'Brands',
+  },
+  {
+    key: 'retailers',
+    title: 'Retailers',
+  },
+])
+const solutions = ref([
+  {
+    title: 'Real-Time Trend Curation',
+    img: solutionIcon01,
+    subTitle:
+      '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',
+    subTitle:
+      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
+  },
+  {
+    img: solutionIcon03,
+    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: solutionIcon04,
+    title: 'Real-Time Trend Curation',
+    subTitle:
+      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
+  },
+])
+</script>
+
+<template>
+  <div class="bg-#F3F4FB pt-250px pb-120px">
+    <div class="w-1200-auto text-center">
+      <h2 class="text-36px fw-800 text-#333 !mb-20px">
+        Creative, Trend-Driven Solutions
+      </h2>
+      <div class="text-#999 text-22px mb-40px">
+        EJET SPARK FOR
+      </div>
+      <div class="flex gap-20px justify-center mb-60px">
+        <div
+          v-for="(item, index) in list"
+          :key="index"
+          class="py-12px w-170px b-rd-200px text-18px cursor-pointer hover:bg-#9B6CFF hover:text-#fff transition-all duration-300"
+          :class="
+            solution === item.key
+              ? '!bg-#9B6CFF !text-#fff'
+              : 'bg-#fff text-#767676'
+          "
+          @click="solution = item.key"
+        >
+          <div>{{ item.title }}</div>
+        </div>
+      </div>
+      <div class="flex gap-120px text-left">
+        <div class="b-rd-10px w-360px overflow-hidden">
+          <img
+            src="~/assets/images/solutions_img01.png"
+            class="w-100% h-258px"
+            alt=""
+          >
+          <div
+            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">
+              Ecommerce
+            </h3>
+            <div class="my-22px lh-24px text-#666">
+              Scale Smarter with Viral-Ready Products for Online Growth
+            </div>
+            <el-button class="!bg-#fff !b-rd-6px !h-40px">
+              <nuxt-link to="/solutions">
+                View Catalogs
+              </nuxt-link>
+            </el-button>
+          </div>
+        </div>
+        <div class="flex-1">
+          <div class="grid grid-cols-2 gap-col-80px gap-row-50px">
+            <div v-for="(item, index) in solutions" :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">
+                {{ item.title }}
+              </h4>
+              <div class="text-#666 lh-24px">
+                {{ item.subTitle }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped></style>

components/common/brand/item.vue → components/common/category/item.vue

@@ -35,28 +35,32 @@ async function onFavorite(item: any) {
     console.log(error)
   }
 }
-function toDetail(item: any) {
-  const router = useRouter()
-  router.push({ path: `/brand/${item.id}` })
-  // emit('click:detail', item)
-}
 </script>
 
 <template>
   <div>
-    <div class="text-left " @click="toDetail(item)">
-      <div class="b-rd-10px custom-main mx-auto  !w-360px h-360px mb-20px overflow-hidden pos-relative">
-        <img
-          :src="item.thumbnail || item.masterImage"
-          alt=""
-          srcset=""
-          class="w-100% h-100% object-contain"
-        >
-      </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 }}
+      </h2>
+      <img
+        :src="item.thumbnail || item.masterImage"
+        alt=""
+        srcset=""
+        class="w-260px h-260px object-cover"
+      >
     </div>
   </div>
 </template>
 
 <style lang="less" scoped>
-
+.custom-main{
+  background: url('~/assets/images/swiper_bg.png') no-repeat center center;
+  background-size: cover;
+  width: 360px;
+  height: 360px;
+  border-radius: 10px;
+  padding: 20px 50px;
+  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.16);
+}
 </style>

pages/index.vue

@@ -6,10 +6,7 @@
 <template>
   <div>
     <business-home-banner />
-    <div class="w-1200-auto">
-      <business-home-section01 />
-      <business-home-section02 />
-    </div>
+    <business-home-solutions />
     <AppFooter />
   </div>
 </template>