compdfkit_web_cn/components/ChooseProduct.vue

<template>
  <div class="container">
    <el-tabs v-model="activeName" tab-position="left" type="card" class="<lg:hidden">
      <el-tab-pane name="1">
        <span slot="label" class="flex justify-between items-center"><span>ComPDFKit PDF SDK</span><Arrow class="arrow" :class="activeName === 'first' && 'transform rotate-90'" /></span>
        <div class="flex flex-wrap justify-between">
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_pdf_preview.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF查看</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供强大的渲染引擎，轻松渲染复杂的PDF文档，支持自定义UI和各种功能操作，如单双页布局，连续滚动，书签，大纲和缩略图等。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_pdf_note.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF批注</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">拥有独立的注释控件。支持添加、删除、编辑、导入、导出、扁平化所有类型的PDF标记以及自定义注释，包括亮高、手绘、文本框、附注等。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_pdf_signature.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">数字签名</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">支持添加传统的电子签名和数字签名，以跟踪和加速签名工作流程，同时保证签名的真实性和安全性。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_pdf_form.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF表单填写</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">可以轻松创建、删除、编辑、填写、扁平化和打印表单域，包括文本域、复选框、单选按钮、下拉列表和签名等。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_pdf_pages.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF页面管理</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">添加PDF页面管理功能到应用程序，实现PDF文档增加空白页、删除、复制、重排、旋转、裁剪、拆分合并等页面管理的所有需求。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_pdf_edit.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF内容编辑</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">轻松添加、编辑、删除PDF中的文本和图像，同时支持更改文档内容的大小、字体和颜色等。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_pdf_protect.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF安全保护</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">通过密码、权限等多种方式对PDF文档进行保护。针对共享文件，可添加自定义的页眉页脚、水印、贝茨码来保护知识产权。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_pdf_mark.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">标记密文</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">对图像、文本和矢量图形中的敏感信息或隐私数据进行不可逆的密文处理，阻止了他人访问敏感信息。同时支持多种方式标记密文。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_pdf_transform.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转PDF/A</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">支持PDF文件转换为符合ISO标准的PDF/A文档，包括PDF/A-1a和PDF/A-1b。为长期、安全地归档电子文件提供解决方案。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_pdf_compare.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF文档对比</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供文档对比功能，对比相似的或不同版本的PDF文档。支持对比文档中的文字、图片、线条等内容。以不同颜色展示PDF文档的编辑、删除、增加等变动。</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label" class="flex justify-between items-center"><span>ComPDFKit 转档 SDK</span><Arrow class="arrow" :class="activeName === 'second' && 'transform rotate-90'" /></span>
        <div class="flex flex-wrap justify-between">
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_transform_to_word.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转Word</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">支持将PDF文件中的内容转为流排结构的数据，并保持原文件页面布局。支持字体大小、颜色、粗体、斜体和下划线等识别。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_transform_to_excel.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转Excel</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">PDF文件支持转档有边框、无边框、边框不全的Excel表格，可1:1还原单元格、原文件排版，并支持识别表格内的公式。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_transform_to_ppt.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转PPT</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供转档开发库将每页PDF内容转换为可编辑的PPT，将文本转换为文本框；识别文件内的图片并支持进行旋转、裁剪等操作。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_transform_to_txt.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转TXT</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">支持将PDF转为TXT纯文本格式，几乎所有平台都支持打开&阅读的格式，文件体积小便于储存，打开迅速无缓冲。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_transform_to_csv.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转CSV</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">ComPDFKit转档SDK支持从PDF中准确提取表格并将其转换为CSV，一个表格转换为一个CSV文件。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_transform_to_image.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转Image</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供SDK将PDF文件转换为高质量的图像格式，包括PNG和JPEG。保证所有图像质量和分辨率都将保持不变。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_transform_to_rtf.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转RTF</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供SDK轻松实现将 PDF 文件转换为可编辑的RTF（富文本格式）文件。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_transform_to_html.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转HTML</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">ComPDFKit转档SDK支持将PDF转为单页或多页的可供网页浏览器读取的HTML网页。</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="3">
        <span slot="label" class="flex justify-between items-center"><span>ComPDFKit API</span><Arrow class="arrow" :class="activeName === 'third' && 'transform rotate-90'" /></span>
        <div class="flex flex-wrap justify-between">
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_api_to_word.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To / From Word</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件和Word文件格式互转：PDF转Word、Word转PDF格式。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_api_to_excel.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To / From Excel</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件和Excel文件格式互转：PDF转Excel、 Excel转PDF格式。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_api_to_ppt.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To / From PPT</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件和PowerPoint文件格式互转：PDF转PPT、PPT转PDF格式。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_api_to_html.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To / From HTML</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件和HTML文件格式互转：PDF转HTML、HTML转PDF格式。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_api_to_image.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To Image (PNG / JPG)</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件转Image文件格式：PDF转PNG、PDF转JPG。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_api_to_text.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To Text</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件和Text文件格式互转：PDF转Text、Text转PDF格式。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_api_to_csv.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To / From CSV</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件和CSV文件格式互转：PDF转CSV、CSV转PDF格式。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_api_to_rtf.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To / From RTF</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件和RTF文件格式互转：PDF转RTF、RTF转PDF格式。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_api_to_pdf.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PNG To PDF</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PNG转PDF文件格式。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_api_ocr.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">OCR识别</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">ComPDFKit提供API接口对PDF文件、图片或扫描文档中的文字、表格进行高精度识别。支持同时识别70+种语言。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_api_doc_split.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF文档拆分</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，指定页面分割或分割特定的页面集，并将其保存为单独的PDF文件。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_api_doc_merge.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF文档合并</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">支持调用API接口，将两个文档或文档列表合并为一个PDF文档。</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="4">
        <span slot="label" class="flex justify-between items-center"><span>Document AI</span><Arrow class="arrow" :class="activeName === 'fourth' && 'transform rotate-90'" /></span>
        <div class="flex flex-wrap justify-between">
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_api_ocr.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">OCR文档识别</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">通过文档智能学习，和对大量的数据集进行模型训练，实现了精准的版面分析、表格识别和文字识别，并转换为可编辑的PDF文件，支持识别70+种语言。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_doc_ai_data.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">数据提取</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">有效提取PDF中的表格、段落、图片等数据，支持提取关键信息等。灵活导出为Excel，CSV等文件格式，或输出为结构化的JSON，XML数据等。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_doc_ai_module.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">版面分析</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">Document AI支持分析财务报表、证件、论文等文档，进行智能学习，训练模型库。精准分析该文档的区域，如页眉&页脚、文字、标题、表格、图片等。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_doc_ai_image.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">图像预处理</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">Document AI通过边缘检测、增强局部对比度、自动图像去偏、失真校正、模糊校正等操作对模糊、倾斜、褶皱的图片进行处理，得到清晰的图片。</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="5">
        <span slot="label" class="flex justify-between items-center"><span>Web Viewer</span><Arrow class="arrow" :class="activeName === 'fifth' && 'transform rotate-90'" /></span>
        <div class="flex flex-wrap justify-between">
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_pdf_preview.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF查看</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供强大的渲染引擎，轻松渲染复杂的PDF文档，支持自定义UI和各种功能操作，如单双页布局，连续滚动，书签，大纲和缩略图等。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_pdf_pages.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF页面管理</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">添加PDF页面管理功能到Web平台，实现PDF文档增加空白页、删除、复制、重排、旋转、裁剪、拆分合并等页面管理的所有需求。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_pdf_note.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF批注</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">拥有独立的注释控件。支持添加、删除、编辑、导入、导出、扁平化所有类型的PDF标记以及自定义注释，包括亮高、手绘、图章、文本框、链接等。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_pdf_form.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF表单填写</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">可以轻松创建、删除、编辑、填写、扁平化和打印表单域，包括文本域、复选框、单选按钮、下拉列表和签名等。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_pdf_compare.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF文档对比</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供文档对比功能，对比相似的或不同版本的PDF文档。支持对比文档中的文字、图片、线条等内容。以不同颜色展示PDF文档的编辑、删除、增加等变动。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_web_measure.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">测量</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">提供建筑行业解决方案，支持进行在线测量，根据比例测量两点之间的距离，计算图形面积、周长。</p>
          </div>
          <div class="w-[calc(50%-7px)] min-h-148px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
            <div class="flex items-center">
              <img src="../assets/images/home/products_icon/i_web_ui.svg" alt="">
              <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">自定义UI</span>
            </div>
            <p class="pt-4px text-16px leading-24px text-[#606972]">根据网页需要，Web Viewer提供灵活的、可自定义的工具栏，支持工具栏侧边显示。</p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-collapse v-model="activeName" accordion class="lg:hidden" @change="changeCollapse">
      <el-collapse-item title="ComPDFKit PDF SDK" name="product1">
        <div ref="mySwiper1" v-swiper:mySwiper1="swiperOption" class="swiper-container relative overflow-hidden w-full h-auto pb-40px">
          <div class="swiper-pagination absolute text-center z-2">
            <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
          </div>
          <div class="swiper-wrapper flex relative w-full h-full z-1">
            <div class="swiper-slide container relative w-full h-auto">
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_pdf_preview.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF查看</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供强大的渲染引擎，轻松渲染复杂的PDF文档，支持自定义UI和各种功能操作，如单双页布局，连续滚动，书签，大纲和缩略图等。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_pdf_note.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF批注</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">拥有独立的注释控件。支持添加、删除、编辑、导入、导出、扁平化所有类型的PDF标记以及自定义注释，包括亮高、手绘、文本框、附注等。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_pdf_signature.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">数字签名</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">支持添加传统的电子签名和数字签名，以跟踪和加速签名工作流程，同时保证签名的真实性和安全性。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_pdf_form.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF表单填写</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">可以轻松创建、删除、编辑、填写、扁平化和打印表单域，包括文本域、复选框、单选按钮、下拉列表和签名等。</p>
              </div>
            </div>
            <div class="swiper-slide container relative w-full h-auto">
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_pdf_pages.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF页面管理</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">添加PDF页面管理功能到应用程序，实现PDF文档增加空白页、删除、复制、重排、旋转、裁剪、拆分合并等页面管理的所有需求。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_pdf_edit.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF内容编辑</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">轻松添加、编辑、删除PDF中的文本和图像，同时支持更改文档内容的大小、字体和颜色等。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_pdf_protect.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF安全保护</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">通过密码、权限等多种方式对PDF文档进行保护。针对共享文件，可添加自定义的页眉页脚、水印、贝茨码来保护知识产权。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_pdf_mark.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">标记密文</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">对图像、文本和矢量图形中的敏感信息或隐私数据进行不可逆的密文处理，阻止了他人访问敏感信息。同时支持多种方式标记密文。</p>
              </div>
            </div>
            <div class="swiper-slide container relative w-full h-auto">
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_pdf_transform.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转PDF/A</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">支持PDF文件转换为符合ISO标准的PDF/A文档，包括PDF/A-1a和PDF/A-1b。为长期、安全地归档电子文件提供解决方案。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_pdf_compare.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF文档对比</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供文档对比功能，对比相似的或不同版本的PDF文档。支持对比文档中的文字、图片、线条等内容。以不同颜色展示PDF文档的编辑、删除、增加等变动。</p>
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="ComPDFKit 转档 SDK" name="product2">
        <div ref="mySwiper2" v-swiper:mySwiper2="swiperOption" class="swiper-container relative overflow-hidden w-full h-auto pb-40px">
          <div class="swiper-pagination absolute text-center z-2">
            <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
          </div>
          <div class="swiper-wrapper flex relative w-full h-full z-1">
            <div class="swiper-slide container relative w-full h-auto">
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_transform_to_word.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转Word</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">支持将PDF文件中的内容转为流排结构的数据，并保持原文件页面布局。支持字体大小、颜色、粗体、斜体和下划线等识别。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_transform_to_excel.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转Excel</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">PDF文件支持转档有边框、无边框、边框不全的Excel表格，可1:1还原单元格、原文件排版，并支持识别表格内的公式。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_transform_to_ppt.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转PPT</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供转档开发库将每页PDF内容转换为可编辑的PPT，将文本转换为文本框；识别文件内的图片并支持进行旋转、裁剪等操作。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_transform_to_txt.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转TXT</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">支持将PDF转为TXT纯文本格式，几乎所有平台都支持打开&阅读的格式，文件体积小便于储存，打开迅速无缓冲。</p>
              </div>
            </div>
            <div class="swiper-slide container relative w-full h-auto">
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_transform_to_csv.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转CSV</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">ComPDFKit转档SDK支持从PDF中准确提取表格并将其转换为CSV，一个表格转换为一个CSV文件。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_transform_to_image.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转Image</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供SDK将PDF文件转换为高质量的图像格式，包括PNG和JPEG。保证所有图像质量和分辨率都将保持不变。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_transform_to_rtf.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转RTF</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供SDK轻松实现将 PDF 文件转换为可编辑的RTF（富文本格式）文件。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_transform_to_html.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF转HTML</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">ComPDFKit转档SDK支持将PDF转为单页或多页的可供网页浏览器读取的HTML网页。</p>
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="ComPDFKit API" name="product3">
        <div ref="mySwiper3" v-swiper:mySwiper3="swiperOption" class="swiper-container relative overflow-hidden w-full h-auto pb-40px">
          <div class="swiper-pagination absolute text-center z-2">
            <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
          </div>
          <div class="swiper-wrapper flex relative w-full h-full z-1">
            <div class="swiper-slide container relative w-full h-auto">
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_api_to_word.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To / From Word</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件和Word文件格式互转：PDF转Word、Word转PDF格式。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_api_to_excel.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To / From Excel</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件和Excel文件格式互转：PDF转Excel、 Excel转PDF格式。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_api_to_ppt.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To / From PPT</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件和PowerPoint文件格式互转：PDF转PPT、PPT转PDF格式。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_api_to_html.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To / From HTML</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件和HTML文件格式互转：PDF转HTML、HTML转PDF格式。</p>
              </div>
            </div>
            <div class="swiper-slide container relative w-full h-auto">
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_api_to_image.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To Image (PNG / JPG)</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件转Image文件格式：PDF转PNG、PDF转JPG。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_api_to_text.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To Text</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件和Text文件格式互转：PDF转Text、Text转PDF格式。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_api_to_csv.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To / From CSV</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件和CSV文件格式互转：PDF转CSV、CSV转PDF格式。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_api_to_rtf.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF To / From RTF</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PDF文件和RTF文件格式互转：PDF转RTF、RTF转PDF格式。</p>
              </div>
            </div>
            <div class="swiper-slide container relative w-full h-auto">
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_api_to_pdf.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PNG To PDF</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，帮助您的APP实现PNG转PDF文件格式。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_api_ocr.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">OCR识别</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">ComPDFKit提供API接口对PDF文件、图片或扫描文档中的文字、表格进行高精度识别。支持同时识别70+种语言。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_api_doc_split.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF文档拆分</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供API接口，指定页面分割或分割特定的页面集，并将其保存为单独的PDF文件。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_api_doc_merge.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF文档合并</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">支持调用API接口，将两个文档或文档列表合并为一个PDF文档。</p>
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="Document AI" name="product4">
        <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
          <div class="flex items-center">
            <img src="../assets/images/home/products_icon/i_api_ocr.svg" alt="">
            <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">OCR文档识别</span>
          </div>
          <p class="pt-4px text-16px leading-24px text-[#606972]">通过文档智能学习，和对大量的数据集进行模型训练，实现了精准的版面分析、表格识别和文字识别，并转换为可编辑的PDF文件，支持识别70+种语言。</p>
        </div>
        <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
          <div class="flex items-center">
            <img src="../assets/images/home/products_icon/i_doc_ai_data.svg" alt="">
            <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">数据提取</span>
          </div>
          <p class="pt-4px text-16px leading-24px text-[#606972]">有效提取PDF中的表格、段落、图片等数据，支持提取关键信息等。灵活导出为Excel，CSV等文件格式，或输出为结构化的JSON，XML数据等。</p>
        </div>
        <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
          <div class="flex items-center">
            <img src="../assets/images/home/products_icon/i_doc_ai_module.svg" alt="">
            <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">版面分析</span>
          </div>
          <p class="pt-4px text-16px leading-24px text-[#606972]">Document AI支持分析财务报表、证件、论文等文档，进行智能学习，训练模型库。精准分析该文档的区域，如页眉&页脚、文字、标题、表格、图片等。</p>
        </div>
        <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-40px">
          <div class="flex items-center">
            <img src="../assets/images/home/products_icon/i_doc_ai_image.svg" alt="">
            <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">图像预处理</span>
          </div>
          <p class="pt-4px text-16px leading-24px text-[#606972]">Document AI通过边缘检测、增强局部对比度、自动图像去偏、失真校正、模糊校正等操作对模糊、倾斜、褶皱的图片进行处理，得到清晰的图片。</p>
        </div>
      </el-collapse-item>
      <el-collapse-item title="Web Viewer" name="product5">
        <div ref="mySwiper5" v-swiper:mySwiper5="swiperOption" class="swiper-container relative overflow-hidden w-full h-auto pb-40px">
          <div class="swiper-pagination absolute text-center z-2">
            <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
          </div>
          <div class="swiper-wrapper flex relative w-full h-full z-1">
            <div class="swiper-slide container relative w-full h-auto">
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_pdf_preview.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF查看</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供强大的渲染引擎，轻松渲染复杂的PDF文档，支持自定义UI和各种功能操作，如单双页布局，连续滚动，书签，大纲和缩略图等。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_pdf_pages.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF页面管理</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">添加PDF页面管理功能到Web平台，实现PDF文档增加空白页、删除、复制、重排、旋转、裁剪、拆分合并等页面管理的所有需求。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_pdf_note.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF批注</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">拥有独立的注释控件。支持添加、删除、编辑、导入、导出、扁平化所有类型的PDF标记以及自定义注释，包括亮高、手绘、图章、文本框、链接等。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_pdf_form.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF表单填写</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">可以轻松创建、删除、编辑、填写、扁平化和打印表单域，包括文本域、复选框、单选按钮、下拉列表和签名等。</p>
              </div>
            </div>
            <div class="swiper-slide container relative w-full h-auto">
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_pdf_compare.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">PDF文档对比</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供文档对比功能，对比相似的或不同版本的PDF文档。支持对比文档中的文字、图片、线条等内容。以不同颜色展示PDF文档的编辑、删除、增加等变动。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px mb-14px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_web_measure.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">测量</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">提供建筑行业解决方案，支持进行在线测量，根据比例测量两点之间的距离，计算图形面积、周长。</p>
              </div>
              <div class="w-100% min-h-143px border-1 border-[#DFEAFF] rounded-8px p-16px pr-18px">
                <div class="flex items-center">
                  <img src="../assets/images/home/products_icon/i_web_ui.svg" alt="">
                  <span class="pl-12px text-16px leading-24px text-[#3C4247] font-700">自定义UI</span>
                </div>
                <p class="pt-4px text-16px leading-24px text-[#606972]">根据网页需要，Web Viewer提供灵活的、可自定义的工具栏，支持工具栏侧边显示。</p>
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import swiper from 'swiper'
import { directive } from 'vue-awesome-swiper'
import Arrow from '~/assets/images/icons/arrow.svg?inline'

