|
|
|
|
@ -23,7 +23,14 @@
|
|
|
|
|
<!-- 导航按钮部分 -->
|
|
|
|
|
<div class="nav-buttons">
|
|
|
|
|
<router-link to="/" class="nav-btn">首页</router-link>
|
|
|
|
|
<a href="https://www.whu.edu.cn/" target="_blank" class="nav-btn">校内网址</a>
|
|
|
|
|
<div class="dropdown">
|
|
|
|
|
<button class="nav-btn">校内网址</button>
|
|
|
|
|
<ul class="dropdown-menu">
|
|
|
|
|
<li v-for="(college, index) in colleges" :key="index">
|
|
|
|
|
<a :href="college.url" target="_blank">{{ college.name }}</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<router-link to="/feedback" class="nav-btn">反馈站</router-link>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@ -38,45 +45,60 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// 导入登录注册模态框组件
|
|
|
|
|
import LoginRegisterModal from './LoginRegisterModal.vue'
|
|
|
|
|
import LoginRegisterModal from './LoginRegisterModal.vue';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'AppHeader',
|
|
|
|
|
components: {
|
|
|
|
|
LoginRegisterModal // 注册模态框组件
|
|
|
|
|
LoginRegisterModal,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
isModalVisible: false // 控制模态框显示/隐藏的状态
|
|
|
|
|
}
|
|
|
|
|
isModalVisible: false,
|
|
|
|
|
colleges: [
|
|
|
|
|
{ name: '武大官网', url: 'https://www.whu.edu.cn/' },
|
|
|
|
|
{ name: '计算机学院', url: 'https://cs.whu.edu.cn/' },
|
|
|
|
|
{ name: '经济与管理学院', url: 'https://ems.whu.edu.cn/' },
|
|
|
|
|
{ name: '法学院', url: 'https://law.whu.edu.cn/' },
|
|
|
|
|
{ name: '物理科学与技术学院', url: 'https://physics.whu.edu.cn/' },
|
|
|
|
|
{ name: '化学与分子科学学院', url: 'https://chem.whu.edu.cn/' },
|
|
|
|
|
{ name: '生命科学学院', url: 'https://life.whu.edu.cn/' },
|
|
|
|
|
{ name: '外国语言文学学院', url: 'https://fls.whu.edu.cn/' },
|
|
|
|
|
{ name: '历史学院', url: 'https://history.whu.edu.cn/' },
|
|
|
|
|
{ name: '新闻与传播学院', url: 'https://jmc.whu.edu.cn/' },
|
|
|
|
|
{ name: '艺术与设计学院', url: 'https://artdesign.whu.edu.cn/' },
|
|
|
|
|
{ name: '体育学院', url: 'https://pe.whu.edu.cn/' },
|
|
|
|
|
{ name: '马克思主义学院', url: 'https://marx.whu.edu.cn/' },
|
|
|
|
|
{ name: '继续教育学院', url: 'https://jjy.whu.edu.cn/' },
|
|
|
|
|
{ name: '国际教育学院', url: 'https://gjjy.whu.edu.cn/' },
|
|
|
|
|
{ name: '网络与信息中心', url: 'https://nic.whu.edu.cn/' },
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 显示模态框的方法
|
|
|
|
|
showModal() {
|
|
|
|
|
this.isModalVisible = true
|
|
|
|
|
this.isModalVisible = true;
|
|
|
|
|
},
|
|
|
|
|
// 隐藏模态框的方法
|
|
|
|
|
hideModal() {
|
|
|
|
|
this.isModalVisible = false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.isModalVisible = false;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
/* 头部容器样式 */
|
|
|
|
|
.header {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
|
|
padding: 0 15px; /* 水平内边距 */
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 0 20px; /* 增加左右内边距，避免内容过于靠边 */
|
|
|
|
|
border-bottom: 2px solid #e0e0e0;
|
|
|
|
|
background: white;
|
|
|
|
|
margin: 5px;
|
|
|
|
|
position: fixed; /* 固定在页面顶部 */
|
|
|
|
|
top: 2px;
|
|
|
|
|
width: 98%; /* 占满页面宽度 */
|
|
|
|
|
z-index: 1000; /* 确保在其他内容之上 */
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
box-sizing: border-box; /* 确保内边距不会影响宽度 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Logo 区域样式 */
|
|
|
|
|
@ -141,7 +163,8 @@ export default {
|
|
|
|
|
.nav-buttons {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0; /* 无间隙排列 */
|
|
|
|
|
gap: 20px; /* 增加按钮之间的间距 */
|
|
|
|
|
flex: 1; /* 占据剩余空间，推送登录按钮到右侧 */
|
|
|
|
|
margin-left: 20px; /* 确保与 Logo 有一定间距 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -159,27 +182,93 @@ export default {
|
|
|
|
|
|
|
|
|
|
.nav-btn:hover {
|
|
|
|
|
background-color: #f0f0f0;
|
|
|
|
|
color: #6FBD87;
|
|
|
|
|
color: #6fbd87;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Dropdown 样式 */
|
|
|
|
|
.dropdown {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropdown-menu {
|
|
|
|
|
display: none;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
background-color: white;
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
list-style: none;
|
|
|
|
|
padding: 0; /* 去掉默认内边距 */
|
|
|
|
|
margin: 0;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
max-height: 200px; /* 限制下拉列表的最大高度 */
|
|
|
|
|
overflow-y: auto; /* 添加垂直滚动条 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 滚动条样式（可选） */
|
|
|
|
|
.dropdown-menu::-webkit-scrollbar {
|
|
|
|
|
width: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropdown-menu::-webkit-scrollbar-thumb {
|
|
|
|
|
background-color: #ccc;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropdown-menu::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
background-color: #aaa;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropdown-menu li {
|
|
|
|
|
padding: 10px 15px;
|
|
|
|
|
border-bottom: 1px solid #eee; /* 添加底部分隔线 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropdown-menu li:last-child {
|
|
|
|
|
border-bottom: none; /* 去掉最后一项的边线 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropdown-menu li a {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: #333;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
display: block; /* 确保链接占满 li */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropdown-menu li:hover {
|
|
|
|
|
background-color: #f0f0f0; /* 鼠标悬浮时背景高亮 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropdown-menu li a:hover {
|
|
|
|
|
color: #6fbd87; /* 鼠标悬浮时文字颜色变化 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropdown:hover .dropdown-menu {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 登录按钮部分样式 */
|
|
|
|
|
.nav-section {
|
|
|
|
|
margin-left: auto; /* 将登录按钮推到最右侧 */
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-btn {
|
|
|
|
|
height: 30px;
|
|
|
|
|
padding: 0px 10px;
|
|
|
|
|
height: 35px;
|
|
|
|
|
padding: 0 15px; /* 增加按钮的内边距 */
|
|
|
|
|
border: none;
|
|
|
|
|
background: none;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
color: #333;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: color 0.3s;
|
|
|
|
|
transition: color 0.3s, background-color 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-btn:hover {
|
|
|
|
|
color: #6FBD87;
|
|
|
|
|
color: #6fbd87;
|
|
|
|
|
background: #f0f0f0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
