17pdf_front_end/pages/pdf-reader/download.vue

<!--
 * @Description: 
 * @Author: 李阳滨
 * @LastEditors: 欧阳承珺
 * @Date: 2022-10-31 10:30:00
 * @LastEditTime: 2022-11-14 11:43:26
-->
<template>
  <div class="pdf-reader-wrapper">
    <!-- 17pdf reader -->
    <div
      class="footer:mt-80px top-banner relative z-1 sm:top-[-80px] sm:mb-[-80px] <sm:top-[-56px] <sm:mb-[-56px]"
    >
      <div
        class="top-banner-container w-full sm:w-full sm:flex sm:justify-between sm:items-center sm:max-w-1120px sm:mx-auto sm:my-opx sm:pt-80px sm:px-20px sm:pb-0 <sm:pt-56px <sm:px-16px <sm:pb-0px"
      >
        <div class="top-banner-text sm:w-[51.85185%] <sm:text-center">
          <h1
            class="sm:text-[46px] sm:leading-[55px] <sm:mt-32px <sm:text-[34px] <sm:leading-[41px] m-0 text-[#333]"
          >
            17PDF Reader
          </h1>
          <h2
            class="sm:my-12px sm:mx-0 sm:text-[33px] sm:leading-[50px] <sm:mt-8px <sm:mx-0 <sm:mb-12px text-[26px] leading-[39px] font-medium text-[#4d4d4d] tracking-1px"
          >
            移动端PDF文件解决方案
          </h2>
          <div
            class="desc sm:mb-34px sm:text-[18px] sm:leading-[25px] <sm:mb-24px <sm:text-[16px] <sm:leading-[22px] font-normal text-[#4d4d4dcc]"
          >
            17PDF
            Reader是一款综合型PDF阅读器和编辑器，方便您在手机和平板上阅读、浏览、注释、转换、编辑页面、添加水印、签名、填表、加密解密、扫描、打印、分享PDF文件，助力高效学习与办公！
          </div>
          <a
            class="sm:w-186px sm:h-48px sm:text-[22px] sm:leading-[33px] cursor-pointer <sm:w-full <sm:max-w-184px <sm:h-40px <sm:mb-36px <sm:text-[16px] <sm:leading-[24px] inline-flex justify-center items-center bg-[#ff4f4f] rounded-2px font-bold text-[#fff] no-underline"
            @click="moveDownload"
            >免费下载</a
          >
        </div>
        <div class="img-container sm:w-[32.037%] sm:pt-36px">
          <img
            src="http://cn-file.17pdf.com/website/download/pic_top@2x.png"
            alt=""
            class="<sm:max-w-328px <sm:mx-auto <sm:my-0 w-full align-middle"
          />
        </div>
      </div>
    </div>
    <!-- reader-wrapper 2-->
    <div class="feature-wrapper reader-wrapper bg-[#fff]">
      <div
        class="feature-content sm:flex-row-reverse sm:flex sm:justify-between sm:items-center sm:w-full sm:max-w-1120px sm:my-0 sm:mx-auto sm:py-60px sm:px-20px <sm:py-60px <sm:px-16px"
      >
        <div class="text sm:w-[50%]">
          <h3
            class="font-medium text-[#000000d8] sm:mt-0 sm:mx-0 sm:mb-20px sm:text-[36px] leading-[54px] <sm:mt-0 <sm:mx-0 <sm:mb-12px <sm:text-[26px] <sm:leading-[39px] <sm:tracking-1px <sm:text-center"
          >
            随时随地 阅读批注
          </h3>
          <div class="feature-desc">
            <div
              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] <sm:text-[16px] <sm:leading-[22px]"
            >
              支持自定义浏览/阅读模式，全屏阅读、裁边模式、TTS语音朗读等多种模式任选，给您更方便快捷的移动端阅读体验；
            </div>
            <div
              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] mt-12px <sm:text-[16px] <sm:leading-[22px] <sm:mt-8px"
            >
              阅读过程中，您可以使用高亮、手绘、图形、文本框、签名、图章等多样注释工具快速批注PDF。做笔记更高效，方便重点内容的记忆。
            </div>
          </div>
        </div>
        <div
          class="img-container sm:w-[40.740741%] <sm:mt-32px <sm:text-center"
        >
          <img
            src="~/assets/images/common/pdf_annotate.png"
            alt=""
            class="w-full <sm:max-w-440px <sm:my-0 <sm:mx-auto"
          />
        </div>
      </div>
    </div>
    <!-- convert-wrapper 3-->
    <div class="feature-wrapper convert-wrapper bg-[#fafafa]">
      <div
        class="feature-content sm:flex sm:justify-between sm:items-center sm:w-full sm:max-w-1120px sm:my-0 sm:mx-auto sm:py-60px sm:px-20px <sm:py-60px <sm:px-16px"
      >
        <div class="text sm:w-[50%]">
          <h3
            class="font-medium text-[#000000d8] sm:mt-0 sm:mx-0 sm:mb-20px sm:text-[36px] leading-[54px] <sm:mt-0 <sm:mx-0 <sm:mb-12px <sm:text-[26px] <sm:leading-[39px] <sm:tracking-1px <sm:text-center"
          >
            快速准确 转换文件
          </h3>
          <div class="feature-desc">
            <div
              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] <sm:text-[16px] <sm:leading-[22px]"
            >
              支持PDF转换为Word、Excel、PPT、TXT、JPG/PNG，支持批量转换；
            </div>
            <div
              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] mt-12px <sm:text-[16px] <sm:leading-[22px] <sm:mt-8px"
            >
              一键转档，精准快速。转换后完美保留原始数据、样式和布局。
            </div>
          </div>
        </div>
        <div
          class="img-container <sm:mt-32px <sm:text-center sm:w-[38.888889%]"
        >
          <img
            src="~/assets/images/common/pdf_converter.png"
            alt=""
            class="w-full <sm:max-w-490px <sm:my-0 <sm:mx-auto"
          />
        </div>
      </div>
    </div>
    <!-- edit-wrapper 4-->
    <div class="feature-wrapper edit-wrapper bg-[#fff]">
      <div
        class="feature-content sm:flex-row-reverse sm:flex sm:justify-between sm:items-center sm:w-full sm:max-w-1120px sm:my-0 sm:mx-auto sm:py-60px sm:px-20px <sm:py-60px <sm:px-16px"
      >
        <div class="text sm:w-[50%]">
          <h3
            class="font-medium text-[#000000d8] sm:mt-0 sm:mx-0 sm:mb-20px sm:text-[36px] leading-[54px] <sm:mt-0 <sm:mx-0 <sm:mb-12px <sm:text-[26px] <sm:leading-[39px] <sm:tracking-1px <sm:text-center"
          >
            编辑PDF 可以很简单
          </h3>
          <div class="feature-desc">
            <div
              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] <sm:text-[16px] <sm:leading-[22px]"
            >
              丰富实用的PDF编辑工具帮助您在移动设备上更方便地编辑和管理PDF页面；
            </div>
            <div
              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] mt-12px <sm:text-[16px] <sm:leading-[22px] <sm:mt-8px"
            >
              重新排序、插入、旋转、拆分/提取、删除页面；
            </div>
            <div
              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] mt-12px <sm:text-[16px] <sm:leading-[22px] <sm:mt-8px"
            >
              一键合并PDF，添加水印，加密解密，完成静态和交互式表单填写、分享和打印等。
            </div>
          </div>
        </div>
        <div class="img-container <sm:mt-32px <sm:text-center sm:w-[45.37037%]">
          <img
            src="~/assets/images/common/pic_edit.png"
            alt=""
            class="w-full <sm:max-w-490px <sm:my-0 <sm:mx-auto"
          />
        </div>
      </div>
    </div>
    <!-- manager-wrapper 5-->
    <div class="feature-wrapper manager-wrapper bg-[#fafafa]">
      <div
        class="feature-content sm:flex sm:justify-between sm:items-center sm:w-full sm:max-w-1120px sm:my-0 sm:mx-auto sm:py-60px sm:px-20px <sm:py-60px <sm:px-16px"
      >
        <div class="text sm:w-[50%]">
          <h3
            class="font-medium text-[#000000d8] sm:mt-0 sm:mx-0 sm:mb-20px sm:text-[36px] leading-[54px] <sm:mt-0 <sm:mx-0 <sm:mb-12px <sm:text-[26px] <sm:leading-[39px] <sm:tracking-1px <sm:text-center"
          >
            管理文件 轻松又高效
          </h3>
          <div class="feature-desc">
            <div
              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] <sm:text-[16px] <sm:leading-[22px]"
            >
              支持文件分享、移动、复制、重命名、压缩或删除，管理文件更轻松；
            </div>
            <div
              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] mt-12px <sm:text-[16px] <sm:leading-[22px] <sm:mt-8px"
            >
              同时支持读取系统文件、SD卡、U盘内文件，或通过WiFi传输与电脑端共享文件。
            </div>
          </div>
        </div>
        <div
          class="img-container <sm:mt-32px <sm:text-center sm:w-[40.740741%]"
        >
          <img
            src="~/assets/images/common/pdf_manage.png"
            alt=""
            class="w-full <sm:max-w-440px <sm:my-0 <sm:mx-auto"
          />
        </div>
      </div>
    </div>
    <!-- packs-wrapper 6-->
    <div class="feature-wrapper packs-wrapper sm:bg-[#fff] <sm:bg-[#fafafa]">
      <div
        class="feature-content sm:flex-row-reverse sm:flex sm:items-center sm:w-full sm:max-w-1120px sm:my-0 sm:mx-auto sm:py-60px sm:px-20px <sm:py-60px <sm:px-16px"
      >
        <div class="text sm:w-[50%]">
          <h3
            class="font-medium text-[#000000d8] sm:mt-0 sm:mx-0 sm:mb-20px sm:text-[36px] leading-[54px] <sm:mt-0 <sm:mx-0 <sm:mb-12px <sm:text-[26px] <sm:leading-[39px] <sm:tracking-1px <sm:text-center"
          >
            个性化定制 套餐任你选
          </h3>
          <div class="feature-desc">
            <div
              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] <sm:text-[16px] <sm:leading-[22px]"
            >
              购买17会员即享文档格式无限转，一键转换，轻松快捷；
            </div>
            <div
              class="feature-item flex items-baseline text-[18px] font-normal text-[#4d4d4dcc] leading-[25px] mt-12px <sm:text-[16px] <sm:leading-[22px] <sm:mt-8px"
            >
              超值年费套餐尊享高阶纯净版APP，另可根据转档需要单独购买转换券，随心定制你的个性化购买方案。
            </div>
          </div>
        </div>
        <div
          class="img-container <sm:mt-32px <sm:text-center sm:w-[29.62963%] sm:mr-[6.944444%]"
        >
          <img
            src="http://cn-file.17pdf.com/website/download/pic_06@2x.png"
            alt=""
            class="w-full max-w-280px <sm:my-0 <sm:mx-auto"
          />
        </div>
      </div>
    </div>
    <!-- 下载图片 -->
    <div
      id="download-wrapper"
      class="download-wrapper sm:pt-100px sm:px-20px sm:pb-0 sm:bg-[#fafafa] <sm:px-16px <sm:py-0"
    >
      <h3
        class="font-medium text-[#000000d8] sm:mt-20px sm:mb-10px sm:text-center sm:text-[36px] sm:leading-[54px] <sm:mt-60px <sm:mx-0px <sm:mb-12px <sm:text-[26px] <sm:leading-[39px] <sm:text-center"
      >
        Android应用商店下载
      </h3>
      <div
        class="download-content font-normal text-[#4d4d4dcc] sm:max-w-950px sm:mt-0px sm:mx-auto sm:mb-72px sm:text-center sm:text-[18px] sm:-leading-[25px] <sm:mb-24px <sm:text-[16px] <sm:leading-[22px] <sm:text-center"
      >
        免费下载安装17PDF
        Reader，您的移动PDF助手助您轻松阅读、注释、编辑、转换、管理、扫描PDF文件。<br />若您未找到相应的下载商城，我们建议您直接下载APK安装包。
      </div>
      <div
        class="download-container w-full max-w-1180px my-0 mx-auto pb-100px <sm:max-w-328px <sm:pb-44px sm:w-full sm:max-w-562px sm:my-0px sm:mx-auto sm:pb-46px tiny:w-full tiny:max-w-870px xl:w-full xl:max-w-1180px"
      >
        <!-- 1 -->
        <div
          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px"
        >
          <div
            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
          >
            华为
          </div>
          <img
            src="http://cn-file.17pdf.com/website/download/huawei.png"
            alt=""
            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
          />
          <a
            class="huawei inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
            href="https://appgallery.huawei.com/#/app/C10280806"
            target="_blank"
            data-agl-cvt="6"
            >前往下载</a
          >
        </div>
        <!-- 2 -->
        <div
          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px sm:mr-0 tiny:mr-54px <sm:mr-0"
        >
          <div
            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
          >
            小米
          </div>
          <img
            src="http://cn-file.17pdf.com/website/download/xiaomi.png"
            alt=""
            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
          />
          <a
            class="xiaomi inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
            href="https://app.mi.com/details?id=com.kdanmobile.android.pdfreader.google.pad"
            target="_blank"
            data-agl-cvt="6"
            >前往下载</a
          >
        </div>
        <!-- 3 -->
        <div
          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px tiny:mr-0 xl:mr-54px"
        >
          <div
            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
          >
            vivo
          </div>
          <img
            src="http://cn-file.17pdf.com/website/download/pic_logo_vivo.png"
            alt=""
            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
          />
          <a
            class="vivo inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
            href="http://info.appstore.vivo.com.cn/detail/89081"
            target="_blank"
            data-agl-cvt="6"
            >前往下载</a
          >
        </div>
        <!-- 4 -->
        <div
          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px sm:mr-0 tiny:mr-54px xl:mr-0px <sm:mr-0"
        >
          <div
            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
          >
            魅族
          </div>
          <img
            src="http://cn-file.17pdf.com/website/download/meizu.png"
            alt=""
            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
          />
          <a
            class="meizu inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
            href="http://app.meizu.com/apps/public/detail?package_name=com.kdanmobile.android.pdfreader.google.pad"
            target="_blank"
            data-agl-cvt="6"
            >前往下载</a
          >
        </div>
        <!-- 5 -->
        <div
          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px"
        >
          <div
            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
          >
            应用宝
          </div>
          <img
            src="http://cn-file.17pdf.com/website/download/pic_logo_yingyongbao.png"
            alt=""
            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
          />
          <a
            class="yingyongbao inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
            href="https://sj.qq.com/myapp/detail.htm?apkName=com.kdanmobile.android.pdfreader.google.pad"
            target="_blank"
            data-agl-cvt="6"
            >前往下载</a
          >
        </div>
        <!-- 6 -->
        <div
          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px sm:mr-0 tiny:mr-54px tiny:mr-0 xl:mr-54px <sm:mr-0"
        >
          <div
            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
          >
            360
          </div>
          <img
            src="http://cn-file.17pdf.com/website/download/pic_logo_360.png"
            alt=""
            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
          />
          <a
            class="safe inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
            href="http://m.app.so.com/detail/index?pname=com.kdanmobile.android.pdfreader.google.pad&amp;id=1949500"
            target="_blank"
            data-agl-cvt="6"
            >前往下载</a
          >
        </div>
        <!-- 7 -->
        <div
          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px"
        >
          <div
            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
          >
            豌豆荚
          </div>
          <img
            src="http://cn-file.17pdf.com/website/download/wandoujia.png"
            alt=""
            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
          />
          <a
            class="wandoujia inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
            href="https://www.wandoujia.com/apps/6500966"
            target="_blank"
            data-agl-cvt="6"
            >前往下载</a
          >
        </div>
        <!-- 8 -->
        <div
          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px sm:mr-0 tiny:mr-54px xl:mr-0px <sm:mr-0"
        >
          <div
            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
          >
            酷安
          </div>
          <img
            src="http://cn-file.17pdf.com/website/download/pic_logo_kuan.png"
            alt=""
            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
          />
          <a
            class="kuan inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
            href="https://www.coolapk.com/apk/com.kdanmobile.android.pdfreader.google.pad"
            target="_blank"
            data-agl-cvt="6"
            >前往下载</a
          >
        </div>
        <!-- 9 -->
        <div
          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px tiny:mr-0 xl:mr-54px"
        >
          <div
            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
          >
            百度
          </div>
          <img
            src="http://cn-file.17pdf.com/website/download/pic_logo_baidu.png"
            alt=""
            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
          />
          <a
            class="baidu inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
            href="https://mobile.baidu.com/item?pid=1335810"
            target="_blank"
            data-agl-cvt="6"
            >前往下载</a
          >
        </div>
        <!-- 10 -->
        <div
          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px sm:mr-0 tiny:mr-54px <sm:mr-0"
        >
          <div
            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
          >
            应用汇
          </div>
          <img
            src="http://cn-file.17pdf.com/website/download/yingyonghui.png"
            alt=""
            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
          />
          <a
            class="yingyonghui inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
            href="http://www.appchina.com/app/com.kdanmobile.android.pdfreader.google.pad"
            target="_blank"
            data-agl-cvt="6"
            >前往下载</a
          >
        </div>
        <!-- 11 -->
        <div
          class="download-box float-left w-254px mr-54px mb-54px py-24px px-0px bg-[#fff] rounded-8px border border-solid border-gray-[#e6e6e6] text-center <sm:w-[47.561%] <sm:h-154px <sm:py-16px <sm:px-0px <sm:rounded-5px <sm:mr-[4.87805%] <sm:mb-16px"
        >
          <div
            class="platform-name w-254px text-[18px] text-[#333] leading-[28px] <sm:w-full <sm:text-[14px] <sm:leading-[18px]"
          >
            APK
          </div>
          <img
            src="http://cn-file.17pdf.com/website/download/download_logo_apk.png"
            alt=""
            class="w-90px my-18px mx-auto <sm:w-52px <sm:my-12px <sm:mx-auto"
          />
          <a
            class="apk inline-block w-164px h-50px py-16px px-0px bg-[#f55858] rounded-25px text-[16px] font-bold text-[#fff] leading-[18px] <sm:inline-flex <sm:items-center <sm:justify-center <sm:w-104px <sm:h-28px <sm:p-0 <sm:rounded-15px <sm:text-[10px] <sm:font-semibold <sm:text-[#fff] <sm:leading-[13px]"
            href="https://cn-file.17pdf.com/downloads/PDF_Reader_KdanShare.apk"
            data-agl-cvt="6"
            >前往下载</a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'downnav',
  middleware:'user',
  head() {
    return {
      title: 'PDF Reader - PDF阅读, 编辑, 转换软件, 移动端PDF文件解决方案',
      meta: [
        {
          name: 'keywords',
          content: 'pdf阅读器，pdf浏览器，pdf转换器，pdf编辑，文件转换'
        },
        {
        hid: 'description',
        content: 'PDF Reader是一款综合型PDF阅读器和编辑器，方便您在安卓手机和平板上浏览、注释、转换、编辑、水印、OCR、加密、扫描和分享PDF文件。立即下载安装，提升您的学习与办公效率！'
       },
      ]
    }
  },
  methods: {
    moveDownload() {
      const scrollPart = document.querySelector("#download-wrapper"); 
      const top = scrollPart.getBoundingClientRect().top;
      const pageY = window.pageYOffset;
      const endPosition = top + pageY;
      const startTime = +new Date();
      const duration = 500; // ms

      function run() {
        const time = +new Date() - startTime;
        window.scrollTo(0, pageY + top * (time / duration));
        run.timer = requestAnimationFrame(run);
        if (time >= duration) {
          window.scrollTo(0, endPosition);
          cancelAnimationFrame(run.timer);
        }
      }
      requestAnimationFrame(run);
    } 
  }
}
</script>

