17pdf_front_end/pages/question.vue

<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 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 >
import { onMounted, reactive } from "vue"
export default{
    middleware:'user',
    setup(){      
        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
            }       
        })
        return {
            ins,
            active
        }
    }
}
</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>