mirror of
https://github.com/Coldsmiles/infstarweb.git
synced 2026-04-23 02:30:41 +08:00
152 lines
3.2 KiB
Vue
152 lines
3.2 KiB
Vue
<script setup>
|
|
import { RouterLink } from 'vue-router';
|
|
|
|
defineProps({
|
|
brand: {
|
|
type: String,
|
|
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: 'InfStarSkin', href: 'https://skin.infstar.cn' },
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<footer class="site-footer">
|
|
<div class="bl-shell">
|
|
<div class="footer-columns">
|
|
<div class="footer-col">
|
|
<div class="footer-logo">{{ brand }}</div>
|
|
<p>© 2026 {{ brand }} Minecraft 服务器.</p>
|
|
<p class="footer-icp">
|
|
<a href="https://icp.gov.moe/?keyword=20260377" target="_blank" rel="noopener noreferrer">萌ICP备20260377号</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>
|
|
</footer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.site-footer {
|
|
background: var(--bl-bg, #f5f5f7);
|
|
padding: 40px 0 0px;
|
|
border-top: 1px solid #e5e5e5;
|
|
font-size: 12px;
|
|
color: var(--bl-text-secondary, #6e6e73);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.footer-logo {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
margin-bottom: 6px;
|
|
color: var(--bl-text, #1d1d1f);
|
|
}
|
|
|
|
.footer-bottom p {
|
|
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> |