<template>
  <div class="column items-center" style="margin-top: 20vw;">
    <div class="row items-center" ref="feature1" :class="{'animate__animated animate__backInLeft':feature1 && scrollTop>=(feature1.offsetTop-clientHeight+30)}">
        <div class="col">
            <div style="font-size: 2.91vw;color:#000;line-height: 1;" class="text-weight-bolder">地图工具</div>
            <div class="feature-btn" style="margin: 1.71875vw 0;">独家开发的专属于旅游的地图插件</div>
            <div style="font-size: 0.9375vw;color:#625A7E;line-height: 1.875vw; width:21.5625vw">根据你的需要，输入城市名称快速生成行程路径也可以自己动手打造个性化的地图信息，我们还预设了地图模板，不用费神设计。</div>
        </div>
        <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_611.png" style="width:33.02vw;margin-left: 11.9791vw">
    </div>
    <div class="row items-center" ref="feature2" :class="{'animate__animated animate__backInRight':feature2 && scrollTop>=(feature2.offsetTop-clientHeight+30)}">
        <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_481.png" style="width:33.02vw;margin-right: 9.27vw">
        <div class="col text-right">
            <div style="font-size: 2.91vw;color:#000;line-height: 1;" class="text-weight-bolder">导入模板</div>
            <div class="feature-btn" style="margin: 1.71875vw 0;">支持私有化的模板上传</div>
            <div style="font-size: 0.9375vw;color:#625A7E;line-height: 1.875vw; width:24.583vw">公司美工可以将已经设计好的精美行程上传到平台，目前支持PS文件上传，后续将开放更多的文件支持。我们将严格遵守数据安全承诺，不会将你的模板透露给他人</div>
        </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const props = defineProps({
  scrollTop: {
    type: Number,
    required: true,
  },
});
const feature1=ref<HTMLElement>()
const feature2=ref<HTMLElement>()
const clientHeight = ref(document.documentElement.clientHeight)
</script>

<style>
.website .feature-btn{
    background: linear-gradient(103deg, #649DED, #570AD8);
    border-radius: 1.1458vw;
    height: 2.291vw;
    line-height: 2.291vw;
    padding: 0 1.041vw;
    font-weight: 400;
    font-size: 1.25vw;
    color: #FFFFFF;
    display: inline-block;
}
</style>