17pdf_front_end/pages/sdk.vue

<template>
  <Fragment>
    <div class="content">
      <div class="section" style="height: calc(100vh - 80px)">
        <div class="banner">
          <div class="bg"></div>
            <div class="txt">
            <h1>SDK</h1>
            <h2 class="sub_title">iOS Android Mac<br />跨平台整合核心功能</h2>
            <div class="btns"><span class="btn-primary trail-btn" @click="handlerApplyUse">申请试用</span><span class="buy-btn" @click="handlerApplyUse">申请报价</span></div>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="item left">
          <div class="discription">
            <div class="img">
              <span class="filebrowse">
                <img class="locker" :class="{'animation': active === 1}" src="http://cn-file.17pdf.com/website/sdk/icon_locker.png" alt="pdf阅读" />
              </span>
            </div>
            <div class="txt">
              <div class="wrap">
                <h2>文件阅读</h2>
                <p>行业领先渲染引擎，稳定流畅，迅速启动</p>
              </div>
            </div>
          </div>
          <div class="more">
            <em class="more_icon"></em>
            <div class="list">
              <span class="iocn filebrowse1"></span>
              <h3>文件浏览</h3>
              <p>全屏浏览或自定义页面宽度，横向连续滑动或翻页效果，保存文档并对机密文件进行加密处理</p>
            </div>
            <div class="list">
              <span class="iocn filebrowse2"></span>
              <h3>缩略图</h3>
              <p>改变缩略图大小，改变页码数字，取消缩略图功能，改成滑动的缩略图按钮</p>
            </div>
            <div class="list">
              <span class="iocn filebrowse3"></span>
              <h3>大纲书签</h3>
              <p>获取、创建及编辑大纲和书签，获取大纲参数。在大纲弹窗处可以快速进入书签和注释位置</p>
            </div>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="item right">
          <div class="discription">
            <div class="txt">
              <div class="wrap">
                <h2>文件注释</h2>
                <p>轻松添加、管理、分享文件注释</p>
              </div>
            </div>
            <div class="img">
              <span class="annotation">
                <img class="edit" :class="{'animation': active === 2}" src="http://cn-file.17pdf.com/website/sdk/icon_edit.png" alt="PDF注释工具" />
                <img class="remove" :class="{'animation': active === 2}" src="http://cn-file.17pdf.com/website/sdk/icon_remove.png" alt="" />
              </span>
            </div>
          </div>
          <div class="more">
            <em class="more_icon"></em>
            <div class="list">
              <span class="iocn annotation1"></span>
              <h3>注释管理</h3>
              <p>添加、删除、编辑、获取注释并设置注释属性</p>
            </div>
            <div class="list">
              <span class="iocn annotation2"></span>
              <h3>注释列表</h3>
              <p>支持文本标注（高亮、下划线等）图片注释（线条、印章等）、文本输入（打字机工具）等</p>
            </div>
            <div class="list">
              <span class="iocn annotation3"></span>
              <h3>注释导入导出</h3>
              <p>通过FDF文件（仅支持标记注释）导入和导出注释，轻松共享<br/>注释内容</p>
            </div>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="item left">
          <div class="discription">
            <div class="img">
              <span class="dig"><img class="pen" :class="{'animation': active === 3}" src="http://cn-file.17pdf.com/website/sdk/icon_pen.png" alt="数字签名" /></span>
            </div>
            <div class="txt">
              <div class="wrap">
                <h2>签名&水印</h2>
                <p>让文件烙上你的专属印记</p>
              </div>
            </div>
          </div>
          <div class="more">
            <em class="more_icon"></em>
            <div class="list">
              <span class="iocn dig1"></span>
              <h3>数字签名</h3>
              <p>添加和验证第三方数字签名，可添加签名域，签署文档，自定义签名的外观</p>
            </div>
            <div class="list">
              <span class="iocn dig2"></span>
              <h3>水印添加</h3>
              <p>新增专属文字或图片水印，自定义颜色、透明度及套用的页面范围防止内容复制，保护版权</p>
            </div>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="item right">
          <div class="discription">
            <div class="txt">
              <div class="wrap">
                <h2>文本操作</h2>
                <p>编辑修改PDF文本内容</p>
              </div>
            </div>
            <div class="img">
              <span class="txtedit">
                <img class="magnifier" :class="{'animation': active === 4}" src="http://cn-file.17pdf.com/website/sdk/icon_magnifier.png" alt="pdf文本操作" />
              </span>
            </div>
          </div>
          <div class="more">
            <em class="more_icon"></em>
            <div class="list">
              <span class="iocn txtedit1"></span>
              <h3>文本编辑</h3>
              <p>新增、删除、提取、选择、以及修改PDF中文字，快速检索<br/>PDF文本信息</p>
            </div>
            <div class="list">
              <span class="iocn txtedit2"></span>
              <h3>OCR</h3>
              <p>支持图片文字辨识，可以编辑和查找图片文字</p>
            </div>
            <div class="list">
              <span class="iocn txtedit3"></span>
              <h3>表单填写</h3>
              <p>填写表单空格、填入选单选项、<br/>一键清空表单内容</p>
            </div>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="item left">
          <div class="discription">
            <div class="img">
              <span class="document">
                <img class="rotate" :class="{'animation': active === 5}" src="http://cn-file.17pdf.com/website/sdk/icon_rotate.png" alt="文档编辑" />
                <img class="zoom" :class="{'animation': active === 5}" src="http://cn-file.17pdf.com/website/sdk/icon_zoom.png" />
              </span>
            </div>
            <div class="txt">
              <div class="wrap">
                <h2>文件编辑</h2>
                <p>让PDF文件自由组合</p>
              </div>
            </div>
          </div>
          <div class="more">
            <em class="more_icon"></em>
            <div class="list">
              <span class="iocn document1"></span>
              <h3>文件编辑</h3>
              <p>对指定页面进行删除、旋转、移动重组等操作或提取任意页面另存为新的PDF</p>
            </div>
            <div class="list">
              <span class="iocn document2"></span>
              <h3>合并分割</h3>
              <p>合并不同PDF文件生成新的PDF文档或拆分单个PDF文档为多个文档</p>
            </div>
          </div>
        </div>
      </div>
      <div class="section info_wrap" :style="{height: computedH}">
        <div class="info">
          <ul>
            <li class="info_move" style="transform: translateY(0);opacity: 1;">便捷。</li>
            <li class="info_move" style="transform: translateY(100%);opacity: 0;">高效。</li>
            <li class="info_move" style="transform: translateY(-100%);opacity: 0;">专业。</li>
          </ul>
          <p>企业办公专业APP SDK<br/>跨平台整体核心功能<br/>让你的产品快人一步</p>
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <ul v-show="active !== 0" class="index">
      <li v-for="idx in 6" :key="idx" :class="{active: active===idx}" @click="handlerToSection(idx)"></li>
    </ul>

    <el-dialog 
      :visible.sync="modalViable"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="480px"
      @close="resetStatus"
    >
      <sdk-form ref="sdkForm"></sdk-form>
    </el-dialog>
  </Fragment>
