Merge branch 'develop_oycj' of Server_Service/17pdf_front_end into master

assets/images/common/tip_bg.svg

@@ -0,0 +1,3 @@
+<svg width="250" height="91" viewBox="0 0 250 91" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M246 0C248.209 0 250 1.79086 250 4V80C250 82.2091 248.209 84 246 84H133.097C131.897 84 130.761 84.5385 130.001 85.467L125.774 90.6333C125.374 91.1223 124.626 91.1223 124.226 90.6333L119.999 85.467C119.239 84.5385 118.103 84 116.903 84H4C1.79086 84 0 82.2091 0 80V4C0 1.79086 1.79085 0 4 0H246Z" fill="black"/>
+</svg>

components/RegisterBar.vue

@@ -0,0 +1,189 @@
+<!--
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-10-20 17:51:51
+ * @LastEditTime: 2022-10-26 10:26:29
+-->
+<!-- <script lang="ts" setup>
+import { ref,reactive, computed } from 'vue'
+import { userApi } from '@/api/user'
+
+const { registerUser } = userApi()
+
+const emit = defineEmits(['login'])
+const showVcode = ref(false)    // 展示验证码
+const errMsg = ref('')    // 点击注册反馈错误信息
+const form = reactive({
+  username: '',
+  password: '',
+  password_confirm:'',
+  code: ''
+  // phone_zone: '86'
+})
+
+const regPhone = /^1[3456789]\d{9}$/;
+const regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
+
+// 输入账号和密码后才能登录
+const loginBtnDisabled = computed<boolean>(()=> !(form.username && form.password))
+
+// 输入为手机号格式失焦显示验证码校验
+const handlerUsernameBlur = (e:any)=> {
+  showVcode.value = regPhone.test(e.target.value)
+}
+
+// 点击注册前置校验
+const vailidate = ()=> {
+  if(!regPhone.test(form.username) && !regEmail.test(form.username)) {
+    errMsg.value = '手机号/邮箱格式不对'
+  }else if(form.password !== form.password_confirm) {
+    errMsg.value = '两次输入的密码不一致'
+  }else if(form.password.length < 6) {
+    errMsg.value = '密码位数不能少于6位'
+  }else if(form.password.length> 16){
+    errMsg.value = '密码位数不能大于16位'
+  }else {
+    errMsg.value = ''
+    handlerRegisterUser()
+  }
+}
+// 弹窗关闭，初始化注册面板
+const resetInterfaceStatus = () => {
+  errMsg.value = '';
+  form.username = ''
+  form.password = ''
+  form.password_confirm = ''
+  form.code = ''
+  showVcode.value = false
+}
+const handlerRegisterUser = async () => {
+  const res = await registerUser(form)
+}
+const handlerLogin = ()=> {
+  emit('login','login')
+}
+
+defineExpose({
+  resetInterfaceStatus
+});
+</script> -->
+
+<script>
+import qs from 'qs'
+export default {
+  data() {
+    const regPhone = /^1[3456789]\d{9}$/
+    const regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
+    return {
+      form: {
+        username: '',
+        password: '',
+        password_confirm:'',
+        code: ''
+        // phone_zone: '86'
+      },
+      errMsg: '',
+      showVcode: false,
+      regEmail,
+      regPhone,
+    }
+  },
+  computed: {
+    loginBtnDisabled() {
+      return !(this.form.username && this.form.password && this.form.password_confirm)
+    }
+  },
+  methods: {
+// 点击注册前置校验
+    vailidate() {
+      if(!this.regPhone.test(this.form.username) && !this.regEmail.test(this.form.username)) {
+        this.errMsg = '手机号/邮箱格式不对'
+      }else if(this.form.password !== this.form.password_confirm) {
+        this.errMsg = '两次输入的密码不一致'
+      }else if(this.form.password.length < 6) {
+        this.errMsg = '密码位数不能少于6位'
+      }else if(this.form.password.length> 16){
+        this.errMsg = '密码位数不能大于16位'
+      }else {
+        this.errMsg = ''
+        this.handlerRegisterUser()
+      }
+    },
+    handlerRegisterUser() {
+      this.$axios.post('members/register',this.form).then((res)=> {
+        if(res.code === 200) {
+          this.handlerLogin(this.form)
+        }
+      })
+    },
+    handlerLogin() {
+      this.$axios.post('login',qs.stringify(this.form)).then((res)=> {
+        this.$store.dispatch('login',res.result).then((token)=> {
+          this.$axios.setToken(token, 'Bearer')
+          this.handlerClose()
+          this.getUserInfo()
+        })
+      })
+    },
+    getUserInfo()  {
+      const res = this.$axios.get('members/getMemberInfo')
+      if(res.code === 200) {
+        this.$store.commit('setUser',res.result)
+        // localStorage.setItem('userInfo',res.result)
+      }
+    },
+    handlerUsernameBlur(e) {
+      this.showVcode = this.regPhone.test(e.target.value)
+    },
+    // 弹窗关闭，初始化注册面板
+    resetInterfaceStatus() {
+      this.errMsg = '';
+      this.form.username = ''
+      this.form.password = ''
+      this.form.password_confirm = ''
+      this.form.code = ''
+      this.showVcode = false
+    },
+    handlerChangeLogin() {
+      this.$emit('login','login')
+    },
+    handlerClose() {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="user-login">
+    <div class="logo">
+      <h4 id="loginModalLabel" class="logo_PDF"></h4>
+    </div>
+    <div class="login_content">
+      <input id="signup_account" v-model="form.username" class="login_input_user" type="text" placeholder="手机号/邮箱" @blur="handlerUsernameBlur">
+      <br />
+      <input id="signup_pwd1" v-model="form.password" class="login_input_password" type="password" placeholder="密码（6-16个字符，区分大小写）">
+      <br />
+      <input id="signup_pwd2" v-model="form.password_confirm" class="login_input_password" type="password" placeholder="确认密码">
+      <br />
+      <div v-show="showVcode" class="vcode_content">
+        <input class="input_vcode_signup" placeholder="验证码">
+        <span class="sent-vcode sent-vcode-signup"><a>发送验证码</a></span>
+      </div>
+      <div v-show="errMsg !== ''" class="error-mess error-mess-signup">
+        <span id="error-message error-tip">{{errMsg}}</span>
+      </div>
+      <button id="btn-signup" type="submit" class="logging" :class="{'btn-signin': loginBtnDisabled}" :disabled="loginBtnDisabled" @click="vailidate">注册</button>
+      <div class="login-now">
+        <div class="term">
+          <span>轻触上面的“注册”按钮，即表示你同意我们的<a target="_blank" href="/terms">条款</a></span>
+        </div>
+        <div class="switch_login">
+          <span>已经有账号？<a class="cursor-pointer" @click="handlerChangeLogin">登录</a></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+

components/UserManage.vue

@@ -0,0 +1,256 @@
+<template>
+  <div>
+    <div v-if="!changePsd">
+      <div class="accountmanage-tittle">
+        <p>账号管理</p>
+      </div>  
+      <div class="accountmanage-content">
+        <div class="changeheader flex justify-center">
+          <span><img src="http://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg"></span>
+          <div class="headers">
+          </div>
+        </div>
+
+        <div class="row-name">
+          <span>昵称</span>
+          <input v-model="username" @blur="handlerChangeUserName">
+          <!-- <p class="err-prompt">用户名已经存在</p> -->
+        </div>
+        <div class="changepwd" @click="changepwdModal()">
+          修改密码
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <div class="accountmanage-tittle">
+        <p>修改密码</p>
+      </div>
+      <div class="login_content changepwd-content">
+        <input v-model="form.password" class="login_input_password" type="password" placeholder="原始密码">
+        <br/>
+        <input  v-model="form.newPassword"  class="login_input_password new" type="password" placeholder="新密码（6-16个字符，区分大小写）">
+        <br/>
+        <input  v-model="form.newPassword_confirm"  class="login_input_password confirm" type="password" placeholder="确认新密码">
+        <br/>
+        <div class="error-mess error-mess-signup" >
+          <span id="error-message error-tip">{{errMsg}}</span>
+        </div>
+
+        <button class="logging" @click="vailidate">确认</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      changePsd: false,
+      username: this.$store.state.userInfo?.memberInfo?.name,
+      form: {
+        password:'',
+        newPassword: '',
+        newPassword_confirm:''
+      },
+      errMsg:''
+    }
+  },
+
+  methods: {
+    // 点击注册前置校验
+    vailidate() {
+      if(this.form.newPassword !== this.form.newPassword_confirm) {
+        this.errMsg = '密码不一致'
+      }else if(this.form.newPassword.length < 6) {
+        this.errMsg = '密码位数不能少于6位'
+      }else if(this.form.newPassword.length> 16){
+        this.errMsg = '密码位数不能大于16位'
+      }else {
+        this.errMsg = ''
+        this.handlerResetPsw()
+      }
+    },
+    handlerResetPsw() {
+      this.$axios.post('members/modifyPassword', this.form).then((res)=> {
+        if(res.code === 200) {
+          this.$emit('close')
+        }
+      })
+    },
+    changepwdModal() {
+      this.changePsd = true
+    },
+    handlerChangeUserName() {
+      this.$axios.get(`/members/modifyNickname?name=${this.username}`).then((res)=> {
+        if(res.code === 200) {
+          this.getUserInfo()
+        }
+      })
+    },
+    getUserInfo()  {
+      this.$axios.get('members/getMemberInfo').then((res)=> {
+        if(res.code === 200) {
+          this.$store.commit('setUser',res.result)
+          localStorage.setItem('userInfo',JSON.stringify(res.result))
+        }
+      })
+    },
+    resetInterfaceStatus() {
+      this.changePsd = false
+      this.form.password = ''
+      this.form.newPassword = ''
+      this.form.newPassword_confirm = ''
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.accountmanage-tittle {
+  color: rgb(255, 79, 79);
+  text-align: center;
+  margin: 0;
+
+  p {
+    font-size: 20px;
+    line-height: 64px;
+  }
+}
+
+.accountmanage-content {
+  .changeheader {
+    text-align: center;
+    margin: 0 24px;
+
+    span img {
+      width: 64px;
+      border-radius: 35px;
+    }
+
+    .headers {
+      margin-top: 8px;
+      padding-bottom: 24px;
+      border-bottom: 1px solid rgb(240, 240, 240);
+      img {
+        width: 36px;
+        border-radius: 35px;
+        margin: 8px 2px 0px 2px;
+      }
+    }
+
+  }
+
+  .row-name {
+    border-top: 1px solid rgb(240, 240, 240);
+    margin: 0 24px;
+    height: 64px;
+    line-height: 64px;
+    position: relative;
+    margin-top: 25px;
+
+    span {
+      color: rgb(153, 153, 153);
+      font-size: 14px;
+      float: left;
+      width: 10%;
+    }
+
+    input {
+      width: 88%;
+      float: right;
+      height: 30px;
+      line-height: 30px;
+      text-align: right;
+      border: 0px;
+      margin-top: 12px;
+      border: none;
+      outline: medium;
+
+      &:focus {
+        text-align: right;
+        border: 1px;
+      }
+    }
+
+    p {
+      position: absolute;
+      right: 0px;
+      bottom: 0px;
+      height: 20px;
+      width: 100%;
+      color: rgb(255, 79, 79);
+      font-size: 14px;
+      line-height: 20px;
+      text-align: right;
+      display: none;
+    }
+  }
+
+  .changepwd {
+    color: rgb(51, 51, 51);
+    height: 64px;
+    font-size: 14px;
+    cursor:pointer;
+    margin: 0 24px;
+    line-height: 64px;
+    border-top: 1px solid rgb(240, 240, 240);
+    background: url(http://cn-file.17pdf.com/website/account/ic_cebian_normal.png) right 50% no-repeat;
+  }
+}
+// .changepwd-content {
+//   margin: 20px 0px;
+// }
+.login_content {
+  text-align: center;
+  font-size: 14px;
+  .error-mess {
+    position: relative;
+    font-size: 14px;
+    display: none;
+    span{
+      display: inline-block;
+      background: #808080;
+      color: rgb(255, 255, 255);
+      padding: 5px 15px;
+      border-radius: 4px;
+    }
+  }
+  .error-mess-signup {
+    position: initial;
+    clear: both;
+    margin-top: 15px;
+  }
+  .login_input_password {
+    height: 60px;
+    width: 360px;
+    border-width: 0 0 1px 0;
+    border-color: rgb(238, 238, 238);
+    padding-left: 42px;
+    padding-top: 16px;
+    line-height: 44px;
+    outline:none;
+    background: url(http://cn-file.17pdf.com/website/account/ic_login_inputpassword.png) no-repeat 0px 28px;
+    &.new {
+      background: url(http://cn-file.17pdf.com/website/account/ic_lock_new.png) no-repeat 0px 28px;
+    }
+    &.confirm {
+      background: url(http://cn-file.17pdf.com/website/account/ic_lock_sure.png) no-repeat 0px 28px;
+    }
+  }
+  .login_input_password:-webkit-autofill {
+    box-shadow: 0 0 0px 1000px white inset;
+  }
+  .logging {
+    width: 360px;
+    height: 48px;
+    font-size: 16px;
+    color: rgb(255, 255, 255);
+    border: none;
+    background-color: rgb(255, 79, 79);
+    margin-bottom: 40px;
+    border-radius: 4px;
+    outline:none;
+  }
+}
+</style>

layouts/components/footer-bar.vue

@@ -3,11 +3,11 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-17 15:19:18
- * @LastEditTime: 2022-10-19 09:41:21
+ * @LastEditTime: 2022-10-24 10:22:31
 -->
 <template>
-  <div class="fixed bottom-0 bg-[#222] text-[#fff] text-opacity-50 px-15px">
-    <div class="text-14px flex pt-50px pr-60px pb-50px pl-30px footer:pr-180px footer:pl-90px">
+  <div class="bg-[#222] text-[#fff] text-opacity-50 px-15px">
+    <div class="w-full text-14px flex pt-50px pr-60px pb-50px pl-30px footer:pr-180px footer:pl-90px">
       <div class="basis-[17.33%] px-15px">
         <img class="w-138px h-139px mb-10px" src="http://cn-file.17pdf.com/website/download/android_download.png" alt="">
         <p class="text-12px opacity-50">扫码即刻安装17PDF Reader</p>

layouts/custom.vue

@@ -0,0 +1,12 @@
+<!--
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-10-21 10:04:45
+ * @LastEditTime: 2022-10-24 13:54:46
+-->
+<template>
+  <div>
+    <Nuxt></Nuxt>
+  </div>
+</template>

layouts/default.vue

@@ -3,17 +3,17 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-17 15:11:18
- * @LastEditTime: 2022-10-18 19:21:48
+ * @LastEditTime: 2022-10-21 13:27:27
 -->
 <template>
   <div class="font-primary">
     <Navbar></Navbar>
     <Nuxt></Nuxt>
-    <footerBar></footerBar>
+    <FooterBar></FooterBar>
   </div>
 </template>
 
 <script lang="ts" setup>
 import Navbar from './components/navbar.vue'
-import footerBar from './components/footer-bar.vue'
+import FooterBar from './components/footerbar.vue'
 </script>

nuxt.config.js

@@ -3,7 +3,7 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-17 11:06:52
- * @LastEditTime: 2022-10-19 17:14:06
+ * @LastEditTime: 2022-10-26 16:52:30
  */
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
@@ -23,12 +23,16 @@ export default {
 
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: [
-    '@/assets/main.scss'
+    '@/assets/main.scss',
+    {src:'element-ui/lib/theme-chalk/index.css'},
   ],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
-    '~/plugins/api'
+    '~/plugins/axios',
+    {src: '~plugins/element-ui', ssr: false},
+    {src: '@/plugins/localStorage', ssr: false},
+
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
@@ -46,18 +50,19 @@ export default {
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
     '@nuxtjs/axios',
-    '@nuxtjs/proxy'
-
+    '@nuxtjs/proxy',
   ],
   axios: {
     timeout: 3000,
-    prefix: '/api/',
+    prefix: '/17pdf-backend-core/',
     proxy: true
   },
   proxy: {
-    '/api': { target: 'https://17pdf.com'}
+    '/17pdf-backend-core': { target: 'http://81.68.234.235:8999',}
   },
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
-  build: {},
+  build: {
+    vendor: ['element-ui']
+  },
 }

package.json

@@ -16,12 +16,14 @@
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/composition-api": "^0.33.1",
     "core-js": "^3.25.3",
+    "element-ui": "^2.15.10",
     "nuxt": "^2.15.8",
     "qs": "^6.11.0",
     "vue": "^2.7.10",
     "vue-fragment": "^1.6.0",
     "vue-server-renderer": "^2.7.10",
-    "vue-template-compiler": "^2.7.10"
+    "vue-template-compiler": "^2.7.10",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",

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/index.vue

@@ -1,14 +1,629 @@
-<!--
- * @Description: 
- * @Author: 欧阳承珺
- * @LastEditors: 欧阳承珺
- * @Date: 2022-10-17 11:06:52
- * @LastEditTime: 2022-10-17 16:45:34
--->
+<script lang="ts" setup>
+import { ref } from 'vue'
+const indexActive = ref(1)
+const carousel = ref()
+// elementui走马灯组件bug：item只有两个时变换的方向有问题
+// fix：多增加一份item，自定义轮播点
+const handlerCarouselChange = (cur:number)=> {
+  if(cur === 1 || cur === 3) {
+    indexActive.value = 2
+  }else {
+    indexActive.value = 1
+  }
+}
+</script>
 <template>
-  <div>123</div>
+  <div class="page-home">
+    <no-ssr>
+      <el-carousel ref="carousel" indicator-position="none" loop  height="100vh" @change="handlerCarouselChange">
+        <el-carousel-item>
+          <div class="home-banner banner ">
+            <div class="bg"><img src="~/assets/images/common/pic_home_banner00.png" /></div>
+            <div class="slogan">
+              <h2 class="tittle">17PDF Reader</h2>
+              <h3 class="subtitle">阅轻松·阅简单·阅快捷</h3>
+              <p class="info">行业领先的阅读引擎，精准快速的格式转换，让移动无纸化办公轻松易行！</p>
+              <a class="power-sdk" href="https://www.compdf.com?utm_source=anroidapp&utm_medium=17pdfweb&utm_campaign=pdfsdk" target="_blank">由 ComPDFKit 提供技术支持 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12.9567L10.714 8.24261L6 3.52856" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
+            </div>
+          </div>
+        </el-carousel-item>
+        <el-carousel-item>
+          <div class="home-banner converter-banner banner">
+            <div class="slogan">
+              <h2 class="tittle">在线格式转换</h2>
+              <h3 class="subtitle">轻松拖拽／一键转档／批量转换</h3>
+              <p>支持多种常用格式转档，先进的转换引擎，精准快速，超乎想象。</p>
+              <a href="/converter">立即体验</a>
+            </div>
+            <div class="bg"><img src="~/assets/images/common/pic_home_banner02.png" /></div>
+          </div>
+        </el-carousel-item>
+        <el-carousel-item>
+          <div class="home-banner banner">
+            <div class="bg"><img src="~/assets/images/common/pic_home_banner00.png" /></div>
+            <div class="slogan">
+              <h2 class="tittle">17PDF Reader</h2>
+              <h3 class="subtitle">阅轻松·阅简单·阅快捷</h3>
+              <p class="info">行业领先的阅读引擎，精准快速的格式转换，让移动无纸化办公轻松易行！</p>
+              <a class="power-sdk" href="https://www.compdf.com?utm_source=anroidapp&utm_medium=17pdfweb&utm_campaign=pdfsdk" target="_blank">由 ComPDFKit 提供技术支持 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12.9567L10.714 8.24261L6 3.52856" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
+            </div>
+          </div>
+        </el-carousel-item>
+        <el-carousel-item>
+          <div class="home-banner converter-banner banner">
+            <div class="slogan">
+              <h2 class="tittle">在线格式转换</h2>
+              <h3 class="subtitle">轻松拖拽／一键转档／批量转换</h3>
+              <p>支持多种常用格式转档，先进的转换引擎，精准快速，超乎想象。</p>
+              <a href="/converter">立即体验</a>
+            </div>
+            <div class="bg"><img src="~/assets/images/common/pic_home_banner02.png" /></div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </no-ssr>
+    <!-- 自定义轮播点 -->
+    <ul class="indicators">
+      <li v-for="index in 2" :key="index" :class="index === indexActive?'is-active':''" class="indicator">
+      </li>
+    </ul>
+    <div class="home_info">
+      <div class="item white">
+        <div class="left"><img src="http://cn-file.17pdf.com/website/home/pic_home_file_converter.png" /></div>
+        <div class="right">
+          <div class="cotent">
+            <h3>格式转换</h3>
+            <p>PDF高效格式转换，支持PDF to Word、PPT、Excel、TXT、JPG/PNG，一键转档，批量转换，突破格式壁垒。</p>
+            <a href="/converter">立即使用</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="home_function">
+      <h3>更多强大功能 · 助力效率提升</h3>
+      <ul class="clear">
+        <li>
+          <div class="list">
+            <img src="http://cn-file.17pdf.com/website/home/ic_home_more_eyes.png" />
+            <div class="wrap">
+              <h4>文件阅读</h4>
+              <p>优质的阅读引擎带来流畅、稳定的阅读体验，轻松阅读无干扰。</p>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="list">
+            <img src="http://cn-file.17pdf.com/website/home/ic_home_more_mark.png" />
+            <div class="wrap">
+              <h4>文件注释</h4>
+              <p>支持高亮、下划线、波浪线、手写等注释方式，可插入图片及语音笔记。</p>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="list">
+            <img src="http://cn-file.17pdf.com/website/home/ic_home_more_manage.png" />
+            <div class="wrap">
+              <h4>文件管理</h4>
+              <p>文件移动复制、压缩删除，PDF文件密码保护，并可将PDF文件生成链接方便分享。</p>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="list">
+            <img src="http://cn-file.17pdf.com/website/home/ic_home_more_edit.png" />
+            <div class="wrap">
+              <h4>页面编辑</h4>
+              <p>可将PDF任意页面进行删除、旋转、排序、拆分并另存为新的PDF，还能对多个PDF文件进行合并。</p>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="list">
+            <img src="http://cn-file.17pdf.com/website/home/ic_home_moer_mode.png" />
+            <div class="wrap">
+              <h4>阅读模式</h4>
+              <p>日间模式/夜间模式/护眼模式自由切换，缓解视觉疲劳。</p>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="list">
+            <img src="http://cn-file.17pdf.com/website/home/ic_home_more_search.png" />
+            <div class="wrap">
+              <h4>搜索索引</h4>
+              <p>从PDF文档中提取、选择、搜索和检索文本，以最快的速度搜索索引PDF文本信息。</p>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="list">
+            <img src="http://cn-file.17pdf.com/website/home/ic_home_more_scan.png" />
+            <div class="wrap">
+              <h4>文件扫描</h4>
+              <p>支持拍照扫描文件、图片并保存为PDF文件，可调整图片边缘及使用滤镜，抠图精准。</p>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="list">
+            <img src="http://cn-file.17pdf.com/website/home/ic_home_more_read.png" />
+            <div class="wrap">
+              <h4>文件朗读</h4>
+              <p>支持文字转语音（TTS），朗读PDF文件内容，解放双眼，让耳朵“读”文件。</p>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="home_user_say">
+      <h3>5年口碑 · 品质之选</h3>
+      <no-ssr>
+        <el-carousel class="user_say_carousel">
+          <el-carousel-item class="item">
+            <ul class="clear">
+              <li>
+                <img src="http://cn-file.17pdf.com/website/home/pic_home_head_01.png" /><span>Leon Reed</span>
+                <p>绝对是最好用的PDF阅读器，没有之一，强力推荐！</p>
+                <div>---来自百度的用户说</div>
+              </li>
+              <li>
+                <img src="http://cn-file.17pdf.com/website/home/pic_home_head_02.png" /><span>Ella Pope</span>
+                <p>支持切白边，没广告，好用！</p>
+                <div>---来自VIVO的用户说</div>
+              </li>
+              <li>
+                <img src="http://cn-file.17pdf.com/website/home/pic_home_head_03.png" /><span>tube244</span>
+                <p>用着很方便，可以横屏，比iReader好。</p>
+                <div>---来自OPPO的用户说</div>
+              </li>
+            </ul>
+          </el-carousel-item>
+          <el-carousel-item class="item">
+            <ul class="clear">
+              <li>
+                <img src="http://cn-file.17pdf.com/website/home/pic_home_head_04.png" /><span>lemo</span>
+                <p>解压功能非常好，谷歌风设计，流畅，读书方便。</p>
+                <div>---来自360的用户说</div>
+              </li>
+              <li>
+                <img src="http://cn-file.17pdf.com/website/home/pic_home_head_05.png" /><span>wing 。</span>
+                <p>真的适合学习勾画重点呀。赞！</p>
+                <div>---来自华为的用户说</div>
+              </li>
+              <li>
+                <img src="http://cn-file.17pdf.com/website/home/pic_home_head_06.png" /><span>378java</span>
+                <p>格式转档功能非常强大，是刚需！</p>
+                <div>---来自小米的用户说</div>
+              </li>
+            </ul>
+          </el-carousel-item>
+          <el-carousel-item class="item">
+            <ul class="clear">
+              <li>
+                <img src="http://cn-file.17pdf.com/website/home/pic_home_head_01.png" /><span>Leon Reed</span>
+                <p>绝对是最好用的PDF阅读器，没有之一，强力推荐！</p>
+                <div>---来自百度的用户说</div>
+              </li>
+              <li>
+                <img src="http://cn-file.17pdf.com/website/home/pic_home_head_02.png" /><span>Ella Pope</span>
+                <p>支持切白边，没广告，好用！</p>
+                <div>---来自VIVO的用户说</div>
+              </li>
+              <li>
+                <img src="http://cn-file.17pdf.com/website/home/pic_home_head_03.png" /><span>tube244</span>
+                <p>用着很方便，可以横屏，比iReader好。</p>
+                <div>---来自OPPO的用户说</div>
+              </li>
+            </ul>
+          </el-carousel-item>
+          <el-carousel-item class="item">
+            <ul class="clear">
+              <li>
+                <img src="http://cn-file.17pdf.com/website/home/pic_home_head_04.png" /><span>lemo</span>
+                <p>解压功能非常好，谷歌风设计，流畅，读书方便。</p>
+                <div>---来自360的用户说</div>
+              </li>
+              <li>
+                <img src="http://cn-file.17pdf.com/website/home/pic_home_head_05.png" /><span>wing 。</span>
+                <p>真的适合学习勾画重点呀。赞！</p>
+                <div>---来自华为的用户说</div>
+              </li>
+              <li>
+                <img src="http://cn-file.17pdf.com/website/home/pic_home_head_06.png" /><span>378java</span>
+                <p>格式转档功能非常强大，是刚需！</p>
+                <div>---来自小米的用户说</div>
+              </li>
+            </ul>
+          </el-carousel-item>
+        </el-carousel>
+      </no-ssr>
+    </div>
+    <div class="free_signup">
+      <p>开启17PDF Reader高效办公学习旅程</p>
+      <span>现在注册即送10张格式转换券！</span>
+      <a>立即注册</a>
+	  </div>
+  </div>
 </template>
 
-<script lang="ts">
+<style lang="scss">
+.page-home {
+  position: relative;
+  z-index: 1;
+  top: -80px;
+  margin-bottom: -80px;
+  .el-carousel {
+    border-bottom: 1px solid #dcdcdc;
+    .el-carousel__arrow {
+      display: none;
+    }
+  }
 
-</script>
+  .home_banner_wrap{
+    border-bottom: 1px solid #dcdcdc;
+    position: relative;
+    top: -80px;
+    z-index: 1;
+  }
+  .home-banner {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+    background:rgb(240,241,243);
+    .bg{
+      height: 100%;
+      width: 50%;
+      img{
+        width: 100%;
+        max-width: 770px;
+        margin-top: 28%;
+      }
+    }
+    .slogan {
+      padding-top: 19%;
+      padding-left: 70px;
+      width: 50%;
+      .tittle {
+        color: rgb(26, 26, 26);
+        font-size: 68px;
+        padding-bottom: 10px;
+        font-weight: normal;
+      }
+      .subtitle {
+        color: rgb(77, 77, 77);
+        font-size: 33px;
+      }
+      .info {
+        color: rgb(77, 77, 77);
+        opacity: 0.8;
+        font-size: 22px;
+        padding-top: 10px;
+        max-width: 450px;
+      }
+      .power-sdk {
+        display: flex;
+        align-items: center;
+        margin-top: 20px;
+        color: #4D4D4D;
+        font-size: 16px;
+        line-height: 22px;
+        font-weight: 600;
+        svg {
+          margin-left: 8px;
+        }
+        &:hover {
+          color: #FF4F4F;
+          text-decoration: underline;
+        }
+      }
+      .home-btn {
+        background-color: rgb(255, 255, 255);
+        font-size: 18px;
+        padding: 8px 38px;
+        margin-top: 35px;
+        position: absolute;
+        border-radius: 4px;
+        a {
+          color: rgb(235, 64, 26);
+          &:hover, &:active {
+            text-decoration: none;
+          }
+        }
+        &:hover {
+          background-color: #FFE8E8;
+        }
+      }
+    }
+  }
+  .indicators {
+    display: flex;
+    justify-content: center;
+    position: relative;
+    align-items: center;
+    bottom: 45px;
+    z-index: 3;
+    .indicator {
+      width: 10px;
+      height: 10px;
+      margin-left: 5px;
+      background-color: white;
+      border-radius: 10px;
+      border: 1px solid rgba(0,0,0,0.87);
+
+      &.is-active {
+        width: 12px;
+        height: 12px;
+        border-radius: 12px;
+        background-color: black;
+      }
+    }
+  }
+  .converter-banner {
+    cursor: pointer;
+    background-color: #fff;
+    .bg {
+      text-align: right;
+    }
+    .slogan {
+      max-width: 470px;
+      padding: 19% 0px 0px;
+      margin-left: 12%;
+      .tittle {
+        font-size: 48px;
+        color: rgb(51,51,51);
+        margin:0px;
+        font-weight: normal;
+        padding-bottom: 0px;
+      }
+      .subtitle{
+        font-size: 32px;
+        color: rgb(77,77,77);
+        margin: 30px 0px 12px;
+      }
+      p{
+        font-size: 24px;
+        color: rgb(77,77,77);
+      }
+      a{
+        width: 160px;
+        height: 52px;
+        background: rgb(255,79,79);
+        color: #fff;
+        font-size: 24px;
+        border-radius: 4px;
+        display: block;
+        margin-top: 48px;
+        line-height: 52px;
+        text-align: center;
+        &:hover{
+          background:rgba(255,79,79,0.9);
+        }
+      }
+    }
+    .bg img {
+      margin-top: 26%;
+    }
+  }
+  .home_info{
+    width: 100%;
+    .item{
+      height: 418px;
+      padding:0px 10%;
+      text-align: center;
+      .right{
+        width: 50%;
+        float: left;
+      }
+      .left{
+        width: 50%;
+        float: left;
+      }
+      img{
+        width: 394px;
+        margin-top: 75px;
+      }
+      .cotent{
+        width: 394px;
+        display: inline-block;
+        h3{
+          font-size: 36px;
+          color: rgba(0,0,0,0.87);
+          margin:126px 0px 16px;
+          text-align: left;
+        }
+        p{
+          font-size: 18px;
+          color: rgba(0,0,0,0.87);
+          text-align: left;
+        }
+        a{
+          font-size: 18px;
+          display: block;
+          color: rgb(255,79,79);
+          width: 124px;
+          height: 40px;
+          border:1px solid rgb(255,79,79);
+          border-radius: 4px;
+          line-height: 40px;
+          margin-top: 32px;
+          &:hover{
+            background: rgb(255,79,79);
+            color: #fff;
+          }
+        }
+      }
+      &.white{
+        background: #fff;
+      }
+      &.gray{
+        background: rgb(250,250,250);
+      }
+    }
+  }
+  .home_function{
+    width: 100%;
+    background-color: #fafafa;
+    h3{
+      height: 50px;
+      line-height: 50px;
+      margin-bottom: 100px;
+      padding-top: 70px;
+      font-size: 36px;
+      color: rgb(51,51,51);
+      text-align: center;
+    }
+    ul{
+      padding:0px 10%;
+      margin: 0;
+      &::after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;  
+      }
+      li{
+        list-style: none;
+        height: 110px;
+        width: 50%;
+        float: left;
+        margin-bottom: 20px;
+        text-align: center;
+        .list{
+          width: 460px;
+          display: inline-block;
+        }
+        img{
+          float: left;
+          width: 96px;
+          height: 96px;
+        }
+        .wrap{
+          max-width:324px;
+          float: left;
+          margin-left: 40px;
+          h4{
+            font-size: 24px;
+            color: rgba(0,0,0,0.87);
+            margin: 6px 0px 6px;
+            text-align: left;
+          }
+          p{
+            font-size: 16px;
+            line-height: 24px;
+            color: rgb(102,102,102);
+            text-align: left;
+          }
+        }
+      }
+    }
+  } 
+  .home_user_say{
+    padding-top: 40px; 
+    h3{
+      font-size: 36px;
+      color: rgb(51,51,51);
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      margin: 0;
+    }
+    .user_say_carousel{
+      width: 100%;
+      .item{
+        ul{
+          padding-top: 40px;
+          width: 100%;
+          min-width: 1240px;
+          height: 100%;
+          text-align: center;
+          font-size: 0;
+          li + li {
+            margin-left: 107px;
+          }
+          li{
+            position: relative;
+            list-style: none;
+            width: 298px;
+            height: 160px;
+            display: inline-block;
+            border-radius:4px;
+            box-shadow:1px 1px 6px 0px rgba(153,153,153,0.3);
+            background: #fff;
+            padding: 23px 14px 0px;
+            text-align: left;
+            vertical-align: top;
+            img{
+              margin-right: 12px;
+              width: 42px;
+              height: 42px;
+              display: inline;
+              border-radius: 20px;
+            }
+            span{
+              font-size: 14px;
+              color: rgb(51,51,51);
+            }
+            p{
+              padding: 8px 0px 12px;
+              font-size: 16px;
+              line-height: 26px;
+              color: rgb(51,51,51);
+              text-align: left;
+            }
+            div{
+              position: absolute;
+              right: 14px;
+              bottom: 23px;
+              font-size: 14px;
+              color: rgb(102,102,102);
+              text-align: right;
+            }
+          }
+        }
+      }
+      .el-carousel__indicators {
+        display: none;
+      }
+    }
+  } 
+	.free_signup{
+		width: 100%;
+		height: 359px;
+		background: url(http://cn-file.17pdf.com/website/home/pic_home_bg.png) no-repeat;
+		background-size: 100% 100%;
+		color: #fff;
+		text-align: center;
+		margin-bottom: -2px;
+		p{
+			font-size: 36px;
+			padding:96px 0px 10px;
+		}
+		span{
+			display: block;
+			margin-bottom: 30px;
+			font-size: 22px;
+			opacity:0.7;
+		}
+		a{
+			width: 200px;
+			height: 48px;
+			background: rgb(255,79,79);
+			color: #fff;
+			display: inline-block;
+			border-radius: 8px;
+			line-height: 48px;
+			font-size: 18px;
+			outline: none;
+			&:hover{
+				background: rgb(243,69,69);
+			}
+		}
+	}
+}
+
+
+</style>

pages/pricing.vue

@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <div class="pricing_banner w-full h-340px bg-no-repeat mb-77px pt-86px ">
+            <div class=" w-634px h-168px bg-[#d2b99799] my-0 mx-auto text-center text-[#fff] pt-30px">
+                <p class="bg_title text-[48px] leading-[1.428571429]">17会员中心</p>
+                <p class="bg_text text-[18px] leading-[1.428571429]">文件格式无限转档，纯净无广告，更多进阶功能等你体验</p>
+                <button type="button"
+                    class="bg_button w-145px h-48px rounded-[29px] text-[18px] leading-[48px] my-22px mx-auto border-0 ">立即订阅</button>
+            </div>
+
+        </div>
+        <div class="pricing_wrap ">
+            <div class="pricing_content first">
+                <div class="content_title flex justify-center items-center mb-50px ">
+                    <img src="http://cn-file.17pdf.com/website/member_v2/pop_member_decorate2_title.png" alt="引號"
+                        class="w-18px h-9px inline-block">
+                    <p class="text-[32px] text-[#d5b07d] leading-[48px] inline-block px-24px">会员主打特权</p>
+                    <img src="http://cn-file.17pdf.com/website/member_v2/pop_member_decorate1_title.png" alt="引號"
+                        class="w-18px h-9px inline-block">
+                </div>
+                <div class="content_line w-780px mx-auto">
+                    <div class="content_box flex justify-between items-center mb-65px">
+                        <img src="http://cn-file.17pdf.com/website/pricings/v2/pic_members_removeads.png" alt="AD"
+                            class="big_img align-middle">
+                        <div class="text_container w-420px pl-20px">
+                            <p class="box_title mb-8px text-[24px] leading-[36px] font-bold text-[#333]">移除广告</p>
+                            <p class="box_text text-[18px] leading-[27px] text-[#666]">PDF
+                                Reader会员拥有移除广告特权，尊享纯净版客户端，办公全程无干扰</p>
+                        </div>
+                    </div>
+                    <div class="content_box flex justify-between items-center mb-65px">
+                        <div class="text_container w-420px pl-20px">
+                            <p class="box_title mb-8px text-[24px] leading-[36px] font-bold text-[#333]">免费无限转换格式</p>
+                            <p class="box_text text-[18px] leading-[27px] text-[#666]">支持PDF to
+                                Word、PPT、Excel、TXT、JPG/PNG无限次数转换，高效稳定</p>
+                        </div>
+                        <img src="http://cn-file.17pdf.com/website/pricings/member_fuction_pic_trans.png" alt=""
+                            class="big_img align-middle">
+                    </div>
+                </div>
+                <div class="button_subscribe mt-5px mb-80px text-center">
+                    <button type="button"
+                        class="bg_button w-330px h-56px rounded-[29px] text-[26px] leading-[56px] text-[#fff] font-medium">立即订阅</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</template>
+
+
+
+<style>
+.pricing_banner {
+    background: url(http://cn-file.17pdf.com/website/member_v2/members_banner_bg.png) no-repeat;
+    background-size: 100% 100%;
+}
+.bg_button {
+    background: linear-gradient(140.3deg, #c6995c, #e7caa3);
+}
+</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>

plugins/axios.js

@@ -0,0 +1,30 @@
+/*
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-10-19 13:58:11
+ * @LastEditTime: 2022-10-26 15:50:35
+ */
+import { Message } from 'element-ui';
+
+export default function({store, app:{ $axios, rediret}} ) {
+  $axios.onRequest(config => {
+    $axios.setToken(store.state.token, 'Bearer') 
+  })
+
+  $axios.onError(error => {
+    const code = parseInt(error.response && error.response.status)
+    if (code !== 200) {
+      Message.error(error.response.data.msg)
+      // redirect('/400')
+    }
+  })
+
+  $axios.onResponse((res) => {
+    if (res.data.code !== 200) {
+      Message.error(res.data.msg)
+    }
+    return res.data
+  })
+
+}

plugins/element-ui.js

@@ -0,0 +1,11 @@
+/*
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-10-19 20:49:35
+ * @LastEditTime: 2022-10-19 20:49:46
+ */
+import Vue from 'vue'
+import Element from 'element-ui'
+Vue.use(Element);
+ 

plugins/localStorage.js

@@ -0,0 +1,14 @@
+/*
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-10-26 09:30:22
+ * @LastEditTime: 2022-10-26 09:30:32
+ */
+import createPersistedState from 'vuex-persistedstate'
+
+export default ({ store }) => {
+    createPersistedState({
+        storage: sessionStorage
+    })(store)
+}

store/index.js

@@ -0,0 +1,50 @@
+/*
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-10-25 17:19:19
+ * @LastEditTime: 2022-10-26 17:16:34
+ */
+export const state = () => ({
+  userInfo: {
+    memberInfo: {},
+    pricingList: [],
+    setPricingList: []
+  },
+  token: '',
+})
+
+export const mutations = {
+  setUser(state, data) {
+    state.userInfo = data
+  },
+  SET_TOKEN(state, data) {
+    state.token = data
+  },
+  DEL_TOKEN(state,data) {
+    state.token = data
+  }
+}
+
+
+export const actions = {
+
+  nuxtServerInit ({commit, state}, {req}) {
+      if (req && req.headers && req.headers.token) {
+        commit('SET_TOKEN', req.headers.token)
+      }
+  },
+
+  login ({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      this.$axios.get(`auth/getToken?code=${params}`).then(res => {
+        const token = res.result.accessToken
+        localStorage.setItem('token',token)
+        commit('SET_TOKEN', token)
+        resolve(token)
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+}