17pdf_front_end/components/sdk/Feature.vue

<template>
  <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 z-2 prev absolute left-0 top-12px mr-5px cursor-pointer" @click.prevent ="changeGroup('left')" />
        <template v-for="(iconList, i) in iconData">
          <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" :class="[icon.index === activeIndex ? 'font-600' : '']">{{ icon.iconTitle }}</div>
            </div>
          </template>
        </template>
        <Arrow class="btn z-2 next absolute right-0 top-12px ml-5px cursor-pointer" @click.prevent ="changeGroup('right')" />
      </div>
      <div v-show="i === activeIndex" v-for="(data, i) in featureData" :key="i" class="feature-item-container">
        <div class="flex justify-between flex-row-reverse py-80px">
          <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 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">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ArrowRightActive from '~/assets/images/tools/arrowRightActive.svg?inline'
import Arrow from '~/assets/images/tools/arrow.svg?inline'
export default {
  components: {
    ArrowRightActive,
    Arrow
  },
  data () {
    return {
      activeGroup: 0,
      index: 0,
      activeIndex: 0,
      iconData: [
        [
          {
            iconTitle: 'PDF查看',
            iconUrl: require('~/assets/images/tools/viewer.svg'),
            iconActiveUrl: require('~/assets/images/tools/viewerActive.svg'),
            index: 0
          },
          {
            iconTitle: 'PDF批注',
            iconUrl: require('~/assets/images/tools/annotation.svg'),
            iconActiveUrl: require('~/assets/images/tools/annotationActive.svg'),
            index: 1
          },
          {
            iconTitle: 'PDF签名',
            iconUrl: require('~/assets/images/tools/signatures.svg'),
            iconActiveUrl: require('~/assets/images/tools/signaturesActive.svg'),
            index: 2
          },
          {
            iconTitle: 'PDF内容编辑',
            iconUrl: require('~/assets/images/tools/contEdit.svg'),
            iconActiveUrl: require('~/assets/images/tools/contEditActive.svg'),
            index: 3
          },
          {
            iconTitle: 'PDF表单',
            iconUrl: require('~/assets/images/tools/formFill.svg'),
            iconActiveUrl: require('~/assets/images/tools/formFillActive.svg'),
            index: 4
          },
          {
            iconTitle: 'PDF页面管理',
            iconUrl: require('~/assets/images/tools/docEdit.svg'),
            iconActiveUrl: require('~/assets/images/tools/docEditActive.svg'),
            index: 5
          }
        ],
        [
          {
            iconTitle: 'PDF安全',
            iconUrl: require('~/assets/images/tools/encrypt.svg'),
            iconActiveUrl: require('~/assets/images/tools/encryptActive.svg'),
            index: 6
          },
          {
            iconTitle: 'PDF文档对比',
            iconUrl: require('~/assets/images/tools/compare.svg'),
            iconActiveUrl: require('~/assets/images/tools/compareActive.svg'),
            index: 7
          },
          {
            iconTitle: '格式转换',
            iconUrl: require('~/assets/images/tools/conversion.svg'),
            iconActiveUrl: require('~/assets/images/tools/conversionActive.svg'),
            index: 8
          },
          {
            iconTitle: 'OCR文字识别',
            iconUrl: require('~/assets/images/tools/ocr.svg'),
            iconActiveUrl: require('~/assets/images/tools/ocrActive.svg'),
            index: 9
          },
          {
            iconTitle: '标记密文',
            iconUrl: require('~/assets/images/tools/notes.svg'),
            iconActiveUrl: require('~/assets/images/tools/notesActive.svg'),
            index: 10
          },
          {
            iconTitle: '文件压缩',
            iconUrl: require('~/assets/images/tools/compress.svg'),
            iconActiveUrl: require('~/assets/images/tools/compressActive.svg'),
            index: 11
          },
        ]
      ],
      featureData: [
        {
          title: 'PDF阅读SDK',
          alt: 'Viewer',
          decs: '专业的PDF SDK提供了强大的PDF查看功能，为您的应用程序带来流畅，舒适的阅读体验。提供放大镜，多种翻页模式，旋转等适配不同开发平台的阅读习惯。通过文本搜索，书签，大纲等方式，快速定位PDF内容。提供夜间模式，自定义主题等来适应不同阅读环境。',
          bannerUrl: '/images/tools/viewer.png',
          index: 0
        },
        {
          title: 'PDF注释SDK',
          alt: 'Annotations',
          decs: '丰富的PDF注释类型，使您的应用程序支持添加，设置，导入，导出，扁平化，注解，回复，管理，显示/隐藏几十种注释，包括文字、图章、亮高、下划线、删除线、波浪线、形状（矩形、圆形等），箭头、线条、自由画笔，链接，语音等。',
          bannerUrl: '/images/tools/annotation.png',
          index: 1
        },
        {
          title: 'PDF签名SDK',
          alt: 'Signatures',
          decs: '提供电子签名和数字签名，支持多种签名类型签署文档如图片签名，基于字体的签名，触控笔或手写笔签名，以及包含签名人身份信息的数字签名，满足您应用程序所有的签名需求，轻松签署和验证PDF文档，保证文档的完整性和真实性。',
          bannerUrl: '/images/tools/signatures.png',
          index: 2
        },
        {
          title: 'PDF内容编辑SDK',
          alt: 'Content Editor',
          decs: '像编辑Word文档一样，灵活地编辑PDF文字和图片。集成PDF SDK，使在您的app中添加，删除，替换或者移动PDF文档中的文字和图片成为可能，并支持查看和设置属性，如字体，颜色，大小等。',
          bannerUrl: '/images/tools/contEditor.png',
          index: 3
        },
        {
          title: 'PDF表单SDK',
          alt: 'Form Filling',
          decs: '我们的PDF SDK提供了完善的PDF表格功能，让你的应用程序支持轻松创建和填写PDF表格。提供多种表单域工具，如文字框，下拉框，列表框，单选框、复选框、按钮等，使您app的用户轻松设计和布局表单。',
          bannerUrl: '/images/tools/formFill.png',
          index: 4
        },
        {
          title: 'PDF编辑SDK：页面管理',
          alt: 'Document Editor',
          decs: '提供便捷的PDF页面管理功能，支持轻松操作和编辑PDF页面，如移动、添加、删除、PDF合并、PDF拆分、替换、旋转PDF页面。',
          bannerUrl: '/images/tools/docEditor.png',
          index: 5
        },
        {
          title: 'PDF加密SDK',
          alt: 'PDF Encrypt',
          decs: '为您的app/系统，提供密码保护功能，轻松为文档设置不同加密级别的加密方式，如RC4和高级加密算法AES-128 & AES-256。甚至可以为不同的角色设置不同的文档权限，如阅读，打印，复制，分享等。支持给PDF文档批量添加水印、页眉页脚、贝茨码等',
          bannerUrl: '/images/tools/encrypt.png',
          index: 6
        },
        {
          title: 'PDF文件对比SDK',
          alt: 'PDF Compare',
          decs: '集成PDF文档对比功能，逐字、逐段、逐页进行精准对比并分类列出不同版本的文档中新增、替换、删除的文本。提供覆盖对比方式有效对比图纸类文档。',
          bannerUrl: '/images/tools/compare.png',
          index: 7
        },
        {
          title: 'PDF转换SDK',
          alt: 'PDF Conversion',
          decs: '基于AI的PDF转换库，拥有更高的转换精准度，快速高效地将PDF文件转换成其他格式，或者将其他格式的文件转换成PDF文档，支持的格式包括Word, Excel, PPT, PNG, JPG, RTF, CSV, HTML等。',
          bannerUrl: '/images/tools/conversion.png',
          index: 8
        },
        {
          title: 'OCR文字识别SDK',
          alt: 'PDF OCR',
          decs: '提供强大的OCR图片文字识别SDK开发包，让你可以在你的应用程序中轻松识别图片或者扫描文件中的文字。支持文件版面分析和图片预处理功能，提高低质量图片的识别效果。支持识别常用的中文，英文，西班牙语，法语等几十种语言。',
          bannerUrl: '/images/tools/ocr.png',
          index: 9
        },
        {
          title: '标记密文SDK',
          alt: 'PDF Notes',
          decs: '集成标记密文功能，在应用程序中轻松覆盖并移除PDF文档中的敏感信息或者不可外泄的文字或图片信息。支持设置标记的样式、颜色、文字说明等，擦除的信息无法恢复。',
          bannerUrl: '/images/tools/notes.png',
          index: 10
        },
        {
          title: '多文件压缩SDK',
          alt: 'PDF Compress',
          decs: '优秀的文档压缩SDK/API，让你可以在你的应用程序中轻松压缩或优化一个或批量的PDF文件，删除冗余数据，降低文件存储和传输压力。支持不同级别的文档压缩。',
          bannerUrl: '/images/tools/compress.png',
          index: 11
        }
      ]
    }
  },
  methods: {
    changeIndex (i) {
      this.activeIndex = i
    },
    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
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .main-content {
    font-family: 'Poppins';
    .main-features {
      position: sticky;
      top: 0rem;
      display: flex;
      flex-direction: column;
      height: 100vh;
      padding-top: 70px;
      overflow: hidden;
      .video-container {
        position: relative;
        display: flex;
        flex-grow: 1;
      }
      .text-container {
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        & :nth-child(1) {
            .mx-8px {
              padding-left: 12px;
              padding-right: 12px;
            }
          }
        .text-item {
          .line-container {
            height: 2px;
            overflow: hidden;
            opacity: 1;
          }
        }
      }
      .text-container::-webkit-scrollbar {
          display: none; /* Chrome Safari */
      }
    }
  }
  .move-arrow {
    svg {
      transition: all 0.25s ease-out;
    }
    &:hover svg {
      transform: translateX(8px);
    }
  }
  ::-webkit-scrollbar {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none;
    display: none; /* Chrome Safari */
  }
  .line-container {
    position: relative;
    height: 2px;
    overflow: hidden;
    opacity: 1;
    &::before {
      content: '';
      position: absolute;
      top: 1px;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #E1E3E8;
    }
  }
  .next {
    transform: rotate(180deg);
  }
  .line {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #396FFA;
    transform-origin: left center;
  }
  .main-content .main-features .text-container .text-item .title {
    font-size: 18px;
  }
  .main-content .main-features .video-container {
    margin-bottom: 3.125rem;
  }
  @media screen and (min-width: 1280px) {
    .main-content .main-features .text-container .text-item .title {
      font-size: 22px;
    }
  }
</style>