</template>

<script>
import { throttle } from 'throttle-debounce';
import { Fragment } from 'vue-fragment'
import sdkForm from '~/components/SdkForm.vue'
export default {
  components: {Fragment, sdkForm},
  data() {
    return {
      modalViable: false,
      computedH: '',
      active: 0,
    }
  },
  mounted() {
    let num=1; let prev; let next;
    const infoMoves = document.querySelectorAll('.info_move')
    let interval = setInterval(function (){
      if(num > 2){num=0;}
      infoMoves[num].style.transform= 'translateY(0)'
      infoMoves[num].style.opacity= 1
      prev=num-1;
      if(prev < 0){prev=2;}
      infoMoves[prev].style.transform= 'translateY(-100%)'
      infoMoves[prev].style.opacity= 0
      next=num+1;
      if(next > 2){next=0;}
      infoMoves[next].style.transform= 'translateY(100%)'
      infoMoves[next].style.opacity= 0
      num++;
    },2000);
    this.$once('hook:beforeDestroy',()=> {
      clearInterval(interval)
      interval = null
    })
    this.getLastSectionH()
    // footer存在媒体查询, 需动态计算高度
    window.addEventListener('resize',throttle(200,this.getLastSectionH))
    window.addEventListener('scroll',throttle(200,this.handlerScroll))
    // 绑定鼠标滑轮滚动事件
    window.onmousewheel=document.onmousewheel=throttle(50,(e)=> {
      if(e.wheelDelta < 0 && this.active < 6) {
        this.handlerToSection(this.active+1,false,50)
        
      }else if(e.wheelDelta > 0 && this.active >= 0) {
        this.handlerToSection(this.active,true,50)

      }
    },{noLeading: true})
    // noLeadind<T> 代表第一次不触发函数执行，解决了鼠标滚轮事件在防抖处理后还触发两次绑定事件的问题
  },
  beforeDestroy() {
    window.beforeDestroy('resize',this.getLastSectionH)
    window.beforeDestroy('scroll',this.handlerScroll)
  },
  methods: {
    // 获取最后一个selection的高度
    getLastSectionH() {
      const footerbar = document.querySelector('.footerbar')
      const footerHeight = window.getComputedStyle(footerbar).height
      this.computedH = `calc(100vh - ${footerHeight})`  
    },
    // 监听滚动事件
    handlerScroll() {
      const sectionArr = document.querySelectorAll('.section')
      const offsetTopArr = []
      // 获取每个section的offsetTop
      // NodeList 类数组对象可以用forEach循环
      sectionArr.forEach(item => {
        offsetTopArr.push(item.offsetTop)
      })
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      offsetTopArr.forEach((item,idx) => {
        if(scrollTop>=offsetTopArr[idx]) {
          this.active = idx
        }
      })
    },
    // 导航点点击跳转事件处理
    /**
     * @description: 
     * @param {*} index 滚轮滑动定位section处理
     * @param {*} toTop 滑轮滚动时用，用以处理第二个section往上滑时恢复页面开头
     * @param {*} STEP  每次滑动的步数
     * @return {*}
     */
    handlerToSection(index,toTop,STEP = 100) {
      let targetOffsetTop
      // toTop代表滑轮滚动从section1到banner图时，需要滚动到顶部也就是offsetTop为0的位置
      if(toTop && index === 0) {
        targetOffsetTop = 0
      }else {
        targetOffsetTop = document.querySelector(`.section:nth-child(${index+1})`).offsetTop
      }
      // 获取当前 offsetTop
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 判断是往下滑还是往上滑
      if (scrollTop > targetOffsetTop) {
        smoothUp()
      } else {
        smoothDown()
      }
      // 定义往下滑函数
      function smoothDown() {
        // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
        if (scrollTop < targetOffsetTop) {
          // 如果和目标相差距离大于等于 STEP 就跳 STEP
          // 否则直接跳到目标点，目标是为了防止跳过了。
          if (targetOffsetTop - scrollTop >= STEP) {
            scrollTop += STEP
          } else {
            scrollTop = targetOffsetTop
          }
          document.body.scrollTop = scrollTop
          document.documentElement.scrollTop = scrollTop
          requestAnimationFrame(smoothDown)
        }
      }
      // 定义往上滑函数
      function smoothUp() {
        if (scrollTop > targetOffsetTop) {
          if (scrollTop - targetOffsetTop >= STEP) {
            scrollTop -= STEP
          } else {
            scrollTop = targetOffsetTop
          }
          document.body.scrollTop = scrollTop
          document.documentElement.scrollTop = scrollTop
          requestAnimationFrame(smoothUp)
        }
      }
    },
    handlerApplyUse() {
      this.modalViable = true
    },
    resetStatus() {
      this.$refs.sdkForm.handlerResetStatus()
    }
  }
}
</script>

