feat: about页面完成，整体开发部分完成

components/business/about/intro.vue

@@ -0,0 +1,42 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <div class="bg-#F9FAFB">
+    <div class="w-1200-auto pos-relative py-120px text-center text-#3D3D3D pos-relative">
+      <div class="w-850px text-24px mx-auto">
+        <div class="lh-50px mb-40px">
+          EJET Spark is a trend-driven product solution provider bridging
+          creative suppliers and trend-focused retailers through market insights,
+          agile supply chains, and collaborative partnerships.
+        </div>
+        <div class="lh-50px">
+          We offer not only the product — but also speed, flexibility, and consistency.
+          Whether you're curating a store or building a regional product line,
+          EJET SPARK helps you spark new ideas and retail excitement.
+        </div>
+      </div>
+      <img
+        src="@/assets/images/icon_face.png"
+        class="w-68px h-68px pos-absolute top-50% transform-translate-y--50% left-0px"
+        alt=""
+        srcset=""
+      >
+      <img
+        src="@/assets/images/blog_icon06.png"
+        class="w-70px h-70px pos-absolute top-100px right-0px"
+        alt=""
+        srcset=""
+      >
+      <img
+        src="@/assets/images/icon_decoration.png"
+        class="w-80px h-130px pos-absolute bottom-100px right--100px"
+        alt=""
+        srcset=""
+      >
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+</style>

components/business/about/show.vue

@@ -0,0 +1,164 @@
+<!-- @format -->
+
+<script lang="ts" setup>
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Autoplay, EffectCards, Navigation, Pagination } from 'swiper/modules'
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/autoplay'
+import 'swiper/css/pagination'
+// import 'swiper/css/bundle'   // 全部css
+const modules = [Navigation, Pagination, EffectCards, Autoplay]
+const swiperVertical = ref<any>(null)
+const swiperHorizontal = ref<any>(null)
+function onVerticalSwiper(swiper: any) {
+  swiperVertical.value = swiper
+}
+function onHorizontalSwiper(swiper: any) {
+  swiperHorizontal.value = swiper
+}
+function onSlideChange(swiper: any) {
+  if (!swiperVertical.value)
+    return
+  swiperVertical.value.slideTo(swiper.realIndex)
+}
+function onSlideChange2(swiper: any) {
+  if (!swiperHorizontal.value)
+    return
+  swiperHorizontal.value.slideTo(swiper.realIndex)
+}
+const list = ref([
+  {
+    title: 'Insight-Driven Creativity111',
+    description:
+      'We believe creativity should be rooted in real consumer insights. Every idea starts with what the new generation truly wants — we turn those insights into inspiring products.',
+  },
+  {
+    title: 'Insight-Driven Creativity22',
+    description:
+      'We believe creativity should be rooted in real consumer insights. Every idea starts with what the new generation truly wants — we turn those insights into inspiring products.',
+  },
+  {
+    title: 'Insight-Driven Creativity333',
+    description:
+      'We believe creativity should be rooted in real consumer insights. Every idea starts with what the new generation truly wants — we turn those insights into inspiring products.',
+  },
+])
+onUnmounted(() => {
+  if (swiperVertical.value) {
+    swiperVertical.value.destroy()
+    swiperVertical.value = null
+  }
+})
+</script>
+
+<template>
+  <div class="bg-#EAE5FA">
+    <div class="w-1200-auto">
+      <div class="flex justify-between ">
+        <div class="w-50% block-left flex user-select justify-center items-center pr-100px">
+          <Swiper
+            :modules="modules"
+            mousewheel="false"
+            :loop="true"
+            effect="cards"
+            grab-cursor="true"
+            :autoplay="{
+              delay: 3000,
+              disableOnInteraction: false,
+              pauseOnMouseEnter: true,
+            }"
+            :pagination="{
+              clickable: true,
+            }"
+            class="pos-relative"
+            @slide-change="onSlideChange2"
+            @swiper="onVerticalSwiper"
+          >
+            <SwiperSlide v-for="(item, index) in list" :key="index">
+              Slide {{ index }}
+            </SwiperSlide>
+          </Swiper>
+        </div>
+        <div class="w-50% h-700px pos-relative block-right">
+          <Swiper
+            direction="vertical"
+            :modules="modules"
+            mousewheel="false"
+            :loop="true"
+            :allow-touch-move="false"
+            :pagination="false"
+            class="pos-relative"
+            @swiper="onHorizontalSwiper"
+          >
+            <SwiperSlide v-for="(item, index) in list" :key="index">
+              <div class="text-left user-select">
+                <div class="text-40px fw-800 text-#333 custom-title-font">
+                  {{ item.title }}
+                </div>
+                <div class="text-#999 mt-20px lh-24px">
+                  {{ item.description }}
+                </div>
+              </div>
+            </SwiperSlide>
+          </Swiper>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.user-select{
+  user-select: none;
+}
+:deep(.block-right) {
+  .swiper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    .swiper-slide {
+      text-align: center;
+      font-size: 18px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+  }
+}
+:deep(.block-left) {
+   .swiper {
+      width: 480px;
+      height: 480px;
+    }
+    .swiper-slide {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 18px;
+      font-size: 22px;
+      font-weight: bold;
+      color: #fff;
+    }
+     .swiper-pagination{
+        top: unset;
+        bottom: -80px;
+        left: unset;
+        right: -100px;
+        display: flex;
+        justify-content: end;
+    }
+  .swiper-slide:nth-child(1n) {
+    background-color: rgb(206, 17, 17);
+  }
+
+  .swiper-slide:nth-child(2n) {
+    background-color: rgb(0, 140, 255);
+  }
+
+  .swiper-slide:nth-child(3n) {
+    background-color: rgb(10, 184, 111);
+  }
+}
+</style>

