feat(home): 完成首页全面重构与新增多个板块组件
- 重构首页结构，增加Banner轮播与左侧快捷入口 - 新增单位企业广告区及会员服务广告区 - 实现决策咨询板块，涵盖市县决策、行业资讯、前沿观察、企业动态 - 设计决策参考板块，展示政策原文、深度解读、研究成果、专题研究 - 完善专家资讯板块，包含专家视点、专家动态及专家申请卡片 - 添加智库观察板块与翰墨文谈板块，丰富内容分类 - 底部功能区新增资料下载、申报模板、成果报送、联系我们快捷链接 - 采用蓝色主色调和卡片式布局，提升视觉统一与响应式体验 - 使用模拟数据占位，便于后续接入实际API数据 - 重构SiteFooter提升一致性与风格统一
This commit is contained in:
@@ -5,153 +5,98 @@
|
||||
<a-row :gutter="[32, 40]">
|
||||
<!-- 品牌介绍 -->
|
||||
<a-col :xs="24" :md="6">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="text-2xl">🦞</span>
|
||||
<span class="text-lg font-semibold text-white">AI-Native</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-400 leading-6 mb-4">
|
||||
深度集成 OpenClaw 开源 AI Agent 框架，为企业提供智能客服、知识库问答、自动化工作流等能力。
|
||||
</p>
|
||||
<div class="flex gap-3">
|
||||
<a-tooltip title="GitHub">
|
||||
<a href="https://github.com/openclaw" target="_blank" class="text-gray-400 hover:text-white transition-colors">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /></svg>
|
||||
</a>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="微信公众号">
|
||||
<span class="text-gray-400 hover:text-white cursor-pointer transition-colors">
|
||||
<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.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 3.952 6.884 3.952.526 0 1.045-.048 1.555-.133-.207-.533-.454-1.05-.768-1.532l-.15.086c-.655.373-1.546.597-2.477.597-.769 0-1.491-.183-2.143-.507a4.226 4.226 0 0 1-1.762-1.399c-.052-.059-.104-.117-.154-.175l-.001.001a4.312 4.312 0 0 1 2.824-1.127c1.513 0 2.75.707 3.534 1.606.505.759.882 1.613 1.105 2.523 1.418-1.215 2.391-2.727 2.797-4.415.458-1.193.412-2.285-.097-3.177-.538-.942-1.391-1.64-2.397-2.086zm-6.115 5.115a.683.683 0 0 0-.683.683.683.683 0 0 0 .683.683.683.683 0 0 0 .683-.683.683.683 0 0 0-.683-.683zm4.524 0a.683.683 0 0 0-.683.683.683.683 0 0 0 .683.683.683.683 0 0 0 .683-.683.683.683 0 0 0-.683-.683z" /></svg>
|
||||
</span>
|
||||
</a-tooltip>
|
||||
<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="text-base font-semibold text-white mb-4">产品服务</div>
|
||||
<div class="grid gap-3 text-sm text-gray-400">
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/ai-agent">AI 智能体</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/website">云官网</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/miniapp">小程序开发</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/shop">小程序商城</NuxtLink>
|
||||
<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="text-base font-semibold text-white mb-4">平台能力</div>
|
||||
<div class="grid gap-3 text-sm text-gray-400">
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/platform">多租户架构</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/platform">私有化部署</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/market">模板市场</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/market">插件市场</NuxtLink>
|
||||
<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="text-base font-semibold text-white mb-4">快速入口</div>
|
||||
<div class="grid gap-3 text-sm text-gray-400">
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/flow">开通流程</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/deploy">部署方案</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/contact">联系我们</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/login">立即登录</NuxtLink>
|
||||
<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="12" :sm="6" :md="6">
|
||||
<div class="text-base font-semibold text-white mb-4">联系我们</div>
|
||||
<div class="grid gap-3 text-sm text-gray-400">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-gray-500">📱</span>
|
||||
<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="flex items-start gap-2">
|
||||
<span class="text-gray-500">📍</span>
|
||||
<span>广西·南宁·良庆区 五象大道401号五象航洋城1226</span>
|
||||
<div class="contact-item">
|
||||
<span class="contact-icon">📧</span>
|
||||
<span>gxjzxzx@126.com</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 扫码下载 / 关注 -->
|
||||
<div class="mt-5">
|
||||
<div class="text-xs text-gray-500 mb-3">扫码下载 / 关注</div>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<!-- 微信小程序 -->
|
||||
<a-tooltip color="#1f2937" placement="top">
|
||||
<template #title>
|
||||
<div class="flex flex-col items-center gap-1 p-1">
|
||||
<img src="/images/qrcode-miniapp.jpg" alt="微信小程序" class="w-28 h-28 rounded" />
|
||||
<span class="text-xs text-gray-300">微信小程序</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-col items-center gap-1 cursor-pointer group">
|
||||
<div class="w-10 h-10 rounded-lg overflow-hidden border border-white/10 group-hover:border-green-400/60 transition-colors">
|
||||
<img src="/images/qrcode-miniapp.jpg" alt="微信小程序" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 group-hover:text-green-400 transition-colors">小程序</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
|
||||
<!-- 微信公众号 -->
|
||||
<a-tooltip color="#1f2937" placement="top">
|
||||
<template #title>
|
||||
<div class="flex flex-col items-center gap-1 p-1">
|
||||
<img src="/images/qrcode-mp-official.jpg" alt="微信公众号" class="w-28 h-28 rounded" />
|
||||
<span class="text-xs text-gray-300">微信公众号</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-col items-center gap-1 cursor-pointer group">
|
||||
<div class="w-10 h-10 rounded-lg overflow-hidden border border-white/10 group-hover:border-green-400/60 transition-colors">
|
||||
<img src="/images/qrcode-mp-official.jpg" alt="微信公众号" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 group-hover:text-green-400 transition-colors">公众号</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
|
||||
<!-- APP 下载（Android & iOS 通用） -->
|
||||
<a-tooltip color="#1f2937" placement="top">
|
||||
<template #title>
|
||||
<div class="flex flex-col items-center gap-1 p-1">
|
||||
<img src="/images/qrcode-app.jpg" alt="下载 APP" class="w-28 h-28 rounded" />
|
||||
<span class="text-xs text-gray-300">扫码下载 APP</span>
|
||||
<span class="text-xs text-gray-500">Android & iOS</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-col items-center gap-1 cursor-pointer group">
|
||||
<div class="w-10 h-10 rounded-lg overflow-hidden border border-white/10 group-hover:border-blue-400/60 transition-colors">
|
||||
<img src="/images/qrcode-app.jpg" alt="下载 APP" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 group-hover:text-blue-400 transition-colors">下载 APP</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<!-- 二维码 -->
|
||||
<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="mt-10 pt-6 border-t border-white/10">
|
||||
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between text-xs text-gray-500">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<img src="/logo.png" alt="websopy" style="height:12px;width:auto;opacity:0.4;" />
|
||||
<span>© {{ year }} Websopy. All rights reserved.</span>
|
||||
<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="text-gray-500 hover:text-orange-400 transition-colors"
|
||||
>{{ icpText }}</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 opacity-80 hover:opacity-90 text-gray-100 text-xs">
|
||||
<!-- 切换语言 -->
|
||||
<!-- <LangSwitch />-->
|
||||
<span class="text-gray-500">Powered by</span>
|
||||
<a
|
||||
rel="nofollow"
|
||||
href="https://site.websoft.top"
|
||||
href="https://beian.miit.gov.cn/"
|
||||
target="_blank"
|
||||
>
|
||||
<span class="text-gray-500 hover:text-gray-200">云·企业官网</span>
|
||||
</a>
|
||||
rel="nofollow noopener"
|
||||
class="icp-link"
|
||||
>桂ICP备13003666号-12</a>
|
||||
</div>
|
||||
<div class="powered-by">
|
||||
技术支持：广西websoft
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -160,36 +105,186 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getAppProductFieldByCode } from '@/api/cms/cmsWebsiteField'
|
||||
|
||||
const siteName = '桂乐淘'
|
||||
|
||||
const { data: icpField } = useAsyncData('cmsWebsite-field-icpNo', async () => {
|
||||
try {
|
||||
return await getAppProductFieldByCode('icpNo')
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
const icpNo = computed(() => {
|
||||
const v = icpField.value?.value ?? icpField.value?.defaultValue
|
||||
if (typeof v === 'string' && v.trim()) return v.trim()
|
||||
return ''
|
||||
})
|
||||
|
||||
const icpText = computed(() => (icpNo.value ? `备案号：${icpNo.value}` : '备案号：桂ICP备13003666号-12'))
|
||||
const year = new Date().getFullYear()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.footer {
|
||||
background: #111827;
|
||||
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;
|
||||
}
|
||||
/* 覆盖浏览器默认蓝色链接色 */
|
||||
.footer :deep(a) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user