修改web/Home样式
This commit is contained in:
JACKYMYPERSON
@@ -1,9 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<HomeView></HomeView>
|
<HomeView></HomeView>
|
||||||
|
<FooterView></FooterView>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import HomeView from '@/views/HomeView.vue'
|
import HomeView from '@/views/HomeView.vue'
|
||||||
|
import FooterView from './component/FooterView.vue';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
144
web/src/component/FooterView.vue
Normal file
144
web/src/component/FooterView.vue
Normal file
@@ -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>
|
||||||
@@ -307,9 +307,17 @@ onMounted(async () => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ⭐️ 移除 el-menu 组件自带的边框 */
|
||||||
.el-menu--horizontal {
|
.el-menu--horizontal {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
/* 上面这行代码有时可能因为scoped的限制而不生效，
|
||||||
|
因此更推荐、更可靠的方式是使用 :deep()
|
||||||
|
*/
|
||||||
|
:deep(.el-menu--horizontal) {
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.el-menu-item {
|
.el-menu-item {
|
||||||
padding: 0 20px !important; /* 增加菜单项间距 */
|
padding: 0 20px !important; /* 增加菜单项间距 */
|
||||||
|
|||||||
Reference in New Issue
Block a user