gxwebsoft/template-nuxt4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新版官网模板

Browse Source
This commit is contained in:
赵忠林
2026-04-29 01:33:33 +08:00
commit 0d82386f8f
341 changed files with 64526 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
app/components/SiteFooter.vue Normal file
View File

@@ -0,0 +1,290 @@
<template>
<a-layout-footer class="footer">
<div class="mx-auto max-w-screen-xl px-4 py-12">
<!-- 主要内容区域 -->
<a-row :gutter="[32, 40]">
<!-- 品牌介绍 -->
<a-col :md="6" :xs="24">
<div class="brand-section">
<div class="brand-logo">广西决策咨询网</div>
<p class="brand-desc">
广西决策咨询中心官方平台，汇聚专家智慧，服务政府决策，推动广西高质量发展。
</p>
<div class="social-links">
<a-tooltip title="微信公众号">
<span class="social-item">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .186-.059l2.114-1.225a.866.866 0 0 1 .58-.091 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348z"/></svg>
</span>
</a-tooltip>
</div>
</div>
</a-col>
<!-- 快速导航 -->
<a-col :md="4" :sm="6" :xs="12">
<div class="footer-title">快速导航</div>
<div class="footer-links">
<NuxtLink to="/news">政策要闻</NuxtLink>
<NuxtLink to="/consultation">决策咨询</NuxtLink>
<NuxtLink to="/reference">决策参考</NuxtLink>
<NuxtLink to="/expert">专家资讯</NuxtLink>
</div>
</a-col>
<!-- 特色服务 -->
<a-col :md="4" :sm="6" :xs="12">
<div class="footer-title">特色服务</div>
<div class="footer-links">
<NuxtLink to="/think-tank">智库观察</NuxtLink>
<NuxtLink to="/suggestions">建言献策</NuxtLink>
<NuxtLink to="/membership">会员服务</NuxtLink>
<NuxtLink to="/hanmo">翰墨文谈</NuxtLink>
</div>
</a-col>
<!-- 关于我们 -->
<a-col :md="4" :sm="6" :xs="12">
<div class="footer-title">关于我们</div>
<div class="footer-links">
<NuxtLink to="/about">学会简介</NuxtLink>
<NuxtLink to="/about/organization">组织机构</NuxtLink>
<NuxtLink to="/about/charter">学会章程</NuxtLink>
<NuxtLink to="/about/join">加入我们</NuxtLink>
</div>
</a-col>
<!-- 联系我们 -->
<a-col :md="6" :sm="12" :xs="24">
<div class="footer-title">联系我们</div>
<div class="contact-info">
<div class="contact-item">
<span class="contact-icon">📍</span>
<span>广西·南宁·良庆区 五象大道401号五象航洋城</span>
</div>
<div class="contact-item">
<span class="contact-icon">📞</span>
<span>0771-5386339</span>
</div>
<div class="contact-item">
<span class="contact-icon">📧</span>
<span>gxjzxzx@126.com</span>
</div>
</div>
<!-- 二维码 -->
<div class="qrcode-section">
<div class="qrcode-item">
<div class="qrcode-box">
<img alt="微信公众号" class="qrcode-img" src="/images/qrcode-mp-official.jpg" />
</div>
<span class="qrcode-label">关注公众号</span>
</div>
</div>
</a-col>
</a-row>
<!-- 底部版权区域 -->
<div class="footer-bottom">
<div class="footer-bottom-content">
<div class="copyright">
<span>© {{ year }} 广西决策咨询中心 版权所有</span>
<a
class="icp-link"
href="https://beian.miit.gov.cn/"
rel="nofollow noopener"
target="_blank"
>桂ICP备13003666号-12</a>
</div>
<div class="powered-by">
Powered by <a class="text-gray-200" href="https://websoft.top/website" target="_blank">云·企业官网</a>
</div>
</div>
</div>
</div>
</a-layout-footer>
</template>
<script lang="ts" setup>
const year = new Date().getFullYear()
</script>
<style scoped>
.footer {
background: #1e3a5f;
padding: 0;
color: #fff;
}
/* 品牌区域 */
.brand-section {
display: flex;
flex-direction: column;
}
.brand-logo {
font-size: 20px;
font-weight: 700;
color: #fff;
margin-bottom: 16px;
letter-spacing: 2px;
}
.brand-desc {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 1.8;
margin-bottom: 20px;
}
.social-links {
display: flex;
gap: 12px;
}
.social-item {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all 0.3s;
}
.social-item:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
/* 链接区域 */
.footer-title {
font-size: 16px;
font-weight: 600;
color: #fff;
margin-bottom: 20px;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
text-decoration: none;
transition: color 0.2s;
}
.footer-links a:hover {
color: #fff;
}
/* 联系信息 */
.contact-info {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}
.contact-icon {
font-size: 16px;
flex-shrink: 0;
}
/* 二维码 */
.qrcode-section {
display: flex;
gap: 16px;
}
.qrcode-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.qrcode-box {
width: 80px;
height: 80px;
background: #fff;
border-radius: 8px;
padding: 4px;
overflow: hidden;
}
.qrcode-img {
width: 100%;
height: 100%;
object-fit: contain;
}
.qrcode-label {
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
}
/* 底部版权 */
.footer-bottom {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom-content {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
text-align: center;
}
@media (min-width: 768px) {
.footer-bottom-content {
flex-direction: row;
justify-content: space-between;
}
}
.copyright {
display: flex;
align-items: center;
gap: 16px;
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
}
.icp-link {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color 0.2s;
}
.icp-link:hover {
color: #fff;
}
.powered-by {
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
}
/* 覆盖 a-layout-footer 默认样式 */
.footer :deep(.ant-layout-footer) {
padding: 0;
}
</style>