feat: solutions页面UI完成

components/business/solutions/block_power.vue

@@ -0,0 +1,92 @@
+<script lang='ts' setup>
+const list = [
+  {
+    label: 'Data-Based Curation',
+    key: 'data-curation',
+    data: {
+      title: 'Product selection based on real-time consumer data to boost sales',
+      describe: 'We analyze evolving consumer trends and sales insights to provide curated product assortments that strategically selected for your market appeal and success.',
+    },
+  },
+  {
+    label: 'Weekly Catalog Updates',
+    key: 'weekly-updates',
+    data: {
+      title: 'New, trending products are added weekly to keep your inventory fresh',
+      describe: 'Stay ahead of the curve with weekly releases of fresh, eye-catching items. Carefully aligned with the latest market trends to keep assortments relevant and in demand.',
+    },
+  },
+  {
+    label: 'One Stop Solutions',
+    key: 'one-stop-solutions',
+    data: {
+      title: 'From concept to packaging, we handle everything for you',
+      describe: 'From initial product concept to final packaging, each selection is thoughtfully developed to align with modern consumer preferences and drive higher sell-through rates.',
+    },
+  },
+  {
+    label: 'Scalable Distribution',
+    key: 'scalable-distribution',
+    data: {
+      title: 'Flexible logistics solutions that scale with your business growth',
+      describe: 'Flexible supply options combined with dependable logistics empower seamless scaling—from small boutique operations to retail chains—ensuring consistent growth support.',
+    },
+  },
+]
+const active = ref('data-curation')
+const diff_data: any = computed(() => {
+  return list.find(item => item.key === active.value)?.data || {}
+})
+</script>
+
+<template>
+  <div class="w-1200-auto pb-110px">
+    <h2 class="text-36px fw-800 text-#333 !mb-88px text-center">
+      Power Your Retail Success with <span class="custom-title-bg"> EJET Spark </span>
+    </h2>
+    <div class="flex gap-40px">
+      <div class="flex flex-col gap-60px">
+        <div v-for="item in list" :key="item.key" :class="active === item.key && 'text-#9B6CFF'" class="cursor-pointer text-#999 hover:text-#9B6CFF" @click="active = item.key">
+          {{ item.label }}
+        </div>
+      </div>
+      <img
+        src="https://picsum.photos/470/280"
+        alt=""
+        class="w-470px h-280px b-rd-6px"
+        srcset=""
+      >
+      <div class="flex-1">
+        <div class="flex flex-col justify-between">
+          <div>
+            <h3 class="text-24px text-#333 fw-800 lh-32px">
+              {{ diff_data.title }}
+            </h3>
+            <div class="text-#999 lh-22px mt-20px">
+              {{ diff_data.describe }}
+            </div>
+          </div>
+          <div
+            class="w-154px h-40px lh-40px text-center mt-60px b-rd-6px text-14px text-#9B6CFF fw-bold b-solid b-1px b-#9B6CFF cursor-pointer hover:bg-#9B6CFF hover:text-#fff"
+          >
+            <NuxtLink to="/categories">
+              View Catalogs
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+.custom-title-bg{
+  position: relative;
+  display: inline-block;
+  background: url(~/assets/images/title_bg04.png);
+  background-repeat: no-repeat;
+  background-position: center 100%;
+  background-size: 100% auto;
+  padding-bottom: 8px;
+}
+</style>

components/business/solutions/block_solve.vue

