17pdf_front_end/components/sdk/Featqure.vue

<template>
  <div class="wrapper">
    <div class="main-features lg:mt-52px pb-30px main-container">
      <div ref="text" class="text-container flex justify-around border-b-1px border-[#E1E3E8]  overflow-x-auto ">
        <div v-for="(item, i) in featureData" :key="i" class="cursor-pointer text-item pb-12px  flex flex-col items-center" :class="[i === activeIndex ? 'border-[#396FFA] border-b-3px' : '']" @click="changeIndex(i)">
          <div>
            <img v-show="i === activeIndex" :src="item.iconActiveUrl" :alt="item.alt" class="w-36px h-36px mb-8px" >
            <img v-show="i !== activeIndex" :src="item.iconUrl" :alt="item.alt" class="w-36px h-36px mb-8px" >
          </div>
          <div class="mx-8px whitespace-nowrap text-sm">{{ item.title }}</div>
        </div>
      </div>
      <div v-show="i === activeIndex" v-for="(data, i) in featureData" :key="i" class="feature-item-container">
        <div class="flex  justify-between flex-row-reverse ">
          <div class="flex-1 flex flex-col justify-center max-w-480px pl-24px">
            <div class="relative mb-12px text-24px leading-36px text-[#232748] font-600 <lg:(mb-8px text-16px leading-24px)">{{ data.title }}</div>
            <p class="text-16px leading-28px text-[#52555F] <lg:(text-14px leading-20px)">{{ data.decs }}</p>
            <a :href="data.url" class="move-arrow inline-flex items-center mt-24px text-sm text-[#396FFA] font-500 <lg:mt-12px">Learn More<ArrowRightActive class="ml-8px move" /></a>
          </div>
          <div class="img-container relative flex items-center h-500px w-598px">
            <img :src="data.bannerUrl" :alt="data.alt" width="598">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ArrowRightActive from '~/components/sdk/ArrowRightActive.svg?inline'
export default {
  components: {
    ArrowRightActive
  },
  data () {
    return {
      index: 0,
      activeIndex: 0,
      featureData: [
        {
          title: 'PDF查看',
          decs: 'Render complex PDFs smoothly and accurately with fast and battle-tested rendering technologies. Provide rich capabilities like reading mode, themes, navigation, search, zoom, bookmark, and watermark.',
          url: '/pdf-sdk/viewer',
          alt: 'Viewer',
          iconUrl: require('~/assets/images/tools/viewer@2x.svg'),
          iconActiveUrl: require('~/assets/images/tools/viewerActive@2x.svg'),
          iconMobileUrl: require('~/assets/images/tools/viewer.svg'),
          iconMobileActiveUrl: require('~/assets/images/tools/viewerActive.svg'),
          bannerUrl: '/images/tools/viewer@2x.png',
        },
        {
          title: 'Document Editor',
          alt: 'Document Editor',
          decs: 'Embed rich PDF page manipulation and editing capabilities in your app to edit PDF directly: merge, split, add, delete, rotate, move, replace, and extract PDF pages, etc.',
          url: '/pdf-sdk/document-editor',
          iconUrl: require('~/assets/images/tools/docEdit@2x.svg'),
          iconActiveUrl: require('~/assets/images/tools/docEditActive@2x.svg'),
          iconMobileUrl: require('~/assets/images/tools/docEdit.svg'),
          iconMobileActiveUrl: require('~/assets/images/tools/docEditActive.svg'),
          bannerUrl: '/images/tools/docEditor@2x.png',
        },
        {
          title: 'Content Editor',
          alt: 'Content Editor',
          decs: 'Automatically detect font and size of the original text content, and programmatically manipulate content within pages as needed like adding, deleting, and replacing text and images in PDFs. ',
          url: '/pdf-sdk/edit-pdf',
          iconUrl: require('~/assets/images/tools/contEdit@2x.svg'),
          iconActiveUrl: require('~/assets/images/tools/contEditActive@2x.svg'),
          iconMobileUrl: require('~/assets/images/tools/contEdit.svg'),
          iconMobileActiveUrl: require('~/assets/images/tools/contEditActive.svg'),
          bannerUrl: '/images/tools/contEditor@2x.png',
        },
        {
          title: 'Annotations',
          alt: 'Annotations',
          decs: 'Enable your users to draw free, highlight text, and collaborate on PDFs using notes, links, text boxes, shapes, markups, and stamp annotations. ',
          url: '/pdf-sdk/annotations',
          iconUrl: require('~/assets/images/tools/annotation@2x.svg'),
          iconActiveUrl: require('~/assets/images/tools/annotationActive@2x.svg'),
          iconMobileUrl: require('~/assets/images/tools/annotation.svg'),
          iconMobileActiveUrl: require('~/assets/images/tools/annotationActive.svg'),
          bannerUrl: '/images/tools/annotation@2x.png',
        },
        {
          title: 'Form Filling',
          alt: 'Form Filling',
          decs: 'Obtain the ability to create, view, fill out, edit, save, and flatten fillable AcroForms, XFA, and non-interactive forms with ease.',
          url: '/pdf-sdk/forms',
          iconUrl: require('~/assets/images/tools/formFill@2x.svg'),
          iconActiveUrl: require('~/assets/images/tools/formFillActive@2x.svg'),
          iconMobileUrl: require('~/assets/images/tools/formFill.svg'),
          iconMobileActiveUrl: require('~/assets/images/tools/formFillActive.svg'),
          bannerUrl: '/images/tools/formFill@2x.png',
        },
        {
          title: 'Signatures',
          alt: 'Signatures',
          decs: 'Certify and validate certificate-based documents. Sign your apps using drawn, typed, images, and digital signatures.',
          url: '/pdf-sdk/signatures',
          iconUrl: require('~/assets/images/tools/signatures@2x.svg'),
          iconActiveUrl: require('~/assets/images/tools/signaturesActive@2x.svg'),
          iconMobileUrl: require('~/assets/images/tools/signatures.svg'),
          iconMobileActiveUrl: require('~/assets/images/tools/signaturesActive.svg'),
          bannerUrl: '/images/tools/signatures@2x.png',
        }
      ]
    }
  },
  methods: {
    changeIndex (i) {
      this.activeIndex = i
    }
  }
}
</script>

<style lang="scss" scoped>
  .main-content {
    font-family: 'Poppins';
    .main-features {
      position: sticky;
      top: 0rem;
      display: flex;
      flex-direction: column;
      height: 100vh;
      padding-top: 70px;
      overflow: hidden;
      .video-container {
        position: relative;
        display: flex;
        flex-grow: 1;
      }
      .text-container {
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        & :nth-child(1) {
            .mx-8px {
              padding-left: 12px;
              padding-right: 12px;
            }
          }
        .text-item {
          .line-container {
            height: 2px;
            overflow: hidden;
            opacity: 1;
          }
        }
      }
      .text-container::-webkit-scrollbar {
          display: none; /* Chrome Safari */
      }
    }
  }
  ::-webkit-scrollbar {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none;
    display: none; /* Chrome Safari */
  }
  .line-container {
    position: relative;
    height: 2px;
    overflow: hidden;
    opacity: 1;
    &::before {
      content: '';
      position: absolute;
      top: 1px;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #E1E3E8;
    }
  }
  .line {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #396FFA;
    transform-origin: left center;
  }
  .main-content .main-features .text-container .text-item .title {
    font-size: 18px;
  }
  .main-content .main-features .video-container {
    margin-bottom: 3.125rem;
  }
  @media screen and (min-width: 1280px) {
    .main-content .main-features .text-container .text-item .title {
      font-size: 22px;
    }
  }
</style>