Merge branch 'develop_oycj' of Server_Service/17pdf_front_end into master

assets/mixins.scss

@@ -0,0 +1,36 @@
+
+.hidden {
+  display: none;
+}
+
+
+@mixin keyframes($animationName) {
+  @-webkit-keyframes #{$animationName} {
+      @content;
+  }
+  @-moz-keyframes #{$animationName} {
+      @content;
+  }
+  @-o-keyframes #{$animationName} {
+      @content;
+  }
+  @keyframes #{$animationName} {
+      @content;
+  }
+}
+
+@mixin background_linear($rgb1, $rgb2) {
+  background: $rgb1 !important; /* For browsers that do not support gradients */
+  background: -webkit-linear-gradient(top, $rgb1 , $rgb2) !important; /* For Safari 5.1 to 6.0 */
+  background: -o-linear-gradient(bottom, $rgb1, $rgb2) !important; /* For Opera 11.1 to 12.0 */
+  background: -moz-linear-gradient(bottom, $rgb1, $rgb2) !important; /* For Firefox 3.6 to 15 */
+  background: linear-gradient(to bottom, $rgb1 , $rgb2) !important; /* Standard syntax */
+}
+
+@mixin background_lineartoright($rgb1, $rgb2) {
+  background: $rgb1 !important; /* For browsers that do not support gradients */
+  background: -webkit-linear-gradient(left, $rgb1 , $rgb2) !important; /* For Safari 5.1 to 6.0 */
+  background: -o-linear-gradient(right, $rgb1, $rgb2) !important; /* For Opera 11.1 to 12.0 */
+  background: -moz-linear-gradient(right, $rgb1, $rgb2) !important; /* For Firefox 3.6 to 15 */
+  background: linear-gradient(to right, $rgb1 , $rgb2) !important; /* Standard syntax */
+}

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

package.json

@@ -19,6 +19,7 @@
     "element-ui": "^2.15.10",
     "nuxt": "^2.15.8",
     "qs": "^6.11.0",
+    "throttle-debounce": "^5.0.0",
     "vue": "^2.7.10",
     "vue-fragment": "^1.6.0",
     "vue-server-renderer": "^2.7.10",

pages/question.vue

@@ -279,7 +279,7 @@ function active(hash) {
 };
 onMounted(() => {
     const hash = window.location.hash
-    if (hash == '') {
+    if (hash === '') {
          window.location.hash = "reading";
         }
     else {

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>

pages/terms.vue

@@ -1,11 +1,36 @@
 <script>
+import { Fragment } from 'vue-fragment'
+
 export default {
-  layout: 'custom'
+  components: {Fragment},
+  layout: 'custom',
+  data() {
+    return {
+      type: 'chinese'
+    }
+  },
+  mounted() {
+    let nl
+    if(navigator.appName === 'Netscape') {
+      nl = navigator.language
+    }else {
+      nl = navigator.browserLanguage
+    }
+    if(location.href.includes('type=chinese')) {
+      this.type = 'chinese'
+    }else if(location.href.includes('type=english')) {
+      this.type = 'english'
+    }else if(nl.includes('zh')) {
+      this.type = 'chinese'
+    }else {
+      this.type = 'english'
+    }
+  }
 }
 </script>
 <template>
-  <div>
-    <div class="terms chinese">
+  <Fragment>
+    <div v-if="type === 'chinese'" class="terms chinese">
       <div class="title"><span>PDF Reader（17PDF Reader）</span><p>服务协议</p></div>
       <div class="content">
         <p>有效日期自2017年5月16日起<br/>
@@ -102,7 +127,7 @@ export default {
       </div>
     </div>
 
-    <div class="terms english">
+    <div v-else class="terms english">
       <div class="title"><span>Cloud Plus</span><p>Terms of Service</p></div>
       <div class="content">
         <p>Effective as from 05/16/2017</p>
@@ -196,13 +221,13 @@ export default {
         <p>This Agreement and the relationship between Build to Connect, Inc. and User shall be governed by and interpreted with the laws of Taiwan, the Republic of China (R.O.C.), excluding its conflicts of law provisions. In the event of dispute in relation to the Services, User agrees to submit to the personal and exclusive jurisdiction of the Tainan District Court in Taiwan, the Republic of China (R.O.C.).</p>
       </div>
     </div>
-  </div>
+  </Fragment>
 </template>
 
 <style lang="scss">
 .terms {
-  &.english{
-    display: none;
+  a {
+    color: #337ab7;
   }
   .title {
     text-align: center;