|
|
@@ -1,11 +1,185 @@
|
|
|
<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>
|
|
|
- solutions
|
|
|
+ <div class="bg-#0F0820">
|
|
|
+ <div class="header w-1200-auto flex items-center justify-between pt-230px pb-124px">
|
|
|
+ <div>
|
|
|
+ <h1 class="text-58px fw-800 text-#fff ls-2">
|
|
|
+ Full-Category Solution
|
|
|
+ </h1>
|
|
|
+ <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
|
|
|
+ </nuxt-link>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <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>
|
|
|
</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>
|
