<template>
  <div id="app">
    <!-- 头部导航 -->
    <HeaderNav></HeaderNav>

    <!-- <router-view :class="{ active: isActiveRoute }"></router-view> -->

    <!-- 尾部版权 -->
    <Footer></Footer>

  </div>
</template>

<script>
// import { useRouter } from 'vue-router';  
// import router from './components/router'; // 导入上面创建的router实例  


// import { ref, reactive } from 'vue';

import HeaderNav from './components/HeaderNav.vue'

// import LoginPage from './components/LoginPage.vue'
// import RegisterPage from './components/RegisterPage.vue'

import Footer from './components/Footer.vue'
export default {
  components: {
    // ShortCut,
    HeaderNav,
    Footer,

  },

}
</script>

<style scoped>
.app {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}



.home-fixed {
    width: 100%;
    height: 80px;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0; 
    z-index: 999;
    box-shadow: 0px 3px 7px 0px rgba(70, 70, 70, 0.35);
    background: #fff;
    transition: all 0.3s;
  }
  .home-fixed.isHide { 
    top: -80px;
  }

  .aaa {
    width: 100%;
    height: 80px;
    position: fixed;
    left: 0;
    /* top: -80px; */
    top: 0;
    background-color: pink;
    z-index: 999;
    /* display: none; */
  }

  .active {  
  color: red; /* 或者你想要的任何颜色 */  
}
</style>