17pdf_front_end/pages/faq.vue

<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>
          <dd>
            <h4 id="meet_problem"><span></span>转换遇见问题？</h4>
            <p>请前往应用商店更新至最新版本，重新登录账号 -> 进行转档</p>
          </dd>
        </dl>
        
        <dl>
          <dt>
            <span></span>
            <h3>账号登录 </h3>
          </dt>
          <dd>
            <h4 id="login"><span></span>账号登录 / VIP & 转换券购买 遇到问题？</h4>
            <p>请前往应用商店更新至最新版本，重新登录账号 -> 进行VIP / 转换券购买</p>
          </dd>
        </dl>

        <dl>
          <dt>
            <span></span>
            <h3>账号绑定</h3>
          </dt>
          <dd>
            <h4 id="file_scanning"><span></span>QQ / 微信账号绑定手机号时，为什么会显示 “手机账号已绑定其他账户，请更换 绑定方式”？</h4>
            <p>说明该手机号已注册并使用过，请更换号码重新绑定噢！</p>
          </dd>
          <dd>
            <h4 id=""><span></span>账号绑定遇到问题？</h4>
            <p>请前往应用商店更新至最新版本，重新登录账号 -> 进行账号绑定</p>
          </dd>
        </dl>

        <dl>
          <dt>
            <span></span>
            <h3>文件扫描</h3>
          </dt>
          <dd>
            <h4 id="files_scanning"><span></span>如何使用PDF扫描&amp;转档功能？</h4>
            <p>
              点击相机快速扫描文件<br>
              点击分享和保存到PDF将扫描文件保存为PDF文件<br>
              转档后可对文件进行编辑<br><br>
            </p>
            <span class="font-bold">PS：</span>如果扫描/转档失败，请先前往应用商店更新至最新版本噢
          </dd>
        </dl>

        <dl>
          <dt>
            <span></span>
            <h3>文件注释</h3>
          </dt>
          <dd>
            <h4 id="how_white"><span></span>如何使用手绘&amp;手写？</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(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(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(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(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(650)" 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(850)" 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(1050)" 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(1150)" 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 (1350)" 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(1650)" v-html="questions[7]"></a>
          </li>
          <li class="m-0 p-0 text-[#333] text-[14px] leading-[40px] list-none">
            <a v-show="x8" href="javascript:;" @click="skip(1760)" v-html="questions[8]"></a>
          </li>
          <li class="m-0 p-0 text-[#333] text-[14px] leading-[40px] list-none">
            <a v-show="x9" href="javascript:;" @click="skip(1950)" v-html="questions[9]"></a>
          </li>
          <li class="m-0 p-0 text-[#333] text-[14px] leading-[40px] list-none">
            <a v-show="x10" href="javascript:;" @click="skip(2100)" v-html="questions[10]"></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 x8 = ref(false)
    const x9 = ref(false)
    const x10 = ref(false)
    // 搜索问题
    const questions = [
      "支持哪些格式转换?",
      "从哪里可以找到转档后的文件？",
      "转换遇到问题？",
      "账号登录 / VIP & 转换券购买 遇到问题？",
      "QQ / 微信账号绑定手机号时，为什么会显示'手机账号已绑定其他账户，请更换绑定方式'？",
      "账号绑定遇到问题？",
      "如何使用PDF扫描;转档功能？",
      "如何使用手绘&amp;手写？",
      "如何移除PDF文件注释？",
      "是否支持护眼模式",
      "如何使用纯文字模式（文字转语音TTS）？"]
    // 搜索功能
    function search() {
      // 初始化
      questions[0] = "支持哪些格式转换?"
      questions[1] = "从哪里可以找到转档后的文件？"
      questions[2] = "转换遇到问题？"
      questions[3] = "账号登录 / VIP & 转换券购买 遇到问题？"
      questions[4] = "QQ / 微信账号绑定手机号时，为什么会显示'手机账号已绑定其他账户，请更换绑定方式'？"
      questions[5] = "账号绑定遇到问题？"
      questions[6] = "如何使用PDF扫描;转档功能？"
      questions[7] = "如何使用手绘&amp;手写？"
      questions[8] = "如何移除PDF文件注释？"
      questions[9] = "是否支持护眼模式"
      questions[10] = "如何使用纯文字模式（文字转语音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;
          case 8:
            x8.value = true;
            questions[8] = brightenKeyword(questions[8], inputValue.value)
            break;
          case 9:
            x9.value = true;
            questions[9] = brightenKeyword(questions[9], inputValue.value)
            break;
          case 10:
            x10.value = true;
            questions[10] = brightenKeyword(questions[10], 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;
          case 8:
            x8.value = false;
            break;
          case 9:
            x9.value = false;
            break;
          case 10:
            x10.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(num){

      changeShowSearch()
      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,
      x8,
      x9,
      x10,
      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>