17pdf_front_end/pages/pdfreaderpro.vue

<template>
  <div class="context">
    <Banner :platform="platform" />
    <div ref="features">
      <Features :platform="platform" :showBanner="showBanner" />
    </div>
    <div ref="solution">
      <Solution :platform="platform" />
    </div>
    <Believe />
    <Product :platform="platform" />
  </div>
</template>

<script>
import Banner from '~/components/PDFReaderPro/banner.vue'
import Features from '~/components/PDFReaderPro/features.vue'
import Solution from '~/components/PDFReaderPro/solution.vue'
import Believe from '~/components/PDFReaderPro/believe.vue'
import Product from '~/components/PDFReaderPro/product.vue'
export default {
  middleware: 'user',
  layout: 'downnav',
  components: {
    Banner,
    Features,
    Solution,
    Believe,
    Product
  },
  async asyncData ({ req }) {
    let userAgent = ''
    if (typeof req !== 'undefined') {
      userAgent = req.headers && req.headers['user-agent']
    } else if (typeof navigator !== 'undefined') {
      userAgent = navigator.userAgent
    }
    const isIOS = /\b(iPad|iPhone|iPod)(?=;)/.test(userAgent)
    const isMac = !isIOS && /macintosh|mac os x/i.test(userAgent)
    const isAndroid = /Android/.test(userAgent)
    const isWindows = /Windows/.test(userAgent)
    return {
      platform: {
        isWindows: isWindows || isAndroid,
        isMac: isMac || isIOS
      }
    }
  },
  data() {
    return {
      platform: {
        isWindows: false,
        isMac: false
      },
      showBanner: true
    }
  },
  head() {
    return {
      title: 'PDF Reader Pro - 真正轻量级一站式的PDF编辑神器',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: '一款强大的PDF阅读器，支持PDF阅读、注释、填写表单&签名、多种格式转换、OCR、合并拆分页面、编辑PDF、文件保护、压缩合并文件等。支持多平台使用，不论Mac或是Windows，如果你只需要一款PDF软件，PDF Reader Pro会是你最好的选择。'
        }
      ]
    }
  },
  mounted() {
    this.handleScroll()
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      let elementCompare = this.$refs.solution.offsetTop
      // 获取可视窗口的高度
      const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      // 获取元素偏移的高度。就是距离可视窗口的偏移量。
      const offsetTop = this.$refs.features.offsetTop
      // tool模块轮播与否
      if (offsetTop - scrollTop <= screenHeight && scrollTop < elementCompare) {
        this.showBanner = true
      } else {
        this.showBanner = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  font-family: "Helvetica", Arial, "PingFang-SC-Regular", "ArialMT", "微软雅黑", "Microsoft YaHei", "Helvetica Neue", Helvetica, sans-serif;
}
::v-deep .container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-left: 20px;
  padding-right: 20px;
}
::v-deep .container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (max-width: 360px) {
  ::v-deep .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (min-width: 360px) and (max-width: 575px) {
  ::v-deep .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (min-width: 576px) {
  ::v-deep .container {
    max-width: 540px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (min-width: 768px) {
  ::v-deep .container {
    max-width: 720px;
  }
}
@media (min-width: 930px) {
  ::v-deep .container {
    max-width: 960px;
    min-width: 900px;
  }
}
@media (min-width: 1280px) {
  ::v-deep .container {
    max-width: 1240px;
  }
}
@media screen and (max-width: 959px) {
  ::v-deep .container {
    margin-top: 10px;
  }
}
</style>