components/business/about/team.vue

@@ -0,0 +1,88 @@
+<script lang='ts' setup>
+import member01 from '@/assets/images/team/team_member01.png'
+import member02 from '@/assets/images/team/team_member02.png'
+import member03 from '@/assets/images/team/team_member03.png'
+import member04 from '@/assets/images/team/team_member04.png'
+import member05 from '@/assets/images/team/team_member05.png'
+import member06 from '@/assets/images/team/team_member06.png'
+import member07 from '@/assets/images/team/team_member07.png'
+import member08 from '@/assets/images/team/team_member08.png'
+
+const teamList = [
+  {
+    name: 'James Wilson',
+    avatar: member01,
+    post: 'Chief Executive Officer',
+    experience: '20+ years in technology leadership',
+  },
+  {
+    name: 'James Wilson',
+    avatar: member02,
+    post: 'Chief Executive Officer',
+    experience: '20+ years in technology leadership',
+  },
+  {
+    name: 'James Wilson',
+    avatar: member03,
+    post: 'Chief Executive Officer',
+    experience: '20+ years in technology leadership',
+  },
+  {
+    name: 'James Wilson',
+    avatar: member04,
+    post: 'Chief Executive Officer',
+    experience: '20+ years in technology leadership',
+  },
+  {
+    name: 'James Wilson',
+    avatar: member05,
+    post: 'Chief Executive Officer',
+    experience: '20+ years in technology leadership',
+  },
+  {
+    name: 'James Wilson',
+    avatar: member06,
+    post: 'Chief Executive Officer',
+    experience: '20+ years in technology leadership',
+  },
+  {
+    name: 'James Wilson',
+    avatar: member07,
+    post: 'Chief Executive Officer',
+    experience: '20+ years in technology leadership',
+  },
+  {
+    name: 'James Wilson',
+    avatar: member08,
+    post: 'Chief Executive Officer',
+    experience: '20+ years in technology leadership',
+  },
+]
+</script>
+
+<template>
+  <div class="py-120px bg-#fff">
+    <div class="w-1200-auto">
+      <h2 class="text-36px !mb-80px text-center fw-800 ls-2 text-#333 custom-title-font">
+        Meet the Team Behind  <span class="custom-title-bg">EJET Spark</span>
+      </h2>
+      <div class="grid grid-cols-4 gap-x-24px gap-y-40px text-center">
+        <div v-for="item, index in teamList" :key="index">
+          <img :src="item.avatar" class="w-280px h-280px object-cover">
+          <div class="mt-30px mb-20px text-24px text-#333 font-800">
+            {{ item.name }}
+          </div>
+          <div class="mb-10px text-#999999">
+            {{ item.post }}
+          </div>
+          <div class="mb-10px text-#999999">
+            {{ item.experience }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+</style>

components/business/contact/form.vue

@@ -67,7 +67,9 @@ async function submitInfo(formEl: FormInstance | undefined) {
       ElMessage.success('You have been submitted successfully!')
       formEl.resetFields()
     }
-    else { console.log('error submit!') }
+    else {
+      console.log('error submit!')
+    }
   })
 }
 async function getCountryList() {
@@ -100,25 +102,28 @@ getCountryList()
             <el-input
               v-model="formInfo.name"
               placeholder="Please enter your name"
-              class="h-40px item-input  !b-rd-10px"
+              class="h-40px item-input !b-rd-10px"
             />
           </el-form-item>
           <el-form-item label="Email" prop="mail">
             <el-input
               v-model="formInfo.mail"
               placeholder="Please enter your email"
-              class="h-40px item-input  !b-rd-10px"
+              class="h-40px item-input !b-rd-10px"
             />
           </el-form-item>
           <el-form-item label="Subjects" prop="subjects">
             <el-input
               v-model="formInfo.subjects"
               placeholder="Please enter your subjects"
-              class="h-40px item-input  !b-rd-10px"
+              class="h-40px item-input !b-rd-10px"
             />
           </el-form-item>
           <el-form-item label="Country" prop="country" class="custom-form-item">
-            <el-select v-model="formInfo.country" placeholder="Please enter your country">
+            <el-select
+              v-model="formInfo.country"
+              placeholder="Please enter your country"
+            >
               <el-option
                 v-for="(item, index) in countryList"
                 :key="index"
@@ -133,7 +138,7 @@ getCountryList()
             <el-input
               v-model="formInfo.mobile"
               placeholder="Please enter your Phone number"
-              class="h-40px item-input  !b-rd-10px"
+              class="h-40px item-input !b-rd-10px"
             />
           </el-form-item>
           <el-form-item label="Message" prop="message" class="!mb-60px">
@@ -167,11 +172,11 @@ getCountryList()
     font-weight: bold;
     color: #333 !important;
   }
