feat: enhance SiteFooter with navigation links and improved layout

This commit is contained in:
zhangyuheng
2026-03-18 16:57:39 +08:00
parent a578971cf3
commit 277bd9c897

View File

@@ -1,18 +1,62 @@
<script setup> <script setup>
import { RouterLink } from 'vue-router';
defineProps({ defineProps({
brand: { brand: {
type: String, type: String,
default: '白鹿原', default: '白鹿原',
}, },
}); });
const siteNav = [
{ label: '首页', href: '/' },
{ label: '文档', href: '/doc' },
{ label: '地图', href: '/map' },
{ label: '设施', href: '/facilities' },
{ label: '城镇', href: '/towns' },
{ label: '公告', href: '/announcements' },
{ label: '相册', href: '/photo' },
{ label: '数据', href: '/stats' },
{ label: '赞助', href: '/sponsor' },
{ label: '加入游戏', href: '/join' },
];
const friendLinks = [
{ label: 'MineBBS', href: 'https://www.minebbs.com/threads/x.25611/' },
{ label: 'MCList', href: 'https://www.mclists.cn/server/7653.html' },
{ label: 'mcgodx', href: 'https://mcgodx.com/servers/212/' },
];
</script> </script>
<template> <template>
<footer class="site-footer"> <footer class="site-footer">
<div class="site-footer__inner"> <div class="site-footer__inner">
<div class="footer-content"> <div class="footer-columns">
<div class="footer-col">
<div class="footer-logo">{{ brand }}</div> <div class="footer-logo">{{ brand }}</div>
<p>&copy; 2026 {{ brand }} Minecraft 服务器.</p> <p>&copy; 2026 {{ brand }} Minecraft 服务器.</p>
<p class="footer-icp">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">蜀ICP备2025160432号</a>
</p>
</div>
<div class="footer-col">
<div class="footer-col-title">友情链接</div>
<ul v-if="friendLinks.length" class="footer-link-list">
<li v-for="link in friendLinks" :key="link.href">
<a :href="link.href" target="_blank" rel="noopener noreferrer">{{ link.label }}</a>
</li>
</ul>
<p v-else class="footer-empty">暂无</p>
</div>
<div class="footer-col">
<div class="footer-col-title">站内导航</div>
<ul class="footer-link-list">
<li v-for="item in siteNav" :key="item.href">
<RouterLink :to="item.href">{{ item.label }}</RouterLink>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</footer> </footer>
@@ -21,19 +65,64 @@ defineProps({
<style scoped> <style scoped>
.site-footer { .site-footer {
background: var(--bl-bg, #f5f5f7); background: var(--bl-bg, #f5f5f7);
padding: 40px 0; padding: 40px 0 0px;
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
font-size: 12px; font-size: 12px;
color: var(--bl-text-secondary); color: var(--bl-text-secondary, #6e6e73);
} }
.site-footer__inner { .site-footer__inner {
max-width: var(--bl-content-width, 1200px); max-width: 1000px;
margin: 0 auto; margin: 0 auto;
padding: 0 16px; padding: 0 20px;
} }
.footer-content { .footer-columns {
display: flex;
gap: 60px;
padding-bottom: 30px;
border-bottom: 1px solid #e5e5e5;
}
.footer-col {
min-width: 0;
}
.footer-col-title {
font-size: 13px;
font-weight: 600;
color: var(--bl-text, #1d1d1f);
margin-bottom: 10px;
}
.footer-link-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
}
.footer-link-list a {
color: var(--bl-text-secondary, #6e6e73);
text-decoration: none;
transition: color 0.2s;
font-size: 12px;
line-height: 1.8;
}
.footer-link-list a:hover {
color: var(--bl-text, #1d1d1f);
}
.footer-empty {
margin: 0;
color: var(--bl-text-tertiary, #8d8d92);
font-size: 12px;
}
.footer-bottom {
text-align: center; text-align: center;
} }
@@ -41,10 +130,31 @@ defineProps({
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 700; font-weight: 700;
margin-bottom: 6px; margin-bottom: 6px;
color: var(--bl-text); color: var(--bl-text, #1d1d1f);
} }
.footer-content p { .footer-bottom p {
margin: 0; margin: 0;
} }
.footer-icp {
margin-top: 6px !important;
}
.footer-icp a {
color: var(--bl-text-secondary, #6e6e73);
text-decoration: none;
transition: color 0.2s;
}
.footer-icp a:hover {
color: var(--bl-text, #1d1d1f);
}
@media (max-width: 600px) {
.footer-columns {
flex-direction: column;
gap: 24px;
}
}
</style> </style>