<template>
    <div class="column items-center product-box" ref="productinfo1">
      <div :class="{'animate__animated animate__fadeInUp':productinfo1 && scrollTop>=(productinfo1.offsetTop-clientHeight+30)}">
          <div style="font-size: 2.708vw;color:#000;line-height: 1;" class="text-weight-bolder full-width text-center">产品介绍</div>
          <div class="product-btn">打造服务旅游的次世代专业级设计工具<br/>更快更精美的包装出你的行程产品</div>
      </div>
      <div class="row items-center flex-between full-width">
          <div class="text-center" :class="{' animate__animated animate__backInLeft animate__delay-2s':productinfo1 && scrollTop>=(productinfo1.offsetTop-clientHeight+30)}">
              <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_129.png" class="item-img">
          </div>
          <div class="text-center "  :class="{'animate__animated animate__backInLeft animate__delay-1s':productinfo1 && scrollTop>=(productinfo1.offsetTop-clientHeight+30)}">
              <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_907.png" class="item-img">
          </div>
          <div class="text-center"  :class="{'animate__animated animate__backInLeft':productinfo1 && scrollTop>=(productinfo1.offsetTop-clientHeight+30)}">
              <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_309.png" class="item-img">
          </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from "vue";
  
  const props = defineProps({
    scrollTop: {
      type: Number,
      required: true,
    },
  });
  const productinfo1=ref<HTMLElement>()
  const clientHeight = ref(document.documentElement.clientHeight)
  </script>
  
  <style scoped>
  .website .product-box{
      margin: 15.9375vw auto 0 auto;
      width: 77.1875vw;  
  }
  .website .product-box .item-img{
      width: 24.27vw;
  }
  .website .product-btn{
    font-weight: 400;
    font-size: 1.25vw;
    color: #625A7E;
    line-height: 2.083vw;
    margin-top: 2.291vw;
    margin-bottom: 4.1666vw;
    text-align: center;
  }
  </style>