feat：移动端适配

components/PDFReaderPro/believe.vue

@@ -47,17 +47,20 @@
         </div>
       </div>
     </div>
+    <BelieveMobile :lists="lists" class="lists-container-mobile" />
   </div>
 </template>
 
 <script>
 import Array from '~/assets/images/PDFReaderPro/array.svg?inline'
 import Rate from '~/assets/images/PDFReaderPro/rate.svg?inline'
+import BelieveMobile from '~/components/PDFReaderPro/believeMobile.vue'
 
 export default {
   components: {
     Array,
-    Rate
+    Rate,
+    BelieveMobile
   },
   data() {
     return {
@@ -94,14 +97,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// @keyframes transateleftrow {
-//   0% {
-//     transform: translateX(0%);
-//   }
-//   100% {
-//     transform: translateX(-2040px);
-//   }
-// }
+@keyframes transateleftrow {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-2040px);
+  }
+}
 div.wrapper-tools {
   h2 {
     margin-top: 80px;
@@ -129,6 +132,9 @@ div.wrapper-tools {
       }
     }
   }
+  .lists-container-mobile {
+    display: none;
+  }
   .list {
     width: 384px;
     height: 360px;
@@ -171,7 +177,7 @@ div.wrapper-tools {
     }
   }
 }
-@media screen and (max-width: 959px) {
+@media screen and (max-width: 575px) {
   div.wrapper-tools {
     h2 {
       margin-top: 24px;
@@ -179,39 +185,10 @@ div.wrapper-tools {
       line-height: 32px;
     }
     .lists-container {
-      margin-bottom: 48px;
-      overflow: hidden;
-      ::-webkit-scrollbar {
-        scrollbar-width: none; /* Firefox */
-        -ms-overflow-style: none; /* IE 10+ */
-        display: none; /* Chrome Safari */
-      }
-      .lists {
-        display: flex;
-        width: 100%;
-        animation: transateleftrow 20s linear infinite;
-        &:hover {
-          animation-play-state: paused;
-        }
-      }
+     display: none;
     }
-    .list {
-      width: 192px;
-      height: 180px;
-      margin-top: 20px;
-      margin-right: 12px;
-      border-radius: 8px;
-      padding: 20px;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: start;
-      .header {
-        display: flex;
-      }
-      .des {
-        margin-top: 16px;
-      }
+    .lists-container-mobile {
+      display: block;
     }
   }
 }

components/PDFReaderPro/believeMobile.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="wrapper-tools">
+    <div
+      ref="mySwiper"
+      v-swiper:mySwiper="swiperOption"
+      class="swiper-container"
+      @mouseenter="handleEnter" @mouseleave="handleLeave"
+    >
+      <div class="carousel-indicators">
+        <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span>
+        <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span>
+        <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
+        <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span>
+        <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 5"></span>
+      </div>
+      <div ref="myWrapper" class="swiper-wrapper">
+        <div v-for="(item, index) in lists" :key="index" class="swiper-slide">
+          <div class="list">
+            <div class="header">
+              <img :src="item.src" alt="item.title">
+              <div class="context">
+                <div class="title">{{ item.title }}</div>
+                <Rate />
+              </div>
+            </div>
+            <div class="des">
+              {{ item.des }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { directive } from 'vue-awesome-swiper'
+import Array from '~/assets/images/PDFReaderPro/array.svg?inline'
+import Rate from '~/assets/images/PDFReaderPro/rate.svg?inline'
+
+export default {
+  directives: {
+    swiper: directive
+  },
+  components: {
+    Array,
+    Rate
+  },
+  props: ['lists'],
+  data() {
+    return {
+      swiperOption: {
+        autoplay: {
+          delay: 5000,
+          disableOnInteraction: false,
+        },
+        centeredSlides: true,
+        loop: true,
+        slidesPerView: 1,
+        pagination: {
+          el: '.carousel-indicators',
+          clickable: true
+        },
+      }
+    }
+  },
+  methods: {
+    handleEnter () {
+      this.$refs.mySwiper.swiper.autoplay.stop()
+    },
+    handleLeave () {
+      this.$refs.mySwiper.swiper.autoplay.start()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .swiper-container {
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  .swiper-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    display: flex;
+    transition-property: transform;
+    box-sizing: content-box;
+    .swiper-slide {
+      flex-shrink: 0;
+      width: 408px;
+      height: 100%;
+      position: relative;
+      transition-property: transform;
+      margin-bottom: 70px;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+    }
+  }
+  .carousel-indicators {
+    position: absolute;
+    bottom: 24px;
+    z-index: 2;
+    width: 100%;
+    font-size: 0;
+    margin: 0;
+    text-align: center;
+    .swiper-pagination-bullet {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      margin: 0;
+      margin-right: 6px;
+      background: #0000001f;
+      border-radius:4px;
+      transition: width 0.3s;
+      &.swiper-pagination-bullet-active {
+        background: #00000066;
+      }
+    }
+  }
+}
+.swiper-container-free-mode .swiper-wrapper {
+  /* 默认是ease-out */
+  -webkit-transition-timing-function: linear;  
+  -ms-transition-timing-function: linear;
+  -moz-transition-timing-function: linear;
+  -o-transition-timing-function: linear;
+  transition-timing-function: linear;
+}
+div.wrapper-tools {
+  .list {
+    width: 100%;
+    max-width: 400px;
+    margin: 0 10px;
+    height: 320px;
+    margin-top: 40px;
+    background: #F5F9FF;
+    border-radius: 16px;
+    padding: 40px;
+    padding-bottom: 0;
+    .header {
+      display: flex;
+      img {
+        width: 64px;
+        vertical-align: middle;
+      }
+      .context {
+        margin-left: 16px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .title {
+          font-family: Source Han Sans CN;
+          font-size: 18px;
+          font-weight: 700;
+          line-height: 24px;
+          color: #192233;
+          margin-bottom: 8px;
+        }
+      }
+    }
+    .des {
+      margin-top: 32px;
+      font-family: Source Han Sans CN;
+      font-size: 16px;
+      line-height: 32px;
+      color: #404754;
+    }
+  }
+}
+</style>

components/PDFReaderPro/features.vue

@@ -56,7 +56,14 @@ export default {
     MacWhite,
     WinWhite
   },
-  props: ['platform'],
+  props: {
+    platform: {
+      default: {}
+    },
+    showBanner: {
+      default: false
+    }
+  },
   data() {
     return {
       tool: 0,
@@ -123,7 +130,7 @@ export default {
           src: '/images/PDFReaderPro/tool/batch.png',
           title: '加速工作流程',
           des: [
-            '灵活地批量压缩、提取及合并文档。',
+            '灵活地批量压缩、合并文档。',
             '一次为多个文件批量添加水印、背景、页眉、页脚等。',
             '通过设置密码增强安全性，利用批量加密功能有效保护文件。'
           ]
@@ -177,24 +184,41 @@ export default {
           src: '/images/PDFReaderPro/tool/form.png',
           title: '轻松创建表格和签名',
           des: [
-            '用文本域、复选框、下拉菜单、图像等创建可填写的PDF。',
+            '用文本域、复选框、下拉菜单等创建可填写的PDF。',
             '轻点几下即可使用个人电子签名签署合同。',
             '支持多种格式的签名输入（触控板、键盘、图像）。'
           ]
         }
-      ]
+      ],
+      scrollLeft: 0
     }
   },
   mounted() {
     this.changeIndex()
   },
+  watch: {
+    showBanner (val) {
+      if (val) {
+        this.changeIndex()
+      } else {
+        this.stopChange()
+      }
+    }
+  },
   methods: {
     changeIndex () {
       this.time = setInterval(() => {
         if (this.tool > 7) {
           this.tool = 0
+          this.scrollLeft = 0
+          this.$refs.myElement.scrollLeft = 0
         } else {
           this.tool++
+          let containerWidth = this.$refs.myElement.clientWidth
+          if ((this.tool + 1) * 115 > containerWidth) {
+            this.scrollLeft = this.scrollLeft + 120
+          }
+          this.$refs.myElement.scrollLeft = this.scrollLeft
         }
       }, 5000)
     },
@@ -224,7 +248,6 @@ export default {
     padding: 12px 0;
     background: linear-gradient(90deg, rgba(245, 247, 250, 0) 0%, #F5F7FA 52.6%, rgba(245, 247, 250, 0) 100%);
     margin-bottom: 16px;
-    overflow-x: auto;
     .tool {
       display: flex;
       align-items: center;
@@ -325,4 +348,73 @@ export default {
     }
   }
 }
+@media screen and (max-width: 1280px) {
+  .choose-tools {
+    h2 {
+      margin-top: 48px;
+      margin-bottom: 20px;
+      font-size: 24px;
+      line-height: 32px;
+    }
+    .tools {
+      padding: 8px 0;
+      overflow-x: auto;
+      &::-webkit-scrollbar {
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* IE 10+ */
+        display: none; /* Chrome Safari */
+      }
+      .tool {
+        min-width: 115px;
+        padding: 4px;
+        font-size: 14px;
+        line-height: 20px;
+        svg {
+          width: 32px;
+          height: 32px;
+        }
+      }
+    }
+    .detail {
+      display: flex;
+      flex-direction: column-reverse;
+      min-height: none;
+      .img-container {
+        width: 100%;
+      }
+      .text-container {
+        width: 100%;
+        .title {
+          font-size: 20px;
+          line-height: 28px;
+          text-align: center;
+        }
+        .des {
+          text-align: center;
+          margin-top: 20px;
+          li {
+            font-size: 14px;
+            line-height: 20px;
+            color: #232F48;
+            opacity: .8;
+          }
+          li + li {
+            margin-top: 8px;
+          }
+        }
+        .link {
+          margin-top: 20px;
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+          align-items: center;
+          a + a {
+            margin-left: 0px;
+            margin-top: 16px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

components/PDFReaderPro/product.vue

@@ -102,4 +102,28 @@ export default {
     }
   }
 }
+@media screen and (max-width: 959px) {
+  .context {
+    padding: 40px 0;
+    h2 {
+      font-size: 32px;
+      line-height: 48px;
+      img {
+        width: 32px;
+      }
+    }
+    .title {
+      font-size: 24px;
+      line-height: 32px;
+    }
+    .get-btn {
+      margin-top: 20px;
+      flex-direction: column;
+      a + a {
+        margin-left: 0px;
+        margin-top: 16px;
+      }
+    }
+  }
+}
 </style>

components/PDFReaderPro/solution.vue

@@ -291,6 +291,11 @@ div.wrapper-tools {
   }
 }
 @media screen and (max-width: 959px) {
+  .swiper-container {
+    .button {
+      display: none;
+    }
+  }
   div.wrapper-tools {
     h2 {
       margin-top: 48px;

pages/pdfreaderpro.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="context">
     <Banner :platform="platform" />
-    <Features :platform="platform" />
-    <Solution :platform="platform" />
+    <div ref="features">
+      <Features :platform="platform" :showBanner="showBanner" />
+    </div>
+    <div ref="solution">
+      <Solution :platform="platform" />
+    </div>
     <Believe />
     <Product :platform="platform" />
   </div>
@@ -24,7 +28,7 @@ export default {
     Believe,
     Product
   },
-  async asyncData ({ req, store, res }) {
+  async asyncData ({ req }) {
     let userAgent = ''
     if (typeof req !== 'undefined') {
       userAgent = req.headers && req.headers['user-agent']
@@ -47,7 +51,8 @@ export default {
       platform: {
         isWindows: false,
         isMac: false
-      }
+      },
+      showBanner: true
     }
   },
   head() {
@@ -61,6 +66,29 @@ export default {
         }
       ]
     }
+  },
+  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>