17pdf_front_end/pages/index.vue

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

<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;
    }
  }

  .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>