<style scoped>
/* 17pdf reader展示區容器 */
.pdf-reader-wrapper .top-banner {
  background: #fafafa
    url(http://cn-file.17pdf.com/website/download/pic_topbanner.png) no-repeat
    center;
}

@media screen and (max-width: 767px) {
  .pdf-reader-wrapper .top-banner {
    background-size: 100% auto;
    background-position: center 80px;
    background-image: url(http://cn-file.17pdf.com/website/download/pic_topbanner_min.png);
  }
}

/* 文字前面的红点 */
.pdf-reader-wrapper
  .feature-wrapper
  .feature-content
  .text
  .feature-item:before {
  display: block;
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background-color: #ff4f4f;
  border-radius: 50%;
}

/* 个性定制容器 */
.packs-wrapper {
  background: url(http://cn-file.17pdf.com/website/download/pic_tuan.png)
    no-repeat center;
}

@media screen and (max-width: 767px) {
  .pdf-reader-wrapper .packs-wrapper {
    background-size: 100% auto;
    background-position: center top;
    background-image: url(http://cn-file.17pdf.com/website/download/pic_tuan_min.png);
  }
}

/* 下载图片容器 */
.pdf-reader-wrapper .download-wrapper .download-container:after {
  content: '';
  clear: both;
  display: block;
}

/* 下载圖片 */
.pdf-reader-wrapper .download-wrapper .download-container .download-box {
  box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 14%);
}

@media screen and (max-width: 767px) {
  .pdf-reader-wrapper .download-wrapper .download-container .download-box {
    box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 14%);
  }
}
</style>