122 lines
2.8 KiB
Vue
122 lines
2.8 KiB
Vue
<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> |