17pdf_front_end/components/PDFReaderPro/believe.vue

<template>
  <div class="wrapper-tools">
    <h2>9千万用户的信赖之选</h2>
    <div class="lists-container">
      <div class="lists">  
        <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>
                <component :is='item.rate'></component>
              </div>
            </div>
            <div class="des">
              {{ item.des }}
            </div>
          </div>
        </div>
        <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>
                <component :is='item.rate'></component>
              </div>
            </div>
            <div class="des">
              {{ item.des }}
            </div>
          </div>
        </div>
        <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>
                <component :is='item.rate'></component>
              </div>
            </div>
            <div class="des">
              {{ item.des }}
            </div>
          </div>
        </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 FiveRate from '~/assets/images/PDFReaderPro/fiveRate.svg?inline'
import BelieveMobile from '~/components/PDFReaderPro/believeMobile.vue'

export default {
  components: {
    Array,
    Rate,
    BelieveMobile,
    FiveRate
  },
  data() {
    return {
      lists: [
        {
          src: '/images/PDFReaderPro/teacher.png',
          title: '教授',
          rate: 'Rate',
          des: '我每次都用这个App给我学生的论文批复。 简单的注释和高亮突出很不错，这比简单地在纸上乱涂乱画要干净得多。 现在我的学生会真正阅读我的反馈。'
        },
        {
          src: '/images/PDFReaderPro/analyst.png',
          title: '数据分析师',
          rate: 'FiveRate',
          des: '已经使用该产品2年多了。 对我来说最方便的工具是表格工具，直接填写表格或将表格提取出来都可以，而且速度很快。'
        },
        {
          src: '/images/PDFReaderPro/stylist.png',
          title: '设计师',
          rate: 'Rate',
          des: '我的朋友向我推荐了这款产品，在我使用这款 PDF 工具时，我发现它有很多功能可以协助我的工作。 我可以将作品转换为 PDF 文档，并为它们添加水印&密码进行保护。	'
        },
        {
          src: '/images/PDFReaderPro/assessor.png',
          title: '定损员',
          rate: 'FiveRate',
          des: '为理赔进行文件归档，PDF Reader Pro帮助我把多个文档整理并合并到一个 PDF 中。并可以轻松地一次处理多个 PDF 文件，生成一份完整报告、汇总发票，减少整合时间。'
        },
        {
          src: '/images/PDFReaderPro/banker.png',
          title: '银行职员',
          rate: 'Rate',
          des: '我拥有数十份交易、投资业绩报告和客户财务状况的信息文件，每个文档我都可以使用PDF Reader Pro进行书签、贝茨码设置以保证关键信息可以被检索到。'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes transateleftrow {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-2040px);
  }
}
div.wrapper-tools {
  h2 {
    margin-top: 80px;
    font-size: 36px;
    font-weight: 700;
    line-height: 56px;
    text-align: center;
    color: #192233;
  }
  .lists-container {
    margin-bottom: 120px;
    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;
      }
    }
  }
  .lists-container-mobile {
    display: none;
  }
  .list {
    width: 384px;
    height: 360px;
    margin-top: 40px;
    margin-right: 24px;
    background: #F5F9FF;
    border-radius: 16px;
    padding: 40px;
    transition: all linear .5;
    &:hover {
      transform: translateY(-15px);
    }
    .header {
      display: flex;
      img {
        width: 64px;
        vertical-align: middle;
      }
      .context {
        margin-left: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .title {
          font-size: 18px;
          font-weight: 700;
          line-height: 24px;
          color: #192233;
          margin-bottom: 8px;
        }
      }
    }
    .des {
      margin-top: 32px;
      font-size: 16px;
      line-height: 32px;
      color: #404754;
    }
  }
}
@media screen and (max-width: 575px) {
  div.wrapper-tools {
    h2 {
      margin-top: 24px;
      font-size: 24px;
      line-height: 32px;
    }
    .lists-container {
     display: none;
    }
    .lists-container-mobile {
      display: block;
    }
  }
}
</style>