<template>
    <el-scrollbar ref="scrollRef" height="100vh" @scroll="onChange" style="" class="none-scroll-bar">
        <div class="website" style="user-select: none;">
            <Welcomes :scroll-top="top"></Welcomes>
            <Whyme :scroll-top="top"></Whyme>
            <FeatureVue :scroll-top="top"></FeatureVue>
            <DataInfo :scroll-top="top"></DataInfo>
            <Product :scroll-top="top"></Product>
            <About :scroll-top="top"></About>
            <FooterInfo></FooterInfo>
        </div>
    </el-scrollbar>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import Welcomes from './components/Welcomes.vue';
import Whyme from './components/Whyme.vue';
import FeatureVue from './components/Feature.vue'
import DataInfo from './components/DataInfo.vue'
import Product from './components/Product.vue'
import About from './components/About.vue'
import FooterInfo from './components/FooterInfo.vue'
const top = ref(0)
const scrollRef = ref<any>()
const onChange = (e:any)=>{
    top.value=e.scrollTop
    // if(top.value==0 && e.scrollTop>1){
    //     //top.value = e.scrollTop>1?1:e.scrollTop
    //     if(scrollRef.value){
    //         scrollRef.value.setScrollTop(1)
    //     }
    // }else{
    //     top.value = e.scrollTop
    // }
    
}
</script>
<style >
.website{
    background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_863.png');
    width: 100vw;
    min-height: 100vh;
    background-repeat: repeat-y;
    background-size: 100% auto;
    
}
.none-scroll-bar .el-scrollbar__bar{
    display: none !important;
}
</style>