340 lines
12 KiB
Vue
340 lines
12 KiB
Vue
<template>
|
||
<div class="home py-8">
|
||
<section aria-label="焦点要闻">
|
||
<Carousel :items="heroSlides" height="clamp(260px, 42vw, 480px)" effect="fade" />
|
||
</section>
|
||
|
||
<section class="mt-8">
|
||
<div class="grid grid-cols-12 gap-6">
|
||
<a-card class="col-span-12 lg:col-span-4" :bordered="false">
|
||
<template #title>
|
||
<div class="section-title">政策要闻</div>
|
||
</template>
|
||
<ul class="list">
|
||
<li v-for="it in policyNews" :key="it.title">
|
||
<NuxtLink :to="it.to">{{ it.title }}</NuxtLink>
|
||
<span class="date">{{ it.date }}</span>
|
||
</li>
|
||
</ul>
|
||
<NuxtLink class="more" to="/policy/latest">查看更多</NuxtLink>
|
||
</a-card>
|
||
|
||
<a-card class="col-span-12 lg:col-span-4" :bordered="false">
|
||
<template #title>
|
||
<div class="section-title">智库动态</div>
|
||
</template>
|
||
<ul class="list">
|
||
<li v-for="it in thinktankNews" :key="it.title">
|
||
<NuxtLink :to="it.to">{{ it.title }}</NuxtLink>
|
||
<span class="date">{{ it.date }}</span>
|
||
</li>
|
||
</ul>
|
||
<NuxtLink class="more" to="/thinktank">查看更多</NuxtLink>
|
||
</a-card>
|
||
|
||
<a-card class="col-span-12 lg:col-span-4" :bordered="false">
|
||
<template #title>
|
||
<div class="section-title">会员风采</div>
|
||
</template>
|
||
<ul class="list">
|
||
<li v-for="it in memberSpotlight" :key="it.title">
|
||
<NuxtLink :to="it.to">{{ it.title }}</NuxtLink>
|
||
<span class="date">{{ it.date }}</span>
|
||
</li>
|
||
</ul>
|
||
<NuxtLink class="more" to="/member">查看更多</NuxtLink>
|
||
</a-card>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="mt-6 hidden lg:block" aria-label="会员单位展示位">
|
||
<div class="ad-slot">
|
||
会员单位展示位（广告）- 预留横幅
|
||
</div>
|
||
</section>
|
||
|
||
<section class="mt-8" aria-label="决策咨询">
|
||
<a-card :bordered="false">
|
||
<template #title>
|
||
<div class="section-title">决策咨询</div>
|
||
</template>
|
||
|
||
<a-tabs v-model:active-key="consultingTab" animated>
|
||
<a-tab-pane key="reports" tab="研究报告">
|
||
<ul class="list list--dense">
|
||
<li v-for="it in reports" :key="it.title">
|
||
<NuxtLink :to="it.to">{{ it.title }}</NuxtLink>
|
||
<span class="meta">
|
||
<a-tag v-if="it.status" color="blue">{{ it.status }}</a-tag>
|
||
<span class="date">{{ it.date }}</span>
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</a-tab-pane>
|
||
<a-tab-pane key="briefs" tab="咨政专报">
|
||
<ul class="list list--dense">
|
||
<li v-for="it in briefs" :key="it.title">
|
||
<NuxtLink :to="it.to">{{ it.title }}</NuxtLink>
|
||
<span class="meta">
|
||
<span class="date">{{ it.date }}</span>
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</a-tab-pane>
|
||
<a-tab-pane key="collections" tab="其他汇编">
|
||
<ul class="list list--dense">
|
||
<li v-for="it in collections" :key="it.title">
|
||
<NuxtLink :to="it.to">{{ it.title }}</NuxtLink>
|
||
<span class="meta">
|
||
<span class="date">{{ it.date }}</span>
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</a-tab-pane>
|
||
<a-tab-pane key="instructions" tab="领导批示">
|
||
<ul class="list list--dense">
|
||
<li v-for="it in instructions" :key="it.title">
|
||
<NuxtLink :to="it.to">{{ it.title }}</NuxtLink>
|
||
<span class="meta">
|
||
<a-tag v-if="it.status" color="green">{{ it.status }}</a-tag>
|
||
<span class="date">{{ it.date }}</span>
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</a-tab-pane>
|
||
</a-tabs>
|
||
</a-card>
|
||
</section>
|
||
|
||
<section class="mt-8" aria-label="快捷入口">
|
||
<div class="grid grid-cols-12 gap-6">
|
||
<a-card class="col-span-12 lg:col-span-4" :bordered="false">
|
||
<template #title><div class="section-title">决策参考</div></template>
|
||
<div class="quick-desc">政策文件、数据服务、研究成果与专家视点等支撑信息。</div>
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
<a-button type="primary" @click="navigateTo('/reference/data')">数据服务</a-button>
|
||
<a-button @click="navigateTo('/reference/docs')">政策文件</a-button>
|
||
<a-button @click="navigateTo('/reference/results')">研究成果</a-button>
|
||
</div>
|
||
</a-card>
|
||
|
||
<a-card class="col-span-12 lg:col-span-4" :bordered="false">
|
||
<template #title><div class="section-title">建言献策</div></template>
|
||
<div class="quick-desc">面向公众与会员征集意见建议，支持在线提交与反馈。</div>
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
<a-button type="primary" @click="navigateTo('/suggest')">提交建议</a-button>
|
||
<a-button @click="navigateTo('/sitemap')">站点地图</a-button>
|
||
</div>
|
||
</a-card>
|
||
|
||
<a-card class="col-span-12 lg:col-span-4" :bordered="false">
|
||
<template #title><div class="section-title">咨询服务</div></template>
|
||
<div class="quick-desc">需求对接、专题研究、政策解读与成果交付，支持分级权限管理。</div>
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
<a-button type="primary" @click="navigateTo('/consulting/intro')">了解服务</a-button>
|
||
<a-button @click="navigateTo('/contact')">联系咨询</a-button>
|
||
</div>
|
||
</a-card>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="mt-8" aria-label="专家智库平台">
|
||
<a-card :bordered="false">
|
||
<template #title><div class="section-title">专家智库平台</div></template>
|
||
<div class="grid grid-cols-12 gap-6 items-start">
|
||
<div class="col-span-12 lg:col-span-8">
|
||
<div class="quick-desc">
|
||
覆盖多学科领域的专家库，支持分类检索、专家匹配与成果展示。
|
||
</div>
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
<a-button type="primary" @click="navigateTo('/experts/db')">进入专家库</a-button>
|
||
<a-button @click="navigateTo('/experts/style')">专家风采</a-button>
|
||
<a-button @click="navigateTo('/experts/apply')">专家申请</a-button>
|
||
</div>
|
||
</div>
|
||
<div class="col-span-12 lg:col-span-4">
|
||
<a-alert
|
||
show-icon
|
||
type="info"
|
||
message="提示"
|
||
description="专家视点、成果下载等栏目可配置会员权限与分级开放。"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import Carousel from '@/components/Carousel.vue'
|
||
import { usePageSeo } from '@/composables/usePageSeo'
|
||
|
||
usePageSeo({
|
||
title: '首页',
|
||
description: '广西决策咨询网门户首页，聚焦政策要闻、决策咨询、专家智库与咨询服务。',
|
||
path: '/'
|
||
})
|
||
|
||
const heroSlides = [
|
||
{
|
||
src: '/hero/hero-1.svg',
|
||
href: '/reference/results',
|
||
alt: '智库要闻',
|
||
title: '智库要闻 · 重大成果发布',
|
||
desc: '聚焦党委政府重大课题、社科院及研究机构成果，提供权威发布与可追溯链接。',
|
||
ctaLabel: '查看详情'
|
||
},
|
||
{
|
||
src: '/hero/hero-2.svg',
|
||
href: '/consulting/intro',
|
||
alt: '决策咨询',
|
||
title: '决策咨询 · 精要报告与咨政专报',
|
||
desc: '围绕热点难点问题快速研判，标注批示/采纳状态，提升成果转化效率。',
|
||
ctaLabel: '了解服务'
|
||
},
|
||
{
|
||
src: '/hero/hero-3.svg',
|
||
href: '/experts/db',
|
||
alt: '专家智库',
|
||
title: '专家智库 · 分类检索与专家匹配',
|
||
desc: '覆盖多学科领域，支持按方向检索、匹配与协作对接，构建协同开放平台。',
|
||
ctaLabel: '进入专家库'
|
||
}
|
||
]
|
||
|
||
const consultingTab = ref<'reports' | 'briefs' | 'collections' | 'instructions'>('reports')
|
||
|
||
const policyNews = [
|
||
{ title: '关于申报 2026 年度重点课题的通知', date: '2026-03-01', to: '/policy/latest' },
|
||
{ title: '自治区决策咨询课题管理办法（修订）', date: '2026-02-18', to: '/policy/release' },
|
||
{ title: '政务信息公开与数据安全管理规范要点', date: '2026-02-06', to: '/policy/hotspots' },
|
||
{ title: '学术活动预告：专题研讨会（面向 RCEP）', date: '2026-01-26', to: '/policy/events' }
|
||
]
|
||
|
||
const thinktankNews = [
|
||
{ title: '交流合作：联合研究项目启动', date: '2026-03-03', to: '/thinktank/coop' },
|
||
{ title: '智库党建：制度建设与工作要点', date: '2026-02-21', to: '/thinktank/party' },
|
||
{ title: '政策解读：重点产业发展政策解读', date: '2026-02-10', to: '/reference/docs' },
|
||
{ title: '东盟研究：经贸数据与国际比较专题', date: '2026-01-30', to: '/reference/data' }
|
||
]
|
||
|
||
const memberSpotlight = [
|
||
{ title: '会员单位风采：成果转化典型案例', date: '2026-02-28', to: '/member' },
|
||
{ title: '会员服务：培训活动与资源对接计划', date: '2026-02-14', to: '/member/qualification' },
|
||
{ title: '资料下载：申报模板与数据手册更新', date: '2026-02-03', to: '/downloads' },
|
||
{ title: '会员申请：线上资料提交与审核说明', date: '2026-01-20', to: '/member/apply' }
|
||
]
|
||
|
||
const reports = [
|
||
{ title: '重大课题研究报告（精要）', date: '2026-02-25', to: '/reference/results', status: '采纳' },
|
||
{ title: '专题调研报告：向海经济发展路径', date: '2026-02-11', to: '/reference/results', status: '批示' },
|
||
{ title: '政策评估报告：产业链协同效率提升', date: '2026-01-29', to: '/reference/results', status: '在研' }
|
||
]
|
||
|
||
const briefs = [
|
||
{ title: '咨政专报：热点问题快速研判（第 3 期）', date: '2026-03-02', to: '/consulting/results' },
|
||
{ title: '咨政专报：重点领域风险提示（第 2 期）', date: '2026-02-16', to: '/consulting/results' },
|
||
{ title: '咨政专报：阶段性建议汇总（第 1 期）', date: '2026-01-31', to: '/consulting/results' }
|
||
]
|
||
|
||
const collections = [
|
||
{ title: '历年决策咨询成果合集（电子版）', date: '2026-02-08', to: '/downloads' },
|
||
{ title: '重大课题成果汇编（专题）', date: '2026-01-18', to: '/downloads' }
|
||
]
|
||
|
||
const instructions = [
|
||
{ title: '领导批示成果清单（可追溯链接）', date: '2026-02-20', to: '/consulting/results', status: '公开' },
|
||
{ title: '采纳情况统计与典型案例', date: '2026-01-27', to: '/consulting/results', status: '公开' }
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
.home :deep(.ant-card) {
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 14px;
|
||
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
color: #0f172a;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
|
||
.list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.list li {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 14px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.list li:last-child {
|
||
border-bottom: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.list a {
|
||
color: #111827;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.list a:hover {
|
||
color: var(--gov-blue);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.date {
|
||
flex: 0 0 auto;
|
||
font-size: 12px;
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
.meta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.list--dense li {
|
||
padding-bottom: 12px;
|
||
}
|
||
|
||
.more {
|
||
display: inline-flex;
|
||
margin-top: 12px;
|
||
font-weight: 700;
|
||
text-decoration: underline;
|
||
text-underline-offset: 4px;
|
||
}
|
||
|
||
.ad-slot {
|
||
border: 1px dashed rgba(30, 111, 181, 0.35);
|
||
background: rgba(30, 111, 181, 0.05);
|
||
border-radius: 14px;
|
||
padding: 14px 16px;
|
||
color: rgba(30, 111, 181, 0.95);
|
||
font-weight: 700;
|
||
text-align: center;
|
||
}
|
||
|
||
.quick-desc {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
}
|
||
</style>
|