<template>
  <div class="column items-center" style="margin-top: 13.02vw;min-height:100vh;">
    <div :class="{'animate__animated animate__fadeInUp':whyt && scrollTop>=(whyt.offsetTop-clientHeight+30)}" ref="whyt">
        <div class="card-title">为什么选择 Travel Design</div>
        <div class="card-sub-title text-center">打造服务旅游的次世代专业级设计工具<br/>更快更精美的包装出你的行程产品</div>
    </div>
    <div class="two-card row" ref="whyc1">
        <div class="small mg " style="background: #5926DC" :class="{'animate__animated animate__backInLeft':whyc1 && scrollTop>=(whyc1.offsetTop-clientHeight+30)}">
            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713338905000_460.png" class="team" />
            <div style="margin-top:10.42vw;font-size: 1.77vw;line-height: 2.7vw;" class="text-white text-weight-bolder">实时协同，提升各角色<br/>工作流程中的效率</div>
            <div style="margin-top: 2.083vw;font-size: 1.146vw; line-height: 1.9791vw;" class="text-white">公司设计师上传精美模板到平台，销售和OP可以根据自己的需要高效的完成设计,并分享已设计好的行程</div>
            <div class="btn" style="margin-top: 2.6vw;">团队协作</div>
        </div>
        <div class="big" :class="{'animate__animated animate__backInRight':whyc1 && scrollTop>=(whyc1.offsetTop-clientHeight+30)}" style="background: #2E79E2;box-shadow: 0px 0px 2.6vw 0px rgba(40,77,172,0.53);">
            <div class="btn">专业模板</div>
            <div style="margin-top:2.291vw;font-size: 1.77vw;line-height:1;" class="text-white text-weight-bolder">预设大量专业美工行程模板供选择</div>
            <div style="margin-top: 1.5625vw;font-size: 1.146vw; line-height: 1.9791vw;" class="text-white">从模板中直接替换文字、图片和Logo等信息<br/>即可完成设计文件</div>
            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_339.png" style="position: absolute;right: 0;bottom: 0;width:35.73vw"/>
        </div>
    </div>
    <div class="two-card row" ref="whyc2" style="margin-top: 1.71vw">
        <div class="big mg" :class="{'animate__animated animate__backInUp':whyc2 && scrollTop>=(whyc2.offsetTop-clientHeight+30)}" style="background: #30D7D5;box-shadow: 0px 0px 2.6vw 0px rgba(40,77,172,0.53);">
            <div class="text-center">
                <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_184.png" style="width:33.90625vw">
            </div>
            <div class="row items-end" style="margin-top: 3.854vw;">
                <div class="col" style="margin-right: 5.9375vw;">
                    <div style="font-size: 1.77vw;line-height:1;" class="text-white text-weight-bolder">像做PPT一样简单的设计行程</div>
                    <div style="margin-top: 1.5625vw;font-size: 1.146vw; line-height: 1.9791vw;" class="text-white">我们采用PPT交互设计，减少不必要的学习使用成本任何人都可以轻松上手操作。</div>
                </div>
                <div class="btn">快速上手</div>
            </div>
        </div>
        <div class="small" :class="{'animate__animated animate__backInUp':whyc2 && scrollTop>=(whyc2.offsetTop-clientHeight+30)}" style="background: #3556F9">
            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_228.png" class="team2" />
            <div  style="margin-top: 13.52vw;" class="text-right">
                <div class="btn">海量资源</div>
            </div>
            
            <div style="margin-top:2.29vw;font-size: 1.77vw;line-height: 1;" class="text-white text-weight-bolder">大量的POI数据快速索引</div>
            <div style="margin-top: 1.77vw;font-size: 1.146vw; line-height: 1.9791vw;" class="text-white">我们提供了海量的POI信息，无论是风景图片还是景点介绍，你都可以快速的在Travel Design中找到</div>
            
        </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
const props = defineProps({
  scrollTop: {
    type: Number,
    required: true,
  },
});
const whyt = ref<HTMLElement>()
const whyc1 = ref<HTMLElement>()
const whyc2 = ref<HTMLElement>()
const clientHeight = ref(document.documentElement.clientHeight)


</script>

<style scoped>
.website .card-title{
    font-weight: 800;
    font-size: 2.6vw;
    color: #000000;
    line-height: 1;
}
.website .visible-hide{
    visibility: hidden;
}
.website .card-sub-title{
    font-weight: 400;
    font-size: 1.041vw;
    color: #625A7E;
    line-height: 1.875vw;
    margin-top: 1.875vw;
}
.website .two-card{
    margin-top: 10.42vw;
}
.website .two-card .small{
    width:26.3vw;
    padding:2.08vw 2.6vw;
    position: relative;
    border-radius: 1.77vw;
}
.website .two-card .mg{
    margin-right: 1.71vw;
}
.website .two-card .big{
    width:43.85vw;
    padding:2.08vw 2.6vw;
    position: relative;
    border-radius: 1.77vw;
}
.website .two-card .team{
    width:16.4vw;
    position: absolute;
    top: -2.08vw;
    right: 2.6vw;
}
.website .two-card .team2{
    width:21.40625vw;
    position: absolute;
    top: -0.8854vw;
    left: 2.6vw;
}
.website .two-card .btn{
    /* height:2.6-50px; 18-0.9375 22-1.1458 44-2.291 30-1.5625 */
    height: 2.6vw;
    line-height: 2.6vw;
    background: #000000;
    border-radius: 0.9375vw;
    color:#FFF;
    padding:0 1.1458vw;
    display: inline-block;
}
</style>