export default {
  directives: {
    swiper: directive
  },
  components: {
    Arrow
  },
  data() {
    return {
      activeName: '1',
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  },
  methods: {
    changeCollapse() {
      this.$refs.mySwiper1.swiper.slideTo(0, 0, false)
      this.$refs.mySwiper2.swiper.slideTo(0, 0, false)
      this.$refs.mySwiper3.swiper.slideTo(0, 0, false)
      this.$refs.mySwiper5.swiper.slideTo(0, 0, false)
    }
  }
}
</script>

<style lang="scss" scoped>
.arrow {
  transition: transform 0.2s linear 0s, top 0.2s linear 0s;
}
::v-deep .el-tabs {
  .el-tabs__header {
    border-bottom: none;
    margin-right: 28px;
  }
  .el-tabs__nav {
    border: none
  }
  .el-tabs__item {
    padding: 18px 23px 18px 28px;
    width: 328px;
    height: 60px;
    border-top: none !important;
    border-left: 8px solid transparent !important;
    border-right: none !important;
    border-bottom: none !important;
    font-size: 20px;
    line-height: 24px;
    color: #AAAEB2;
    font-weight: 700;
  }
  .el-tabs__item.is-active {
    border-top: none;
    border-left: 8px solid #1460F3 !important;
    border-right: none;
    border-bottom: none;
    border-radius: 10px;
    background: rgba(20, 96, 243, 0.1);
    color: #18191B;
  }
}
::v-deep .el-collapse {
    border-top: none;
    border-bottom: none;
  .el-collapse-item__header {
    padding: 18px 20px 18px 28px;
    margin-bottom: 16px;
    height: 60px;
    border-left: 8px solid transparent;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(202, 221, 255, 0.5);
    font-size: 20px;
    line-height: 24px;
    color: #AAAEB2;
    font-weight: 700;
    &.is-active {
      background: rgba(20, 96, 243, 0.1);
      color: #18191B;
      border-left-color: #1460F3;
      box-shadow: none;
    }
  }
  .el-collapse-item__arrow {
    transform: rotate(90deg);
    &.is-active {
      transform: rotate(-90deg);
    }
  }
  .el-collapse-item__wrap {
    border-bottom: none;
  }
  .el-collapse-item__content {
    padding-bottom: 0;
  }
}
.swiper-container {
  .swiper-wrapper {
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }
  .swiper-container-android .swiper-slide,
  .swiper-wrapper {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
  }
  .swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
  }
}
.swiper-container-horizontal > .swiper-pagination {
  bottom: 20px;
  left: 0;
  width: 100%;
  font-size: 0;
  ::v-deep .swiper-pagination-bullet {
    width: 8px;
    height: 4px;
    display: inline-block;
    margin: 0 2px;
    border-radius: 4px;
    background-color: #D8D8D8;;
    cursor: pointer;
    transition: width 0.3s;
    &.swiper-pagination-bullet-active {
      width: 27px;
      background: #1460F3;
    }
  }
}
</style>