17pdf_front_end/components/PDFReaderPro/features.vue

<template>
  <div class="choose-tools">
    <h2>解锁PDF Reader Pro无限潜力</h2>
    <div ref="myElement" class="tools container" @mouseenter="stopChange" @mouseleave="changeIndex">
      <div class="tool" v-for="(item, index) in toolsHeader" :key="index" :class="tool === index ? 'active' : ''" @click="tool = index">
        <component :is="item.src" />
        {{ item.title }}
      </div>
    </div>
    <div class="detail container" @mouseenter="stopChange" @mouseleave="changeIndex">
      <div class="img-container">
        <img :src="toolDetails[tool].src" :alt="toolDetails[tool].title">
      </div>
      <div class="text-container">
        <div class="title">{{ toolDetails[tool].title }}</div>
        <ul class="des">
          <li v-for="(items, index) in toolDetails[tool].des" :key="index">{{ items }}</li>
        </ul>
        <div class="link">
          <a :href="platform.isWindows ? $config.PDFReaderPro + '/zh-cn/windows/download' : $config.PDFReaderPro + '/zh-cn/downloading'" target="_blank" class="free">
            <WinWhite v-if="platform.isWindows" />
            <MacWhite v-else />
            免费下载
          </a>
          <a :href="platform.isWindows ? $config.PDFReaderPro + '/zh-cn/windows/store' : $config.PDFReaderPro + '/zh-cn/store'" target="_blank" class="buy">立即购买</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Edit from '~/assets/images/PDFReaderPro/tools/edit.svg?inline'
import Converter from '~/assets/images/PDFReaderPro/tools/converter.svg?inline'
import Batch from '~/assets/images/PDFReaderPro/tools/batch.svg?inline'
import Page from '~/assets/images/PDFReaderPro/tools/page.svg?inline'
import Annotation from '~/assets/images/PDFReaderPro/tools/annotation.svg?inline'
import Reader from '~/assets/images/PDFReaderPro/tools/reader.svg?inline'
import Ocr from '~/assets/images/PDFReaderPro/tools/ocr.svg?inline'
import Compare from '~/assets/images/PDFReaderPro/tools/compare.svg?inline'
import Form from '~/assets/images/PDFReaderPro/tools/form.svg?inline'
import MacWhite from '~/assets/images/PDFReaderPro/macWhite.svg?inline'
import WinWhite from '~/assets/images/PDFReaderPro/winWhite.svg?inline'

export default {
  components: {
    Edit,
    Converter,
    Batch,
    Page,
    Annotation,
    Reader,
    Ocr,
    Compare,
    Form,
    MacWhite,
    WinWhite
  },
  props: {
    platform: {
      default: {}
    },
    showBanner: {
      default: false
    }
  },
  data() {
    return {
      tool: 0,
      time: null,
      scrollLeft: 0,
      toolsHeader: [
        {
          src: 'Edit',
          title: '编辑'
        },
        {
          src: 'Converter',
          title: '转换'
        },
        {
          src: 'Batch',
          title: '批量'
        },
        {
          src: 'Page',
          title: '页面'
        },
        {
          src: 'Annotation',
          title: '注释'
        },
        {
          src: 'Reader',
          title: '阅读'
        },
        {
          src: 'Ocr',
          title: 'OCR'
        },
        {
          src: 'Compare',
          title: '对比'
        },
        {
          src: 'Form',
          title: '表单&签名'
        }
      ],
      toolDetails: [
        {
          src: '/images/PDFReaderPro/tool/edit.png',
          title: '像Word一样编辑PDF',
          des: [
            '轻松编辑PDF文档中的文本和图像。',
            '支持多功能编辑选项，可修改多种属性，创建定制文档。',
            '方便地添加、移除或修改PDF文件中的水印和背景。'
          ]
        },
        {
          src: '/images/PDFReaderPro/tool/converter.png',
          title: '无限制PDF转换',
          des: [
            '轻松将PDF文件转换为 Office 格式和图像文件。',
            '一次性同时转换多个PDF文件，省时省力。',
            '享受将PDF转换为各种格式（包括TXT、HTML、RTF 和 CSV）的灵活性。'
          ]
        },
        {
          src: '/images/PDFReaderPro/tool/batch.png',
          title: '加速工作流程',
          des: [
            '灵活地批量压缩、合并文档。',
            '一次为多个文件批量添加水印、背景、页眉、页脚等。',
            '通过设置密码增强安全性，利用批量加密功能有效保护文件。'
          ]
        },
        {
          src: '/images/PDFReaderPro/tool/page.png',
          title: '高效管理PDF页面 ',
          des: [
            '轻松合并、拆分或旋转PDF页面，以满足您的独特需求。',
            '最小化PDF文件大小，提高存储和共享效率。',
            '提取特定的PDF页面，实现精确的内容管理。'
          ]
        },
        {
          src: '/images/PDFReaderPro/tool/annotation.png',
          title: '多彩个性化注释',
          des: [
            '快速记笔记、突出显示和插入便签，同时获得最佳查看体验。',
            '使用自定义图章、高亮、删除线和下划线对注释进行个性化处理。',
            '通过无缝导出功能简化注释管理。'
          ]
        },
        {
          src: '/images/PDFReaderPro/tool/reader.png',
          title: '体验如临现场的PDF阅读',
          des: [
            '日间模式/黑暗模式自由切换，享受舒适的阅读体验。',
            '使用平滑滚动功能流畅浏览PDF文档。',
            '调整页面大小以提高可读性，让自己沉浸在无干扰的阅读中。'
          ]
        },
        {
          src: '/images/PDFReaderPro/tool/ocr.png',
          title: 'OCR文本识别',
          des: [
            '利用强大的OCR技术，将扫描的PDF转换成 90 多种语言的可搜索和可编辑文本。',
            '从图像中提取文本，轻松实现数据访问，准确率高达 99%。',
            '轻松将扫描文档转换为 Word、Excel 或其他可编辑格式。'
          ]
        },
        {
          src: '/images/PDFReaderPro/tool/compare.png',
          title: 'PDF文档智能对比',
          des: [
            '并排比较两个PDF文档，快速识别差异。',
            '对比多个PDF文档，突出不同并进行叠加显示。',
            '轻松突出显示和注释重要信息来修改和参考。'
          ]
        },
        {
          src: '/images/PDFReaderPro/tool/form.png',
          title: '轻松创建表格和签名',
          des: [
            '用文本域、复选框、下拉菜单等创建可填写的PDF。',
            '轻点几下即可使用个人电子签名签署合同。',
            '支持多种格式的签名输入（触控板、键盘、图像）。'
          ]
        }
      ],
      scrollLeft: 0
    }
  },
  mounted() {
    this.changeIndex()
  },
  watch: {
    showBanner (val) {
      if (val) {
        this.changeIndex()
      } else {
        this.stopChange()
      }
    }
  },
  methods: {
    changeIndex () {
      this.time = setInterval(() => {
        if (this.tool > 7) {
          this.tool = 0
          this.scrollLeft = 0
          this.$refs.myElement.scrollLeft = 0
        } else {
          this.tool++
          let containerWidth = this.$refs.myElement.clientWidth
          if ((this.tool + 1) * 115 > containerWidth) {
            this.scrollLeft = this.scrollLeft + 120
          }
          this.$refs.myElement.scrollLeft = this.scrollLeft
        }
      }, 5000)
    },
    stopChange () {
      clearInterval(this.time)
    }
  }
}
</script>