-  .el-form-item{
+  .el-form-item {
     display: block !important;
     margin-bottom: 34px;
     &:last-child {
-        margin-bottom:  0px!important;
+      margin-bottom: 0px !important;
     }
     .el-form-item__content {
       .el-textarea {
@@ -179,23 +184,23 @@ getCountryList()
           height: 100px !important;
         }
       }
-      .el-select{
-        .el-select__wrapper{
-            box-shadow: none !important;
-            height: 40px !important;
-            border-radius: 10px !important;
+      .el-select {
+        .el-select__wrapper {
+          box-shadow: none !important;
+          height: 40px !important;
+          border-radius: 10px !important;
         }
       }
-      .item-input{
-        .el-input__wrapper{
-            box-shadow: none !important;
-             border-radius: 10px !important;
+      .item-input {
+        .el-input__wrapper {
+          box-shadow: none !important;
+          border-radius: 10px !important;
         }
       }
-      .el-textarea{
-        .el-textarea__inner{
-            box-shadow: none !important;
-            border-radius: 10px !important;
+      .el-textarea {
+        .el-textarea__inner {
+          box-shadow: none !important;
+          border-radius: 10px !important;
         }
       }
     }

components/common/footer/guide.vue

@@ -34,7 +34,7 @@
               Company
             </h4>
             <div class="mb-30px">
-              <NuxtLink to="/about" class="hover:text-#9B6CFF">
+              <NuxtLink to="/about-us" class="hover:text-#9B6CFF">
                 About Us
               </NuxtLink>
             </div>

pages/about-us.vue

@@ -0,0 +1,40 @@
+<script lang='ts' setup>
+
+</script>
+
+<template>
+  <div>
+    <div class="bg-#0F0820">
+      <div class="header w-1200-auto flex items-center justify-between pt-180px pb-150px">
+        <div>
+          <h1 class="text-58px fw-800 text-#fff ls-2 custom-title-font">
+            About The <br>
+            EJET Spark <span class="custom-title-bg02 !pb-0px title-h1">Team</span>
+          </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="@/assets/images/about_banner.png" class="w-540px h-460px" alt="">
+      </div>
+    </div>
+
+    <business-about-intro />
+    <business-about-show />
+    <business-categories-block />
+    <business-about-team />
+    <common-block-exhibited />
+    <common-block-partner />
+    <common-block-faq />
+    <AppFooter />
+  </div>
+</template>
+
+<style lang='less' scoped>
+.title-h1{
+  padding-bottom: 0px !important;
+  background-position: center 90% !important;
+}
+</style>

pages/about.vue

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