SDK 页面开发完成

components/SdkForm.vue

@@ -0,0 +1,511 @@
+<template>
+  <Fragment>
+    <div v-if="postSuccess" class="success-modal">
+        <img src="http://cn-file.17pdf.com/website/sdk/ic_store_success.png" alt="success">
+        <div class="title">感谢您与我们联系。</div>
+        <div class="desc">您的信息已成功发送。</div>
+    </div>
+    <div v-else class="modal-body">
+      <h4 class="modal-title">
+        联系信息
+      </h4>
+      <div class="name info-container">
+        <div class="first-name"><input v-model="form.first_name" type="text" placeholder="姓氏">
+          <div v-show="emptyItems.includes('first_name')" class="err">请输入姓氏</div>
+        </div>
+        <div class="last-name"><input v-model="form.last_name" type="text" placeholder="名字">
+          <div v-show="emptyItems.includes('last_name')" class="err">请输入名字</div>
+        </div>
+      </div>
+      <div class="email info-container"><input v-model="form.email" type="email" placeholder="电子邮箱">
+        <div v-show="emptyItems.includes('email')" class="err">请输入电子邮箱</div>
+        <div v-show="emptyItems.includes('right-email')" class="err-email">请输入正确的电子邮箱</div>
+      </div>
+      <div class="job-phone info-container">
+        <div class="job-title"><input v-model="form.job_title" type="text" placeholder="职位" >
+          <div v-show="emptyItems.includes('job_title')" class="err">请输入职位</div>
+        </div>
+        <div class="phone-number"><input v-model="form.phone" type="text" placeholder="电话号码">
+          <div v-show="emptyItems.includes('phone')" class="err">请输入电话号码</div>
+        </div>
+      </div>
+      <div class="company info-container"><input v-model="form.company" type="text" placeholder="企业名称">
+        <div v-show="emptyItems.includes('company')" class="err">请输入企业名称</div>
+      </div>
+      <div class="website info-container"><input v-model="form.website" type="text" placeholder="企业网站">
+        <div v-show="emptyItems.includes('website')" class="err">请输入企业网站</div>
+      </div>
+      <div class="country info-container">
+        <label>国家/地区*</label>
+        <select v-model="form.country" onChange="this.blur();">
+          <option value="Afghanistan">Afghanistan</option>
+          <option value="Åland Islands">Åland Islands</option>
+          <option value="Albania">Albania</option>
+          <option value="Algeria">Algeria</option>
+          <option value="American Samoa">American Samoa</option>
+          <option value="Andorra">Andorra</option>
+          <option value="Angola">Angola</option>
+          <option value="Anguilla">Anguilla</option>
+          <option value="Antarctica">Antarctica</option>
+          <option value="Antigua and Barbuda">Antigua and Barbuda</option>
+          <option value="Argentina">Argentina</option>
+          <option value="Armenia">Armenia</option>
+          <option value="Aruba">Aruba</option>
+          <option value="Australia">Australia</option>
+          <option value="Austria">Austria</option>
+          <option value="Azerbaijan">Azerbaijan</option>
+          <option value="Bahamas">Bahamas</option>
+          <option value="Bahrain">Bahrain</option>
+          <option value="Bangladesh">Bangladesh</option>
+          <option value="Barbados">Barbados</option>
+          <option value="Belarus">Belarus</option>
+          <option value="Belgium">Belgium</option>
+          <option value="Belize">Belize</option>
+          <option value="Benin">Benin</option>
+          <option value="Bermuda">Bermuda</option>
+          <option value="Bhutan">Bhutan</option>
+          <option value="Bolivia, Plurinational State of">Bolivia, Plurinational State of</option>
+          <option value="Bonaire, Sint Eustatius and Saba">Bonaire, Sint Eustatius and Saba</option>
+          <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
+          <option value="Botswana">Botswana</option>
+          <option value="Bouvet Island">Bouvet Island</option>
+          <option value="Brazil">Brazil</option>
+          <option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
+          <option value="Brunei Darussalam">Brunei Darussalam</option>
+          <option value="Bulgaria">Bulgaria</option>
+          <option value="Burkina Faso">Burkina Faso</option>
+          <option value="Burundi">Burundi</option>
+          <option value="Cambodia">Cambodia</option>
+          <option value="Cameroon">Cameroon</option>
+          <option value="Canada">Canada</option>
+          <option value="Cape Verde">Cape Verde</option>
+          <option value="Cayman Islands">Cayman Islands</option>
+          <option value="Central African Republic">Central African Republic</option>
+          <option value="Chad">Chad</option>
+          <option value="Chile">Chile</option>
+          <option value="China">China</option>
+          <option value="Christmas Island">Christmas Island</option>
+          <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
+          <option value="Colombia">Colombia</option>
+          <option value="Comoros">Comoros</option>
+          <option value="Congo">Congo</option>
+          <option value="Congo, the Democratic Republic of the">Congo, the Democratic Republic of the</option>
+          <option value="Cook Islands">Cook Islands</option>
+          <option value="Costa Rica">Costa Rica</option>
+          <option value="Côte d'Ivoire">Côte d'Ivoire</option>
+          <option value="Croatia">Croatia</option>
+          <option value="Cuba">Cuba</option>
+          <option value="Curaçao">Curaçao</option>
+          <option value="Cyprus">Cyprus</option>
+          <option value="Czech Republic">Czech Republic</option>
+          <option value="Denmark">Denmark</option>
+          <option value="Djibouti">Djibouti</option>
+          <option value="Dominica">Dominica</option>
+          <option value="Dominican Republic">Dominican Republic</option>
+          <option value="Ecuador">Ecuador</option>
+          <option value="Egypt">Egypt</option>
+          <option value="El Salvador">El Salvador</option>
+          <option value="Equatorial Guinea">Equatorial Guinea</option>
+          <option value="Eritrea">Eritrea</option>
+          <option value="Estonia">Estonia</option>
+          <option value="Ethiopia">Ethiopia</option>
+          <option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
+          <option value="Faroe Islands">Faroe Islands</option>
+          <option value="Fiji">Fiji</option>
+          <option value="Finland">Finland</option>
+          <option value="France">France</option>
+          <option value="French Guiana">French Guiana</option>
+          <option value="French Polynesia">French Polynesia</option>
+          <option value="French Southern Territories">French Southern Territories</option>
+          <option value="Gabon">Gabon</option>
+          <option value="Gambia">Gambia</option>
+          <option value="Georgia">Georgia</option>
+          <option value="Germany">Germany</option>
+          <option value="Ghana">Ghana</option>
+          <option value="Gibraltar">Gibraltar</option>
+          <option value="Greece">Greece</option>
+          <option value="Greenland">Greenland</option>
+          <option value="Grenada">Grenada</option>
+          <option value="Guadeloupe">Guadeloupe</option>
+          <option value="Guam">Guam</option>
+          <option value="Guatemala">Guatemala</option>
+          <option value="Guernsey">Guernsey</option>
+          <option value="Guinea">Guinea</option>
+          <option value="Guinea-Bissau">Guinea-Bissau</option>
+          <option value="Guyana">Guyana</option>
+          <option value="Haiti">Haiti</option>
+          <option value="Heard Island and McDonald Islands">Heard Island and McDonald Islands</option>
+          <option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
+          <option value="Honduras">Honduras</option>
+          <option value="Hong Kong">Hong Kong</option>
+          <option value="Hungary">Hungary</option>
+          <option value="Iceland">Iceland</option>
+          <option value="India">India</option>
+          <option value="Indonesia">Indonesia</option>
+          <option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
+          <option value="Iraq">Iraq</option>
+          <option value="Ireland">Ireland</option>
+          <option value="Isle of Man">Isle of Man</option>
+          <option value="Israel">Israel</option>
+          <option value="Italy">Italy</option>
+          <option value="Jamaica">Jamaica</option>
+          <option value="Japan">Japan</option>
+          <option value="Jersey">Jersey</option>
+          <option value="Jordan">Jordan</option>
+          <option value="Kazakhstan">Kazakhstan</option>
+          <option value="Kenya">Kenya</option>
+          <option value="Kiribati">Kiribati</option>
+          <option value="Korea, Democratic People's Republic of">Korea, Democratic People's Republic of</option>
+          <option value="Korea, Republic of">Korea, Republic of</option>
+          <option value="Kuwait">Kuwait</option>
+          <option value="Kyrgyzstan">Kyrgyzstan</option>
+          <option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option>
+          <option value="Latvia">Latvia</option>
+          <option value="Lebanon">Lebanon</option>
+          <option value="Lesotho">Lesotho</option>
+          <option value="Liberia">Liberia</option>
+          <option value="Libya">Libya</option>
+          <option value="Liechtenstein">Liechtenstein</option>
+          <option value="Lithuania">Lithuania</option>
+          <option value="Luxembourg">Luxembourg</option>
+          <option value="Macao">Macao</option>
+          <option value="Macedonia, the Former Yugoslav Republic of">Macedonia, the Former Yugoslav Republic of</option>
+          <option value="Madagascar">Madagascar</option>
+          <option value="Malawi">Malawi</option>
+          <option value="Malaysia">Malaysia</option>
+          <option value="Maldives">Maldives</option>
+          <option value="Mali">Mali</option>
+          <option value="Malta">Malta</option>
+          <option value="Marshall Islands">Marshall Islands</option>
+          <option value="Martinique">Martinique</option>
+          <option value="Mauritania">Mauritania</option>
+          <option value="Mauritius">Mauritius</option>
+          <option value="Mayotte">Mayotte</option>
+          <option value="Mexico">Mexico</option>
+          <option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
+          <option value="Moldova, Republic of">Moldova, Republic of</option>
+          <option value="Monaco">Monaco</option>
+          <option value="Mongolia">Mongolia</option>
+          <option value="Montenegro">Montenegro</option>
+          <option value="Montserrat">Montserrat</option>
+          <option value="Morocco">Morocco</option>
+          <option value="Mozambique">Mozambique</option>
+          <option value="Myanmar">Myanmar</option>
+          <option value="Namibia">Namibia</option>
+          <option value="Nauru">Nauru</option>
+          <option value="Nepal">Nepal</option>
+          <option value="Netherlands">Netherlands</option>
+          <option value="New Caledonia">New Caledonia</option>
+          <option value="New Zealand">New Zealand</option>
+          <option value="Nicaragua">Nicaragua</option>
+          <option value="Niger">Niger</option>
+          <option value="Nigeria">Nigeria</option>
+          <option value="Niue">Niue</option>
+          <option value="Norfolk Island">Norfolk Island</option>
+          <option value="Northern Mariana Islands">Northern Mariana Islands</option>
+          <option value="Norway">Norway</option>
+          <option value="Oman">Oman</option>
+          <option value="Pakistan">Pakistan</option>
+          <option value="Palau">Palau</option>
+          <option value="Palestine, State of">Palestine, State of</option>
+          <option value="Panama">Panama</option>
+          <option value="Papua New Guinea">Papua New Guinea</option>
+          <option value="Paraguay">Paraguay</option>
+          <option value="Peru">Peru</option>
+          <option value="Philippines">Philippines</option>
+          <option value="Pitcairn">Pitcairn</option>
+          <option value="Poland">Poland</option>
+          <option value="Portugal">Portugal</option>
+          <option value="Puerto Rico">Puerto Rico</option>
+          <option value="Qatar">Qatar</option>
+          <option value="Réunion">Réunion</option>
+          <option value="Romania">Romania</option>
+          <option value="Russian Federation">Russian Federation</option>
+          <option value="Rwanda">Rwanda</option>
+          <option value="Saint Barthélemy">Saint Barthélemy</option>
+          <option value="Saint Helena, Ascension and Tristan da Cunha">Saint Helena, Ascension and Tristan da Cunha</option>
+          <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
+          <option value="Saint Lucia">Saint Lucia</option>
+          <option value="Saint Martin (French part)">Saint Martin (French part)</option>
+          <option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
+          <option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
+          <option value="Samoa">Samoa</option>
+          <option value="San Marino">San Marino</option>
+          <option value="Sao Tome and Principe">Sao Tome and Principe</option>
+          <option value="Saudi Arabia">Saudi Arabia</option>
+          <option value="Senegal">Senegal</option>
+          <option value="Serbia">Serbia</option>
+          <option value="Seychelles">Seychelles</option>
+          <option value="Sierra Leone">Sierra Leone</option>
+          <option value="Singapore">Singapore</option>
+          <option value="Sint Maarten (Dutch part)">Sint Maarten (Dutch part)</option>
+          <option value="Slovakia">Slovakia</option>
+          <option value="Slovenia">Slovenia</option>
+          <option value="Solomon Islands">Solomon Islands</option>
+          <option value="Somalia">Somalia</option>
+          <option value="South Africa">South Africa</option>
+          <option value="South Georgia and the South Sandwich Islands">South Georgia and the South Sandwich Islands</option>
+          <option value="South Sudan">South Sudan</option>
+          <option value="Spain">Spain</option>
+          <option value="Sri Lanka">Sri Lanka</option>
+          <option value="Sudan">Sudan</option>
+          <option value="Suriname">Suriname</option>
+          <option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
+          <option value="Swaziland">Swaziland</option>
+          <option value="Sweden">Sweden</option>
+          <option value="Switzerland">Switzerland</option>
+          <option value="Syrian Arab Republic">Syrian Arab Republic</option>
+          <option value="Taiwan">Taiwan</option>
+          <option value="Tajikistan">Tajikistan</option>
+          <option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
+          <option value="Thailand">Thailand</option>
+          <option value="Timor-Leste">Timor-Leste</option>
+          <option value="Togo">Togo</option>
+          <option value="Tokelau">Tokelau</option>
+          <option value="Tonga">Tonga</option>
+          <option value="Trinidad and Tobago">Trinidad and Tobago</option>
+          <option value="Tunisia">Tunisia</option>
+          <option value="Turkey">Turkey</option>
+          <option value="Turkmenistan">Turkmenistan</option>
+          <option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
+          <option value="Tuvalu">Tuvalu</option>
+          <option value="Uganda">Uganda</option>
+          <option value="Ukraine">Ukraine</option>
+          <option value="United Arab Emirates">United Arab Emirates</option>
+          <option value="United Kingdom">United Kingdom</option>
+          <option value="United States">United States</option>
+          <option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
+          <option value="Uruguay">Uruguay</option>
+          <option value="Uzbekistan">Uzbekistan</option>
+          <option value="Vanuatu">Vanuatu</option>
+          <option value="Venezuela, Bolivarian Republic of">Venezuela, Bolivarian Republic of</option>
+          <option value="Viet Nam">Viet Nam</option>
+          <option value="Virgin Islands, British">Virgin Islands, British</option>
+          <option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
+          <option value="Wallis and Futuna">Wallis and Futuna</option>
+          <option value="Western Sahara">Western Sahara</option>
+          <option value="Yemen">Yemen</option>
+          <option value="Zambia">Zambia</option>
+          <option value="Zimbabwe">Zimbabwe</option>
+        </select>
+        <i class="icon"></i>
+      </div>
+      <div class="number-application info-container">
+        <label for="">集成此SDK的应用程序数量 *</label>
+        <select v-model="form.number" onChange="this.blur();">
+          <option value="1">1</option>
+          <option value="2">2</option>
+          <option value="3">3</option>
+          <option value="4">4</option>
+          <option value="5">5</option>
+          <option value="6">6</option>
+          <option value="7">7</option>
+          <option value="8">8</option>
+          <option value="9">9</option>
+          <option value="10">10</option>
+          <option value=">10">>10</option>
+        </select>
+        <i class="icon"></i>
+      </div>
+      <div class="platforms info-container">
+        <label for="">您的应用程序将支持哪些平台？*</label>
+        <select v-model="form.platform" onChange="this.blur();">
+          <option value="Android">Android</option>
+          <option value="iOS">iOS</option>
+          <option value="Windows 10">Windows 10</option>
+        </select>
+        <i class="icon"></i>
+      </div>
+      <div class="feature info-container">
+        <label for="">您对哪些功能感兴趣？*</label>
+        <select v-model="form.feature" onChange="this.blur();">
+          <option value="PDF阅读">PDF阅读</option>
+          <option value="PDF注释">PDF注释</option>
+          <option value="PDF签名">PDF签名</option>
+          <option value="PDF水印">PDF水印</option>
+          <option value="OCR">OCR</option>
+          <option value="文本编辑">文本编辑</option>
+          <option value="表单填写">表单填写</option>
+        </select>
+        <i class="icon"></i>
+      </div>
+      <div class="submit" @click="handlerSubmit"><span>提交</span></div>
+    </div>
+  </Fragment>
+</template>
+
+<script>  
+export default {
+  data() {
+    return {
+      form: {
+        first_name: '',
+        last_name:'',
+        email:'',
+        job_title: '',
+        phone: '',
+        company: '',
+        website: '',
+        feature:'PDF阅读',
+        platform: 'Android',
+        number: '1',
+        country:'Afghanistan'
+      },
+      postSuccess: false
+    }
+  },
+  computed: {
+    emptyItems() {
+      const validataItems = ['first_name','last_name','email','job_title','phone','company','website']
+      const emptyItems = []
+      validataItems.forEach(item =>{
+        if(this.form[item] === '') {
+          emptyItems.push(item)
+        }
+      })
+      const regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
+      if(!emptyItems.includes('email') && !regEmail.test(this.form.email)) {
+        emptyItems.push('right-email')
+      }
+      return emptyItems
+    }
+  },
+  methods: {
+    handlerResetStatus() {
+      this.postSuccess = false
+    },
+    handlerSubmit() {
+      if(this.emptyItems.length === 0) {
+        this.postSuccess = true
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.success-modal {
+  text-align: center;
+  img {
+    width: 87px;
+    display: inline-block;
+  }
+  .title {
+    margin-top: 16px;
+    margin-bottom: 2px;
+    font-size: 28px;
+    font-family: Helvetica-Bold,Helvetica;
+    font-weight: bold;
+    color: #1d2023;
+    line-height: 44px;
+  }
+  .desc {
+      font-size: 16px;
+    color: #606972;
+    line-height: 22px;
+  }
+}
+
+.modal-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #3F454B;
+  line-height: 28px;
+}
+.modal-body {
+  padding: 0;
+}
+.err, .err-email {
+  color: #FF4F4F;
+}
+.info-title {
+    font-size: 20px;
+    font-weight: bold;
+    color: rgba(63, 69, 75, 1);
+    line-height: 28px;
+}
+input, select {
+    height: 44px;
+    padding-left: 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #3F454B;
+    &:focus {
+        border-color: #FF4F4F;
+        outline: none;
+    }
+}
+select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+}
+.name, .job-phone {
+    display: flex;
+    justify-content: space-between;
+    .first-name,
+    .last-name,
+    .job-title,
+    .phone-number {
+        width: 48.291%;
+    }
+    input {
+        width: 100%;
+    }
+}
+.email, .company, .website {
+    input {
+        width: 100%;
+    }
+}
+label {
+    display: block;
+    margin-bottom: 4px;
+    font-size: 16px;
+    color: #3f454b;
+    line-height: 22px;
+}
+.info-container {
+    margin-top: 10px;
+}
+.country, .sdk, .number-application, .platforms, .feature {
+    position: relative;
+    i {
+        position: absolute;
+        right: 10px;
+        bottom: 12px;
+        width: 20px;
+        height: 20px;
+        background-image: url(http://cn-file.17pdf.com/website/sdk/xiala.png);
+        background-size: 20px;
+        transition: transform ease-out 0.2s;
+    }
+}
+select {
+    &:focus + .icon {
+        transform: rotate(180deg);
+    }
+}
+.submit {
+    width: 100%;
+    margin-top: 20px;
+    padding-top: 12px;
+    padding-bottom: 12px;
+    line-height: 22px;
+    background-color: #FF4F4F;
+    border-radius: 4px;
+    cursor: pointer;
+    text-align: center;
+    span {
+        color: #fff;
+        font-weight: bold;
+    }
+    &:hover {
+        opacity: 0.7;
+    }
+}
+
+</style>

layouts/components/footerbar.vue

@@ -3,10 +3,10 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-17 15:19:18
- * @LastEditTime: 2022-10-24 10:22:31
+ * @LastEditTime: 2022-10-27 19:26:15
 -->
 <template>
-  <div class="bg-[#222] text-[#fff] text-opacity-50 px-15px">
+  <div class="footerbar 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="">

pages/sdk.vue

@@ -0,0 +1,799 @@
+<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>