<script setup lang="ts">
import HeaderPage from './components/HeaderPage.vue';
import FooterPage from './components/FooterPage.vue';
import { useRoute } from 'vue-router'
import { computed, onMounted } from "vue";
import WOW from "wow.js";

const route = useRoute()
const routerKey = computed(() => {
  return route.path + Math.random()
})
onMounted(() => {
  let wow = new WOW({
    boxClass: "wow",
    animateClass: "animated",
    offset: 0,
    mobile: true,
    live: true,
    scrollContainer: null,
    resetAnimation: true,
  });
  wow.init();
})
</script>

<template>
  <div class="appview">
    <HeaderPage class="header"></HeaderPage>
    <router-view :key="routerKey" class="view"></router-view>
    <FooterPage class="footer"></FooterPage>
  </div>
</template>

<style lang="less">
@import './assets/css/index.css';

</style>

<style lang="less">
.appview{
  display: flex;
  flex-direction: column;
  // height: 100vh;
  .header{
    width: 100%;
  }
  .footer{
    width: 100%;
  }
  .view{
    flex: 1;
    // overflow-y: auto;
  }
}
</style>
