<template>
  <div class="cooperation-case">
    <div class="lg:container lg:pt-80px lg:pb-40px">
      <h3 class="text-xl text-white font-bold text-center <lg:text-20px <lg:leading-24px <lg:py-24px">合作案例</h3>
      <div ref="mySwiper" v-swiper:mySwiper="swiperOption" class="swiper-container overflow-hidden relative w-full h-auto lg:pt-44px pb-80px <lg:pb-60px">
        <div class="swiper-pagination absolute text-center z-2">
          <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
        </div>
        <div class="swiper-wrapper flex relative w-full h-full">
          <div class="swiper-slide relative w-full h-auto">
            <div class="w-870px h-430px bg-white rounded-16px p-16px pr-34px flex m-auto <lg:(w-310px h-414px flex-col pr-16px)">
              <img src="/images/home/cooperation_case_1@2x.png" alt="Cooperation Case1" class="<lg:h-146px <lg:object-cover">
              <div class="mt-44px lg:ml-33px <lg:mt-16px">
                <p class="text-20px leading-27px text-[#3C4247] font-700 pb-18px <lg:leading-24px">某电子书销售平台</p>
                <p class="text-18px leading-31px text-[#606972] <lg:text-16px <lg:leading-24px">该平台希望丰富平台功能，除售卖电子书以外，还想支持在线阅读，通过集成ComPDFKit PDF SDK的查看功能，增加了客户在平台页面的停留时间，帮助提升了平台口碑，突破了平台历史营业额。</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide relative w-full h-auto">
            <div class="w-870px h-430px bg-white rounded-16px p-16px pr-34px flex m-auto <lg:(w-310px h-414px flex-col pr-16px)">
              <img src="/images/home/cooperation_case_2@2x.png" alt="Cooperation Case2" class="<lg:h-146px <lg:object-cover">
              <div class="mt-44px lg:ml-33px <lg:mt-16px">
                <p class="text-20px leading-27px text-[#3C4247] font-700 pb-18px <lg:leading-24px">某海外建筑设计公司</p>
                <p class="text-18px leading-31px text-[#606972] <lg:text-16px <lg:leading-24px">该公司阐述项目计划后，ComPDFKit团队推荐了最佳的功能组合以及部署方案，为对方内部应用程序增加了PDF图纸查看、测量等功能，成功加速了该公司的战略计划部署。</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide relative w-full h-auto">
            <div class="w-870px h-430px bg-white rounded-16px p-16px pr-34px flex m-auto <lg:(w-310px h-414px flex-col pr-16px)">
              <img src="/images/home/cooperation_case_3@2x.png" alt="Cooperation Case3" class="<lg:h-146px <lg:object-cover">
              <div class="mt-44px lg:ml-33px <lg:mt-16px">
                <p class="text-20px leading-27px text-[#3C4247] font-700 pb-18px <lg:leading-24px">某税务事务所</p>
                <p class="text-18px leading-31px text-[#606972] <lg:text-16px <lg:leading-24px">该事务所通过集成ComPDFKit的PDF SDK功能到移动App中，让客户随时查看相关税务PDF文件，轻松进行表单的填写和提交，为目标客户提供了很大便利并带来了大量的客户增长。</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide relative w-full h-auto">
            <div class="w-870px h-430px bg-white rounded-16px p-16px pr-34px flex m-auto <lg:(w-310px h-414px flex-col pr-16px)">
              <img src="/images/home/cooperation_case_4@2x.png" alt="Cooperation Case4" class="<lg:h-146px <lg:object-cover">
              <div class="mt-44px lg:ml-33px <lg:mt-16px">
                <p class="text-20px leading-27px text-[#3C4247] font-700 pb-18px <lg:leading-24px">某国际航空公司</p>
                <p class="text-18px leading-31px text-[#606972] <lg:text-16px <lg:leading-24px">通过集成部署ComPDFKit PDF文件查看、信息查找、信息状况注释、手写签名功能到该公司的EFB（电子飞行包）中，实现了数字化办公，优化了起飞前文件审查等工作。</p>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-button-prev absolute left-0 top-[calc(50%-24px)] z-2 <lg:hidden" slot="button-prev">
          <img src="../assets/images/home/button_prev.svg" alt="prev">
        </div>
        <div class="swiper-button-next absolute right-0 top-[calc(50%-24px)] z-2 <lg:hidden" slot="button-next">
          <img src="../assets/images/home/button_next.svg" alt="next">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { directive } from 'vue-awesome-swiper'
import Dot from '~/assets/images/home/comment_dot.svg?inline'

export default {
  directives: {
    swiper: directive
  },
  components: {
    Dot
  },
  data () {
    return {
      swiperOption: {
        // slidesPerView: 2,
        // spaceBetween: 30,
        // centeredSlides: true,
        loop: true,
        // slideToClickedSlide: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.cooperation-case {
  background: #262c39 url('../static/images/home/cooperation_cases_bg@2x.png') top center;
  background-size: cover;
}
  .swiper-container {
    .swiper-wrapper {
      -webkit-transition-property: -webkit-transform;
      transition-property: -webkit-transform;
      -o-transition-property: transform;
      transition-property: transform;
      transition-property: transform, -webkit-transform;
      -webkit-box-sizing: content-box;
      box-sizing: content-box;
    }
    .swiper-container-android .swiper-slide,
    .swiper-wrapper {
      -webkit-transform: translate3d(0px, 0, 0);
      transform: translate3d(0px, 0, 0);
    }
    // .swiper-slide {
    //   display: -webkit-box;
    //   display: -ms-flexbox;
    //   display: -webkit-flex;
    //   display: flex;
    //   -webkit-box-pack: center;
    //   -ms-flex-pack: center;
    //   -webkit-justify-content: center;
    //   justify-content: center;
    //   -webkit-box-align: center;
    //   -ms-flex-align: center;
    //   -webkit-align-items: center;
    //   align-items: center;
    //   transition: 1.0s;
    //   transform: scale(0.7);
    // }
    .swiper-slide {
      -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      -webkit-transition-property: -webkit-transform;
      transition-property: -webkit-transform;
      -o-transition-property: transform;
      transition-property: transform;
      transition-property: transform, -webkit-transform;
      -webkit-transition: transform 1.0s;
      -moz-transition: transform 1.0s;
      -ms-transition: transform 1.0s;
      -o-transition: transform 1.0s;
      -webkit-transform: scale(0.7);
    }
    .swiper-slide-active {
      -webkit-transform: scale(1);
      transform: scale(1);
      z-index: 1;
    }
    .swiper-slide-next {
      opacity: 0.5;
      translate: -82%;
    }
    .swiper-slide-prev {
      opacity: 0.5;
      translate: 82%;
    }
    // .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-next):not(.swiper-slide-prev) {
    //   opacity: 0;
    // }
  }
  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 40px;
    left: 0;
    width: 100%;
    font-size: 0;
    ::v-deep .swiper-pagination-bullet {
      width: 8px;
      height: 4px;
      display: inline-block;
      margin: 0 2px;
      border-radius: 4px;
      background-color: #D8D8D8;;
      cursor: pointer;
      transition: width 0.3s;
      &.swiper-pagination-bullet-active {
        width: 27px;
        background: #1460F3;
      }
    }
  }
  @media screen and (max-width: 929px) {
    .container {
      max-width: 575px;
      padding: 0;
    }
    .swiper-container {
      .swiper-slide-next {
        translate: -85%;
      }
      .swiper-slide-prev {
        translate: 85%;
      }
    }
  }
  @media screen and (max-width: 575px) {
    .container {
      max-width: 320px;
      padding: 0;
    }
  }
</style>