<style lang="scss" scoped>
.choose-tools {
  h2 {
    margin-top: 100px;
    margin-bottom: 40px;
    font-family: Source Han Sans CN;
    font-size: 36px;
    font-weight: 700;
    line-height: 56px;
    color: #192533;
    text-align: center;
  }
  .tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    background: linear-gradient(90deg, rgba(245, 247, 250, 0) 0%, #F5F7FA 52.6%, rgba(245, 247, 250, 0) 100%);
    margin-bottom: 16px;
    overflow-x: auto;
    &::-webkit-scrollbar {
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE 10+ */
      display: none; /* Chrome Safari */
    }
    .tool {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 120px;
      padding: 8px 20px;
      font-family: Source Han Sans CN;
      font-size: 18px;
      line-height: 28px;
      color: #404754;
      cursor: pointer;
      svg {
        margin-right: 4px;
      }
      &:hover {
        font-weight: 700;
        color: #0047D6;
      }
      &.active {
        background: #E0EAFF;
        font-weight: 700;
        color: #0047D6;
        border-radius: 8px;
      }
    }
  }
  .detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 500px;
    .img-container {
      width: 62%;
      img {
        width: 100%;
      }
    }
    .text-container {
      width: 38%;
      .title {
        font-family: Source Han Sans CN;
        font-size: 28px;
        font-weight: 700;
        line-height: 44px;
        color: #192233;
      }
      .des {
        margin-top: 20px;
        li {
          font-family: Source Han Sans CN;
          font-size: 18px;
          line-height: 32px;
          color: #232F48;
          opacity: .8;
        }
        li + li {
          margin-top: 8px;
        }
      }
      .link {
        margin-top: 40px;
        display: flex;
        a {
          width: 148px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4px;
          font-family: Source Han Sans CN;
          font-size: 18px;
          font-weight: 700;
        }
        a + a {
          margin-left: 16px;
        }
        .free {
          line-height: 44px;
          background: #0061F2;
          color: #FFFFFF;
          &:hover {
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),linear-gradient(0deg, #0061F2, #0061F2);
          }
          svg {
            margin-right: 4px;
          }
        }
        .buy {
          line-height: 42px;
          border: 1px solid #D3D5DB;
          color: #192233;
          &:hover {
            background: linear-gradient(0deg, rgba(0, 97, 242, 0.1), rgba(0, 97, 242, 0.1));
            border: 1px solid #0061F266;
            color: #0061F2;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 959px) {
  .choose-tools {
    h2 {
      margin-top: 48px;
      margin-bottom: 20px;
      font-size: 24px;
      line-height: 32px;
    }
    .tools {
      padding: 8px 0;
      .tool {
        min-width: 115px;
        padding: 4px;
        font-size: 14px;
        line-height: 20px;
        svg {
          width: 32px;
          height: 32px;
        }
      }
    }
    .detail {
      display: flex;
      flex-direction: column-reverse;
      min-height: none;
      .img-container {
        width: 100%;
      }
      .text-container {
        width: 100%;
        .title {
          font-size: 20px;
          line-height: 28px;
          text-align: center;
        }
        .des {
          text-align: center;
          margin-top: 20px;
          li {
            font-size: 14px;
            line-height: 20px;
            color: #232F48;
            opacity: .8;
          }
          li + li {
            margin-top: 8px;
          }
        }
        .link {
          margin-top: 20px;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          a + a {
            margin-left: 0px;
            margin-top: 16px;
          }
        }
      }
    }
  }
}
</style>