sdk：活跃功能逻辑修改

components/SdkForm.vue

@@ -185,7 +185,7 @@
         <!-- 公司邮箱 -->
         <div class="info-content">
           <div class="email">
-            <span class="inline-block mt-25px mb-16px  text-sm text-[#232748] font-600 "><i class="text-[#FF5050] mt-10px">*</i> Company email</span>
+            <span class="inline-block mt-25px mb-16px  text-sm text-[#232748] font-600 "><i class="text-[#FF5050] mt-10px">*</i> 公司邮箱地址</span>
             <input class="w-full h-44px  px-12px rounded-6px !border-1px !border-[#E1E3E8] border-solid !focus:border-[#396FFA] !hover:border-[#396FFA]" v-model.trim="email" type="text" placeholder="name@company.com" @input="handleEmail">
           </div>
           <div v-if="email_err" class="text-[#FF5050] mt-10px ">{{ email_err }}</div>

components/sdk/Feature.vue

@@ -2,15 +2,16 @@
   <div class="wrapper">
     <div class="main-features lg:mt-52px main-container">
       <div ref="text" class="relative text-container flex justify-around border-b-1px border-[#E1E3E8] overflow-x-auto px-60px">
-        <Arrow class="btn prev absolute left-0 top-12px cursor-pointer" @click="activeGroup = (activeGroup === 1 ? 0 : 1)" /><Arrow class="btn next absolute right-0 top-12px cursor-pointer" @click="activeGroup = (activeGroup === 1 ? 0 : 1)" />
+        <Arrow class="btn prev absolute left-0 top-12px cursor-pointer" @click="changeGroup('left')" />
+        <Arrow class="btn next absolute right-0 top-12px cursor-pointer" @click="changeGroup('right')" />
         <template v-for="(iconList, i) in iconData">
-          <template v-if="i === activeGroup" v-for="icon in iconList">
-            <div class="cursor-pointer text-item pb-12px flex flex-col items-center w-150px" :class="[icon.index === activeIndex ? 'border-[#396FFA] border-b-3px' : '']" @click="changeIndex(icon.index)">
+          <template v-if="i === activeGroup" v-for="(icon, index) in iconList">
+            <div :key="index" class="cursor-pointer text-item pb-12px flex flex-col items-center w-150px" :class="[icon.index === activeIndex ? 'border-[#396FFA] border-b-3px' : '']" @click="changeIndex(icon.index)">
               <div>
                 <img v-show="icon.index === activeIndex" :src="icon.iconActiveUrl" :alt="icon.alt" class="w-36px h-36px mb-8px" >
                 <img v-show="icon.index !== activeIndex" :src="icon.iconUrl" :alt="icon.alt" class="w-36px h-36px mb-8px" >
               </div>
-              <div class="whitespace-nowrap text-sm">{{ icon.title }}</div>
+              <div class="whitespace-nowrap text-sm">{{ icon.iconTitle }}</div>
             </div>
           </template>
         </template>
@@ -20,7 +21,7 @@
           <div class="flex-1 flex flex-col justify-center max-w-480px">
             <div class="relative text-32px leading-48px text-[#232748] font-600">{{ data.title }}</div>
             <p class="my-12px text-16px leading-24px text-[#52555F]">{{ data.decs }}</p>
-            <span :href="data.url" class="move-arrow inline-flex items-center text-16px leading-24px text-[#396FFA] font-500 cursor-pointer" @click="openModal">申请试用<ArrowRightActive class="ml-8px move" /></span>
+            <span class="move-arrow inline-flex items-center text-16px leading-24px text-[#396FFA] font-500 cursor-pointer" @click="openModal">申请试用<ArrowRightActive class="ml-8px move" /></span>
           </div>
           <div class="img-container relative flex items-center">
             <img :src="data.bannerUrl" :alt="data.alt" width="580">
