<template>
<section class="layout">
  <!--布局顶部栏-->
  <LayoutHeader/>
  <!--布局内容-->
  <LayoutMain/>
  <!--布局底部栏-->
  <LayoutFooter/>
</section>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import LayoutHeader from './components/LayoutHeader/index.vue'
import LayoutMain from './components/LayoutMain/index.vue'
import LayoutFooter from './components/LayoutFooter/index.vue'
import WOW from 'wow.js'

/* 初始化wow动画库 */
onMounted(() => {
  const wow = new WOW(
    {
      boxClass: 'wow', // 动画元素类名-默认wow
      animateClass: 'animated', // 启用动画类名-默认animated
      offset: 0, // 距离元素多高开始动画-默认0
      mobile: true, // 兼容移动端设备-默认true
      live: false, // 是否等待元素异步加载-默认true会报警告所以改为false
      scrollContainer: null, // 可选滚动容器选择器，不填为window
      callback: function () {
        // 动画开始时会执行此回调函数-参数为动画后的dom节点
      }
    }
  )
  wow.init()
})
</script>

<style scoped lang="scss">
  .layout{
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    @include flexColSb;
  }
</style>
