feat: 首页功能添加部分

app.vue

@@ -19,25 +19,25 @@ router.beforeEach(() => {
 useHead({
   script: [
     // Google Tag Manager
-    {
-      children: `(function (w, d, s, l, i) {
-        w[l] = w[l] || []
-        function gtag() {  w[l].push(arguments) }
-        w.$gtag = gtag
-        const j = d.createElement(s)
-        j.src = "https://www.googletagmanager.com/gtag/js?id=" + i
-        j.async = true
-        j.onload = function () {
-           gtag("js", new Date())
-           gtag("config", i)
-        }
-        d.head.appendChild(j)
-    })(window, document, "script", "dataLayer", "G-XNX7ZDX7QY")`,
-    },
+    // {
+    //   children: `(function (w, d, s, l, i) {
+    //     w[l] = w[l] || []
+    //     function gtag() {  w[l].push(arguments) }
+    //     w.$gtag = gtag
+    //     const j = d.createElement(s)
+    //     j.src = "https://www.googletagmanager.com/gtag/js?id=" + i
+    //     j.async = true
+    //     j.onload = function () {
+    //        gtag("js", new Date())
+    //        gtag("config", i)
+    //     }
+    //     d.head.appendChild(j)
+    // })(window, document, "script", "dataLayer", "G-XNX7ZDX7QY")`,
+    // },
     // 第三方客服工具
-    {
-      children: `!function(){const c=document.createElement("script");c.src="https://plugin-code.salesmartly.com/js/project_270819_277882_1741848946.js",c.async=!0,c.onload=function(){window.__ssc.setting={hideIcon:!1}},document.head.appendChild(c)}();`,
-    },
+    // {
+    //   children: `!function(){const c=document.createElement("script");c.src="https://plugin-code.salesmartly.com/js/project_270819_277882_1741848946.js",c.async=!0,c.onload=function(){window.__ssc.setting={hideIcon:!1}},document.head.appendChild(c)}();`,
+    // },
     // JSON-LD
     {
       type: 'application/ld+json',

assets/style/common.less

@@ -58,14 +58,18 @@
     }
 }
 
+.el-dropdown {
+    color: var(--default-text-color) !important;
+}
+
 .el-button {
     background-color: #FAF5F1 !important;
-    border-color: #CC9879 !important;
-    color: #CC9879 !important;
+    border-color: #9B6CFF !important;
+    color: #9B6CFF !important;
 
     &:hover {
-        background-color: #CC9879 !important;
-        border-color: #CC9879 !important;
+        background-color: #9B6CFF !important;
+        border-color: #9B6CFF !important;
         color: #fff !important;
     }
 }
@@ -93,7 +97,8 @@
 }
 
 .el-breadcrumb {
-    font-size: 16px!important;
+    font-size: 16px !important;
+
     .el-breadcrumb__item {
         .el-breadcrumb__inner {
             color: #999 !important;
@@ -172,6 +177,39 @@
     }
 }
 
+.custom-navigate-dropdown {
+    border-radius: 6px !important;
+
+    .el-scrollbar {
+        padding: 10px;
+
+        .el-dropdown-menu {
+            padding: 0 !important;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+
+            .el-dropdown-menu__item {
+                width: 90px !important;
+
+                &:hover {
+                    border-radius: 6px !important;
+                    background: #F3F4FB !important;
+                    color: #9B6CFF !important;
+                }
+            }
+        }
+    }
+
+    &.no-dropdown {
+        display: none;
+    }
+
+    .el-popper__arrow {
+        display: none;
+    }
+}
+
 // .el-checkbox {
 //     .el-checkbox__input {
 //         &.is-checked {

assets/style/variables.css

@@ -1,5 +1,7 @@
 :root {
-    --primary-color:  #5B463E;
-    --primary-hover-color: #AB7045;
+    --primary-color:  #333333;
+    --primary-hover-color: #9B6CFF;
     --font-size-base: 16px;
+
+    --default-text-color: #333;
 }

components/AppHeader.vue

@@ -1,8 +1,11 @@
 <!-- @format -->
 
 <script lang="ts" setup>
-import { useUserStore } from '@/stores/modules/user'
+import { useUserStore } from "@/stores/modules/user"
+import { useCommonStore } from "@/stores/modules/common"
 
+const commonStore = useCommonStore()
+const { customNavigateColor } = storeToRefs(commonStore)
 const userStore = useUserStore()
 const { isLogin } = storeToRefs(userStore)
 
@@ -11,26 +14,36 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div class="flex justify-between items-center z-100 px-20px h-48px pos-fixed top-40px w-1200-auto left-50% translate-x--50% bg-#fff rd-190px b-1px b-solid b-#fff backdrop-blur-10px">
-    <div class="flex items-center">
-      <NuxtLink to="/">
-        <img
-          src="~/assets/images/ejet_logo.png"
-          alt="logo"
-          class="w-140px h-24px cursor-pointer"
-        >
-      </NuxtLink>
-    </div>
-    <div class="mx-auto">
-      jsgha
-    </div>
-    <div class="flex items-center ">
-      <!-- {{ t('Popular_test') }}
+  <div
+    class="pos-fixed left-50% translate-x--50% w-full py-20px custom-bg z-100"
+  >
+    <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"
+          />
+        </NuxtLink>
+      </div>
+      <div class="mx-auto">
+        <common-navigation />
+      </div>
+      <div class="flex items-center">
+        <!-- {{ t('Popular_test') }}
       <div class="w-1px bg-#D8D8D8 h-20px mx-20px" />
       <common-select-lang /> -->
-      <common-user-avatar class="ml-30px" />
+        <common-user-avatar class="ml-30px" />
+      </div>
     </div>
   </div>
 </template>
 
-<style lang="less" scoped></style>
+<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;
+}
+</style>

components/business/home/banner.vue

@@ -1,33 +1,144 @@
-<script lang='ts' setup>
+<!-- @format -->
+
+<script lang="ts" setup>
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Navigation, Pagination } from 'swiper/modules'
 import { useUserStore } from '@/stores/modules/user'
+import 'swiper/css'
+import 'swiper/css/navigation'
+import { getHomeBrandListApi } from '~/api/model/brand'
+// import "swiper/css/pagination"
 
 const userStore = useUserStore()
 const { isLogin } = storeToRefs(userStore)
+const modules = [Navigation, Pagination]
+const brandList = ref<any>([])
+const swiperVertical = ref<any>(null)
+
+getHomeBrandList()
+async function getHomeBrandList() {
+  try {
+    const params = {
+      pageNo: 1,
+      pageSize: 8,
+    }
+    const data: any = await getHomeBrandListApi(params)
+    brandList.value = data.records
+  }
+  catch (error) {
+    console.log('error', error)
+  }
+}
+
+function onVerticalSwiper(swiper: any) {
+  swiperVertical.value = swiper
+}
+function onClickLeft() {
+  // swiperVertical.value.slideTo()
+  swiperVertical.value.slidePrev()
+}
+function onClickRight() {
+  // swiperVertical.value.slideTo(4)
+  swiperVertical.value.slideNext()
+}
 </script>
 
 <template>
-  <div class="bg-#FAF5F1">
-    <div class="w-1400px mx-auto flex justify-between py-60px">
-      <div class="w-800px">
-        <h1 class="w-650px fw-600 text-48px text-#333 custom-title-font">
-          Top Wholesale Marketplace Connecting You to Quality
-        </h1>
-        <div class="!mt-20px !mb-30px text-24px text-#999999 w-750px lh-36px ">
-          Discover high-quality products from selected Chinese manufacturers, Connect with premium brands and elevate your retail business.
+  <div class="bg-#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">
+          <div class="text-58px text-#fff fw-800 ls-2">
+            Spark The Trend
+          </div>
+          <div class="text-58px text-#fff fw-800 ls-2">
+            Ignite Sales
+          </div>
+          <div
+            class="pos-absolute top--26px right--60px w-150px py-8px bg-#FFFF66 b-rd-20px transform-rotate-16deg"
+          >
+            #Trendy Product
+          </div>
+          <div
+            class="pos-absolute bottom-24px left--46px py-8px w-120px text-#fff bg-#1AC18E b-rd-20px transform-rotate--12deg"
+          >
+            #Wholesale
+          </div>
         </div>
-        <el-button v-if="!isLogin" type="primary" plain class="w-160px !bg-#C58C64 !text-#fff !h-40px !text-16px !fw-500 !b-rd-150px">
-          <nuxt-link to="/register">
-            Shop on EJET
-          </nuxt-link>
+        <el-button class="my-80px !b-#fff !text-#fff !bg-#878490" round>
+          View Catalogs
         </el-button>
       </div>
-      <img src="~/assets/images/home_banner.png" class="w-540px h-353px" alt="EJET Selection wholesale marketplace for home decor brands" srcset="">
+      <div
+        class="pos-absolute bottom--100px left-50% translate-x--50% w-1100px mx-auto"
+      >
+        <div
+          class="pos-absolute cursor-pointer left--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
+          @click="onClickLeft()"
+        >
+          <img
+            src="~/assets/images/arrow_left.png"
+            alt=""
+            class="w-26px h-26px"
+            srcset=""
+          >
+        </div>
+        <div
+          class="pos-absolute cursor-pointer right--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
+          @click="onClickRight()"
+        >
+          <img
+            src="~/assets/images/arrow_right.png"
+            alt=""
+            class="w-26px h-26px"
+            srcset=""
+          >
+        </div>
+        <Swiper
+          v-if="brandList.length"
+          :slides-per-view="3"
+          :space-between="40"
+          :modules="modules"
+          :centered-slides="true"
+          :loop="true"
+          :navigation="false"
+          :pagination="true"
+          class="pos-relative"
+          @swiper="onVerticalSwiper"
+        >
+          <SwiperSlide v-for="(item, index) in brandList" :key="index">
+            <common-brand-item :item="item" />
+          </SwiperSlide>
+        </Swiper>
+      </div>
     </div>
   </div>
 </template>
 
-<style lang='less' scoped>
-// .custom-font{
-//   font-family: 'CustomFont';
-// }
+<style lang="less" scoped>
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+  background: #fff;
+
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  transition: 300ms;
+  transform: scale(0.835);
+}
+.swiper-slide-active,
+.swiper-slide-duplicate-active {
+  transform: scale(1);
+}
 </style>

components/business/home/welfare.vue

@@ -1,53 +0,0 @@
-<script lang='ts' setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import img01 from '@/assets/images/welfare_cart.png'
-import img02 from '@/assets/images/welfare_brand.png'
-import img03 from '@/assets/images/welfare_return.png'
-import img04 from '@/assets/images/welfare_delivery.png'
-
-const list = [
-  {
-    img: img01,
-    title: '90-Day Buy Now Pay Later',
-    subTitle: 'Generate sales before you pay',
-  },
-  {
-    img: img02,
-    title: 'Curated Brand Selection',
-    subTitle: 'Hand-picked brands from China',
-  },
-  {
-    img: img03,
-    title: '60-Day Risk-Free Returns',
-    subTitle: 'Return back what doesn\'t sell',
-  },
-  {
-    img: img04,
-    title: 'Easy Shipping and Delivery',
-    subTitle: 'Seamless international delivery',
-  },
-]
-</script>
-
-<template>
-  <div class="">
-    <div class="flex mt-100px">
-      <div v-for="item, index in list" :key="index" class="w-25% flex items-center justify-center pos-relative after:pos-absolute after:content-empty after:right-0 after:top-0 after:bottom-0 after:w-1px after:bg-#EEEEEE  !after:last:pos-unset">
-        <div class="w-36px h-36px bg-#FAF5F1 b-1px b-solid b-#FAE7CE b-rd-50% flex justify-center items-center">
-          <img :src="item.img" alt="" class="w-20px h-20px" srcset="">
-        </div>
-        <div class="ml-20px">
-          <h3 class="!mb-10px !text-16px !fw-500 text-#333">
-            {{ item.title }}
-          </h3>
-          <div class="fw-400 text-14px  text-#999999">
-            {{ item.subTitle }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

components/common/brand/item.vue

@@ -0,0 +1,62 @@
+<script lang='ts' setup>
+import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import { setBrandFavoriteApi } from '~/api/model/brand'
+
+defineProps({
+  item: Object as any,
+  isFavorite: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:favorite', 'click:detail'])
+const { openLoginModal } = useLoginModal()
+
+const hoverStatus = ref<any>()
+
+async function onFavorite(item: any) {
+  try {
+    const { status } = await openLoginModal()
+    if (status) {
+      const params = { bid: item.id, type: item.isFavorite ? 2 : 1 }
+      await setBrandFavoriteApi(params)
+      item.isFavorite = !item.isFavorite
+      ElMessage({
+        message: `${item.isFavorite ? 'Add' : 'Remove'} to My Favourites Successfully`,
+        type: 'success',
+        plain: true,
+      })
+      emit('update:favorite', item)
+    }
+  }
+  catch (error) {
+    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>
+  </div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

components/common/navigation/index.vue

@@ -0,0 +1,115 @@
+<!-- @format -->
+
+<script lang="ts" setup>
+import { ArrowDown } from "@element-plus/icons-vue"
+import { useCommonStore } from "@/stores/modules/common"
+
+const commonStore = useCommonStore()
+const { customNavigateColor } = 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>
+  <div class="flex gap-80px">
+    <NuxtLink
+      to="/solutions"
+      class="hover:text-#9B6CFF cursor-pointer"
+      :class="customNavigateColor"
+    >
+      Solutions
+    </NuxtLink>
+    <el-dropdown
+      popper-class="custom-navigate-dropdown no-dropdown"
+      @visible-change="(visible) => (catalogsVisible = visible)"
+    >
+      <span
+        class="el-dropdown-link text-16px flex items-center"
+        :class="[{ '!text-#9B6CFF': catalogsVisible }, customNavigateColor]"
+      >
+        Catalogs
+        <el-icon
+          class="el-icon--right custom-arrow"
+          :class="catalogsVisible ? 'custom-arrow-up' : 'custom-arrow-down'"
+        >
+          <ArrowDown class="text-14px" />
+        </el-icon>
+      </span>
+    </el-dropdown>
+    <el-dropdown
+      popper-class="custom-navigate-dropdown "
+      @visible-change="(visible) => (resourceVisible = visible)"
+    >
+      <span
+        class="el-dropdown-link text-16px flex items-center"
+        :class="[{ '!text-#9B6CFF': resourceVisible }, customNavigateColor]"
+      >
+        Resources
+        <el-icon
+          class="el-icon--right custom-arrow"
+          :class="resourceVisible ? 'custom-arrow-up' : 'custom-arrow-down'"
+        >
+          <ArrowDown class="text-14px" />
+        </el-icon>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item>
+            <NuxtLink to="/blog"> Blog </NuxtLink>
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <NuxtLink to="/faq"> FAQ </NuxtLink>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+    <el-dropdown
+      popper-class="custom-navigate-dropdown"
+      @visible-change="(visible) => (aboutVisible = visible)"
+    >
+      <span
+        class="el-dropdown-link text-16px flex items-center"
+        :class="[{ '!text-#9B6CFF': aboutVisible }, customNavigateColor]"
+      >
+        About
+        <el-icon
+          class="el-icon--right custom-arrow"
+          :class="aboutVisible ? 'custom-arrow-up' : 'custom-arrow-down'"
+        >
+          <ArrowDown class="text-14px" />
+        </el-icon>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item>
+            <NuxtLink to="/about-us"> About Us </NuxtLink>
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <NuxtLink to="/contact"> Contact Us </NuxtLink>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.custom-arrow {
+  transition: all 0.3s ease-in-out;
+}
+.custom-arrow-up {
+  transform: rotate(180deg);
+}
+.custom-arrow-down {
+  transform: rotate(0deg);
+}
+</style>
+
+<style>
+.custom-navigate-color {
+  color: #fff;
+}
+</style>

components/common/user-avatar/index.vue

@@ -1,87 +1,77 @@
 <!-- @format -->
 
 <script setup lang="ts">
-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 commonStore = useCommonStore()
 const userStore = useUserStore()
 const { isLogin } = storeToRefs(userStore)
-const { noticeRemind } = storeToRefs(commonStore)
-const hoverStatus = ref<any>()
+// const { noticeRemind } = storeToRefs(commonStore)
 
 const { openLoginModal } = useLoginModal()
-commonStore.getNoticeRemind()
-
-// const { locale, setLocale } = useI18nLocale()
-// function handleClick({ key }: any) {
-//   setLocale(key)
-// }
 
 async function clickLogin() {
   try {
     const { status } = await openLoginModal()
-    if (status)
-      location.reload()
-  }
-  catch (error) {
+    if (status) location.reload()
+  } catch (error) {
     console.log(error)
   }
 }
 
-async function onSelected(command: string | number | object) {
-  if (command === 'signOut') {
-    // 退出登录
-    try {
-      userStore.logout()
-    }
-    catch (error) {
-      console.log(error, 'error')
-    }
-  }
-}
+// async function onSelected(command: string | number | object) {
+//   if (command === "signOut") {
+//     // 退出登录
+//     try {
+//       userStore.logout()
+//     } catch (error) {
+//       console.log(error, "error")
+//     }
+//   }
+// }
 </script>
 
 <template>
   <div>
     <div v-if="!isLogin">
       <el-button
-        class="b-solid b-1px b-#AB7045 custom-btn-login !text-#AB7045 !w-100px !h-34px !text-16px !b-rd-150px"
-        @mouseover="hoverStatus = '!fill-#fff'" @mouseleave="hoverStatus = '!fill-#CC9879'" @click="clickLogin"
+        class="!b-0px !bg-#9B6CFF custom-btn-login !text-#fff !w-100px !h-32px !text-16px !b-rd-410px"
+        @click="clickLogin"
       >
-        <template #icon>
-          <svgo-user :class="hoverStatus" class="w-24px h-24px" :filled="true" />
-        </template> Log In
+        Sign in
       </el-button>
     </div>
   </div>
 </template>
 
 <style lang="less">
- .custom-btn-login {
-  .el-icon{
+.custom-btn-login {
+  .el-icon {
     font-size: 24px;
   }
 }
 .custom-dropdown {
-&.el-dropdown__popper{
-  border-radius: 10px;
+  &.el-dropdown__popper {
+    border-radius: 10px;
 
-.el-scrollbar{
-  .el-dropdown__list{
-    width: 415px;
-    padding: 30px!important;
-  }
-  .el-dropdown-menu {
-    .el-dropdown-menu__item{
-      padding-bottom: 20px;
-      padding-left: 0 !important;
-      padding-right: 0 !important;
-      padding-top: 0 !important;
-      &:last-child{
-        padding-bottom: 0;
+    .el-scrollbar {
+      .el-dropdown__list {
+        width: 415px;
+        padding: 30px !important;
       }
-    }}
-  }}
+      .el-dropdown-menu {
+        .el-dropdown-menu__item {
+          padding-bottom: 20px;
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+          padding-top: 0 !important;
+          &:last-child {
+            padding-bottom: 0;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

layouts/default.vue

@@ -1,26 +1,12 @@
-<script setup>
-const headerBg = ref('#fff')
-const router = useRouter()
+<!-- @format -->
 
-watch(
-  () => router.currentRoute.value.path,
-  (v) => {
-    if (v === '/')
-      headerBg.value = '#0F0820'
-    else headerBg.value = '#fff'
-  },
-  {
-    immediate: true,
-  },
-)
-</script>
+<script setup></script>
 
 <template>
   <div class="common-layout">
     <el-container class="h-full">
-      <!-- <el-header :style="{ backgroundColor: headerBg }" class="pos-relative">
+      <!-- <el-header class="pos-relative">
         <AppHeader />
-        <category-header />
       </el-header> -->
       <el-main id="app-scroller" class="relative">
         <AppHeader />
@@ -36,11 +22,9 @@ watch(
   height: 100vh;
 
   .el-header {
-    padding-top: 30px;
+    padding: 20px 0;
     height: unset;
-    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.06);
   }
-
   .el-main {
     padding: 0px;
   }

pages/about.vue

@@ -0,0 +1,11 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <div>
+    solutions
+  </div>
+</template>
+
+<style lang='less' scoped>
+</style>

pages/blog/[slug].vue

@@ -0,0 +1,11 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <div>
+    solutions
+  </div>
+</template>
+
+<style lang='less' scoped>
+</style>

pages/blog/index.vue

@@ -0,0 +1,11 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <div>
+    solutions
+  </div>
+</template>
+
+<style lang='less' scoped>
+</style>

pages/categories/[slug].vue

@@ -0,0 +1,11 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <div>
+    solutions
+  </div>
+</template>
+
+<style lang='less' scoped>
+</style>

pages/categories/index.vue

@@ -0,0 +1,11 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <div>
+    solutions
+  </div>
+</template>
+
+<style lang='less' scoped>
+</style>

pages/contact.vue

@@ -0,0 +1,11 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <div>
+    solutions
+  </div>
+</template>
+
+<style lang='less' scoped>
+</style>

pages/faq.vue

@@ -0,0 +1,11 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <div>
+    solutions
+  </div>
+</template>
+
+<style lang='less' scoped>
+</style>

pages/index.vue

@@ -1,55 +1,12 @@
 <!-- @format -->
 
 <script setup lang="ts">
-import { ConstKeys } from '~/enums/const-enums'
-
-useHead({
-  title: 'EJET Selection | Top Wholesale Marketplace Connecting You to Quality',
-  meta: [
-    {
-      name: 'description',
-      content:
-        'EJET Selection is a wholesale marketplace connecting global retailers with top-quality Chinese wholesale suppliers. Shop wholesale from selected brands offering unique home decor products.',
-    },
-    {
-      property: 'og:title',
-      content: 'EJET Selection | Top Wholesale Marketplace Connecting You to Quality',
-    },
-    {
-      property: 'og:description',
-      content: 'EJET Selection is a wholesale marketplace connecting global retailers with top-quality Chinese wholesale suppliers. Shop wholesale from selected brands offering unique home decor products.',
-    },
-    {
-      property: 'og:type',
-      content: 'website',
-    },
-    {
-      property: 'twitter:title',
-      content: 'EJET Selection | Top Wholesale Marketplace Connecting You to Quality',
-    },
-    {
-      property: 'twitter:description',
-      content: 'EJET Selection is a wholesale marketplace connecting global retailers with top-quality Chinese wholesale suppliers. Shop wholesale from selected brands offering unique home decor products.',
-    },
-    {
-      property: 'twitter:card',
-      content: 'summary_large_image',
-    },
-  ],
-  link: [
-    {
-      rel: 'canonical',
-      href: `${ConstKeys.DOMAINPRO}/`,
-    },
-  ],
-})
 </script>
 
 <template>
   <div>
     <business-home-banner />
-    <div class="w-1400px mx-auto">
-      <business-home-welfare />
+    <div class="w-1200-auto">
       <business-home-section01 />
       <business-home-section02 />
     </div>

pages/solutions.vue

@@ -0,0 +1,11 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <div>
+    solutions
+  </div>
+</template>
+
+<style lang='less' scoped>
+</style>

pages/trends.vue

@@ -0,0 +1,11 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <div>
+    solutions
+  </div>
+</template>
+
+<style lang='less' scoped>
+</style>

stores/modules/common.ts

@@ -1,64 +1,34 @@
 /** @format */
 
-import { defineStore } from "pinia"
-import { useUserStore } from "./user"
-import { getCartBrandQuantityApi } from "~/api/model/cart"
-import { getNoticeRemindApi } from "~/api/model/common"
+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",
+  'commonStore',
   () => {
-    const selCartList = ref<any>("")
-    const isShowCategoryHeader = ref<boolean>(true)
-    const selectedCategory = ref<any>("")
-    const cartGoodsNumber = ref<number>(0)
-    const noticeRemind = ref<boolean>(false)
-    const userStore = useUserStore()
+    const customNavigateColor = ref<string>('text-#fff')
+    // const userStore = useUserStore()
 
-    const setSelectedCategory = (value: any) => {
-      selectedCategory.value = value
-    }
-    const setCartGoodsNumber = (value: any) => {
-      selectedCategory.value = value
-    }
-    const getCartGoodsList = async () => {
-      const data: any = await getCartBrandQuantityApi()
-      cartGoodsNumber.value = data.brandQuantity || 0
-    }
-    const setSelCartList = (data: any) => {
-      selCartList.value = data
-    }
-    const setIsShowCategoryHeader = (data: any) => {
-      isShowCategoryHeader.value = data
-    }
-    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 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)
+    //   }
+    // }
 
     return {
-      selCartList,
-      isShowCategoryHeader,
-      selectedCategory,
-      cartGoodsNumber,
-      noticeRemind,
-      setSelectedCategory,
-      getCartGoodsList,
-      setCartGoodsNumber,
-      setSelCartList,
-      getNoticeRemind,
-      setIsShowCategoryHeader,
+      customNavigateColor,
     }
   },
   {
     persist: true,
-  }
+  },
 )

unocss.config.ts

@@ -23,10 +23,11 @@ export default defineConfig({
       /^view-transition-([\w-]+)$/,
       ([, name]) => ({ 'view-transition-name': name }),
     ],
+    ['ls-2', { 'letter-spacing': '2px' }],
   ],
   theme: {
     colors: {
-      primary: '#C58C64',
+      primary: '#9B6CFF',
     },
     breakpoints: {
       sm: '640px', // 小屏幕