703 lines
17 KiB
Vue
703 lines
17 KiB
Vue
<template>
|
||
<div class="article-page">
|
||
<PortalHeader :active-path="article.categoryPath || route.path" />
|
||
|
||
<main class="container article-main">
|
||
<div class="article-layout">
|
||
<section class="article-primary">
|
||
<div class="breadcrumb-bar">
|
||
<NuxtLink to="/">首页</NuxtLink>
|
||
<span>/</span>
|
||
<NuxtLink v-if="article.categoryPath" :to="article.categoryPath">{{ article.categoryName }}</NuxtLink>
|
||
<template v-if="article.categoryPath">
|
||
<span>/</span>
|
||
</template>
|
||
<span>{{ article.title || '文章详情' }}</span>
|
||
</div>
|
||
|
||
<div v-if="loading" class="article-state">
|
||
<a-skeleton active :paragraph="{ rows: 12 }" />
|
||
</div>
|
||
|
||
<div v-else-if="!article.id" class="article-state article-state-empty">
|
||
<a-result status="404" title="文章不存在" sub-title="您查找的文章不存在或已被删除">
|
||
<template #extra>
|
||
<a-button type="primary" @click="$router.back()">返回上一页</a-button>
|
||
</template>
|
||
</a-result>
|
||
</div>
|
||
|
||
<article v-else class="article-card">
|
||
<div v-if="article.cover" class="article-cover">
|
||
<img :src="article.cover" :alt="article.title" />
|
||
</div>
|
||
|
||
<div class="article-content-wrap">
|
||
<div class="article-heading">
|
||
<span v-if="article.categoryName" class="article-category">{{ article.categoryName }}</span>
|
||
<h1 class="article-title">{{ article.title }}</h1>
|
||
<div class="article-meta">
|
||
<span v-if="article.source">来源：{{ article.source }}</span>
|
||
<span v-if="article.author">作者：{{ article.author }}</span>
|
||
<span v-if="article.publishTime">{{ article.publishTime }}</span>
|
||
<span v-if="article.views">{{ article.views }} 次阅读</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="article.summary" class="article-summary">
|
||
<strong>摘要</strong>
|
||
<p>{{ article.summary }}</p>
|
||
</div>
|
||
|
||
<div class="article-body" v-html="article.content" />
|
||
|
||
<div v-if="article.attachments?.length" class="article-attachments">
|
||
<div class="section-bar">
|
||
<span>相关附件</span>
|
||
</div>
|
||
<div class="attachments-list">
|
||
<a
|
||
v-for="file in article.attachments"
|
||
:key="file.url"
|
||
:href="file.url"
|
||
target="_blank"
|
||
class="attachment-item"
|
||
>
|
||
<span class="attachment-name">{{ file.name }}</span>
|
||
<span class="attachment-size">{{ file.size }}</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="article.tags?.length" class="article-tags">
|
||
<span class="tags-label">标签：</span>
|
||
<a-tag v-for="tag in article.tags" :key="tag" color="blue">{{ tag }}</a-tag>
|
||
</div>
|
||
|
||
<div class="article-disclaimer">
|
||
声明：本文内容仅代表作者本人观点，不代表本网站立场。如有侵权请联系我们删除。
|
||
</div>
|
||
|
||
<div class="article-nav">
|
||
<div v-if="prevArticle" class="article-nav-item" @click="goArticle(prevArticle)">
|
||
<small>上一篇</small>
|
||
<span>{{ prevArticle.title }}</span>
|
||
</div>
|
||
<div v-if="nextArticle" class="article-nav-item article-nav-item-next" @click="goArticle(nextArticle)">
|
||
<small>下一篇</small>
|
||
<span>{{ nextArticle.title }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<aside class="article-sidebar">
|
||
<div class="sidebar-panel">
|
||
<div class="panel-heading">
|
||
<span>相关文章</span>
|
||
</div>
|
||
<div class="sidebar-list">
|
||
<button
|
||
v-for="item in relatedArticles"
|
||
:key="item.id"
|
||
type="button"
|
||
class="sidebar-link"
|
||
@click="goArticle(item)"
|
||
>
|
||
{{ item.title }}
|
||
</button>
|
||
<div v-if="!relatedArticles.length" class="sidebar-empty">暂无相关文章</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-panel">
|
||
<div class="panel-heading">
|
||
<span>热门推荐</span>
|
||
</div>
|
||
<div class="sidebar-list">
|
||
<button
|
||
v-for="item in hotArticles"
|
||
:key="item.id"
|
||
type="button"
|
||
class="sidebar-link sidebar-link-rank"
|
||
@click="goArticle(item)"
|
||
>
|
||
<strong>{{ item.rank }}</strong>
|
||
<span>{{ item.title }}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<div class="footer-nav">
|
||
<div class="container footer-nav-inner">
|
||
<NuxtLink to="/about">友情链接</NuxtLink>
|
||
<NuxtLink to="/consultation">咨询服务</NuxtLink>
|
||
<NuxtLink to="/reference">决策成果研究文库</NuxtLink>
|
||
<NuxtLink to="/expert">政府智库学者库</NuxtLink>
|
||
</div>
|
||
</div>
|
||
<PortalFooter />
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { message } from 'ant-design-vue'
|
||
import { usePageSeo } from '@/composables/usePageSeo'
|
||
|
||
definePageMeta({
|
||
layout: 'blank'
|
||
})
|
||
|
||
type ArticleAttachment = {
|
||
name: string
|
||
url: string
|
||
size: string
|
||
}
|
||
|
||
type ArticleRecord = {
|
||
id?: string
|
||
title: string
|
||
cover?: string
|
||
categoryName?: string
|
||
categoryPath?: string
|
||
source?: string
|
||
author?: string
|
||
publishTime?: string
|
||
views?: number
|
||
summary?: string
|
||
content?: string
|
||
tags?: string[]
|
||
attachments?: ArticleAttachment[]
|
||
}
|
||
|
||
type ArticleLink = {
|
||
id: number | string
|
||
title: string
|
||
rank?: number
|
||
}
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const articleId = computed(() => route.params.id as string)
|
||
|
||
const loading = ref(true)
|
||
const article = ref<ArticleRecord>({ title: '' })
|
||
const prevArticle = ref<ArticleLink | null>(null)
|
||
const nextArticle = ref<ArticleLink | null>(null)
|
||
const relatedArticles = ref<ArticleLink[]>([])
|
||
const hotArticles = ref<ArticleLink[]>([
|
||
{ id: 1, title: '广西数字经济发展报告（2024）', rank: 1 },
|
||
{ id: 2, title: '自治区关于优化营商环境的实施意见', rank: 2 },
|
||
{ id: 3, title: '面向东盟的产业合作政策解读', rank: 3 },
|
||
{ id: 4, title: '广西乡村振兴战略实施进展报告', rank: 4 },
|
||
{ id: 5, title: '北部湾经济区发展最新动态', rank: 5 }
|
||
])
|
||
|
||
usePageSeo({
|
||
title: '文章详情',
|
||
description: '广西决策咨询网文章详情页'
|
||
})
|
||
|
||
useHead({
|
||
title: computed(() => `${article.value?.title || '文章详情'} - 广西决策咨询网`),
|
||
meta: [
|
||
{ name: 'description', content: computed(() => article.value?.summary || '广西决策咨询网文章详情页') }
|
||
]
|
||
})
|
||
|
||
async function loadArticle() {
|
||
loading.value = true
|
||
try {
|
||
article.value = {
|
||
id: articleId.value,
|
||
title: '广西自治区党委政府关于加快数字经济发展的实施意见',
|
||
cover: `https://picsum.photos/900/400?random=${articleId.value}`,
|
||
categoryName: '政策要闻',
|
||
categoryPath: '/news',
|
||
source: '广西壮族自治区人民政府',
|
||
author: '政策研究处',
|
||
publishTime: '2024-12-20 09:30:00',
|
||
views: 1286,
|
||
summary: '本意见旨在深入贯彻党中央、国务院关于发展数字经济的战略部署，结合广西实际，加快推进数字产业化和产业数字化，培育壮大数字经济新动能。',
|
||
content: `
|
||
<h2>一、总体要求</h2>
|
||
<p>以习近平新时代中国特色社会主义思想为指导，全面贯彻党的二十大精神，围绕建设数字中国战略部署，立足广西比较优势，坚持创新驱动、数据赋能、融合发展，加快推动数字经济与实体经济深度融合，着力打造面向东盟的数字经济发展高地。</p>
|
||
|
||
<h2>二、主要目标</h2>
|
||
<p>到2026年，数字经济核心产业增加值占GDP比重达到12%，数字经济总量突破1万亿元，数字化转型企业数量超过5000家，建成5G基站15万座。</p>
|
||
|
||
<h2>三、重点任务</h2>
|
||
<h3>（一）加快数字基础设施建设</h3>
|
||
<p>系统推进新型基础设施建设，加快5G、大数据中心、工业互联网等数字基础设施部署，构建高速、泛在、天地一体、云网融合、智能敏捷、绿色低碳的新型数字基础设施体系。</p>
|
||
|
||
<h3>（二）深化数字技术与实体经济融合</h3>
|
||
<p>推动制造业、农业、服务业数字化转型，加快工业互联网创新应用，推进数字农业农村建设，促进数字技术与传统产业深度融合。</p>
|
||
|
||
<h3>（三）培育壮大数字经济核心产业</h3>
|
||
<p>重点发展软件和信息技术服务业、大数据、云计算、人工智能、区块链等核心产业，打造广西数字经济核心产业集群。</p>
|
||
|
||
<h2>四、保障措施</h2>
|
||
<p>加强组织领导，完善工作机制，强化政策支持，健全评估体系，确保各项任务落到实处。</p>
|
||
`,
|
||
tags: ['数字经济', '政策解读', '广西'],
|
||
attachments: [
|
||
{ name: '广西数字经济发展实施意见（全文）.pdf', url: '#', size: '2.4MB' },
|
||
{ name: '附件：实施细则.docx', url: '#', size: '856KB' }
|
||
]
|
||
}
|
||
|
||
prevArticle.value = { id: Number(articleId.value) - 1 || 1, title: '广西人工智能产业发展三年行动计划解读' }
|
||
nextArticle.value = { id: Number(articleId.value) + 1 || 2, title: '关于推动平台经济规范健康持续发展的若干措施' }
|
||
relatedArticles.value = [
|
||
{ id: 11, title: '广西数字政府建设重点任务清单发布' },
|
||
{ id: 12, title: '自治区大数据发展战略阶段性成果综述' },
|
||
{ id: 13, title: '面向东盟的数据跨境合作政策观察' },
|
||
{ id: 14, title: '产业数字化转型标杆案例分析' },
|
||
{ id: 15, title: '推动数字基础设施提质增效的实施路径' }
|
||
]
|
||
} catch {
|
||
message.error('加载失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function goArticle(item: ArticleLink) {
|
||
router.push(`/article/${item.id}`)
|
||
}
|
||
|
||
onMounted(() => {
|
||
loadArticle()
|
||
})
|
||
|
||
watch(articleId, () => {
|
||
loadArticle()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.article-page {
|
||
min-height: 100vh;
|
||
background: #ffffff;
|
||
color: #1f2d3d;
|
||
}
|
||
|
||
.container {
|
||
width: min(1200px, calc(100% - 32px));
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.article-main {
|
||
padding: 18px 0 40px;
|
||
}
|
||
|
||
.article-layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 300px;
|
||
gap: 24px;
|
||
align-items: start;
|
||
}
|
||
|
||
.article-primary,
|
||
.article-sidebar {
|
||
min-width: 0;
|
||
}
|
||
|
||
.breadcrumb-bar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
align-items: center;
|
||
min-height: 44px;
|
||
padding: 0 18px;
|
||
margin-bottom: 16px;
|
||
background: #f7fbff;
|
||
border: 1px solid #e3edf6;
|
||
color: #6c7f92;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.breadcrumb-bar a {
|
||
color: #2c6eaa;
|
||
}
|
||
|
||
.article-state {
|
||
background: #fff;
|
||
border: 1px solid #e3edf6;
|
||
padding: 28px;
|
||
}
|
||
|
||
.article-state-empty {
|
||
padding: 12px;
|
||
}
|
||
|
||
.article-card {
|
||
background: #fff;
|
||
border: 1px solid #e3edf6;
|
||
}
|
||
|
||
.article-cover {
|
||
height: 360px;
|
||
overflow: hidden;
|
||
border-bottom: 1px solid #e3edf6;
|
||
}
|
||
|
||
.article-cover img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.article-content-wrap {
|
||
padding: 28px 34px 36px;
|
||
}
|
||
|
||
.article-heading {
|
||
padding-bottom: 20px;
|
||
margin-bottom: 22px;
|
||
border-bottom: 1px solid #e6eef5;
|
||
text-align: center;
|
||
}
|
||
|
||
.article-category {
|
||
display: inline-block;
|
||
padding: 4px 12px;
|
||
margin-bottom: 14px;
|
||
background: #edf5fc;
|
||
color: #2c6eaa;
|
||
font-size: 12px;
|
||
border: 1px solid #c9dff1;
|
||
}
|
||
|
||
.article-title {
|
||
margin: 0 0 16px;
|
||
color: #203040;
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.article-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 10px 22px;
|
||
color: #8a97a4;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.article-summary {
|
||
padding: 16px 18px;
|
||
margin-bottom: 28px;
|
||
background: #f7fbff;
|
||
border-left: 4px solid #2c6eaa;
|
||
}
|
||
|
||
.article-summary strong {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: #2c6eaa;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.article-summary p {
|
||
margin: 0;
|
||
color: #536271;
|
||
font-size: 14px;
|
||
line-height: 1.9;
|
||
}
|
||
|
||
.article-body {
|
||
color: #33485c;
|
||
font-size: 16px;
|
||
line-height: 2;
|
||
}
|
||
|
||
.article-body :deep(h2) {
|
||
margin: 32px 0 16px;
|
||
padding-left: 12px;
|
||
border-left: 4px solid #2c6eaa;
|
||
color: #214e7f;
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.article-body :deep(h3) {
|
||
margin: 24px 0 12px;
|
||
color: #2d5f92;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.article-body :deep(p) {
|
||
margin: 0 0 16px;
|
||
text-indent: 2em;
|
||
}
|
||
|
||
.article-body :deep(ul),
|
||
.article-body :deep(ol) {
|
||
margin: 14px 0;
|
||
padding-left: 24px;
|
||
}
|
||
|
||
.article-body :deep(li) {
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.article-attachments,
|
||
.article-tags,
|
||
.article-nav {
|
||
margin-top: 32px;
|
||
}
|
||
|
||
.section-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 0 10px;
|
||
border-bottom: 1px solid #e6eef5;
|
||
}
|
||
|
||
.section-bar span {
|
||
color: #2c6eaa;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.attachments-list {
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.attachment-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
padding: 14px 0;
|
||
border-bottom: 1px dashed #e8edf2;
|
||
color: #3e5162;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.attachment-item:hover {
|
||
color: #2c6eaa;
|
||
}
|
||
|
||
.attachment-size {
|
||
color: #98a3ac;
|
||
font-size: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.article-tags {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.tags-label {
|
||
color: #7e8c98;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.article-disclaimer {
|
||
margin-top: 28px;
|
||
padding: 12px 16px;
|
||
background: #fbf8ec;
|
||
border: 1px solid #eee2b3;
|
||
color: #8d7331;
|
||
font-size: 12px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.article-nav {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 18px;
|
||
padding-top: 24px;
|
||
border-top: 1px solid #e6eef5;
|
||
}
|
||
|
||
.article-nav-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
min-height: 88px;
|
||
padding: 16px 18px;
|
||
background: #f8fbfd;
|
||
border: 1px solid #e3edf6;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.article-nav-item:hover {
|
||
border-color: #b8d4ea;
|
||
background: #f1f8fd;
|
||
}
|
||
|
||
.article-nav-item small {
|
||
color: #97a3ae;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.article-nav-item span {
|
||
color: #2a3d50;
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.article-nav-item-next {
|
||
text-align: right;
|
||
}
|
||
|
||
.article-sidebar {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18px;
|
||
}
|
||
|
||
.sidebar-panel {
|
||
background: #fff;
|
||
border: 1px solid #e3edf6;
|
||
padding: 16px 18px 18px;
|
||
}
|
||
|
||
.panel-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 0 10px;
|
||
border-bottom: 1px solid #e6eef5;
|
||
}
|
||
|
||
.panel-heading span {
|
||
color: #2c6eaa;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.sidebar-list {
|
||
padding-top: 8px;
|
||
}
|
||
|
||
.sidebar-link {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 12px 0;
|
||
border: 0;
|
||
border-bottom: 1px dashed #e8edf2;
|
||
background: transparent;
|
||
color: #32485b;
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.sidebar-link:hover {
|
||
color: #2c6eaa;
|
||
}
|
||
|
||
.sidebar-link-rank {
|
||
display: grid;
|
||
grid-template-columns: 24px 1fr;
|
||
gap: 10px;
|
||
align-items: start;
|
||
}
|
||
|
||
.sidebar-link-rank strong {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
background: #2c6eaa;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.sidebar-empty {
|
||
padding: 18px 0 8px;
|
||
color: #99a5af;
|
||
font-size: 13px;
|
||
text-align: center;
|
||
}
|
||
|
||
.site-footer {
|
||
margin-top: 8px;
|
||
background: #fff;
|
||
border-top: 1px solid #e5eef6;
|
||
}
|
||
|
||
.footer-nav {
|
||
border-bottom: 1px solid #eef3f7;
|
||
}
|
||
|
||
.footer-nav-inner {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 60px;
|
||
padding: 18px 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.footer-nav-inner a {
|
||
color: #5c6974;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.article-layout {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.article-sidebar {
|
||
order: 2;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
width: min(100%, calc(100% - 24px));
|
||
}
|
||
|
||
.article-main {
|
||
padding-top: 14px;
|
||
}
|
||
|
||
.article-cover {
|
||
height: 220px;
|
||
}
|
||
|
||
.article-content-wrap {
|
||
padding: 20px 18px 28px;
|
||
}
|
||
|
||
.article-title {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.article-meta {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.article-nav {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.footer-nav-inner {
|
||
flex-wrap: wrap;
|
||
gap: 18px 28px;
|
||
padding: 16px 0;
|
||
}
|
||
}
|
||
</style>
|