<template>
  <div class="column items-center data-box" ref="datainfo1">
    <div :class="{'animate__animated animate__fadeInUp':datainfo1 && scrollTop>=(datainfo1.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="feature-btn" style="margin-top: 2.291vw;margin-bottom: 4.1666vw;">独家开发的专属于旅游的地图插件</div>
    </div>
    <div class="row items-center flex-between full-width">
        <div class="text-center"  :class="{' animate__animated animate__backInUp':datainfo1 && scrollTop>=(datainfo1.offsetTop-clientHeight+30)}">
            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_886.png" class="item-img">
            <div class="item-text">自动保存</div>
        </div>
        <div class="text-center "  :class="{'animate__animated animate__backInUp animate__delay-1s':datainfo1 && scrollTop>=(datainfo1.offsetTop-clientHeight+30)}">
            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_89.png" class="item-img">
            <div class="item-text">历史版本记录</div>
        </div>
        <div class="text-center"  :class="{'animate__animated animate__backInUp animate__delay-2s':datainfo1 && scrollTop>=(datainfo1.offsetTop-clientHeight+30)}">
            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_73.png" class="item-img">
            <div class="item-text">误删找回</div>
        </div>
    </div>
  </div>
</template>

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

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

<style scoped>
.website .data-box{
    margin: 3.23vw auto 0 auto;
    width: 71.875vw;
    background: linear-gradient(0deg, rgba(255, 255, 255, .6), rgba(247, 249, 255, .6));
    border-radius: 1.25vw;
    padding:4.9479vw 8.958vw;

}
.website .data-box .item-img{
    width: 5.521vw;
    margin-bottom: 2.6vw;
}
.website .data-box .item-text{
    font-weight: bold;
    font-size: 1.25vw;
    color: #000000;
}
.website .data-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>