index.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664
  1. <script>
  2. export default {
  3. middleware: 'user',
  4. data() {
  5. return {
  6. indexActive: 1
  7. }
  8. },
  9. head() {
  10. return {
  11. title: '17PDF Reader 一起阅读 - 移动端PDF阅读器 + 免费在线PDF转档',
  12. meta: [
  13. {
  14. name: 'keywords',
  15. hid: 'keywords',
  16. content: 'PDFReader,pdfreader,17PDF Reader,pdf软件,PDF阅读器,文件扫描'
  17. },
  18. {
  19. hid: 'description',
  20. name: 'description',
  21. content: '17PDF Reader是行走的PDF阅读器和文件扫描仪,并提供免费的PDF文件格式转换工具,支持pdf转word,pdf转doc,pdf转ppt,pdf转图片等。17PDF Reader被用户誉为“亚洲的Adobe”,拥有自主产权的PDF核心技术,为商务精英、教育族群及企业提供全方位的PDF文件解决方案。'
  22. }
  23. ]
  24. }
  25. },
  26. methods: {
  27. // elementui走马灯组件bug:item只有两个时变换的方向有问题
  28. // fix:多增加一份item,自定义轮播点
  29. handlerCarouselChange (cur) {
  30. if(cur === 1 || cur === 3) {
  31. this.indexActive = 2
  32. }else {
  33. this.indexActive = 1
  34. }
  35. },
  36. openInterface (){
  37. this.$store.commit('OPEN_LOGIN', true)
  38. this.$store.commit('SET_INTERFACE', 'register')
  39. },
  40. next(index){
  41. if(index-1){
  42. this.$refs.carousel.next()
  43. }else{
  44. this.$refs.carousel.prev()
  45. }
  46. }
  47. }
  48. }
  49. </script>
  50. <template>
  51. <div class="page-home">
  52. <el-carousel ref="carousel" indicator-position="none" trigger="click" :interval="4000" loop height="100vh" @change="handlerCarouselChange">
  53. <el-carousel-item>
  54. <div class="home-banner banner ">
  55. <div class="bg"><img src="~/assets/images/common/pic_home_banner00.png" /></div>
  56. <div class="slogan">
  57. <h2 class="tittle">17PDF Reader</h2>
  58. <h3 class="subtitle">阅轻松·阅简单·阅快捷</h3>
  59. <p class="info">行业领先的阅读引擎,精准快速的格式转换,让移动无纸化办公轻松易行!</p>
  60. <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>
  61. </div>
  62. </div>
  63. </el-carousel-item>
  64. <el-carousel-item>
  65. <div class="home-banner converter-banner banner">
  66. <div class="slogan">
  67. <h2 class="tittle">在线格式转换</h2>
  68. <h3 class="subtitle">轻松拖拽/一键转档/批量转换</h3>
  69. <p>支持多种常用格式转档,先进的转换引擎,精准快速,超乎想象。</p>
  70. <a href="/converter">立即体验</a>
  71. </div>
  72. <div class="bg"><img src="~/assets/images/common/pic_home_banner02.png" /></div>
  73. </div>
  74. </el-carousel-item>
  75. <el-carousel-item>
  76. <div class="home-banner banner">
  77. <div class="bg"><img src="~/assets/images/common/pic_home_banner00.png" /></div>
  78. <div class="slogan">
  79. <h2 class="tittle">17PDF Reader</h2>
  80. <h3 class="subtitle">阅轻松·阅简单·阅快捷</h3>
  81. <p class="info">行业领先的阅读引擎,精准快速的格式转换,让移动无纸化办公轻松易行!</p>
  82. <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>
  83. </div>
  84. </div>
  85. </el-carousel-item>
  86. <el-carousel-item>
  87. <div class="home-banner converter-banner banner">
  88. <div class="slogan">
  89. <h2 class="tittle">在线格式转换</h2>
  90. <h3 class="subtitle">轻松拖拽/一键转档/批量转换</h3>
  91. <p>支持多种常用格式转档,先进的转换引擎,精准快速,超乎想象。</p>
  92. <a href="/converter">立即体验</a>
  93. </div>
  94. <div class="bg"><img src="~/assets/images/common/pic_home_banner02.png" /></div>
  95. </div>
  96. </el-carousel-item>
  97. </el-carousel>
  98. <!-- 自定义轮播点 -->
  99. <ul class="indicators">
  100. <li v-for="index in 2" :key="index" :class="index === indexActive?'is-active':''" class="indicator cursor-pointer" @click="next(index)">
  101. </li>
  102. </ul>
  103. <div class="home_info">
  104. <div class="item white">
  105. <div class="left"><img src="http://cn-file.17pdf.com/website/home/pic_home_file_converter.png" /></div>
  106. <div class="right">
  107. <div class="cotent">
  108. <h3>格式转换</h3>
  109. <p>PDF高效格式转换,支持PDF to Word、PPT、Excel、TXT、JPG/PNG,一键转档,批量转换,突破格式壁垒。</p>
  110. <a href="/converter">立即使用</a>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. <div class="home_function">
  116. <h3>更多强大功能 · 助力效率提升</h3>
  117. <ul class="clear">
  118. <li>
  119. <div class="list">
  120. <img src="http://cn-file.17pdf.com/website/home/ic_home_more_eyes.png" />
  121. <div class="wrap">
  122. <h4>文件阅读</h4>
  123. <p>优质的阅读引擎带来流畅、稳定的阅读体验,轻松阅读无干扰。</p>
  124. </div>
  125. </div>
  126. </li>
  127. <li>
  128. <div class="list">
  129. <img src="http://cn-file.17pdf.com/website/home/ic_home_more_mark.png" />
  130. <div class="wrap">
  131. <h4>文件注释</h4>
  132. <p>支持高亮、下划线、波浪线、手写等注释方式,可插入图片及语音笔记。</p>
  133. </div>
  134. </div>
  135. </li>
  136. <li>
  137. <div class="list">
  138. <img src="http://cn-file.17pdf.com/website/home/ic_home_more_manage.png" />
  139. <div class="wrap">
  140. <h4>文件管理</h4>
  141. <p>文件移动复制、压缩删除,PDF文件密码保护,并可将PDF文件生成链接方便分享。</p>
  142. </div>
  143. </div>
  144. </li>
  145. <li>
  146. <div class="list">
  147. <img src="http://cn-file.17pdf.com/website/home/ic_home_more_edit.png" />
  148. <div class="wrap">
  149. <h4>页面编辑</h4>
  150. <p>可将PDF任意页面进行删除、旋转、排序、拆分并另存为新的PDF,还能对多个PDF文件进行合并。</p>
  151. </div>
  152. </div>
  153. </li>
  154. <li>
  155. <div class="list">
  156. <img src="http://cn-file.17pdf.com/website/home/ic_home_moer_mode.png" />
  157. <div class="wrap">
  158. <h4>阅读模式</h4>
  159. <p>日间模式/夜间模式/护眼模式自由切换,缓解视觉疲劳。</p>
  160. </div>
  161. </div>
  162. </li>
  163. <li>
  164. <div class="list">
  165. <img src="http://cn-file.17pdf.com/website/home/ic_home_more_search.png" />
  166. <div class="wrap">
  167. <h4>搜索索引</h4>
  168. <p>从PDF文档中提取、选择、搜索和检索文本,以最快的速度搜索索引PDF文本信息。</p>
  169. </div>
  170. </div>
  171. </li>
  172. <li>
  173. <div class="list">
  174. <img src="http://cn-file.17pdf.com/website/home/ic_home_more_scan.png" />
  175. <div class="wrap">
  176. <h4>文件扫描</h4>
  177. <p>支持拍照扫描文件、图片并保存为PDF文件,可调整图片边缘及使用滤镜,抠图精准。</p>
  178. </div>
  179. </div>
  180. </li>
  181. <li>
  182. <div class="list">
  183. <img src="http://cn-file.17pdf.com/website/home/ic_home_more_read.png" />
  184. <div class="wrap">
  185. <h4>文件朗读</h4>
  186. <p>支持文字转语音(TTS),朗读PDF文件内容,解放双眼,让耳朵“读”文件。</p>
  187. </div>
  188. </div>
  189. </li>
  190. </ul>
  191. </div>
  192. <div class="home_user_say">
  193. <h3>5年口碑 · 品质之选</h3>
  194. <client-only>
  195. <el-carousel class="user_say_carousel">
  196. <el-carousel-item class="item">
  197. <ul class="clear">
  198. <li>
  199. <img src="http://cn-file.17pdf.com/website/home/pic_home_head_01.png" /><span>Leon Reed</span>
  200. <p>绝对是最好用的PDF阅读器,没有之一,强力推荐!</p>
  201. <div>---来自百度的用户说</div>
  202. </li>
  203. <li>
  204. <img src="http://cn-file.17pdf.com/website/home/pic_home_head_02.png" /><span>Ella Pope</span>
  205. <p>支持切白边,没广告,好用!</p>
  206. <div>---来自VIVO的用户说</div>
  207. </li>
  208. <li>
  209. <img src="http://cn-file.17pdf.com/website/home/pic_home_head_03.png" /><span>tube244</span>
  210. <p>用着很方便,可以横屏,比iReader好。</p>
  211. <div>---来自OPPO的用户说</div>
  212. </li>
  213. </ul>
  214. </el-carousel-item>
  215. <el-carousel-item class="item">
  216. <ul class="clear">
  217. <li>
  218. <img src="http://cn-file.17pdf.com/website/home/pic_home_head_04.png" /><span>lemo</span>
  219. <p>解压功能非常好,谷歌风设计,流畅,读书方便。</p>
  220. <div>---来自360的用户说</div>
  221. </li>
  222. <li>
  223. <img src="http://cn-file.17pdf.com/website/home/pic_home_head_05.png" /><span>wing 。</span>
  224. <p>真的适合学习勾画重点呀。赞!</p>
  225. <div>---来自华为的用户说</div>
  226. </li>
  227. <li>
  228. <img src="http://cn-file.17pdf.com/website/home/pic_home_head_06.png" /><span>378java</span>
  229. <p>格式转档功能非常强大,是刚需!</p>
  230. <div>---来自小米的用户说</div>
  231. </li>
  232. </ul>
  233. </el-carousel-item>
  234. <el-carousel-item class="item">
  235. <ul class="clear">
  236. <li>
  237. <img src="http://cn-file.17pdf.com/website/home/pic_home_head_01.png" /><span>Leon Reed</span>
  238. <p>绝对是最好用的PDF阅读器,没有之一,强力推荐!</p>
  239. <div>---来自百度的用户说</div>
  240. </li>
  241. <li>
  242. <img src="http://cn-file.17pdf.com/website/home/pic_home_head_02.png" /><span>Ella Pope</span>
  243. <p>支持切白边,没广告,好用!</p>
  244. <div>---来自VIVO的用户说</div>
  245. </li>
  246. <li>
  247. <img src="http://cn-file.17pdf.com/website/home/pic_home_head_03.png" /><span>tube244</span>
  248. <p>用着很方便,可以横屏,比iReader好。</p>
  249. <div>---来自OPPO的用户说</div>
  250. </li>
  251. </ul>
  252. </el-carousel-item>
  253. <el-carousel-item class="item">
  254. <ul class="clear">
  255. <li>
  256. <img src="http://cn-file.17pdf.com/website/home/pic_home_head_04.png" /><span>lemo</span>
  257. <p>解压功能非常好,谷歌风设计,流畅,读书方便。</p>
  258. <div>---来自360的用户说</div>
  259. </li>
  260. <li>
  261. <img src="http://cn-file.17pdf.com/website/home/pic_home_head_05.png" /><span>wing 。</span>
  262. <p>真的适合学习勾画重点呀。赞!</p>
  263. <div>---来自华为的用户说</div>
  264. </li>
  265. <li>
  266. <img src="http://cn-file.17pdf.com/website/home/pic_home_head_06.png" /><span>378java</span>
  267. <p>格式转档功能非常强大,是刚需!</p>
  268. <div>---来自小米的用户说</div>
  269. </li>
  270. </ul>
  271. </el-carousel-item>
  272. </el-carousel>
  273. </client-only>
  274. </div>
  275. <div class="free_signup">
  276. <p>开启17PDF Reader高效办公学习旅程</p>
  277. <span>现在注册即送10张格式转换券!</span>
  278. <a class="cursor-pointer" @click="openInterface">立即注册</a>
  279. </div>
  280. </div>
  281. </template>
  282. <style lang="scss">
  283. .page-home {
  284. position: relative;
  285. z-index: 1;
  286. top: -80px;
  287. margin-bottom: -80px;
  288. .el-carousel {
  289. border-bottom: 1px solid #dcdcdc;
  290. .el-carousel__arrow {
  291. display: none;
  292. }
  293. }
  294. .home_banner_wrap{
  295. border-bottom: 1px solid #dcdcdc;
  296. position: relative;
  297. top: -80px;
  298. z-index: 1;
  299. }
  300. .home-banner {
  301. display: flex;
  302. height: 100%;
  303. width: 100%;
  304. cursor: pointer;
  305. background:rgb(240,241,243);
  306. .bg{
  307. height: 100%;
  308. width: 50%;
  309. img{
  310. width: 100%;
  311. max-width: 770px;
  312. margin-top: 28%;
  313. }
  314. }
  315. .slogan {
  316. padding-top: 19%;
  317. padding-left: 70px;
  318. width: 50%;
  319. .tittle {
  320. color: rgb(26, 26, 26);
  321. font-size: 68px;
  322. padding-bottom: 10px;
  323. font-weight: normal;
  324. }
  325. .subtitle {
  326. color: rgb(77, 77, 77);
  327. font-size: 33px;
  328. }
  329. .info {
  330. color: rgb(77, 77, 77);
  331. opacity: 0.8;
  332. font-size: 22px;
  333. padding-top: 10px;
  334. max-width: 450px;
  335. }
  336. .power-sdk {
  337. display: flex;
  338. align-items: center;
  339. margin-top: 20px;
  340. color: #4D4D4D;
  341. font-size: 16px;
  342. line-height: 22px;
  343. font-weight: 600;
  344. svg {
  345. margin-left: 8px;
  346. }
  347. &:hover {
  348. color: #FF4F4F;
  349. text-decoration: underline;
  350. }
  351. }
  352. .home-btn {
  353. background-color: rgb(255, 255, 255);
  354. font-size: 18px;
  355. padding: 8px 38px;
  356. margin-top: 35px;
  357. position: absolute;
  358. border-radius: 4px;
  359. a {
  360. color: rgb(235, 64, 26);
  361. &:hover, &:active {
  362. text-decoration: none;
  363. }
  364. }
  365. &:hover {
  366. background-color: #FFE8E8;
  367. }
  368. }
  369. }
  370. }
  371. .indicators {
  372. display: flex;
  373. justify-content: center;
  374. position: relative;
  375. align-items: center;
  376. bottom: 45px;
  377. z-index: 3;
  378. .indicator {
  379. width: 10px;
  380. height: 10px;
  381. margin-left: 5px;
  382. background-color: white;
  383. border-radius: 10px;
  384. border: 1px solid rgba(0,0,0,0.87);
  385. &.is-active {
  386. width: 12px;
  387. height: 12px;
  388. border-radius: 12px;
  389. background-color: black;
  390. }
  391. }
  392. }
  393. .converter-banner {
  394. cursor: pointer;
  395. background-color: #fff;
  396. .bg {
  397. text-align: right;
  398. }
  399. .slogan {
  400. max-width: 470px;
  401. padding: 17% 0px 0px;
  402. margin-left: 12%;
  403. .tittle {
  404. font-size: 48px;
  405. color: rgb(51,51,51);
  406. margin:0px;
  407. font-weight: normal;
  408. padding-bottom: 0px;
  409. }
  410. .subtitle{
  411. font-size: 32px;
  412. color: rgb(77,77,77);
  413. margin: 30px 0px 12px;
  414. }
  415. p{
  416. font-size: 24px;
  417. color: rgb(77,77,77);
  418. }
  419. a{
  420. width: 160px;
  421. height: 52px;
  422. background: rgb(255,79,79);
  423. color: #fff;
  424. font-size: 24px;
  425. border-radius: 4px;
  426. display: block;
  427. margin-top: 48px;
  428. line-height: 52px;
  429. text-align: center;
  430. &:hover{
  431. background:rgba(255,79,79,0.9);
  432. }
  433. }
  434. }
  435. .bg img {
  436. margin-top: 26%;
  437. }
  438. }
  439. .home_info{
  440. width: 100%;
  441. .item{
  442. height: 418px;
  443. padding:0px 10%;
  444. text-align: center;
  445. .right{
  446. width: 50%;
  447. float: left;
  448. }
  449. .left{
  450. width: 50%;
  451. float: left;
  452. }
  453. img{
  454. width: 394px;
  455. margin-top: 75px;
  456. }
  457. .cotent{
  458. width: 394px;
  459. display: inline-block;
  460. h3{
  461. font-size: 36px;
  462. color: rgba(0,0,0,0.87);
  463. margin:126px 0px 16px;
  464. text-align: left;
  465. }
  466. p{
  467. font-size: 18px;
  468. color: rgba(0,0,0,0.87);
  469. text-align: left;
  470. }
  471. a{
  472. font-size: 18px;
  473. display: block;
  474. color: rgb(255,79,79);
  475. width: 124px;
  476. height: 40px;
  477. border:1px solid rgb(255,79,79);
  478. border-radius: 4px;
  479. line-height: 40px;
  480. margin-top: 32px;
  481. &:hover{
  482. background: rgb(255,79,79);
  483. color: #fff;
  484. }
  485. }
  486. }
  487. &.white{
  488. background: #fff;
  489. }
  490. &.gray{
  491. background: rgb(250,250,250);
  492. }
  493. }
  494. }
  495. .home_function{
  496. width: 100%;
  497. background-color: #fafafa;
  498. h3{
  499. height: 50px;
  500. line-height: 50px;
  501. margin-bottom: 100px;
  502. padding-top: 70px;
  503. font-size: 36px;
  504. color: rgb(51,51,51);
  505. text-align: center;
  506. }
  507. ul{
  508. padding:0px 10%;
  509. margin: 0;
  510. &::after {
  511. visibility: hidden;
  512. display: block;
  513. font-size: 0;
  514. content: " ";
  515. clear: both;
  516. height: 0;
  517. }
  518. li{
  519. list-style: none;
  520. height: 110px;
  521. width: 50%;
  522. float: left;
  523. margin-bottom: 20px;
  524. text-align: center;
  525. .list{
  526. width: 460px;
  527. display: inline-block;
  528. }
  529. img{
  530. float: left;
  531. width: 96px;
  532. height: 96px;
  533. }
  534. .wrap{
  535. max-width:324px;
  536. float: left;
  537. margin-left: 40px;
  538. h4{
  539. font-size: 24px;
  540. color: rgba(0,0,0,0.87);
  541. margin: 6px 0px 6px;
  542. text-align: left;
  543. }
  544. p{
  545. font-size: 16px;
  546. line-height: 24px;
  547. color: rgb(102,102,102);
  548. text-align: left;
  549. }
  550. }
  551. }
  552. }
  553. }
  554. .home_user_say{
  555. padding-top: 40px;
  556. h3{
  557. font-size: 36px;
  558. color: rgb(51,51,51);
  559. height: 50px;
  560. line-height: 50px;
  561. text-align: center;
  562. margin: 0;
  563. }
  564. .user_say_carousel{
  565. width: 100%;
  566. .item{
  567. ul{
  568. padding-top: 40px;
  569. width: 100%;
  570. min-width: 1240px;
  571. height: 100%;
  572. text-align: center;
  573. font-size: 0;
  574. li + li {
  575. margin-left: 107px;
  576. }
  577. li{
  578. position: relative;
  579. list-style: none;
  580. width: 298px;
  581. height: 160px;
  582. display: inline-block;
  583. border-radius:4px;
  584. box-shadow:1px 1px 6px 0px rgba(153,153,153,0.3);
  585. background: #fff;
  586. padding: 23px 14px 0px;
  587. text-align: left;
  588. vertical-align: top;
  589. img{
  590. margin-right: 12px;
  591. width: 42px;
  592. height: 42px;
  593. display: inline;
  594. border-radius: 20px;
  595. }
  596. span{
  597. font-size: 14px;
  598. color: rgb(51,51,51);
  599. }
  600. p{
  601. padding: 8px 0px 12px;
  602. font-size: 16px;
  603. line-height: 26px;
  604. color: rgb(51,51,51);
  605. text-align: left;
  606. }
  607. div{
  608. position: absolute;
  609. right: 14px;
  610. bottom: 23px;
  611. font-size: 14px;
  612. color: rgb(102,102,102);
  613. text-align: right;
  614. }
  615. }
  616. }
  617. }
  618. .el-carousel__indicators {
  619. display: none;
  620. }
  621. }
  622. }
  623. .free_signup{
  624. width: 100%;
  625. height: 359px;
  626. background: url(http://cn-file.17pdf.com/website/home/pic_home_bg.png) no-repeat;
  627. background-size: 100% 100%;
  628. color: #fff;
  629. text-align: center;
  630. margin-bottom: -2px;
  631. p{
  632. font-size: 36px;
  633. padding:96px 0px 10px;
  634. }
  635. span{
  636. display: block;
  637. margin-bottom: 30px;
  638. font-size: 22px;
  639. opacity:0.7;
  640. }
  641. a{
  642. width: 200px;
  643. height: 48px;
  644. background: rgb(255,79,79);
  645. color: #fff;
  646. display: inline-block;
  647. border-radius: 8px;
  648. line-height: 48px;
  649. font-size: 18px;
  650. outline: none;
  651. &:hover{
  652. background: rgb(243,69,69);
  653. }
  654. }
  655. }
  656. }
  657. </style>