页面新增

pages/converterfaq.vue

@@ -0,0 +1,104 @@
+<!--
+ * @Description: 
+ * @Author: 李阳滨
+ * @LastEditors: 李阳滨
+ * @Date: 2022-10-24 9:30:20
+ * @LastEditTime: 2022-10-24 13:32:08
+-->
+<template>
+    <ul class="px-24px">
+        <li class="mt-22px">
+            <h3 class="font-bold text-[16px] leading-[22px] text-[#333] mb-6px">常见失败原因及解决方案</h3>
+            <table cellspacing="0" class="w-full">
+                <tbody>
+                    <tr>
+                        <td class="w-[30%] text-[#666] text-[14px] pl-6px leading-24px">原因</td>
+                        <td class="text-[#666] text-[14px] pl-6px leading-24px">解决方法</td>
+                    </tr>
+                    <tr>
+                        <td class="w-[30%] text-[#666] text-[14px] pl-6px leading-24px">转换券不足</td>
+                        <td class="text-[#666] text-[14px] pl-6px leading-24px">充值转换券或订阅套餐</td>
+                    </tr>
+                    <tr>
+                        <td class="w-[30%] text-[#666] text-[14px] pl-6px leading-24px">原文件损坏无法打开</td>
+                        <td class="text-[#666] text-[14px] pl-6px leading-24px">检查原文件是否损坏</td>
+                    </tr>
+                    <tr>
+                        <td class="w-[30%] text-[#666] text-[14px] pl-6px leading-24px">原文件加密无法打开</td>
+                        <td class="text-[#666] text-[14px] pl-6px leading-24px">更改原文件权限为可读取模式</td>
+                    </tr>
+                    <tr>
+                        <td class="w-[30%] text-[#666] text-[14px] pl-6px leading-24px">无法识别的文件类型</td>
+                        <td class="text-[#666] text-[14px] pl-6px leading-24px">暂时不支持该格式转档；文件格式与其后缀名不符</td>
+                    </tr>
+                    <tr>
+                        <td class="w-[30%] text-[#666] text-[14px] pl-6px leading-24px">未知错误</td>
+                        <td class="text-[#666] text-[14px] pl-6px leading-24px">加入17PDF官方QQ群（188917181）咨询</td>
+                    </tr>
+                </tbody>
+            </table>
+        </li>
+        <li class="mt-22px">
+            <h3 class="font-bold text-[16px] leading-[22px] text-[#333] mb-6px">为什么图片格式的文件转档效果不好？</h3>
+            <p class="text-[#666] text-[14px] pl-[20px] leading-[18.5px]">如原文件为图片格式或者通过扫描文档保存为PDF文件的，转档后的文件可能无法选取文字进行高亮等编辑。</p>
+        </li>
+        <li class="mt-22px">
+            <h3 class="font-bold text-[16px] leading-[22px] text-[#333] mb-6px">文件转档后出现乱码？</h3>
+            <p class="text-[#666] text-[14px] pl-[20px] leading-[18.5px]">如果是原文件就有乱码问题，先处理好文件再提交转档；<br>如果原文件正常而转档后目标文件乱码，请联系我们处理。</p>
+        </li>
+        <li class="mt-22px">
+            <h3 class="font-bold text-[16px] leading-[22px] text-[#333] mb-6px">转档失败会扣券吗？</h3>
+            <p class="text-[#666] text-[14px] pl-[20px] leading-[18.5px]">不会，请放心重试。</p>
+        </li>
+        <li class="mt-22px">
+            <h3 class="font-bold text-[16px] leading-[22px] text-[#333] mb-6px">转换后的文件保存在哪里？</h3>
+            <p class="text-[#666] text-[14px] pl-[20px] leading-[18.5px]">转换成功的文件默认保存路径为文档/17PDF/Converted。</p>
+        </li>
+        <li class="mt-22px">
+            <h3 class="font-bold text-[16px] leading-[22px] text-[#333] mb-6px">支持哪些格式转换？</h3>
+            <p class="text-[#666] text-[14px] pl-[20px] leading-[18.5px]">支持PDF to Word、PPT、Excel、TXT、JPG/PNG无限次数转换。</p>
+        </li>
+        <li class="bottom mt-22px">
+            <h3 class="font-bold text-[16px] leading-[22px] text-[#333] mb-6px">联系我们</h3>
+            <p class="text-[#666] text-[14px] pl-[20px] leading-[18.5px]">加入17PDF官方QQ 群188917181咨询，即时为您解答相关问题。</p>
+        </li>
+    </ul>
+</template>
+
+<script>
+export default {
+    layout: 'custom',
+    head: {
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' },
+    ]
+  }
+}
+</script>
+
+<style>
+body {
+    margin: 8px;
+    min-width:0px;
+}
+h3:before {
+    width: 6px;
+    height: 14px;
+    background: rgb(255,79,79);
+    content: '';
+    display: inline-block;
+    margin-right: 14px;
+    vertical-align: top;
+    margin-top: 4px;
+}
+table {
+    border-right: 1px solid #999;
+    border-top: 1px solid #999;
+}
+td {
+    border-left: 1px solid #999;
+    border-bottom: 1px solid #999;
+}
+
+</style>

