81 lines
1.4 KiB
Vue
81 lines
1.4 KiB
Vue
|
<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>
|