@@ -47,37 +48,37 @@ export default {
       iconData: [
         [
           {
-            title: 'PDF阅读SDK',
+            iconTitle: 'PDF查看',
             iconUrl: require('~/assets/images/tools/viewer.svg'),
             iconActiveUrl: require('~/assets/images/tools/viewerActive.svg'),
             index: 0
           },
           {
-            title: 'PDF注释SDK',
+            iconTitle: 'PDF批注',
             iconUrl: require('~/assets/images/tools/annotation.svg'),
             iconActiveUrl: require('~/assets/images/tools/annotationActive.svg'),
             index: 1
           },
           {
-            title: 'PDF签名SDK',
+            iconTitle: 'PDF签名',
             iconUrl: require('~/assets/images/tools/signatures.svg'),
             iconActiveUrl: require('~/assets/images/tools/signaturesActive.svg'),
             index: 2
           },
           {
-            title: 'PDF内容编辑SDK',
+            iconTitle: 'PDF内容编辑',
             iconUrl: require('~/assets/images/tools/contEdit.svg'),
             iconActiveUrl: require('~/assets/images/tools/contEditActive.svg'),
             index: 3
           },
           {
-            title: 'PDF表单SDK',
+            iconTitle: 'PDF表单',
             iconUrl: require('~/assets/images/tools/formFill.svg'),
             iconActiveUrl: require('~/assets/images/tools/formFillActive.svg'),
             index: 4
           },
           {
-            title: 'PDF编辑SDK：页面管理',
+            iconTitle: 'PDF页面管理',
             iconUrl: require('~/assets/images/tools/docEdit.svg'),
             iconActiveUrl: require('~/assets/images/tools/docEditActive.svg'),
             index: 5
@@ -85,37 +86,37 @@ export default {
         ],
         [
           {
-            title: 'PDF加密SDK',
+            iconTitle: 'PDF安全',
             iconUrl: require('~/assets/images/tools/encrypt.svg'),
             iconActiveUrl: require('~/assets/images/tools/encryptActive.svg'),
             index: 6
           },
           {
-            title: 'PDF文件对比SDK',
+            iconTitle: 'PDF文档对比',
             iconUrl: require('~/assets/images/tools/compare.svg'),
             iconActiveUrl: require('~/assets/images/tools/compareActive.svg'),
             index: 7
           },
           {
-            title: 'PDF转换SDK',
+            iconTitle: '格式转换',
             iconUrl: require('~/assets/images/tools/conversion.svg'),
             iconActiveUrl: require('~/assets/images/tools/conversionActive.svg'),
             index: 8
           },
           {
-            title: 'OCR文字识别SDK',
+            iconTitle: 'OCR文字识别',
             iconUrl: require('~/assets/images/tools/ocr.svg'),
             iconActiveUrl: require('~/assets/images/tools/ocrActive.svg'),
             index: 9
           },
           {
-            title: '标记密文SDK',
+            iconTitle: '标记密文',
             iconUrl: require('~/assets/images/tools/notes.svg'),
             iconActiveUrl: require('~/assets/images/tools/notesActive.svg'),
             index: 10
           },
           {
-            title: '多文件压缩SDK',
+            iconTitle: '文件压缩',
             iconUrl: require('~/assets/images/tools/compress.svg'),
             iconActiveUrl: require('~/assets/images/tools/compressActive.svg'),
             index: 11
@@ -216,6 +217,23 @@ export default {
     },
     openModal () {
       this.$emit('open')
+    },
+    changeGroup (to) {
+      //         <Arrow class="btn prev absolute left-0 top-12px cursor-pointer" @click="activeGroup = (activeGroup === 1 ? 0 : 1)" /><Arrow class="btn next absolute right-0 top-12px cursor-pointer" @click="activeGroup = (activeGroup === 1 ? 0 : 1)" />
+      this.activeGroup = (this.activeGroup === 1 ? 0 : 1)
+      if (to === 'right'){
+        if (this.activeIndex <= 5) {
+          this.activeIndex = this.activeIndex + 6
+        } else {
+          this.activeIndex = this.activeIndex - 6
+        }
+      } else {
+        if (this.activeIndex > 5) {
+          this.activeIndex = this.activeIndex - 6
+        } else {
+          this.activeIndex = this.activeIndex + 6
+        }
+      }
     }
   }
 }
@@ -259,6 +277,14 @@ export default {
       }
     }
   }
+  .move-arrow {
+    svg {
+      transition: all 0.25s ease-out;
+    }
+    &:hover svg {
+      transform: translateX(8px);
+    }
+  }
   ::-webkit-scrollbar {
     scrollbar-width: none; /* firefox */
     -ms-overflow-style: none;

pages/sdk.vue

@@ -19,7 +19,9 @@
       </div>
     </div>
     <Platform />
-    <h3 class="text-[#232748] font-600 text-center my-0 mx-auto lg:(mt-80px text-44px leading-56px max-w-916px) <lg:(mt-52px mb-24px text-20px leading-28px)">ComPDFKit Capabilities Build Document Experience in Your Applications</h3>
+    <h3 class="text-[#232748] font-600 text-center my-0 mx-auto lg:(mt-80px text-44px leading-56px max-w-916px) <lg:(mt-52px mb-24px text-20px leading-28px)">
+      全面强大的PDF SDK & API技术，为您创建想要的阅读器&编辑器
+    </h3>
     <Feature class="container-sdk" @open="handlerApplyUse('trial')"></Feature>
     <!-- 平台 -->
     <div class="bg-[#F7F9FD] pb-80px pt-50px">
@@ -59,6 +61,7 @@
         :close-on-click-modal="true"
         :close-on-press-escape="false"
         @close="$refs.sdkForm.doClose()"
+        top="5vh"
         width="742px"
         lock-scroll
       >