pages/question.vue

@@ -0,0 +1,314 @@
+<template>
+    <div class="question w-full relative">
+        <h1 class="text-[#333] text-[36px] leading-[1.1] mb-0px mt-40px mx-[10%] ">常见问题</h1>
+        <div class="row pt-24px px-[10%] pb-60px mx-[-15px]">
+            <div class="menu float-left ml-15px">
+                <ul class="mb-10px">
+                    <a href="#reading">
+                        <li
+class=" w-192px h-48px leading-[48px] text-center text-[#333] text-[16px] bg-[fafafa] cursor-pointer"
+                            value="reading" :class="{ active: '#reading' == ins.hash }" @click=" active('#reading')">
+                            文件阅读
+                        </li>
+                    </a>
+
+                    <a href="#management">
+                        <li
+class=" w-192px h-48px leading-[48px] text-center text-[#333] text-[16px] bg-[fafafa] cursor-pointer"
+                            value="management" :class="{ active: '#management' == ins.hash}"
+                            @click=" active('#management')">
+                            文件管理
+                        </li>
+                    </a>
+
+
+                    <a href="#note">
+                        <li
+class=" w-192px h-48px leading-[48px] text-center text-[#333] text-[16px] bg-[fafafa] cursor-pointer"
+                            value="note" :class="{ active: '#note' == ins.hash}" @click=" active('#note')">
+                            文件注释
+                        </li>
+                    </a>
+                    <a href="#scan">
+                        <li
+class=" w-192px h-48px leading-[48px] text-center text-[#333] text-[16px] bg-[fafafa] cursor-pointer"
+                            value="scan" :class="{ active: '#scan' == ins.hash}" @click=" active('#scan')">
+                            文件扫描
+                        </li>
+                    </a>
+
+
+                    <a href="#convert">
+                        <li
+class=" w-192px h-48px leading-[48px] text-center text-[#333] text-[16px] bg-[fafafa] cursor-pointer"
+                            value="convert" :class="{ active: '#convert' == ins.hash}" @click=" active('#convert')">
+                            格式转换
+                        </li>
+                    </a>
+
+                    <a href="#payment">
+                        <li
+class=" w-192px h-48px leading-[48px] text-center text-[#333] text-[16px] bg-[fafafa] cursor-pointer"
+                            value="payment" :class="{ active: '#payment' == ins.hash}" @click=" active('#payment')">
+                            支付问题
+                        </li>
+                    </a>
+
+                </ul>
+            </div>
+
+            <div class="content ml-257px text-[#333]">
+                <!-- 文件阅读 -->
+                <div class="list reading  hidden" :class="{active: '#reading' == ins.hash}">
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">1.是否支持护眼模式</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            目前有三种阅读模式：日间模式、夜间模式、柔和模式，满足用户在不同环境下看书的需求，有效缓解眼睛疲劳，保护视力。
+                        </p>
+                    </div>
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">2.如何使用纯文字模式（文字转语音TTS）？</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            打开PDF文档，点击右上角More按钮；点击选择 TTS 即可转换文本模式为语音模式；该功能需要手机自带语音引擎才能使用，
+                            如无语音引擎需到外部下载第三方语音引擎即可使用。
+                        </p>
+                    </div>
+                </div>
+                <!-- 文件管理 -->
+                <div class="list management hidden" :class="{active: '#management' == ins.hash}">
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">1.如何移动&amp;管理文件？</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            <span
+                                class="w-8px h-8px inline-block rounded-[100%] bg-[#333] mr-12px ml-4px"></span>点击工具栏的“管理”按钮，然后“移动”文件<br>
+                            <span
+                                class="w-8px h-8px inline-block rounded-[100%] bg-[#333] mr-12px ml-4px"></span>长按选中对应文件，然后“移动”文件<br>
+                            <span
+                                class="w-8px h-8px inline-block rounded-[100%] bg-[#333] mr-12px ml-4px"></span>选择一个文件夹，然后点击“移动”文件将文件移动到指定文件夹
+                        </p>
+                    </div>
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">2.如何分享文件链接？</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            点击“分享”；选择“以链接形式分享”，收到链接的用户不需下载任何PDF文件即可在浏览器上直接阅读文件
+                        </p>
+                    </div>
+                </div>
+                <!-- 文件注释 -->
+                <div class="list note hidden" :class="{active: '#note' == ins.hash}">
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">1.如何使用手绘&amp;手写？</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            <span
+                                class="w-8px h-8px inline-block rounded-[100%] bg-[#333] mr-12px ml-4px"></span>点击注释按钮可使用、退出该功能<br>
+                            <span
+                                class="w-8px h-8px inline-block rounded-[100%] bg-[#333] mr-12px ml-4px"></span>点击并长按图标调整颜色、笔刷大小和透明度
+                        </p>
+                    </div>
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">2.如何移除PDF文件注释？</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            <span
+                                class="w-8px h-8px inline-block rounded-[100%] bg-[#333] mr-12px ml-4px"></span>点击选择需要移除的注释<br>
+                            <span
+                                class="w-8px h-8px inline-block rounded-[100%] bg-[#333] mr-12px ml-4px"></span>点击弹出对话框中“清除”选项去除注释
+                        </p>
+                    </div>
+                </div>
+                <!-- 文件扫描 -->
+                <div class="list scan hidden" :class="{active: '#scan' == ins.hash}">
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">1.如何使用PDF扫描&amp;转档功能？</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            <span
+                                class="w-8px h-8px inline-block rounded-[100%] bg-[#333] mr-12px ml-4px"></span>点击相机快速扫描文件<br>
+                            <span
+                                class="w-8px h-8px inline-block rounded-[100%] bg-[#333] mr-12px ml-4px"></span>点击分享和保存到PDF将扫描文件保存为PDF文件<br>
+                            <span
+                                class="w-8px h-8px inline-block rounded-[100%] bg-[#333] mr-12px ml-4px"></span>转档后可对文件进行编辑
+                        </p>
+                    </div>
+                </div>
+                <!-- 格式转换 -->
+                <div class="list convert hidden" :class="{active: '#convert' == ins.hash}">
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">1.常见失败原因及解决方案</h3>
+                        <table border="1">
+                            <thead>
+                                <tr>
+                                    <td
+                                        class="h-30px leading-[40px] text-[16px] px-10px text-[#333] border-solid border-gray-[#000] border">
+                                        原因</td>
+                                    <td
+                                        class="h-30px leading-[40px] text-[16px] px-10px text-[#333] border-solid border-gray-[#000] border">
+                                        解决方法</td>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td
+                                        class="h-30px leading-[40px] text-[16px] px-10px text-[#333] border-solid border-gray-[#000] border">
+                                        转换券不足</td>
+                                    <td
+                                        class="h-30px leading-[40px] text-[16px] px-10px text-[#333] border-solid border-gray-[#000] border">
+                                        充值转换券或订阅套餐</td>
+                                </tr>
+                                <tr>
+                                    <td
+                                        class="h-30px leading-[40px] text-[16px] px-10px text-[#333] border-solid border-gray-[#000] border">
+                                        原文件损坏无法打开</td>
+                                    <td
+                                        class="h-30px leading-[40px] text-[16px] px-10px text-[#333] border-solid border-gray-[#000] border">
+                                        检查原文件是否损坏</td>
+                                </tr>
+                                <tr>
+                                    <td
+                                        class="h-30px leading-[40px] text-[16px] px-10px text-[#333] border-solid border-gray-[#000] border">
+                                        原文件加密无法打开</td>
+                                    <td
+                                        class="h-30px leading-[40px] text-[16px] px-10px text-[#333] border-solid border-gray-[#000] border">
+                                        更改原文件权限为可读取模式</td>
+                                </tr>
+                                <tr>
+                                    <td
+                                        class="h-30px leading-[40px] text-[16px] px-10px text-[#333] border-solid border-gray-[#000] border">
+                                        无法识别的文件类型</td>
+                                    <td
+                                        class="h-30px leading-[40px] text-[16px] px-10px text-[#333] border-solid border-gray-[#000] border">
+                                        暂时不支持该格式转档；文件格式与其后缀名不符</td>
+                                </tr>
+                                <tr>
+                                    <td
+                                        class="h-30px leading-[40px] text-[16px] px-10px text-[#333] border-solid border-gray-[#000] border">
+                                        未知错误</td>
+                                    <td
+                                        class="h-30px leading-[40px] text-[16px] px-10px text-[#333] border-solid border-gray-[#000] border">
+                                        加入17PDF官方QQ群（188917181）咨询</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">2.支持哪些格式转换？</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            <span class="w-8px h-8px inline-block rounded-[100%] bg-[#333] mr-12px ml-4px"></span>支持PDF
+                            to Word、PPT、Excel、TXT、JPG/PNG无限次数转换
+                        </p>
+                    </div>
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">3.为什么图片格式的文件转档效果不好？</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            如原文件为图片格式或者通过扫描文档保存为PDF文件的，转档后的文件可能无法选取文字进行高亮等编辑。
+                        </p>
+                    </div>
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">4.文件转档后出现乱码？</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            如果是原文件就有乱码问题，先处理好文件再提交转档；<br>
+                            如果原文件正常而转档后目标文件乱码，请联系我们处理。
+                        </p>
+                    </div>
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">5.转档失败会扣券吗？</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            不会，请放心重试。
+                        </p>
+                    </div>
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">6.转换后的文件保存在哪里？</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            转换成功的文件默认保存路径为文档/17PDF/Converted。
+                        </p>
+                    </div>
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">7.联系我们</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            加入17PDF官方QQ 群188917181咨询，即时为您解答相关问题。
+                        </p>
+                    </div>
+                </div>
+                <!-- 支付问题 -->
+                <div class="list payment hidden" :class="{active: '#payment' == ins.hash}">
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">1.支付失败怎么办？</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            如有由于网络中断，或页面过期、超时、错误等问题导致支付失败，请先确认是否已经扣款，如未扣款可尝试再支付一次。或者，您可以联系微信或支付平台获得帮助。如果已经扣款但仍未生效，可能是网络繁忙，如果长时间未生效，请于QQ群188917181联系管理员处理。
+                        </p>
+                    </div>
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">2.可以退订吗？</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            暂时不支持退订退款。
+                        </p>
+                    </div>
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">3.支付页面显示错误或空白？</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            可能浏览器的兼容性导致无法正常支付，请使用IE浏览器进行支付操作。
+                        </p>
+                    </div>
+                    <div class="item mb-30px">
+                        <h3 class="text-[20px] text-[1.1] mb-18px font-bold">4.何时生效？</h3>
+                        <p class="text-[16px] leading-[30px]">
+                            <span
+                                class="w-8px h-8px inline-block rounded-[100%] bg-[#333] mr-12px ml-4px"></span>购买券即时生效；<br>
+                            <span
+                                class="w-8px h-8px inline-block rounded-[100%] bg-[#333] mr-12px ml-4px"></span>单次购买一个套餐即时生效。
+                        </p>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+    </div>
+</template>
+<script setup>
+import { onMounted, reactive } from "vue"
+
+
+// const router = $nuxt.$router
+
+const ins = reactive(
+    { 
+        hash: "#reading"
+    }
+)
+function active(hash) {
+    ins.hash = hash
+};
+onMounted(() => {
+    const hash = window.location.hash
+    if (hash == '') {
+         window.location.hash = "reading";
+        }
+    else {
+        ins.hash=hash
+    }
+
+})
+</script>
+
+<style>
+/*左侧ul */
+
+.row:before,
+.row:after {
+    content: " ";
+    display: table;
+    clear: both;
+}
+
+.question .row .menu ul li:hover {
+    background: #efefef;
+}
+
+.question .row .menu ul li.active {
+    background: #ff4f4f;
+    color: #fff;
+}
+
+.question .row .content .list.active {
+    display: block;
+}
+</style>