|
|
@@ -0,0 +1,484 @@
|
|
|
+<template>
|
|
|
+ <div class="m-0 p-0 bg-[#f2f2f2]">
|
|
|
+ <!-- 主页面 -->
|
|
|
+ <div v-show="!showSearch" class="q_and_a w-900px my-0 mx-auto">
|
|
|
+ <div class="banner_wrap w-full h-290px relative bg-[#ccc]">
|
|
|
+ <div class="search_bg"></div>
|
|
|
+ <div class="search w-710px h-40px absolute bottom-30px left-[25%] ml-[-135px] rounded-20px opacity-50">
|
|
|
+ <input
|
|
|
+id="index_search" type="text" name="search" placeholder="大家都在问" class="w-full h-full text-center text-[#fff] text-[14px] absolute top-0 left-0 rounded-20px bg-[#000000] border-none outline-solid-none"
|
|
|
+ @focus="changeShowSearch">
|
|
|
+ <span class="w-15px h-14px absolute top-14px left-[50%] ml-[-60px]">
|
|
|
+ <img src="~/assets/images/faq/ic_search.png" class="absolute left-0 top-0 ">
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pro_solve w-full">
|
|
|
+ <dl>
|
|
|
+ <dt>
|
|
|
+ <span></span>
|
|
|
+ <h3>格式转换</h3>
|
|
|
+ </dt>
|
|
|
+ <dd>
|
|
|
+ <h4 id="format_type"><span></span>支持哪些格式转换？</h4>
|
|
|
+ <p>支持PDF to Word、PPT、Excel、TXT、JPG/PNG无限次数转换。</p>
|
|
|
+ </dd>
|
|
|
+ <dd>
|
|
|
+ <h4 id="where_format"><span></span>从哪里可以找到转档后的文件？</h4>
|
|
|
+ <p>1. 在主页点击格式转换；</p>
|
|
|
+ <p>2. 点击右上角转换任务，即可看到转换中 / 转换成功 / 转换失败三种状态；</p>
|
|
|
+ <p>3. 滑动到转换成功，点击文件，即可直接进入到17PDF的 Converted文件夹。</p>
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+
|
|
|
+ <dl>
|
|
|
+ <dt>
|
|
|
+ <span></span>
|
|
|
+ <h3>账号绑定</h3>
|
|
|
+ </dt>
|
|
|
+ <dd>
|
|
|
+ <h4 id="file_scanning"><span></span>QQ / 微信账号绑定手机号时，为什么会显示 “手机账号已绑定其他账户，请更换 绑定方式”？</h4>
|
|
|
+ <p>说明该手机号已注册并使用过，请更换号码重新绑定噢！</p>
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+
|
|
|
+ <dl>
|
|
|
+ <dt>
|
|
|
+ <span></span>
|
|
|
+ <h3>文件扫描</h3>
|
|
|
+ </dt>
|
|
|
+ <dd>
|
|
|
+ <h4 id="files_scanning"><span></span>如何使用PDF扫描&转档功能？</h4>
|
|
|
+ <p>
|
|
|
+ 点击相机快速扫描文件<br>
|
|
|
+ 点击分享和保存到PDF将扫描文件保存为PDF文件<br>
|
|
|
+ 转档后可对文件进行编辑
|
|
|
+ </p>
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+
|
|
|
+ <dl>
|
|
|
+ <dt>
|
|
|
+ <span></span>
|
|
|
+ <h3>文件注释</h3>
|
|
|
+ </dt>
|
|
|
+ <dd>
|
|
|
+ <h4 id="how_white"><span></span>如何使用手绘&手写？</h4>
|
|
|
+ <p>
|
|
|
+ 点击注释按钮可使用、退出该功能<br>
|
|
|
+ 点击并长按图标调整颜色、笔刷大小和透明度
|
|
|
+ </p>
|
|
|
+ </dd>
|
|
|
+ <dd>
|
|
|
+ <h4 id="how_notes"><span></span>如何移除PDF文件注释？</h4>
|
|
|
+ <p>
|
|
|
+ 点击选择需要移除的注释<br>
|
|
|
+ 点击弹出对话框中 “清除” 选项去除注释
|
|
|
+ </p>
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+
|
|
|
+ <dl>
|
|
|
+ <dt>
|
|
|
+ <span></span>
|
|
|
+ <h3>文件阅读</h3>
|
|
|
+ </dt>
|
|
|
+ <dd>
|
|
|
+ <h4 id="eye_model"><span></span>是否支持护眼模式</h4>
|
|
|
+ <p>目前有三种阅读模式：日间模式、夜间模式、柔和模式，满足用户在不同环境下看书的需求，有效缓解眼睛疲劳，保护视力。</p>
|
|
|
+ </dd>
|
|
|
+ <dd>
|
|
|
+ <h4 id="words_model"><span></span>如何使用纯文字模式（文字转语音TTS）？</h4>
|
|
|
+ <p>
|
|
|
+ 打开PDF文档，点击右上角More按钮<br>
|
|
|
+ 点击选择 TTS 即可转换文本模式为语音模式；<br>
|
|
|
+ 该功能需要手机自带语音引擎才能使用，<br>
|
|
|
+ 如无语音引擎需到外部下载第三方语音引擎即可使用。
|
|
|
+ </p>
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--搜索页面-->
|
|
|
+ <div v-show="showSearch" class="search_wrap w-900px my-0 mx-auto">
|
|
|
+ <!-- 搜索框 -->
|
|
|
+ <div class="search_ipt">
|
|
|
+ <div class="search_txt w-[90%] h-40px my-0 mx-auto ">
|
|
|
+ <input id="search" v-model="inputValue" type="search" placeholder="你想问啥？" @input="search">
|
|
|
+ <a
|
|
|
+id="return" href="javascript:;" class="float-right text-[#fff] text-[14px] leading-[40px] no-underline "
|
|
|
+ @click="changeShowSearch">取消</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 热点问题 -->
|
|
|
+ <dl v-show="showHot" class="hot w-[98%] bg-[#fff] my-0 mx-auto pt-12px px-0 pb-20px">
|
|
|
+ <dt class="w-full text-[#333] text-[14px]">
|
|
|
+ <span class="w-4px h-12px bg-[#ff4948] inline-block mr-10px ml-12px"></span>
|
|
|
+ 热点问题
|
|
|
+ </dt>
|
|
|
+ <dd class="ml-26px text-[12px] leading-[26px] mt-7px">
|
|
|
+ <span class="h-4px w-4px bg-[#333] rounded-4px inline-block mr-6px"></span>
|
|
|
+ <a href="javascript:;" class="text-[#333] no-underline" @click="skip('#format_type',350)">支持哪些格式转换？</a>
|
|
|
+ </dd>
|
|
|
+ <dd class="ml-26px text-[12px] leading-[26px] mt-7px">
|
|
|
+ <span class="h-4px w-4px bg-[#333] rounded-4px inline-block mr-6px"></span>
|
|
|
+ <a href="javascript:;" class="text-[#333] no-underline" @click="skip('#where_format',450)">从哪里可以找到转档后的文件？</a>
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+ <!-- 搜索展示区 -->
|
|
|
+ <div v-show="!showHot" class="search_list w-[98%] bg-[#fff] my-0 mx-auto py-12px">
|
|
|
+ <ul class="m-0 pl-26px">
|
|
|
+ <li class="m-0 p-0 text-[#333] text-[14px] leading-[40px] list-none"><a
|
|
|
+v-show="x0" href="javascript:;"
|
|
|
+ @click="skip( '#format_type' , 350)" v-html="questions[0]"></a>
|
|
|
+ </li>
|
|
|
+ <li class="m-0 p-0 text-[#333] text-[14px] leading-[40px] list-none"><a
|
|
|
+v-show="x1" href="javascript:;"
|
|
|
+ @click="skip( '#where_format' , 450)" v-html="questions[1]"></a>
|
|
|
+ </li>
|
|
|
+ <li class="m-0 p-0 text-[#333] text-[14px] leading-[40px] list-none"><a
|
|
|
+v-show="x2" href="javascript:;"
|
|
|
+ @click="skip( '#file_scanning' , 750)" v-html="questions[2]"></a>
|
|
|
+ </li>
|
|
|
+ <li class="m-0 p-0 text-[#333] text-[14px] leading-[40px] list-none"><a
|
|
|
+v-show="x3" href="javascript:;"
|
|
|
+ @click="skip( '#files_scanning' , 950)" v-html="questions[3]"></a>
|
|
|
+ </li>
|
|
|
+ <li class="m-0 p-0 text-[#333] text-[14px] leading-[40px] list-none"><a
|
|
|
+v-show="x4" href="javascript:;"
|
|
|
+ @click="skip( '#files_scanning' , 1200)" v-html="questions[4]"></a>
|
|
|
+ </li>
|
|
|
+ <li class="m-0 p-0 text-[#333] text-[14px] leading-[40px] list-none"><a
|
|
|
+v-show="x5" href="javascript:;"
|
|
|
+ @click="skip( '#files_scanning' , 1300)" v-html="questions[5]"></a>
|
|
|
+ </li>
|
|
|
+ <li class="m-0 p-0 text-[#333] text-[14px] leading-[40px] list-none"><a
|
|
|
+v-show="x6" href="javascript:;"
|
|
|
+ @click="skip ( '#files_scanning' , 1500)" v-html="questions[6]"></a>
|
|
|
+ </li>
|
|
|
+ <li class="m-0 p-0 text-[#333] text-[14px] leading-[40px] list-none"><a
|
|
|
+v-show="x7" href="javascript:;"
|
|
|
+ @click="skip( '#files_scanning' , 1650 )" v-html="questions[7]"></a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { ref } from 'vue';
|
|
|
+export default {
|
|
|
+ layout: "custom",
|
|
|
+ setup(props) {
|
|
|
+ // 控制搜索区展示
|
|
|
+ const showSearch = ref(false)
|
|
|
+ function changeShowSearch() {
|
|
|
+ showSearch.value = !showSearch.value
|
|
|
+ }
|
|
|
+ // 用户输入
|
|
|
+ const inputValue = ref("")
|
|
|
+ // 控制热点问题展示
|
|
|
+ const showHot = ref(true)
|
|
|
+ // 对应问题展示
|
|
|
+ const x0 = ref(false)
|
|
|
+ const x1 = ref(false)
|
|
|
+ const x2 = ref(false)
|
|
|
+ const x3 = ref(false)
|
|
|
+ const x4 = ref(false)
|
|
|
+ const x5 = ref(false)
|
|
|
+ const x6 = ref(false)
|
|
|
+ const x7 = ref(false)
|
|
|
+ // 搜索问题
|
|
|
+ const questions = [
|
|
|
+ "支持哪些格式转换?",
|
|
|
+ "从哪里可以找到转档后的文件？",
|
|
|
+ "QQ / 微信账号绑定手机号时，为什么会显示'手机账号已绑定其他账户，请更换绑定方式'？",
|
|
|
+ "如何使用PDF扫描;转档功能？",
|
|
|
+ "如何使用手绘&手写？",
|
|
|
+ "如何移除PDF文件注释？",
|
|
|
+ "文件阅读是否支持护眼模式",
|
|
|
+ "如何使用纯文字模式（文字转语音TTS）？"]
|
|
|
+ // 搜索功能
|
|
|
+ function search() {
|
|
|
+ // 初始化
|
|
|
+ questions[0] = "支持哪些格式转换?"
|
|
|
+ questions[1] = "从哪里可以找到转档后的文件？"
|
|
|
+ questions[2] = "QQ / 微信账号绑定手机号时，为什么会显示'手机账号已绑定其他账户，请更换绑定方式'？"
|
|
|
+ questions[3] = "如何使用PDF扫描;转档功能？"
|
|
|
+ questions[4] = "如何使用手绘&手写？"
|
|
|
+ questions[5] = "如何移除PDF文件注释？"
|
|
|
+ questions[6] = "文件阅读是否支持护眼模式"
|
|
|
+ questions[7] = "如何使用纯文字模式（文字转语音TTS）？"
|
|
|
+
|
|
|
+ // 控制热点问题展示
|
|
|
+ if (!inputValue.value == "") {
|
|
|
+ showHot.value = false
|
|
|
+ const lastStr=inputValue.value.slice(-1)
|
|
|
+ // 展示搜索问题
|
|
|
+ questions.forEach((item, index) => {
|
|
|
+ if (item.includes(lastStr)) {
|
|
|
+ show(index)
|
|
|
+ } else {
|
|
|
+ unshow(index)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ showHot.value = true
|
|
|
+ }
|
|
|
+ // 展示问题
|
|
|
+ function show(index) {
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ x0.value = true;
|
|
|
+ questions[0] = brightenKeyword(questions[0], inputValue.value)
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ x1.value = true;
|
|
|
+ questions[1] = brightenKeyword(questions[1], inputValue.value)
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ x2.value = true;
|
|
|
+ questions[2] = brightenKeyword(questions[2], inputValue.value)
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ x3.value = true;
|
|
|
+ questions[3] = brightenKeyword(questions[3], inputValue.value)
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ x4.value = true;
|
|
|
+ questions[4] = brightenKeyword(questions[4], inputValue.value)
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ x5.value = true;
|
|
|
+ questions[5] = brightenKeyword(questions[5], inputValue.value)
|
|
|
+ break;
|
|
|
+ case 6:
|
|
|
+ x6.value = true;
|
|
|
+ questions[6] = brightenKeyword(questions[6], inputValue.value)
|
|
|
+ break;
|
|
|
+ case 7:
|
|
|
+ x7.value = true;
|
|
|
+ questions[7] = brightenKeyword(questions[7], inputValue.value)
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 隐藏已经过时的问题
|
|
|
+ function unshow(index) {
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ x0.value = false;
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ x1.value = false;
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ x2.value = false;
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ x3.value = false;
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ x4.value = false;
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ x5.value = false;
|
|
|
+ break;
|
|
|
+ case 6:
|
|
|
+ x6.value = false;
|
|
|
+ break;
|
|
|
+ case 7:
|
|
|
+ x7.value = false;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function brightenKeyword(val, keyword) {
|
|
|
+ const allStr=keyword.split("")
|
|
|
+ let res = val;
|
|
|
+ allStr.forEach((item)=>{
|
|
|
+ if (val.includes(item)) {
|
|
|
+ res = val.replace(item, '<font color="#ff4948">' + item + '</font>')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return res
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 问题跳转
|
|
|
+ function skip(value,num){
|
|
|
+
|
|
|
+ changeShowSearch()
|
|
|
+ const position = document.querySelector(value);
|
|
|
+ const positionValue=position.getBoundingClientRect().top
|
|
|
+ const top = num;
|
|
|
+ let x=1;
|
|
|
+ function run() {
|
|
|
+ x=x+50
|
|
|
+ window.scrollTo(0,x)
|
|
|
+ run.timer = requestAnimationFrame(run);
|
|
|
+ if (x>top) {
|
|
|
+ cancelAnimationFrame(run.timer);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ requestAnimationFrame(run);
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ showSearch,
|
|
|
+ changeShowSearch,
|
|
|
+ showHot,
|
|
|
+ search,
|
|
|
+ inputValue,
|
|
|
+ x0,
|
|
|
+ x1,
|
|
|
+ x2,
|
|
|
+ x3,
|
|
|
+ x4,
|
|
|
+ x5,
|
|
|
+ x6,
|
|
|
+ x7,
|
|
|
+ questions,
|
|
|
+ skip,
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style >
|
|
|
+/* 设置body */
|
|
|
+body{
|
|
|
+ background-color:#f2f2f2 ;
|
|
|
+ min-width: 0px
|
|
|
+}
|
|
|
+/* 主页面背景图 */
|
|
|
+.search_bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.5) url(http://cn-file.17pdf.com/website/common/searcg_bg.png) no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+input {
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* 主页面下dl等样式 */
|
|
|
+.pro_solve dl {
|
|
|
+ width: 100%;
|
|
|
+ zoom: 1;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0px 1px 5px rgb(0 0 0 / 10%);
|
|
|
+ padding: 38px 0px;
|
|
|
+ margin: 8px 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.pro_solve dl:after {
|
|
|
+ visibility: hidden;
|
|
|
+ display: block;
|
|
|
+ font-size: 0;
|
|
|
+ content: " ";
|
|
|
+ clear: both;
|
|
|
+ height: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.pro_solve dl dt {
|
|
|
+ width: 33%;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.pro_solve dl dt span {
|
|
|
+ width: 110px;
|
|
|
+ height: 4px;
|
|
|
+ display: block;
|
|
|
+ background: #ff4948;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-left: 85px;
|
|
|
+}
|
|
|
+
|
|
|
+.pro_solve dl dt h3 {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #333;
|
|
|
+ margin: 20px 0px 20px 85px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.pro_solve dl dd {
|
|
|
+ width: 67%;
|
|
|
+ float: right;
|
|
|
+ margin: 0px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 10px 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.pro_solve dl dd h4 {
|
|
|
+ color: #333;
|
|
|
+ margin: 0px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.pro_solve dl dd h4 span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 100%;
|
|
|
+ background: #333;
|
|
|
+ margin-right: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.pro_solve dl dd p {
|
|
|
+ color: #636363;
|
|
|
+ padding-left: 20px;
|
|
|
+ margin: 16px 0px;
|
|
|
+ line-height: 24px;
|
|
|
+ width: 520px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 搜索页面背景图 */
|
|
|
+.search_ipt {
|
|
|
+ width: 100%;
|
|
|
+ /* height: 40px; */
|
|
|
+ background: url(http://cn-file.17pdf.com/website/common/search_label.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 33px 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.search_txt input {
|
|
|
+ width: 94%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.5) url(http://cn-file.17pdf.com/website/common/ic_search.png) no-repeat 16px 12px;
|
|
|
+ border-radius: 60px;
|
|
|
+ border: 0px;
|
|
|
+ outline: none;
|
|
|
+ padding-left: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.hot {
|
|
|
+ border-radius: 0px 0px 4px 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.search_list {
|
|
|
+ border-radius: 0px 0px 4px 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.search_list ul li:last-of-type {
|
|
|
+ border-bottom: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.search_list ul li {
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.03);
|
|
|
+}
|
|
|
+.hot dd a:hover {
|
|
|
+ color: #ff4948;
|
|
|
+}
|
|
|
+.search_list ul li a:hover {
|
|
|
+ color: #ff4948;
|
|
|
+}
|
|
|
+</style>
|
