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

    <!-- <router-view :class="{ active: isActiveRoute }"></router-view> -->
    <!-- <router-view></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,

  },

  // watch: {
  //   // 监听路由变化
  //   $route(to, from) {
  //     if (to.name === 'Home' && from.name === 'Home') {
  //       // 如果从首页路由离开并再次返回，重置飘窗状态
  //       this.sportStatus = false;
  //       this.floatWindowKey = 0;
  //       this.clearFloatWindowTimer(); // 清除飘窗的定时器
  //       this.resetFloatWindowPosition(); // 重置飘窗位置
  //       console.log(22);
  //     } else if (to.name === 'Home') {
  //       // 如果第一次进入首页路由，启动飘窗
  //       this.sportStatus = true;
  //       this.floatWindowKey++; // 增加 key 值以强制重新渲染
  //       console.log(11);
  //       this.resetFloatWindowPosition(); // 重置飘窗位置
  //       this.startFloatWindowTimer(); // 启动飘窗移动的定时器
  //     }
  //   }
  // },

  // data() {
  //   return {
  //     shouldReloadHome: false // 标志，用于判断是否需要刷新首页
  //   };
  // },
  // methods: {
  //   handleRefreshHome() {
  //     this.shouldReloadHome = true; // 设置刷新标志
  //   }
  // },
  // watch: {
  //   $route(to, from) {
  //     // 当路由跳转到首页且设置了刷新标志时，刷新页面
  //     if (to.path === '/' && this.shouldReloadHome) {
  //       window.location.reload(); // 刷新页面
  //       this.shouldReloadHome = false; // 重置刷新标志
  //     }
  //   }
  // }

}
</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>