<template>
  <div>
    <HeaderComVue />
    <div class="view-content" ref="view">
      <router-view @backTop="backTop"></router-view>
      <FooterComVue />
    </div>
  </div>
</template>

<script setup>
import HeaderComVue from './components/HeaderCom.vue'
import FooterComVue from './components/FooterCom.vue';
import {onMounted, ref} from "vue";
import {getNavData} from "./api/manage.js";
import {useStore} from "vuex";

const store = useStore()
const view = ref(null);
const backTop = () => {
  view.value.scrollTop = 0
}
const getNav = ()=>{
  getNavData().then(({data})=>{
    if (data) {
      store.commit('changeNavList', data)
    }
  })
}
onMounted(()=>{
  getNav()
})
</script>

<style lang="scss" scoped>
.view-content {
  width: 100vw;
  height: calc(100vh - 80px);
  position: fixed;
  top: 80px;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
