From 5801dd825f9555e4b846fb2e5c019300ab52851c Mon Sep 17 00:00:00 2001
From: JACKYMYPERSON <mayimingperson_person@163.com>
Date: Wed, 8 Oct 2025 23:24:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9web/Home=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.vue                  |   2 +
 web/src/component/FooterView.vue | 144 +++++++++++++++++++++++++++++++
 web/src/views/HomeView.vue       |   8 ++
 3 files changed, 154 insertions(+)
 create mode 100644 web/src/component/FooterView.vue

diff --git a/web/src/App.vue b/web/src/App.vue
index c86c1c98..b3c5cf51 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,9 +1,11 @@
 <template>
   <HomeView></HomeView>
+  <FooterView></FooterView>
 </template>
 
 <script setup lang="ts">
 import HomeView from '@/views/HomeView.vue'
+import FooterView from './component/FooterView.vue';
 </script>
 
 <style scoped>
diff --git a/web/src/component/FooterView.vue b/web/src/component/FooterView.vue
new file mode 100644
index 00000000..d90fb495
--- /dev/null
+++ b/web/src/component/FooterView.vue
@@ -0,0 +1,144 @@
+<template>
+  <footer class="site-footer">
+    <div class="footer-container">
+      <div class="footer-column about-us">
+        <h3 class="column-title">湖北健康生活与康居环境设计研究中心</h3>
+        <p class="about-desc">
+          致力于通过跨学科研究与设计创新，推动人居环境的健康发展，提升全民生活品质。
+        </p>
+      </div>
+
+      <div class="footer-column quick-links">
+        <h3 class="column-title">快速链接</h3>
+        <ul>
+          <li><a href="#">基地概况</a></li>
+          <li><a href="#">科学研究</a></li>
+          <li><a href="#">学术交流</a></li>
+          <li><a href="#">社会服务</a></li>
+          <li><a href="#">案例资源</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-column contact-info">
+        <h3 class="column-title">联系我们</h3>
+        <ul>
+          <li>
+            <el-icon><Location /></el-icon>
+            <span>湖北省 武汉市 XX区 XX大道 123号</span>
+          </li>
+          <li>
+            <el-icon><Phone /></el-icon>
+            <span>(027) 1234 5678</span>
+          </li>
+          <li>
+            <el-icon><Message /></el-icon>
+            <span>contact@hbrc-healthydesign.org</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="footer-bottom">
+      <p>
+        © 2025 湖北健康生活与康居环境设计研究中心. All Rights Reserved. |
+        <a href="https://beian.miit.gov.cn/" target="_blank">鄂ICP备12345678号-1</a>
+      </p>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { ElIcon } from 'element-plus';
+import { Location, Phone, Message } from '@element-plus/icons-vue';
+</script>
+
+<style scoped>
+.site-footer {
+  background-color: #333; /* 深灰色背景，专业稳重 */
+  color: #a9a9a9; /* 浅灰色文字 */
+  padding-top: 50px;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.footer-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* 三列布局 */
+  gap: 40px; /* 列间距 */
+  border-bottom: 1px solid #444;
+  padding-bottom: 40px;
+}
+
+.footer-column h3 {
+  font-size: 18px;
+  color: #ffffff;
+  margin-bottom: 20px;
+  font-weight: 500;
+}
+
+/* 第一列：关于我们 */
+.about-us .about-desc {
+  color: #a9a9a9;
+}
+
+/* 第二、三列：列表样式 */
+.footer-column ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-column li {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px; /* 图标与文字间距 */
+}
+
+.footer-column a {
+  color: #a9a9a9;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer-column a:hover {
+  color: #ffffff;
+}
+
+.contact-info .el-icon {
+  color: #ffffff;
+}
+
+/* 底部版权栏 */
+.footer-bottom {
+  padding: 20px;
+  text-align: center;
+}
+
+.footer-bottom p {
+  margin: 0;
+  font-size: 13px;
+}
+
+.footer-bottom a {
+  color: #a9a9a9;
+  text-decoration: none;
+}
+.footer-bottom a:hover {
+  color: #ffffff;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .footer-container {
+    grid-template-columns: 1fr; /* 手机端变为单列 */
+    text-align: center;
+  }
+  .contact-info li {
+    justify-content: center;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index b93875b7..93d7229a 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -307,9 +307,17 @@ onMounted(async () => {
   align-items: center;
 }
 
+/* ⭐️ 移除 el-menu 组件自带的边框 */
 .el-menu--horizontal {
   border-bottom: none;
 }
+/* 上面这行代码有时可能因为scoped的限制而不生效，
+  因此更推荐、更可靠的方式是使用 :deep() 
+*/
+:deep(.el-menu--horizontal) {
+  border-bottom: none !important;
+}
+
 
 .el-menu-item {
   padding: 0 20px !important; /* 增加菜单项间距 */