@@ -0,0 +1,166 @@
+<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 list = ref([
+  {
+    key: 'ecommerce',
+    title: 'Ecommerce',
+    description: 'Scale Smarter with Viral-Ready Products for Online Growth',
+    list: [
+      {
+        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.',
+      },
+    ],
+  },
+  {
+    key: 'brands',
+    title: 'Brands & Distributors',
+    description: 'Power Your Product Line with Trend Intelligence & Agile Supply',
+    list: [
+      {
+        title: 'OEM/ODM Trend Support',
+        img: solutionIcon01,
+        subTitle:
+      'We provide trend-based design, packaging, and product development to help brands create unique, market-driven products.',
+      },
+      {
+        img: solutionIcon02,
+        title: 'Co-Branded Development',
+        subTitle:
+      'Quick-turn co-branded collections to help brands launch exclusive, limited-edition products and increase market impact.',
+      },
+      {
+        img: solutionIcon03,
+        title: 'Flexible Logistic Solution',
+        subTitle:
+      'Whether it’s bulk shipments, mixed containers, our flexible logistics solutions adapt to your business model and market goals.',
+      },
+      {
+        img: solutionIcon04,
+        title: 'Exclusive Channel Protection',
+        subTitle:
+      'We protect your brand with exclusive regional rights, limited distribution agreements, and secure your market position.',
+      },
+    ],
+  },
+  {
+    key: 'retailers',
+    title: 'Retailers & Chain Stores',
+    description: 'Upgrade Your Shelves with Trendy, High-Margin Products',
+    list: [
+      {
+        title: 'Ready-to-Display Portfolios',
+        img: solutionIcon01,
+        subTitle:
+      'Curated product bundles that align with current trends, ready for effortless shelf display and enhanced retail appeal.',
+      },
+      {
+        img: solutionIcon02,
+        title: 'Trend-Aligned Launch Plan',
+        subTitle:
+      'Tailored product launch plans based on market cycles to create a differentiated product portfolio that engages customers.',
+      },
+      {
+        img: solutionIcon03,
+        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.',
+      },
+      {
+        img: solutionIcon04,
+        title: 'Go-to Market Support',
+        subTitle:
+      'Customizable marketing assets to support both online and offline promotions — helping you boost visibility and drive sales.',
+      },
+    ],
+  },
+])
+const solution = ref('ecommerce')
+const solutionList = computed(() => {
+  return list.value.find((item: any) => item.key === solution.value)?.list
+})
+</script>
+
+<template>
+  <div class="w-1200-auto ">
+    <div class="flex">
+      <div v-for="item in list" :key="item.key" :class="solution === item.key ? '!bg-#9B6CFF !text-#fff' : ''" class="flex-1 bg-#F0F0F0 text-#333 py-20px text-center   hover:text-#9B6CFF transition-all duration-300 cursor-pointer" @click="solution = item.key">
+        {{ item.title }}
+      </div>
+    </div>
+    <div class="py-120px text-center">
+      <h2 class="text-36px fw-800 text-#333 !mb-20px">
+        EJET Spark For <span class="custom-title-bg"> {{ list.find(item => item.key === solution)?.title }} </span>
+      </h2>
+      <div class="lh-24px text-#999 text-22px mb-80px">
+        {{ list.find(item => item.key === solution)?.description }}
+      </div>
+      <div class="flex gap-60px">
+        <img
+          src="~/assets/images/solutions_img02.png"
+          alt=""
+          class="w-420px h-520px"
+          srcset=""
+        >
+        <div>
+          <div class="flex flex-col gap-34px text-left">
+            <div v-for="item in solutionList" :key="item.key" class="flex">
+              <img :src="item.img" class="w-40px h-40px mr-20px" alt="">
+              <div>
+                <h3 class="text-18px fw-800 text-#333 !mb-10px">
+                  {{ item.title }}
+                </h3>
+                <div class="text-#666 lh-24px">
+                  {{ item.subTitle }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="w-154px h-40px lh-40px text-center ml-60px mt-60px b-rd-6px text-14px text-#9B6CFF fw-bold b-solid b-1px b-#9B6CFF cursor-pointer hover:bg-#9B6CFF hover:text-#fff"
+          >
+            <NuxtLink to="/contact">
+              Contact Us
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+.custom-title-bg{
+  position: relative;
+  display: inline-block;
+  background: url(~/assets/images/title_bg04.png);
+  background-repeat: no-repeat;
+  background-position: center 100%;
+  background-size: 100% auto;
+  padding-bottom: 8px;
+}
+</style>

components/business/solutions/block_statistic.vue

@@ -0,0 +1,55 @@
+<script lang='ts' setup>
+import icon_01 from '~/assets/images/blog_icon01.png'
+import icon_02 from '~/assets/images/blog_icon02.png'
+import icon_03 from '~/assets/images/blog_icon03.png'
+import icon_04 from '~/assets/images/blog_icon04.png'
+
+const list = [
+  {
+    icon: icon_01,
+    title: 'Stock-Keeping',
+    total: '20,000',
+  },
+  {
+    icon: icon_02,
+    title: 'Supplier Portfolio',
+    total: '2,000',
+  },
+  {
+    icon: icon_03,
+    title: 'Display Solutions',
+    total: '2,00',
+  },
+  {
+    icon: icon_04,
+    title: 'Brand Designs',
+    total: '20',
+  },
+]
+</script>
+
+<template>
+  <div
+    class="bg-#0F0820 pt-110px pb-120px  data-section"
+    data-section-color="#0F0820"
+  >
+    <div class="w-1200-auto text-center flex gap-190px justify-between">
+      <div v-for="item, index in list" :key="index">
+        <img
+          :src="item.icon"
+          alt=""
+          class="w-80px h-80px mx-auto"
+        >
+        <div class="text-#fff text-36px fw-900 mt-20px mb-10px ls-2">
+          {{ item.total }}+
+        </div>
+        <div class="text-#fff text-20px fw-500">
+          {{ item.title }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+</style>

components/business/solutions/block_steps.vue

@@ -0,0 +1,74 @@
+<script lang='ts' setup>
+import imgStep01 from '~/assets/images/catalog_step01.png'
+import imgStep02 from '~/assets/images/catalog_step02.png'
+import imgStep03 from '~/assets/images/catalog_step03.png'
+
+const steps = [
+  {
+    img: imgStep01,
+    title: 'Catalog & Inquiry',
+    describe: 'Browse our curated catalogs by category or season. Select your interested products or combinations and send us your inquiry.',
+  },
+  {
+    img: imgStep02,
+    title: 'Sampling & Comfirm',
+    describe: 'Receive samples quickly to test quality and packaging. Finalize your selections and confirm order details with our support team.',
+  },
+  {
+    img: imgStep03,
+    title: 'Deliver & Launch',
+    describe: 'We handle fast production and logistics. You get products delivered on time, ready to launch in-store or online with display support.',
+  },
+]
+</script>
+
+<template>
+  <div class="py-120px bg-#fff">
+    <div class="w-1200-auto">
+      <h2 class="text-36px fw-800 text-#333 !mb-20px text-center">
+        Partner With Us in 3  <span class="custom-title-bg"> Steps </span>
+      </h2>
+      <div class="flex gap-112px text-center">
+        <div v-for="item, index in steps" :key="index" class="custom-step">
+          <img :src="item.img" class="w-200px h-200px mx-auto mb-10px " alt="">
+          <div class="text-24px fw-800 text-#333 mb-10px ls-2">
+            Step {{ index + 1 }}
+          </div>
+          <div class="text-24px fw-800 text-#333 mb-10px">
+            {{ item.title }}
+          </div>
+          <div class="text-16px text-#999 lh-22px">
+            {{ item.describe }}
+          </div>
+        </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;
+}
+.custom-step {
+    position: relative;
+    &::after{
+        position: absolute;
+        content: '';
+        right: -150px;
+        top: 100px;
+        width: 180px;
+        height: 1px;
+        border-bottom: 1px dashed #E9DEFF;
+    }
+    &:last-child::after {
+        display: none;
+    }
+}
+</style>

components/common/block/faq.vue

@@ -131,7 +131,7 @@ const activeName = ref()
 
 <style lang="less" scoped>
 .custom-collapse {
-  .el-collapse {
+  ::v-deep(.el-collapse) {
     .el-collapse-item {
       margin-bottom: 20px;
       border-radius: 12px;

components/common/navigation/index.vue

@@ -21,7 +21,7 @@ function toCategories() {
   <div class="flex gap-80px">
     <NuxtLink
       to="/solutions"
-      class="hover:text-#9B6CFF cursor-pointer"
+      class="!hover:text-#9B6CFF cursor-pointer"
       :style="{
         color: navigateTextColor,
       }"

pages/solutions.vue

@@ -1,108 +1,5 @@
 <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 list = ref([
-  {
-    key: 'ecommerce',
-    title: 'Ecommerce',
-    description: 'Scale Smarter with Viral-Ready Products for Online Growth',
-    list: [
-      {
-        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.',
-      },
-    ],
-  },
-  {
-    key: 'brands',
-    title: 'Brands & Distributors',
-    description: 'Power Your Product Line with Trend Intelligence & Agile Supply',
-    list: [
-      {
-        title: 'OEM/ODM Trend Support',
-        img: solutionIcon01,
-        subTitle:
-      'We provide trend-based design, packaging, and product development to help brands create unique, market-driven products.',
-      },
-      {
-        img: solutionIcon02,
-        title: 'Co-Branded Development',
-        subTitle:
-      'Quick-turn co-branded collections to help brands launch exclusive, limited-edition products and increase market impact.',
-      },
-      {
-        img: solutionIcon03,
-        title: 'Flexible Logistic Solution',
-        subTitle:
-      'Whether it’s bulk shipments, mixed containers, our flexible logistics solutions adapt to your business model and market goals.',
-      },
-      {
-        img: solutionIcon04,
-        title: 'Exclusive Channel Protection',
-        subTitle:
-      'We protect your brand with exclusive regional rights, limited distribution agreements, and secure your market position.',
-      },
-    ],
-  },
-  {
-    key: 'retailers',
-    title: 'Retailers & Chain Stores',
-    description: 'Upgrade Your Shelves with Trendy, High-Margin Products',
-    list: [
-      {
-        title: 'Ready-to-Display Portfolios',
-        img: solutionIcon01,
-        subTitle:
-      'Curated product bundles that align with current trends, ready for effortless shelf display and enhanced retail appeal.',
-      },
-      {
-        img: solutionIcon02,
-        title: 'Trend-Aligned Launch Plan',
-        subTitle:
-      'Tailored product launch plans based on market cycles to create a differentiated product portfolio that engages customers.',
-      },
-      {
-        img: solutionIcon03,
-        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.',
-      },
-      {
-        img: solutionIcon04,
-        title: 'Go-to Market Support',
-        subTitle:
-      'Customizable marketing assets to support both online and offline promotions — helping you boost visibility and drive sales.',
-      },
-    ],
-  },
-])
-const solution = ref('ecommerce')
-const solutionList = computed(() => {
-  return list.value.find((item: any) => item.key === solution.value)?.list
-})
 </script>
 
 <template>
@@ -116,7 +13,6 @@ const solutionList = computed(() => {
           <h1 class="text-58px fw-800 text-#fff ls-2 !mt-10px">
             One-Stop Supply
           </h1>
-
           <el-button class="my-60px !text-#fff !bg-#878490 !w-160px !h-40px !b-#fff !b-rd-400px" round>
             <nuxt-link :to="{ name: 'contact' }">
               Contact Us
@@ -126,60 +22,15 @@ const solutionList = computed(() => {
         <img src="https://picsum.photos/440/440" class="w-440px h-440px" alt="">
       </div>
     </div>
-    <div class="w-1200-auto ">
-      <div class="flex">
-        <div v-for="item in list" :key="item.key" :class="solution === item.key ? '!bg-#9B6CFF !text-#fff' : ''" class="flex-1 bg-#F0F0F0 text-#333 py-20px text-center   hover:text-#9B6CFF transition-all duration-300 cursor-pointer" @click="solution = item.key">
-          {{ item.title }}
-        </div>
-      </div>
-      <div class="py-120px text-center">
-        <h2 class="text-36px fw-800 text-#333 !mb-20px">
-          EJET Spark For <span class="custom-title-bg"> {{ list.find(item => item.key === solution)?.title }} </span>
-        </h2>
-        <div class="lh-24px text-#999 text-22px mb-80px">
-          {{ list.find(item => item.key === solution)?.description }}
-        </div>
-        <div class="flex gap-60px">
-          <img
-            src="~/assets/images/solutions_img02.png"
-            alt=""
-            class="w-420px h-520px"
-            srcset=""
-          >
-          <div>
-            <div class="flex flex-col gap-34px text-left">
-              <div v-for="item in solutionList" :key="item.key" class="flex">
-                <img :src="item.img" class="w-40px h-40px mr-20px" alt="">
-                <div>
-                  <h3 class="text-18px fw-800 text-#333 !mb-10px">
-                    {{ item.title }}
-                  </h3>
-                  <div class="text-#666 lh-24px">
-                    {{ item.subTitle }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="w-154px h-40px lh-40px text-center ml-60px mt-60px b-rd-6px text-14px text-#9B6CFF fw-bold b-solid b-1px b-#9B6CFF cursor-pointer hover:bg-#9B6CFF hover:text-#fff"
-            >
-              Contact Us
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <business-solutions-block_solve />
+    <business-solutions-block_power />
+    <business-solutions-block_statistic />
+    <business-solutions-block_steps />
+    <common-block-faq />
+    <AppFooter />
   </div>
 </template>
 
 <style lang='less' scoped>
-.custom-title-bg{
-  position: relative;
-  display: inline-block;
-  background: url(~/assets/images/title_bg04.png);
-  background-repeat: no-repeat;
-  background-position: center 100%;
-  background-size: 100% auto;
-  padding-bottom: 8px;
-}
+
 </style>