Merge branch 'main' of https://bdgit.educoder.net/pmc9py4oq/software_teamwork

2 weeks ago · 6eb3317273
parent 1c2a2ef67e 57f60b5f34
commit 6eb3317273
3 changed files with 120 additions and 29 deletions
--- 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",
--- 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,
--- 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>