|
|
@@ -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>
|
Darkhorsedamon