<style lang="scss">
@import '@/assets/mixins.scss';

.content {
  .section{
    height: 100vh;
    min-height: 400px;
    &.info_wrap{
      position: relative;
    }
  }
  .banner{
    height: 100%;
    background: url(http://cn-file.17pdf.com/website/sdk/banner_bg_01.png) repeat;
    text-align: left;
    position: relative;
    color: #fff;
    .bg{
      position: absolute;
      right: 0px;
      bottom: 0px;
      line-height: -10px;
      width: 906px;
      height: 100%;
      background: url(http://cn-file.17pdf.com/website/sdk/banner_bg_02.png) no-repeat;
    }
    .txt{
      position: absolute;
      left: 10%;
      top: 50%;
      margin-top: -235px;
    }
    h1{
      margin: 0px;
      font-size: 120px;
      margin-bottom: 38px;
    }
    .sub_title{
      margin:0px;
      font-size: 52px;
      line-height: 60px;
    }
    .img{
      margin-top: 30px;
    }
    .trail-btn, .buy-btn {
      display: inline-block;
      width: 186px;
      height: 53px;
      font-size: 16px;
      font-weight: bold;
      border-radius: 30px;
      line-height: 53px;
      text-align: center;
      cursor: pointer;
      &:hover {
        opacity: 0.7;
      }
    }
    .btns {
      margin-top: 30px;
    }
    .trail-btn {
      margin-right: 20px;
      color: #0097FF;
      background-color: #fff;
    }
    .buy-btn {
      line-height: 49px;
      color: #fff;
      border: 2px solid rgba(255,255,255,1);
    }
  }
  .item{
			height: 100%;
			&.left .discription{
				.img{
					span{
						right: 92px;
					}
				}
				.txt{
					.wrap{
						left: 50px;
					}
				}
			}
			&.right .discription{
				.img{
					span{
						left: 92px;
					}
				}
				.txt{
					.wrap{
						right: 100px;
					}
				}
			}
			.discription{
				height: 56%;
				.img{
					width: 50%;
					height: 100%;
					float: left;
					position: relative;
					span{
						width: 340px;
						height: 300px;
						position: absolute;
						top: 50%;
						margin-top: -170px;
						&.filebrowse{
							background:url(http://cn-file.17pdf.com/website/sdk/SDK_bigicon.png) -736px -4px;
							.locker{
								position: absolute;
								left: 50px;
								bottom: 28px;
								transition: all 1s;
								&.animation{
									animation: locker 1.5s linear;
								}
								@include keyframes(locker) {
				          0% {
				            transform: rotate(0deg);
				          }
				          20% {
				            transform: rotate(-18deg);
				          }
				          55% {
				            transform: rotate(20deg);
				          }
				          70% {
				            transform: rotate(-12deg);
				          }
				          85% {
				            transform: rotate(16deg);
				          }
				          95% {
				            transform: rotate(-4deg);
				          }
				          100% {
				            transform: rotate(8deg);
				          }
				        }
							}
						}
						&.annotation{
							background:url(http://cn-file.17pdf.com/website/sdk/SDK_bigicon.png) -1118px -4px;
							.edit{
								position: absolute;
								left: 0px;
								top: 60px;
								&.animation{
									animation: edit 1s linear;
								}
								@include keyframes(edit) {
									0% {
				            transform: translateX(-150px);
				            opacity: 0;
				          }
				          100% {
				            transform: translateX(0px);
				            opacity: 1;
				          }
				        }
							}
							.remove{
								position: absolute;
								right: 0px;
								bottom: 10px;
								&.animation{
									animation: remove 1s linear;
								}
								@include keyframes(remove) {
				          0% {
				            transform: translateX(150px);
				            opacity: 0;
				          }
				          100% {
				            transform: translateX(0px);
				            opacity: 1;
				          }
				        }
							}
						}
						&.dig{
							background:url(http://cn-file.17pdf.com/website/sdk/SDK_bigicon.png) -1472px -4px;
							.pen{
								position: absolute;
								left: 70px;
								top: 126px;
								&.animation{
									animation: pen 1.5s linear;
								}
								@include keyframes(pen) {
				          0% {
				            transform: translateX(0px);
				          }
				          60% {
				            transform: translateX(36px);
				          }
				          100% {
				            transform: translateX(0px);
				          }
				        }
							}
						}
						&.txtedit{
							background:url(http://cn-file.17pdf.com/website/sdk/SDK_bigicon.png) -380px -4px;
							.magnifier{
								position: absolute;
								right: 40px;
								bottom: 36px;
								&.animation{
									animation: magnifier 2s linear;
								}
								@include keyframes(magnifier) {
									0% {
				            transform: rotate(0deg);
				          }
				          20% {
				            transform: rotate(-20deg);
				          }
				          55% {
				            transform: rotate(40deg);
				          }
				          70% {
				            transform: rotate(-10deg);
				          }
				          85% {
				            transform: rotate(30deg);
				          }
				          95% {
				            transform: rotate(-4deg);
				          }
				          100% {
				            transform: rotate(14deg);
				          }
				        }
							}
						}
						&.document{
							background:url(http://cn-file.17pdf.com/website/sdk/SDK_bigicon.png) -0px -4px;
							.rotate{
								position: absolute;
								right: 38px;
								top: 50px;
								&.animation{
									animation: rotate 1.5s linear;
								}
								@include keyframes(rotate) {
				          0% {
				            transform: rotate(0deg);
				          }
				          70% {
				            transform: rotate(-360deg);
				          }
				          84% {
				            transform: rotate(-270deg);
				          }
				          100% {
				            transform: rotate(-360deg);
				          }
				        }
							}
							.zoom{
								position: absolute;
								left: 76px;
								bottom: 44px;
								&.animation{
									animation: rotate 1.5s linear;
								}
								@include keyframes(rotate) {
				          0% {
				            transform: rotate(0deg);
				          }
				          70% {
				            transform: rotate(-360deg);
				          }
				          84% {
				            transform: rotate(-270deg);
				          }
				          100% {
				            transform: rotate(-360deg);
				          }
				        }
							}
						}
					}
				}
				.txt{
					width: 50%;
					height: 100%;
					float: left;
					position: relative;
					.wrap{
						position: absolute;
						top: 50%;
						margin-top: -42px;
						min-width: 336px;
						h2{
							font-size: 32px;
							color: rgb(51,51,51);
							margin: 0px 0px 16px;
						}
						p{
							font-size: 24px;
							color: rgb(102,102,102);
						}
					}
				}
			}
			.more{
				height: 44%;
				background:rgb(250,250,250);
				box-shadow: 0px 1px 5px rgba(0,0,0,0.15);
				text-align: center;
				position: relative;
				padding-top: 60px;
				.more_icon{
					width: 59px;
					height: 34px;
					background: url(http://cn-file.17pdf.com/website/sdk/more.png) no-repeat;
					position: absolute;
					left: 50%;
					top: -30px;
					margin-left: -29px;
				}
				.list{
					display: inline-block;
					width: 240px;
					text-align: center;
					margin:0px 77px;
					height: 206px;
					vertical-align: top;
					.iocn{
						width: 89px;
						height: 89px;
						display: inline-block;
						&.filebrowse1{
							background: url(http://cn-file.17pdf.com/website/sdk/SDK_icon.png) no-repeat -176px 0px;
						}
						&.filebrowse2{
							background: url(http://cn-file.17pdf.com/website/sdk/SDK_icon.png) no-repeat -264px 0px;
						}
						&.filebrowse3{
							background: url(http://cn-file.17pdf.com/website/sdk/SDK_icon.png) no-repeat -352px 0px;
						}
						&.annotation1{
							background: url(http://cn-file.17pdf.com/website/sdk/SDK_icon.png) no-repeat -440px 0px;
						}
						&.annotation2{
							background: url(http://cn-file.17pdf.com/website/sdk/SDK_icon.png) no-repeat -528px 0px;
						}
						&.annotation3{
							background: url(http://cn-file.17pdf.com/website/sdk/SDK_icon.png) no-repeat -616px 0px;
						}
						&.dig1{
							background: url(http://cn-file.17pdf.com/website/sdk/SDK_icon.png) no-repeat -960px 0px;
						}
						&.dig2{
							background: url(http://cn-file.17pdf.com/website/sdk/SDK_icon.png) no-repeat -1056px 0px;
						}
						&.txtedit1{
							background: url(http://cn-file.17pdf.com/website/sdk/SDK_icon.png) no-repeat -792px 0px;
						}
						&.txtedit2{
							background: url(http://cn-file.17pdf.com/website/sdk/SDK_icon.png) no-repeat -880px 0px;
						}
						&.txtedit3{
							background: url(http://cn-file.17pdf.com/website/sdk/SDK_icon.png) no-repeat -704px 0px;
						}
						&.document1{
							background: url(http://cn-file.17pdf.com/website/sdk/SDK_icon.png) no-repeat -88px 0px;
						}
						&.document2{
							background: url(http://cn-file.17pdf.com/website/sdk/SDK_icon.png) no-repeat 0px 0px;
						}
					}
					h3{
						font-size: 24px;
						color: rgb(51,51,51);
						margin: 0px 0px 20px;
					}
					p{
						text-align: center;
						font-size: 16px;
						color: rgb(76,76,76);
						line-height: 26px;
					}
				}
			}
  }

  .info{
    width: 100%;
    height: 150px;
    text-align: center;
    position:absolute;
    left: 0px;
    top: 50%;
    margin-top: -75px;
    ul{
      width: 300px;
      height: 118px;
      overflow: hidden;
      padding:0px;
      display: inline-block;
      position: relative;
      li{
        height: 100%;
        line-height: 118px;
        font-size: 84px;
        color: rgb(34,34,34);
        list-style: none;
        background: #fff;
        position: absolute;
        left: 0px;
        top: 0px;
        transition: all 1s;
      }
    }
    p{
      font-size: 34px;
      color: rgb(76,76,76);
      display: inline-block;
      text-align: left;
    }
  }
}

.index{
  position: fixed;
  right: 126px;
  top: 28%;
  margin-top: -96px;
  li{
    list-style: none;
    width: 18px;
    height: 18px;
    background:rgba(255,131,131,0.2);
    border-radius: 100%;
    margin: 12px 0px;
    cursor: pointer;
    &.active{
      background: rgb(255,131,131);
      box-shadow: 0px 0px 4px rgb(255,131,131);
    }
  }
}
</style>