赵忠林
17ce26411d
- 重构首页结构，增加Banner轮播与左侧快捷入口 - 新增单位企业广告区及会员服务广告区 - 实现决策咨询板块，涵盖市县决策、行业资讯、前沿观察、企业动态 - 设计决策参考板块，展示政策原文、深度解读、研究成果、专题研究 - 完善专家资讯板块，包含专家视点、专家动态及专家申请卡片 - 添加智库观察板块与翰墨文谈板块，丰富内容分类 - 底部功能区新增资料下载、申报模板、成果报送、联系我们快捷链接 - 采用蓝色主色调和卡片式布局，提升视觉统一与响应式体验 - 使用模拟数据占位，便于后续接入实际API数据 - 重构SiteFooter提升一致性与风格统一
291 lines
6.8 KiB
Vue
291 lines
6.8 KiB
Vue
<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 :xs="24" :md="6">
|
||
<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 :xs="12" :sm="6" :md="4">
|
||
<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 :xs="12" :sm="6" :md="4">
|
||
<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 :xs="12" :sm="6" :md="4">
|
||
<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 :xs="24" :sm="12" :md="6">
|
||
<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 src="/images/qrcode-mp-official.jpg" alt="微信公众号" class="qrcode-img" />
|
||
</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
|
||
href="https://beian.miit.gov.cn/"
|
||
target="_blank"
|
||
rel="nofollow noopener"
|
||
class="icp-link"
|
||
>桂ICP备13003666号-12</a>
|
||
</div>
|
||
<div class="powered-by">
|
||
技术支持：广西websoft
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-layout-footer>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
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>
|