From 57f60b5f342ed988dc1eae51f92709c6703e319a Mon Sep 17 00:00:00 2001
From: lee-zt <2960166273@qq.com>
Date: Thu, 8 May 2025 20:29:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=A0=A1=E5=86=85=E7=BD=91?=
 =?UTF-8?q?=E5=9D=80=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vue-frontend/package-lock.json            |   5 +-
 .../luojia-island/vue-frontend/package.json   |   3 +-
 .../vue-frontend/src/components/Header.vue    | 141 ++++++++++++++----
 3 files changed, 120 insertions(+), 29 deletions(-)

diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/package-lock.json b/珞珈岛-项目相关文件/luojia-island/vue-frontend/package-lock.json
index 52e13eb..9523566 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/package-lock.json
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/package-lock.json
@@ -21,7 +21,8 @@
         "@vue/cli-plugin-eslint": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
         "eslint": "^7.32.0",
-        "eslint-plugin-vue": "^8.0.3"
+        "eslint-plugin-vue": "^8.0.3",
+        "webpack-bundle-analyzer": "^4.10.2"
       }
     },
     "node_modules/@achrinza/node-ipc": {
@@ -11912,7 +11913,7 @@
     },
     "node_modules/webpack-bundle-analyzer": {
       "version": "4.10.2",
-      "resolved": "https://registry.npmmirror.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.2.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.2.tgz",
       "integrity": "sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==",
       "dev": true,
       "license": "MIT",
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/package.json b/珞珈岛-项目相关文件/luojia-island/vue-frontend/package.json
index 2ea451a..d9cfa2b 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/package.json
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/package.json
@@ -21,7 +21,8 @@
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "webpack-bundle-analyzer": "^4.10.2"
   },
   "eslintConfig": {
     "root": true,
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue
index 0980084..e6c6cad 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue
@@ -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>
\ No newline at end of file